Upcoming SlideShare
×

# Layout Principles 1

1,824 views

Published on

3 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total views
1,824
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
66
0
Likes
3
Embeds 0
No embeds

No notes for slide

### Layout Principles 1

1. 1. IMD09117 and IMD09118 Web Design and Development Unit 5 Layout principles
2. 2. Basic design principles Version A Unit 6 ©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. Proximity Version A Unit 6 ©2008 Napier University
4. 4. Proximity Version A Unit 6 ©2008 Napier University alison varey 0131 455 2725 Napier University 10 colinton road edinburgh EH14 1DJ
5. 5. Proximity Version A Unit 6 ©2008 Napier University alison varey 0131 455 2725 Napier University 10 colinton road edinburgh EH14 1DJ
6. 6. Proximity Version A Unit 6 ©2008 Napier University Napier University alison varey 10 colinton road edinburgh EH14 1DJ 0131 455 2725
7. 7. Proximity Version A Unit 6 ©2008 Napier University
8. 8. Proximity Version A Unit 6 ©2008 Napier University <ul><li>Remember closeness implies a relationship </li></ul><ul><li>Group related items together </li></ul><ul><li>Organise the items on a page as this helps to create more white space </li></ul>
9. 9. Proximity Version A Unit 6 ©2008 Napier University <ul><li>Be conscious of where your eye is going, where you start looking, the path you follow, where do you end up and what happens then </li></ul><ul><li>Use the squint test to see how many visual elements are on a page. If there are more than 3-5 items, can you group any of them? </li></ul>
10. 10. Proximity Don’ts Version A Unit 6 ©2008 Napier University <ul><li>Creating relationships with elements that don’t belong together </li></ul><ul><li>Leaving equal amounts of white space between elements unless each group is part of a subset </li></ul><ul><li>Too many separate elements on a page </li></ul>
11. 11. Proximity Don’ts Version A Unit 6 ©2008 Napier University <ul><li>Confusion over to what a headline/caption is referring to </li></ul><ul><li>Don’t stick things in the corners and in the middle </li></ul>
12. 12. Alignment Version A Unit 6 ©2008 Napier University <ul><li>Nothing should be placed arbitrarily on the interface. Every item should have a visual connection with something else on the page. </li></ul>
13. 13. Alignment Version A Unit 6 ©2008 Napier University Napier University alison varey 10 colinton road edinburgh EH14 1DJ 0131 455 2725
14. 14. Alignment Version A Unit 6 ©2008 Napier University
15. 15. Alignment Version A Unit 6 ©2008 Napier University
16. 16. Alignment Version A Unit 6 ©2008 Napier University napier university alison varey
17. 17. Alignment Version A Unit 6 ©2008 Napier University
18. 18. Alignment Version A Unit 6 ©2008 Napier University
19. 19. Alignment Version A Unit 6 ©2008 Napier University A new specialist photographic resource featuring creative images of DANCE, THEATRE, OPERA, MUSIC, FILM AND PERSONALITIES. Colour – Black and white Abstract – Documentar y
20. 20. Alignment Version A Unit 6 ©2008 Napier University A new specialist photographic resource featuring creative images of DANCE, THEATRE, OPERA, MUSIC, FILM AND PERSONALITIES. Colour – Black and white Abstract – Documentary
21. 21. Alignment Version A Unit 6 ©2008 Napier University
22. 22. Alignment Version A Unit 6 ©2008 Napier University On the ground On the washing-line
23. 23. Alignment Version A Unit 6 ©2008 Napier University
24. 24. Alignment Version A Unit 6 ©2008 Napier University
25. 25. Alignment Version A Unit 6 ©2008 Napier University <ul><li>Alignment leads to cohesion and invisible lines can make things that are not close appear to belong to the same thing. </li></ul><ul><li>Don’t centre everything. It is safe, comfortable, formal, ordinary, dull. </li></ul><ul><li>Make sure each item has some visual alignment with another item on the page. </li></ul>
26. 26. Alignment Version A Unit 6 ©2008 Napier University <ul><li>Lack of alignment is probably the biggest cause of unpleasant-looking pages. Our eyes like to see order, it creates a calm, secure feeling. </li></ul><ul><li>If your alignments are strong, then you can break through the alignments consciously and it will look intentional. </li></ul>
27. 27. Alignment Version A Unit 6 ©2008 Napier University <ul><li>Unity is an important concept in design. To make all the elements of the page appear to be unified, connected and interrelated, there needs to be some visual tie between the separate elements. </li></ul>
28. 28. Alignment Version A Unit 6 ©2008 Napier University Other sites http://admissions.nebrwesleyan.edu/ http://www.agency.com http://www.aaronjasinski.com http://moma.org/exhibitions/2008/tallbuildings/index_f.html http://www.vikmuniz.net http://www.j6studios.com http://www.jasonsiu.com/
29. 29. Summary Version A Unit 6 ©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>Group related items together since closeness implies a relationship. Do a squint test and be aware of the path a viewer’s eye takes. </li></ul>
30. 30. Summary Version A Unit 6 ©2008 Napier University <ul><li>Ensure that every item has a visual connection with something else on the page, as this will create unity . </li></ul><ul><li>Invisible lines can make things that are not close appear to belong to the same thing. </li></ul><ul><li>You should consider both horizontal and vertical alignment. </li></ul>