Transcript Day 6 - School of ICT, Griffith University

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



Alignment



everything on a page should be visually connected to something else on
the page
nothing should be placed arbitrarily
Repetition


related items should be grouped together
items that are not related should not be close to each other
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/webdesign/design-basics-alignment/
From this …
to this
The PARC principles
http://graphicreporter.com/tutorials/design_basics.h
tml
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