Use of layout and consistency in Use of layout and consistency in designing interfacesdesigning interfaces

Michael, Paul, Jason, AugustoMichael, Paul, Jason, Augusto

Main Topics for DiscussionMain Topics for Discussion

What are/is an interface?What are/is an interface?

What is layout and how should it be What is layout and how should it be implemented when designing Interfaces?implemented when designing Interfaces?

How should layout be kept consistent?How should layout be kept consistent?

InterfacesInterfaces

What is Classed as an Interface?What is Classed as an Interface?

An interface is what you see when you An interface is what you see when you look at your monitor: the collection of look at your monitor: the collection of words, pictures, buttons, menus, etc.words, pictures, buttons, menus, etc.

The interface is also sometimes referred to The interface is also sometimes referred to as the graphic user interface, which can as the graphic user interface, which can be abbreviated to GUI.be abbreviated to GUI.

Types of InterfacesTypes of Interfaces

WebsitesWebsites CD-ROMCD-ROM DVDDVD GamesGames MobilesMobiles TVTV

LayoutLayout

What is Layout?What is Layout?

Layout is the way photos, graphics, text are Layout is the way photos, graphics, text are placed on screen based or print based media placed on screen based or print based media which is perfect and pleasing to the eye. which is perfect and pleasing to the eye.

Colour and the size of type or graphics make Colour and the size of type or graphics make the layout more interesting and also making the layout more interesting and also making the media not cluttered helps.the media not cluttered helps.

Guidelines for layoutGuidelines for layout Create a very simple, easy-to-understand Create a very simple, easy-to-understand navigation system that doesn't take up too navigation system that doesn't take up too much space. much space.

All else fails when user’s cant read the All else fails when user’s cant read the text.text.

Use colours with high contrast between Use colours with high contrast between the text and background.the text and background.

Guidelines for layout 2Guidelines for layout 2

Use either plain coloured text backgrounds Use either plain coloured text backgrounds or extremely subtle background patterns.or extremely subtle background patterns.

Use large enough fonts e.g. (12 pt)Use large enough fonts e.g. (12 pt)

Body text 40 – 60 characters per line or 10 Body text 40 – 60 characters per line or 10 – 15 words.– 15 words.

Avoid animation text.Avoid animation text.

Guidelines for layout 3Guidelines for layout 3

Remember how users find and read information Remember how users find and read information on the web.on the web.

Use 50% fewer words than you would in print.Use 50% fewer words than you would in print.

Use objective non-promotional writing style.Use objective non-promotional writing style.

Make your text and page scan-able.Make your text and page scan-able.

Guidelines for layout 4Guidelines for layout 4

Use different approaches suited for your content.Use different approaches suited for your content.

Make sure that everything on the page is where Make sure that everything on the page is where it is for a purpose. it is for a purpose.

The basic principle to remember is that related The basic principle to remember is that related things should be pulled closely together.things should be pulled closely together.

The same font style can be used throughout a The same font style can be used throughout a documentdocument

Layout in PrintLayout in Print

Layout is a big part in the print industry Layout is a big part in the print industry because it can not only be used for because it can not only be used for Magazine articles to align and columnise Magazine articles to align and columnise sections of type but also to align the most sections of type but also to align the most appealing images and type on posters, appealing images and type on posters, leaflets, flyers etc.leaflets, flyers etc.

ConsistencyConsistency

What is Consistency?What is Consistency?

““The property of holding together and retaining The property of holding together and retaining its shapeits shape.”.”

If a company has a corporate image e.g. colour, If a company has a corporate image e.g. colour, logotype, these should be kept consistent logotype, these should be kept consistent throughout the media, to make sure the media throughout the media, to make sure the media relates to the company.relates to the company.

Consistency in PrintConsistency in Print

This is shown through corporate branding or This is shown through corporate branding or even advertising campaigns. Corporate branding even advertising campaigns. Corporate branding relates to a style or theme, related to that relates to a style or theme, related to that company such as letter heads, business cards company such as letter heads, business cards and logos all appearing similar.and logos all appearing similar.

What should be kept consistent?What should be kept consistent?

Fonts / TypefaceFonts / Typeface ColoursColours NavigationNavigation LogoLogo StructureStructure

www.ibm.com

http://www.statefairwebs.com/

SummarySummary

LayoutLayoutUse colours with high contrast between the text and Use colours with high contrast between the text and

background.background.Use Use very simple, easy-to-understand navigation very simple, easy-to-understand navigation

system.system.All else fails when users can’t understand the layout All else fails when users can’t understand the layout

of the media and won’t return to view the media.of the media and won’t return to view the media.So make sure that everything on the page is where it So make sure that everything on the page is where it

is for a purpose.is for a purpose.

ConsistencyConsistency

Fonts / Typeface, Colours, Navigation, Logo & Structure, should all be kept consistent throughout a document. This makes the media relate to the company.

Useful linksUseful links

www.www.useituseit.com.com www.www.coloradocolorado..eduedu//AmStudiesAmStudies//lewislewis

/Design//Design/sofarsofar..htmhtm www.www.tlctlc-systems.com/-systems.com/webtipswebtips..shtmlshtml

ReferencesReferences

http://uk.playstation.com/home/home01_generic.jhtmlhttp://uk.playstation.com/home/home01_generic.jhtml

http://www.xbox.com/en-GB/default.htmhttp://www.xbox.com/en-GB/default.htm

http://www.broadbandbananas.com/ skyactivemenu.jpghttp://www.broadbandbananas.com/ skyactivemenu.jpg

http://www.virtutech.com.au/ pics/new/O2_Xda_ii_b.jpghttp://www.virtutech.com.au/ pics/new/O2_Xda_ii_b.jpg

http://www.geocities.com/Colosseum/9890/http://www.geocities.com/Colosseum/9890/

http://www.amazon.co.ukhttp://www.amazon.co.uk

http://www.ibm.com/us/http://www.ibm.com/us/

http://www.statefairwebs.com/http://www.statefairwebs.com/

http://www.cnnfn.com/.../ microsoft/microsoft.03.jpghttp://www.cnnfn.com/.../ microsoft/microsoft.03.jpg