Organizing Information and Creating Hierarchy. Cookie Caloia

Transcription

1 Organizing Information and Creating Hierarchy Cookie Caloia

2

3

4 Visual Hierarchy, theoretically The concept of visual hierarchy is based in Gestalt psychological theory, that proposes that the human brain has innate organizing tendencies that structure individual elements, shapes or forms into a coherent, organized whole. -- Jackson, Ian. Gestalt A Learning Theory for Graphic Design Education. International Journal of Art and Design Education. Volume 27. Issue 1 (2008): Digital.

5 The Basis Perceptual organization, or how smaller objects are grouped to form larger ones. or mental shortcuts for solving problems

6 Visual Hierarchy Establishing an order of elements, a visual structure, to help a viewer absorb the information provided by design is a crucial part of the design process. Emphasis is the idea that some things are more important than others and important things should be noticed. Graphic Design Solutions, pg. 24 a

7 Visual hierarchy is the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception. Objects with highest contrast to their surroundings are recognized first by the human mind. -- Feldsted, CJ. Design Fundamentals. New York: Pittman Publishing Corporation, 1950

8 Exercise: Please rank the circles in order of importance.

9 Visual Hierarchy, physically The brain disassociates objects from one another based upon the differences between their physical characteristics. These characteristics fall into 4 categories: color, size, alignment, and character.

10 Visual Hierarchy color, size, alignment, and character.

11

12

13 Color. Your brain s obsession with contrast will cause your eyes to focus on objects that stand out due simply to their difference in color in relation to the surrounding objects.

14

15

16

17 Visual Hierarchy color, size, alignment, and character.

18 By varying the size of items on a page, you can easily break the z-pattern tendency.

19 The Z-Principle

20

21

22

23

24

25 Visual Hierarchy color, size, alignment, and character.

26

27 Visual Hierarchy Visual hierarchy is about establishing an order of all the information in a work. Ask yourself: Where do you look first? Where do you look second? Where do you look third?

28 What s the point?

29 Visual Hierarchy color, size, alignment, and character.

30

31 Visual Complexity. If you want something to stand out on your page more than the objects around it, make it considerably more or less complex. Even if the objects are a similar size and color, the difference in complexity will add to the visual interest.

32 Visual Hierarchy How-To Your hierarchy should begin with thoughtful consideration of the content and goals of the page. Only after you ve decided intellectually the hierarchy of your page should you attempt to visually design that hierarchy.

33 What is Whitespace? Whitespace or negative space is the space between design elements. Many new designers think the object is to fill the page, to leave no space unused. In general that s not conducive to good design. What s left out is often just as, if not more, important than what s left in. --Steven Bradley,vanseodesign.com

34 Which page looks more inviting to you?

35

36

37 Whitespace gives organization to those elements and provides visual relief. It provides a way for elements to stand out and makes your copy easier to scan. Banana Republic Sales Floor Old Navy Sales Floor Each store s sales floor gives a completely different impression and clearly appeal to a different market of shopper

38

39

40

41

42

43

44

45

46

47

48

49 Balance: Space & Elements

50

51

52

53

54

55 Sources Joshua Johnson (Published April 17, 2010) (Web Design by Patrick Cox)

56 Visual Hierarchy Visual hierarchy is the most important principle of design. All great designers are masters at structuring their information.

57 E. Bullough, of what he believed to be a decorative canon : that dark colors should stand before light ones. Scienceblogs.com

58 Continuance, continued Eye direction: If the subject of a composition is looking in a particular direction, you will look to see what they are looking at.

59

60 Visual Hierarchy The visual organization of elements within a design format to establish focal points based on their importance to the message being communicated. Works in conjunction with grids and the Gestalt principles of design