Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you...
-
date post
21-Dec-2015 -
Category
Documents
-
view
212 -
download
0
Transcript of Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you...
![Page 1: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/1.jpg)
Day 6
Layout
![Page 2: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/2.jpg)
Objectives
Learn about some principles of perception
Learn how grids can help you organise a site’s content
Learn about the golden ratio
![Page 3: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/3.jpg)
Perception
People unconsciously perceive according to certain principles
Some of these principles were studied in the 1930s and 1940s by German psychologists known as “gestalt” psychologists
“Gestalt” is a german word meaning figure or shape
In perception, objects are seen as structured wholes rather than the sum of their constituent parts
![Page 4: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/4.jpg)
Figure Ground
![Page 5: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/5.jpg)
![Page 6: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/6.jpg)
![Page 7: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/7.jpg)
![Page 8: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/8.jpg)
![Page 9: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/9.jpg)
The law of proximity
objects that are close to each other tend to be seen as a group
![Page 10: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/10.jpg)
![Page 11: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/11.jpg)
![Page 12: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/12.jpg)
![Page 13: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/13.jpg)
![Page 14: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/14.jpg)
The law of similarity
objects of the same shape or colour are seen as belonging together
![Page 15: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/15.jpg)
![Page 16: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/16.jpg)
The law of closure
missing parts of an object are filled in to complete it, so that it appears as a whole
![Page 17: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/17.jpg)
![Page 18: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/18.jpg)
![Page 19: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/19.jpg)
![Page 20: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/20.jpg)
The law of continuity
lines tend to be seen as continuous, even if they are interrupted
![Page 21: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/21.jpg)
The PARC principles (Williams) Proximity
related items should be grouped together items that are not related should not be close to each other
Alignment everything on a page should be visually connected to something else on
the page nothing should be placed arbitrarily
Repetition repeat design elements throughout the entire piece (e.g. a font style, graphic, line, icons, colours)
Contrast if two items aren't the same, make them very different (e.g. size, colour, shape)
![Page 22: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/22.jpg)
The PARC principles
http://www.vanseodesign.com/blog/web-design/design-basics-alignment/
![Page 23: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/23.jpg)
From this …
to this
![Page 24: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/24.jpg)
The PARC principles
http://graphicreporter.com/tutorials/design_basics.html
![Page 25: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/25.jpg)
From this … to this …
![Page 26: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/26.jpg)
and …
from this …
to this
![Page 27: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/27.jpg)
The user experience
A software’s visual organisation will influence the experience users are likely to have
Remember the PARC principles
Remember the Gestalt principles
These principles can help with layout and choice of images, font, and colour
![Page 28: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/28.jpg)
The grid
Think of a software screen that you are about to design as a “grid” rather than as a blank piece of paper
![Page 29: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/29.jpg)
A well structured grid
![Page 30: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/30.jpg)
A messy grid
Think about what makes this grid messy
PARC principles
Gestalt principles
![Page 31: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/31.jpg)
![Page 32: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/32.jpg)
The golden ratio (phi)
![Page 33: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/33.jpg)
![Page 34: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/34.jpg)
![Page 35: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/35.jpg)
![Page 36: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/36.jpg)
![Page 37: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/37.jpg)
![Page 38: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/38.jpg)
Golden ratio software
http://www.phimatrix.com/
![Page 39: Day 6 Layout. Objectives Learn about some principles of perception Learn how grids can help you organise a site’s content Learn about the golden.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6d5503460f94a4d7a1/html5/thumbnails/39.jpg)
Today’s lab
redesigning a bad layout (2 marks available)
make sure to read the suggestions on the website regarding things you could do by tomorrow