Principle of Design Hierarchy Pecking order Visual Hierarchy Visual hierarchy is the ranking of important of the elements in a composition The most important element is at the top of the list This is your focal point or center of interest ID: 555341
Download Presentation The PPT/PDF document "Proximity and Hierarchy" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Proximity and Hierarchy
Principle of DesignSlide2
Hierarchy
Pecking order.Slide3
Visual Hierarchy
Visual hierarchy is the ranking of important of the elements in a composition.
The most important element is at the top of the list. This is your focal point, or center of interest.
From the focal point, the eye goes down the list of importance, around to each element.
Your job is to establish this list and make sure the viewer travels the correct pathway around the elements.Slide4
Be Decisive.
No wishy-washy visual hierarchy paths. The visual hierarchy should be OBVIOUS.Slide5
Control the ranking
Use principles of design to control the path the viewer travels…
Size
Color
Contrast
Value
Proximity (grouping)Slide6
Size
Bigger/biggest can draw the eye as well as
Smaller/smallest.Slide7
Color
Variations in color can draw the eye.
Maybe a red focal point, where the rest of the composition is shades of gray?Slide8
Contrast
Contrast is using difference to create emphasis.
For instance:
black and white
pattern and plain
complementary colors
color and no color
jagged or soft
etc.Slide9
Value
Value refers to a ranking of light to dark.
A difference in value can draw the eye, much like contrast (light on dark or vice versa).Slide10
Proximity
Proximity we learned a little about last semester, and earlier this week.
It refers to how you group elements and/or information.Slide11
Proximity
The state of being near.Slide12
Text Size and Weight
BORING and not very effective.
When does the club meet? How many readings are there?Slide13
Getting Better
Items that are
intellectually connected
should be
visually connected
.Slide14
Ahh Much better…
Look how much you know just at a glance! Compare it to the first composition.
How many readings are there? When are they? You know right away!Slide15
Mess.
The goal was probably to make this seem interesting, energetic and fun. Instead it looks like a giant mess and you can’t find any information about it!Slide16
Better.
Clear communication is always better than amateur design.
While this might not be all that interesting, at least the viewer knows what is going on.Slide17
Not bad…could be better.
Spacing is off. You can’t tell at a glance that some of these headline looking things are actually part of the following paragraphs.
Lots and lots of broken up white space. Slide18
Better.
Organization is clearer.
Less puzzle piece white space.
More breathing room.Slide19
Menus
Menus are an excellent example of when proximity and grouping is essential.Slide20
Menu…better.
What changed?
Is it better? Why?Slide21
Menu…even better!
Now, what has changed?
Is it better?
How so?Slide22
Menu…yep another one.
What is different?
Is it better?
Why?Slide23
Website
Everything here is ranked the same. What is important? Slide24
Website…better.
You already know how to do this in your brain! Now you just need to apply it to
visual organization
.Slide25
Summary
When several items are in close
proximity
to each other, they become one visual unit rather than several separate units. Items relating to each other should be grouped together. Be conscious of where your eye is going:
Where do you start looking?
What path do you follow?
Where do you end up?
After you've read it, where does your eye go next?
You should be able to follow a logical progression through the piece, from a definite beginning to a definite end.Slide26
Purpose
The basic purpose of proximity is to
organize
.
Other principles come into play as well, but simply grouping related elements together into closer proximity automatically creates organization. If the information is organized, it is more likely to be read and more likely to be remembered.
As a by-product of organizing the communication, you also create more appealing (more organized) white space (designers' favorite thing).Slide27
How To
Squint your eyes slightly and
count
the number of visual elements on the page by counting the number of times your eye stops.
If there are more than three to five items on the page (of course it depends on the piece), see which of the separate elements can be grouped together into closer proximity to become one visual unit.Slide28
Common Errors
Don't stick things in the corners or in the middle just because the space is empty.
Avoid too many separate elements on a page.
Avoid leaving equal amounts of white space between elements unless each group is part of a subset.
Avoid even a split second of confusion over whether a headline, subhead, caption, graphic, etc., belongs with its related material. Create a relationship
among elements with close proximity.
Don't create relationships with elements that don't belong together! If they are not related, move them apart from each other.