layout principles 1
TRANSCRIPT
![Page 1: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/1.jpg)
IMD09117 and IMD09118 Web Design and Development Unit 5
Layout principles
![Page 2: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/2.jpg)
Basic design principles
Version A Unit 6 ©2008 Napier University
Proximity
Alignment
Repetition
Contrast
![Page 3: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/3.jpg)
Proximity
Version A Unit 6 ©2008 Napier University
![Page 4: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/4.jpg)
Proximity
Version A Unit 6 ©2008 Napier University
alison varey 0131 455 2725
Napier University
10 colinton road edinburgh EH14 1DJ
![Page 5: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/5.jpg)
Proximity
Version A Unit 6 ©2008 Napier University
alison varey 0131 455 2725
Napier University
10 colinton road edinburgh EH14 1DJ
![Page 6: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/6.jpg)
Proximity
Version A Unit 6 ©2008 Napier University
Napier Universityalison varey
10 colinton roadedinburgh EH14 1DJ
0131 455 2725
![Page 7: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/7.jpg)
Proximity
Version A Unit 6 ©2008 Napier University
![Page 8: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/8.jpg)
Proximity
Version A Unit 6 ©2008 Napier University
Remember closeness implies a relationship
Group related items together
Organise the items on a page as this helps to create more white space
![Page 9: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/9.jpg)
Proximity
Version A Unit 6 ©2008 Napier University
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
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?
![Page 10: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/10.jpg)
Proximity Don’ts
Version A Unit 6 ©2008 Napier University
Creating relationships with elements that don’t belong together
Leaving equal amounts of white space between elements unless each group is part of a subset
Too many separate elements on a page
![Page 11: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/11.jpg)
Proximity Don’ts
Version A Unit 6 ©2008 Napier University
Confusion over to what a headline/caption is referring to
Don’t stick things in the corners and in the middle
![Page 12: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/12.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
Nothing should be placed arbitrarily on the interface. Every item should have a visual connection with something else on the page.
![Page 13: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/13.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
Napier Universityalison varey
10 colinton roadedinburgh EH14 1DJ
0131 455 2725
![Page 14: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/14.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
![Page 15: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/15.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
![Page 16: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/16.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
napier
university
alison
varey
![Page 17: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/17.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
![Page 18: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/18.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
![Page 19: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/19.jpg)
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 whiteAbstract – Documentary
![Page 20: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/20.jpg)
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
whiteAbstract –
Documentary
![Page 21: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/21.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
![Page 22: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/22.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
On the ground
On the washing-line
![Page 23: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/23.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
![Page 24: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/24.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
![Page 25: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/25.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
Alignment leads to cohesion and invisible lines can make things that are not close appear to belong to the same thing.
Don’t centre everything. It is safe, comfortable, formal, ordinary, dull.
Make sure each item has some visual alignment with another item on the page.
![Page 26: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/26.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
Lack of alignment is probably the biggest cause of unpleasant-looking pages. Our eyes like to see order, it creates a calm, secure feeling.
If your alignments are strong, then you can break through the alignments consciously and it will look intentional.
![Page 27: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/27.jpg)
Alignment
Version A Unit 6 ©2008 Napier University
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.
![Page 28: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/28.jpg)
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/
![Page 29: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/29.jpg)
Summary
Version A Unit 6 ©2008 Napier University
The four basic design principles of proximity, alignment, repetition and contrast will help to design interfaces.
Group related items together since closeness implies a relationship. Do a squint test and be aware of the path a viewer’s eye takes.
![Page 30: Layout Principles 1](https://reader036.vdocuments.mx/reader036/viewer/2022062405/5557508bd8b42aa8378b51f2/html5/thumbnails/30.jpg)
Summary
Version A Unit 6 ©2008 Napier University
Ensure that every item has a visual connection with something else on the page, as this will create unity.
Invisible lines can make things that are not close appear to belong to the same thing.
You should consider both horizontal and vertical alignment.