1. Day 6 Layout

2. Objectives  Learn about some principles of perception  Learn how grids can help you organise a site’s content  Learn about the golden ratio

3. 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

4. Figure Ground

9. The law of proximity objects that are close to each other tend to be seen as a group

14. The law of similarity objects of the same shape or colour are seen as belonging together

16. The law of closure missing parts of an object are filled in to complete it, so that it appears as a whole

20. The law of continuity lines tend to be seen as continuous, even if they are interrupted

21. 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)

22. The PARC principles http://www.vanseodesign.com/blog/web- design/design-basics-alignment/

23. From this … to this

24. The PARC principles http://graphicreporter.com/tutorials/design_basics.h tml

25. From this … to this …

26. and … from this … to this

27. 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

28. The grid  Think of a software screen that you are about to design as a “grid” rather than as a blank piece of paper

29. A well structured grid

30. A messy grid  Think about what makes this grid messy  PARC principles  Gestalt principles

32. The golden ratio (phi)

38. Golden ratio software  http://www.phimatrix.com/ http://www.phimatrix.com/

39. 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