Visual hierarchy

HFD1100HistoriefortellendeDesign
1
Økt 10.1
Visual Hierarchy and Grid
Systems

2
Where we are in the process
1 2 3 4 5 6
RESEARCH
(BREADTH)
Gathering of
information from
various sources to
get an overview of
the theme and
identify possible
topics to pursue.
RESEARCH
(DEPTH)
Gathering of
information from
various sources to
build a good body
of knowledge on a
topic in a theme.
STORY
PLANNING
Mapping of
research findings
onto the Story
Matrix to create a
plan for the story to
tell.
CONCEPT
DEVELOPMEN
T*
The creation of a
concept,
moodboard or any
supporting
materials to base
the art direction on.
VISUALISING*
Designing and
visualising of the
storytelling using
devices of telling
such as text,
images, colour,
form and graphics
or any other
elements.
MAKING/FINISH
ING*
The final stage of
the process where
the design is
physically
produced such as
printing, binding or
other processes.
Thinking/Planning Designing Production
OVERVIEW

3
Aims of session (the goals of the session)
• Help you with the designing of the the poster
• The use of visual hierarchy to create order in reading
• Improve readability of a design using grids
Objectives of session (how we will do it)
• Visual hierarchy and grid lecture
OVERVIEW
Aim and Objectives

4
VISUAL HIERARCHY
Creating The Order of Reading

5
VISUAL HIERARCHY
What’s Wrong With This Poster?
Meet the cast: ABCDEFGHIJKLMNOPQRSTUVWXYZ Now see the
movie: Helvetica. A documentary by Gary Hustwit. A Swiss Dots
production, in association with Veer. Helvetica. A documentary film by
Gary Huswit. Featuring: Michael Beirut, Neville Brody, Matthew
Carter, David Carson, Wim Crouwel, Experimental Jetset, Tobias
Frere-Jones, Otmas Hoefer, Jonathan Hoefler, Alfred Hoffman, Lars
Muller, Norm, Mike Parker, Michael C. Place, Rick Poynor, Stefan
Sagmeister, Leslie Savan, Paula Scher, Manfred Schulz, Erik
Spiekermann, Bruno Steinert, Massimo Vignelli, Hermann Zapf.
Produced and directed by Gary Huswit. Editor: Shelby Siegel
helveticafilm.com Director of photography: Laure Weinberg Sound
editor: Brian Langman Sound Micer: Andy Kris Motion Graphics:
Trollblack & Co. Sound Recording Nara Gerber Victor Horstink Dan
Johnson Jörg Kudowski Sam Pulled Reto Stamm Poster by
Experimental Jetset Music The Album Leaf Battles Baribou Chicago
Underground Quartet El Ten Eleven Four Tey Kim Horthoy Motochiro
Nakashima Sam Prekop Associate Producers Andrew Dreskin John
Goldsmith Sharon Huswit Michelle Huswit Jakob Trollblack Antoine
Wilson Chris Levinson Wilson © 2007 Swiss Dots
THIS IS A POSTER
What’s wrong this poster? Can you
identify what is lacking and how it can
be improved? Are you able to tell what
the poster is about?

6
VISUAL HIERARCHY
What’s Wrong With This Picture?
DESIGNING FOR READING
This example is a case of when visual
hierarchy is not applied to a design and
information is lost in one big blur of text. We
do not know where to start reading other than
from the first word, it does not highlight which
information is more important, nor does it
inform us what we are actually reading about.
A design like this would probably lose the
attention of the viewer quickly, or not even
catch our attention at all.
Fig1. The image shown here is a poster for a movie. Can you
tell what the movie is about and who directed it?

7
VISUAL HIERARCHY
The Need for Visual Hierarchy
Fig2. (right) The original poster
designed by Experimental Jetset uses
a clear visual hierarchy to effectively
communicate the contents of the
poster. By using scale and colour for
contrast, it is much clearer, easier to
read and has more visual impact.

8
VISUAL HIERARCHY
What is Visual Hierarchy
DEFINITION
Visual Hierarchy is conveying visually through
variations in scale, value, colour, spacing, placement,
and other signals to express the order of importance
in a piece of design. Visual hierarchy controls the
delivery and impact of a message that is otherwise
dull and difficult to navigate (Lupton, 2008)

9
VISUAL HIERARCHY
Examples of Visual Hierarchy In Works
Fig3. The three posters here designed by Armin Hoffman
(left), Josef Müller-Brockmann (center) and Stefan Sagmeister
(right) all use visual hierarchy to control the delivery of
information by ordering the importance of information using
scale and contrast.

10
VISUAL HIERARCHY
Fig4. Visual hierarchy is an important principle in
editorial design as well as it helps to separate
information, create focal points and guide there
reader’s eyes.

11
VISUAL HIERARCHY
Fig5. Visual hierarchy is one of the most important
aspects in a user interface design. Without the
ordering of information, a website would lose
visitors quickly.

12
VISUAL HIERARCHY
Visual hierarchy is applied to all aspects of
visual communication design. It is one of
the foundational principles of our practice
as we are creatures of hierarchy.

13
Our need for visual hierarchy is in our nature:
Hierarchy is the order of importance within a social
group (such as the regiments of the army) or in a
body of text (such as the sections or subsections of a
book). Hierarchical order exists in nearly everything
we know, including the family unit, the workplace,
politics and religion. Indeed, the ranking of order
defines who we are as a culture.
(Lupton, 2008, p.115)
VISUAL HIERARCHY
Creatures of Order
‘
’

14
VISUAL HIERARCHY
Creating Visual Hierarchy
Visual Hierarchy is developed from the Gestalt
Theory as it relies on the principle of perception to
function. The laws used are proximity, distance and
contrast using scale, figure and colour/tone. Note
that the content here is taken from Graphic Design:
The New Basics by Ellen Lupton. It is a must-read
book for all Graphic Design students.

15
VISUAL HIERARCHY
Gestalt Theory - Law of Proximity and Distance
PROXIMITY
Fig6. Proximity between elements suggest a
group of related information such as related
text.
DISTANCE
Fig7. Distance between elements suggest
discord between groups and is often used
to construct visual hierarchy.

16
VISUAL HIERARCHY
Fig8. I’m Still Here movie poster by Neil
Kellerhouse uses the proximity of forms to
create recognisable characters to communicate
the idea and title.
Fig9. Opera House Poster movie poster by
Josef Müller Brockmann uses distance to
separate similar but different information.
PROXIMITY DISTANCE

17
VISUAL HIERARCHY
Fig10. Differences in scale suggest comparison
or if used with repetition can suggest
enlargement.
Fig11. Figure refers to an active, positive
form revealed against a passive, negative
ground
SCALE FIGURE COLOUR/TONE
Fig12. Contrast by colour and tone
suggest a relationship

18
VISUAL HIERARCHY
Fig10. Berlin poster by Emil Ruder uses huge
contrasts in type size to create focus and show
the order of importance.
Fig11. Theatre poster for Othello by Gunger
Rambow uses figure to draw focus to the title of
the work. It however also ingeniously uses
intentionally torn parts set against a fence and
backdrop to bring focus to the face.
SCALE FIGURE COLOUR/TONE
Fig12. Bad Typography is Everywhere by Craig Ward
uses colour to create visual hierarchy and
communicate the invisibility and ambivalence of good
and bad typography.

19
TASK
In the next 10 minutes, you are to
analyse the two images here and list
down the sequence of reading - what
you looked at first, second, third and
so forth. Then write down how you
think the designer did it i.e. using
which gestalt princple, typeface or
any other possible element.
VISUAL HIERARCHY
Visual Hierarchy Exercise
Fig13 (left to right) Movie poster for The Man
With The Golden Arm by Saul Bass; New Wave
Movement Exhibition poster by Katherine
McCoy.

20
BREAK
Come back in 10 minutes!

Visual hierarchy

Recommended

Recommended

More Related Content

Similar to Visual hierarchy

Similar to Visual hierarchy (6)

More from Kevin Yeo

More from Kevin Yeo (9)

Recently uploaded

Recently uploaded (20)

Visual hierarchy

Editor's Notes