Visual OrganizationCommunication 337

Visual Scanning of Page

http://www.webstyleguide.com/page/hierarchy.html

Visual Organizing Principles

• Proximity

• Alignment

• Consistency / Repetition

• Contrast

Proximity

Proximity

1

2

3

4

5

Proximity

Alignment

Vertical Alignment

Horizontal Alignment

6

7

8

9

10

Horizontal Alignment

Typical Print Layouts

Print Layout

Print Layout with Grid

Typical Web Page Layouts

11

12

13

14

15

Web Layout

Web Layout

Web Layout

Web Layout

Web Layout

16

17

18

19

20

Alignment?

Misalignment!

Consistency

Inconsistency

Consistency

21

22

23

24

25

Contrast

26

27

28

29

30

31

32

33

34

35

36