elements of visual interface design
DESCRIPTION
Elements of Visual Interface Design. Overview. Layout Grid Systems Visual Flow Typography Typefaces Typographic Guidelines Colour Basics Materials & shape. Grid systems. Grid systems help designers organise information ito a coherent pattern. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/1.jpg)
Elements of Visual Interface Design
![Page 2: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/2.jpg)
Overview
LayoutGrid SystemsVisual Flow
TypographyTypefacesTypographic Guidelines
ColourBasics
Materials & shape
![Page 3: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/3.jpg)
Grid systemsGrid systems help designers organise information ito a coherent pattern.
Gutters are the blank spaces that separate rows and columns
![Page 4: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/4.jpg)
What applications do you find this grid system?
![Page 5: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/5.jpg)
Powerpoint
![Page 6: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/6.jpg)
Another familiar grid?
See Comments in notes
![Page 7: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/7.jpg)
Internet explorer gridSketch the grid IE uses
![Page 8: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/8.jpg)
Internet explorer gridSketch the grid IE uses
![Page 9: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/9.jpg)
Your screen productSketch here the type of grid that would be most useful for the product you are building
![Page 10: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/10.jpg)
Visual Flow
• In Western culture the visual flow is left to right, top to bottom.
• Don’t force users eyes to jump all over the screen.
• Achieve visual flow by the use of whitespace, positioning and alignment of objects
![Page 11: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/11.jpg)
Squint test• Squinting at the screen enables you to smudge
the details and see which items on the screen have prominence.
• Good idea to use this on any visual interface you are designing
• Results may be surprising – as it reveals that secondary of unimportant items seem overly important in the design
![Page 12: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/12.jpg)
Typography
• An important choice in any visual interface
• Provides a platform for usable readable and clear labels and text & also personality
![Page 13: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/13.jpg)
Typefaces
• Commonly called fonts• Generally categorised into two groups:
serif and sans serif
Arial
VerdanaTrebuchetTahoma
Times New Roman
GeorgiaBookman Old Style
Sans - serifSerif
![Page 14: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/14.jpg)
Typefaces• Serif typefaces are easy to read, excellent for
long passages of text (eg books)
• San serif typefaces traditionally used for shorter passages of text – eg signage
• Default choice for interaction designers in screen or physical design – used for button labels instructional text, menus etc
• Medium width typefaces are good to use
• Avoid any that appear very heavy or very light
• Avoid using lots of different typefaces at one or combining type faces that are too similar
![Page 15: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/15.jpg)
Generally typographic guidelines
• Avoid using too many different type sizes and widths at the same time.
• All CAPITALS severely detracts from readability
• Avoid stretching or distorting typefaces
![Page 16: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/16.jpg)
Typographic guidelines• Size: for screens 9 – 12points; mobile screen 6- 10 points; on
physical devices- depends on size of device 6-9 points common
• Alignment: flush left and ragged right is more legible than flush right or justified. Use flush right sparingly; and justified for long line lengths.
• Rivers: formed when the white spaces between words seemingly lin up and form a ‘river’ Avoid these.
• Widows & orphans: avoid widows (a word left on a line by itself) and orphans (a single word at the beginning of a column or page).
• Line Length: Goldilocks principle: not too long; not too short; but just right! Minimum characters 40; strive for 55- 75
• Leading: vertical space between lines. should 20% more than the font size (eg 10 point font, 12 point leading); very small fonts (ie below 8 points) needs more space; longer the lines – more space is required; never add more than 40%
• Kerning: horizontal space between letters. Usually only needed in font sizes larger than 18 point.
![Page 17: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/17.jpg)
Colour• In visual interface design, colour
can be used to create personality and tone and provide cues for use
• Eg red buttons on a mobile phone – stop.
• Colour can – establish relationships between
disparate objects; – Indicate importance
![Page 18: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/18.jpg)
Colour
• Colour can be greatly misused:– Dull – Too many colours– Too many saturated colours– 10% of male population has colour
blindness (red/green)
• For more on colour see http://learnline.cdu.edu.au/units/hit151/basics/
colour.html
![Page 19: Elements of Visual Interface Design](https://reader036.vdocuments.us/reader036/viewer/2022062304/568133e1550346895d9ad2f9/html5/thumbnails/19.jpg)
Material and Shape
• The physical form of a device tells a lot about how and where the device is meant to be used.
• Physical form can be made of: metal, plastic, wood clay, ceramic, cloth, rubber, glass, leather or a combination
• Ergonomics and human factors come into play- eg how small can a button be before a person cant press it
• Overall shape and size of a device are important visually. Think about the tablet PC as an example.