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 ratio
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
Figure Ground
The law of proximity
objects that are close to each other tend to be seen as a group
The law of similarity
objects of the same shape or colour are seen as belonging together
The law of closure
missing parts of an object are filled in to complete it, so that it appears as a whole
The law of continuity
lines tend to be seen as continuous, even if they are interrupted
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)
The PARC principles
http://www.vanseodesign.com/blog/web-design/design-basics-alignment/
From this …
to this
The PARC principles
http://graphicreporter.com/tutorials/design_basics.html
From this … to this …
and …
from this …
to this
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
The grid
Think of a software screen that you are about to design as a “grid” rather than as a blank piece of paper
A well structured grid
A messy grid
Think about what makes this grid messy
PARC principles
Gestalt principles
The golden ratio (phi)
Golden ratio software
http://www.phimatrix.com/
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
Top Related