IMD09117 and IMD09118  Web Design and Development Unit 7 Layout principles continued
Basic design principles  Version A Unit 7   ©2008  Napier University  <ul><li>Proximity </li></ul><ul><li>Alignment </li><...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>Repetition creates a unified statement </li></ul><ul><li>T...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>An effective way of repeating a structural element is to u...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>Adding a light rule at the top and bottom of the screen wi...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>Structural repetition is particularly important in user in...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>Typefaces in headlines and subheadings and the space aroun...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>Consistency from the spacing between controls as well as t...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>Repetition adds visual interest.  </li></ul><ul><li>Decide...
Repetition Version A Unit 7   ©2008  Napier University  <ul><li>      </li></ul><ul><li>http://www.417north.com/v7/ </li><...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast is the most dynamic of the visual techniques. Oppos...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast is effective ways to add visual interest to screens...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast Harmony </li></ul><ul><li>Instability </li></ul><ul...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast Harmony </li></ul><ul><li>Instability Stability </l...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast Harmony </li></ul><ul><li>Activeness </li></ul><ul>...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast Harmony </li></ul><ul><li>Activeness Stasis </li></...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast Harmony </li></ul><ul><li>Depth </li></ul><ul><li>J...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast Harmony </li></ul><ul><li>Depth Flatness </li></ul>...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast is created when two elements are different.  </li><...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>If the two elements are not very different, they are said to...
Contrast
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Contrast organises your information.  </li></ul><ul><li>Use ...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>All contrasts should be intended to fulfil a specific commun...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>The most important information should be prominent enough to...
Contrast Version A Unit 7   ©2008  Napier University
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>Avoid excessive contrast. Too many differences: sizes, fonts...
Contrast Version A Unit 7   ©2008  Napier University  <ul><li>http://www.colette.fr/index.php </li></ul><ul><li>http://www...
Summary Version A Unit 7   ©2008  Napier University  <ul><li>The four basic design principles of proximity, alignment, rep...
Summary Version A Unit 7   ©2008  Napier University  <ul><li>Contrast is one of the most effective ways to add visual inte...
Upcoming SlideShare
Loading in …5
×

Layout Principles

2,785 views

Published on

Published in: Technology, Travel
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,785
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
93
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Layout Principles

  1. 1. IMD09117 and IMD09118 Web Design and Development Unit 7 Layout principles continued
  2. 2. Basic design principles Version A Unit 7 ©2008 Napier University <ul><li>Proximity </li></ul><ul><li>Alignment </li></ul><ul><li>Repetition </li></ul><ul><li>Contrast </li></ul>
  3. 3. Repetition Version A Unit 7 ©2008 Napier University <ul><li>Repetition creates a unified statement </li></ul><ul><li>The opposite is episodicity </li></ul><ul><li>The repetitive element may be a bold font, a thick rule line, a certain bullet, colour, design element, particular format, spatial relationships etc. It gives consistency . </li></ul>
  4. 4. Repetition Version A Unit 7 ©2008 Napier University <ul><li>An effective way of repeating a structural element is to use a line or rule. </li></ul><ul><li>Reinforces structure and provides lines along which the eye can travel. </li></ul><ul><li>Rules can interfere with one another and direct the eye in more than one route. </li></ul>
  5. 5. Repetition Version A Unit 7 ©2008 Napier University <ul><li>Adding a light rule at the top and bottom of the screen will add order to the pages. </li></ul><ul><li>Making the lower rule a lighter weight will help to lead the eye through the display. </li></ul>
  6. 6. Repetition Version A Unit 7 ©2008 Napier University <ul><li>Structural repetition is particularly important in user interfaces to online information systems. </li></ul><ul><li>Navigation system needs to be the same in place and function similarly throughout </li></ul><ul><li>Visual invariance maintains visual momentum across displays. </li></ul>
  7. 7. Repetition Version A Unit 7 ©2008 Napier University <ul><li>Typefaces in headlines and subheadings and the space around them. </li></ul><ul><li>Graphics used should be similar in style. </li></ul><ul><li>Differing image styles harder to create a feeling of consistency. </li></ul><ul><li>A unified graphic language creates a personality for a system http://www.buyarock.com </li></ul>
  8. 8. Repetition Version A Unit 7 ©2008 Napier University <ul><li>Consistency from the spacing between controls as well as the size of controls </li></ul><ul><li>Use of grids that help with the vertical and horizontal spacing. Roughly 5-7 divisions in the horizontal spacing. </li></ul><ul><li>Pulling a design element outside of the borders unifies two or more pieces, or foreground and the background. </li></ul>
  9. 9. Repetition Version A Unit 7 ©2008 Napier University <ul><li>Repetition adds visual interest. </li></ul><ul><li>Decide if you can you make the repetitive element stronger. </li></ul><ul><li>Find the existing repetitions and make them stronger. </li></ul><ul><li>Create repetitions to enhance the design and the clarity of the information. </li></ul><ul><li>Make sure that it is not overwhelming. </li></ul>
  10. 10. Repetition Version A Unit 7 ©2008 Napier University <ul><li>      </li></ul><ul><li>http://www.417north.com/v7/ </li></ul><ul><li>http://www.bbc.co.uk/science/humanbody/ </li></ul><ul><li>http://www.napier.ac.uk </li></ul>
  11. 11. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast is the most dynamic of the visual techniques. Opposite is harmony. </li></ul><ul><li>Sharpening can be associated with contrast and levelling with harmony. </li></ul><ul><li>Contrast and harmony are differing ends of a continuum. </li></ul>
  12. 12. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast is effective ways to add visual interest to screens or pages. </li></ul><ul><li>Harmony is a way of constructing ‘safe’, balanced and attractive solutions to design problems and often advised for inexperienced designers. </li></ul>
  13. 13. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast Harmony </li></ul><ul><li>Instability </li></ul><ul><li>Irregularity </li></ul><ul><li>Complexity </li></ul><ul><li>Fragmentation </li></ul><ul><li>Intricacy </li></ul><ul><li>Exaggeration </li></ul>
  14. 14. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast Harmony </li></ul><ul><li>Instability Stability </li></ul><ul><li>Irregularity Regularity </li></ul><ul><li>Complexity Simplicity </li></ul><ul><li>Fragmentation Unity </li></ul><ul><li>Intricacy Economy </li></ul><ul><li>Exaggeration Understatement </li></ul>
  15. 15. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast Harmony </li></ul><ul><li>Activeness </li></ul><ul><li>Boldness </li></ul><ul><li>Accent </li></ul><ul><li>Variation </li></ul><ul><li>Distortion </li></ul>
  16. 16. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast Harmony </li></ul><ul><li>Activeness Stasis </li></ul><ul><li>Boldness Subtlety </li></ul><ul><li>Accent Neutrality </li></ul><ul><li>Variation Consistency </li></ul><ul><li>Distortion Accuracy </li></ul>
  17. 17. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast Harmony </li></ul><ul><li>Depth </li></ul><ul><li>Juxtaposition </li></ul><ul><li>Randomness </li></ul><ul><li>Sharpness </li></ul><ul><li>Episodicity </li></ul>
  18. 18. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast Harmony </li></ul><ul><li>Depth Flatness </li></ul><ul><li>Juxtaposition Singularity </li></ul><ul><li>Randomness Sequentiality </li></ul><ul><li>Sharpness Diffusion </li></ul><ul><li>Episodicity Repetition </li></ul>
  19. 19. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast is created when two elements are different. </li></ul><ul><li>Contrast by any of the perceptual qualities: size, value, orientation, texture, shape, position or colour. </li></ul>
  20. 20. Contrast Version A Unit 7 ©2008 Napier University <ul><li>If the two elements are not very different, they are said to conflict . </li></ul><ul><li>Effective design creates no more contrast then is necessary. </li></ul><ul><li>Variation along only one dimension at a time. </li></ul>
  21. 21. Contrast
  22. 22. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Contrast organises your information. </li></ul><ul><li>Use contrast in your titles, heads, and subheads and page segments </li></ul><ul><li>Use contrast to help create a focal point for a page. </li></ul><ul><li>Also use strong alignment and proximity to reinforce your focal point. </li></ul>
  23. 23. Contrast Version A Unit 7 ©2008 Napier University <ul><li>All contrasts should be intended to fulfil a specific communication goal. </li></ul><ul><li>Often with a GUI this is to provide critical state feedback. </li></ul><ul><li>Active, selected or focussed elements need to be contrasted with the surrounding areas. </li></ul>
  24. 24. Contrast Version A Unit 7 ©2008 Napier University <ul><li>The most important information should be prominent enough to emerge from the design and secure the user’s attention almost involuntarily. </li></ul><ul><li>Less important information may require focal attention and conscious effort to extract. </li></ul>
  25. 25. Contrast Version A Unit 7 ©2008 Napier University
  26. 26. Contrast Version A Unit 7 ©2008 Napier University <ul><li>Avoid excessive contrast. Too many differences: sizes, fonts, widgets and in particular garish colours. </li></ul><ul><li>http://developer.gnome.org/projects/gup/hig/1.0/layout.html </li></ul><ul><li>http://www.colorado.edu/AmStudies/lewis/Design/usable.htm </li></ul>
  27. 27. Contrast Version A Unit 7 ©2008 Napier University <ul><li>http://www.colette.fr/index.php </li></ul><ul><li>http://www.artcenter.edu/ </li></ul><ul><li>http://www.nationalgeographic.com/education </li></ul><ul><li>http://www.blueman.com.br/# </li></ul>
  28. 28. Summary Version A Unit 7 ©2008 Napier University <ul><li>The four basic design principles of proximity, alignment, repetition and contrast will help to design interfaces. </li></ul><ul><li>The principle of repetition is that you repeat some aspect of the design throughout the whole piece. It gives consistency . </li></ul>
  29. 29. Summary Version A Unit 7 ©2008 Napier University <ul><li>Contrast is one of the most effective ways to add visual interest to screens or pages. </li></ul><ul><li>You can contrast by any of the perceptual qualities. </li></ul><ul><li>If the two elements are not very different, they are said to conflict . </li></ul>

×