general design issue

general design issue - General Design Issues Visual...

Info iconThis preview shows pages 1–6. Sign up to view the full content.

View Full Document Right Arrow Icon
1 Unit 6 General Design Issues General Design Issues Visual Organization 1. Proximity 2. Alignment User Interaction Issues 1. Usability 2. Readability Content Organization 1. Organizational Schemes 2. Organizational Structures 3. Consistency 4. Contrast 3. User expectations 4. Other User Issues Visual Organization Good design is more than just “good colors” Good visual organization can make your webpage more effective. For example, – Users can find links and information quickly – Layout is pleasing to the eye Robin Williams‟ ( The Non-Designer’s Design Book ) - Four principles of visual organization – Proximity – Alignment – Consistency – Contrast Visual Organization Proximity is the concept of “grouping related items together” Items close to each other are perceived to be related – If you don‟t want people to think that, move them apart It‟s okay to use white space to separate items on a web page (if they are different enough) - Proximity
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
2 Visual Organization - Proximity Visual Organization - Proximity Gateway Reference: http://www.gateway.com • Alignment will create vertical and horizontal lines for the user – Not an actual, physical black line – Virtual line created by the placement of items on the page • Items of equal importance should be aligned • Items which are less important could be indented Visual Organization - Alignment
Background image of page 2
3 Left aligned : text all begins at the same virtual line on left hand side of document Right aligned : text is formatted so that all the text ends at the same vertical line on the right hand side Justified : text is aligned on both the right and left hand side of the document – Not good for web pages Centered : often used for headings or titles – Do not center all the text on a page – This does not create a strong visual line Visual Organization - Alignment Reference: http://www.travelocity.com • Great tool for helping users to navigate your site • Basic principle is to repeat elements of the design throughout and across pages • Color is the simplest way to use repetition • Can also use things such as: – Repeating alignment scheme – Placing navigation tools, like site links, in the same position – Using the same style bullets, font, etc. Visual Organization - Consistency Visual Organization - Consistency
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
4 If two items are different, “make them really, really different” By making items different, helps user to pick out organization Examples: – Headings should be much larger than main body text – Links should look like links and the rest of the text should not – Different fonts, colors, etc. can help to distinguish not only things like headings and regular text, but also different sections of your site Visual Organization - Contrast Reference: http://www.orbitz.com Reference: http://www.travelocity.com W3C Reference: http://www.w3c.org
Background image of page 4
5 User Interaction Issues • Usability is a term used to describe how “user
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 6
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 07/30/2009 for the course CMPT 165 taught by Professor Ramesh during the Summer '09 term at Simon Fraser.

Page1 / 14

general design issue - General Design Issues Visual...

This preview shows document pages 1 - 6. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online