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