use of layout and consistency in designing interfaces michael, paul, jason, augusto
Post on 20-Dec-2015
216 Views
Preview:
TRANSCRIPT
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
top related