Scribd
Upload
43 views26 pages

ADC - Unit 3 - Tutorial

The document discusses visual hierarchy in graphic design. It explains that visual hierarchy is the arrangement of graphic elements from most to least important. Size, color, typography, spacing, proximity, alignment, repetition, lines, and layout are used to guide a viewer's eyes to the key information. The principles of visual hierarchy help viewers easily understand the designer's intended message or meaning.

Uploaded by

Nguyễn Thị Ánh Nguyệt 2TĐ-20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views26 pages

ADC - Unit 3 - Tutorial

The document discusses visual hierarchy in graphic design. It explains that visual hierarchy is the arrangement of graphic elements from most to least important. Size, color, typography, spacing, proximity, alignment, repetition, lines, and layout are used to guide a viewer's eyes to the key information. The principles of visual hierarchy help viewers easily understand the designer's intended message or meaning.

Uploaded by

Nguyễn Thị Ánh Nguyệt 2TĐ-20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Hanoi University

Falcuty of Information Technology

Creative advertising
Visual Hierarchy Mind Motion
Advertising Design

What is Visual Hierarchy?


Importance of Visual Hierarchy in Design
Principles of Visual Hierarchy in Design
WHAT IS VISUAL HIERARCHY?
Visual Hierarchy in Graphic Design is the way we arrange all
different graphic elements from the composition and create a visual
order depending on their importance, being the most important
information the first saw in the design.
Size impacts visibility

size is arguably the most effective way to emphasize visual elements. Simply put,
larger elements draw greater attention than smaller elements.
Readers are much more likely to quickly respond to the
word, “cracking” than the second-largest word
Scale and proportion as design elements refer to the size of one graphic element in relation to
another graphic element in design or artwork. Size and scale are one of the core principles of
graphic design, and they can affect on the meaning of your design and it can help the viewer to
identify easily the most important elements from your design and focus on the main information.
Color is one of the key elements of Graphic Design and I have a single post dedicated to color
and a full guide of color theory here!. Talking about visual hierarchy color and contrast is used in
a design composition to drive the viewer’s attention to specific graphic elements through
contrasting color palettes where the most important elements use brighter color.
Typographic hierarchy in graphic design is a system used to organize in a visual way using
typography the order of importance of the information shown in the design, where the title will be
the most important element, and it will be bigger than the body text, and that will help the viewer
to easily identify the main topic of the design.
Spacing in the visual hierarchy is used to give all your graphic elements in design more space and
room to breathe, and this will make it easier for the viewer to identify all objects in your design
and order them by importance.
Proximity is one of the basic graphic design principles and proximity rules in the visual hierarchy
are say that things that are related should be nearer to each other, and things that don’t have any
relationship should be placed further from each other in your design composition.
Alignment in Graphic design refers to placing graphic elements and text on a page that line up
with your composition. Alignment helps you to organize your design elements and create a visual
connection and make the viewer easier to detect the most important information from your design
and improve the readability of it.
Repetition in graphic design refers to a process of repeating different graphic elements from your
design and place them through the design composition to give a more unified look to it and
adding more consistency to your design.
Lines in graphic design are one of the basic graphic elements and they are marks used to connect
two different points, in the visual hierarchy we use leading lines in the design to direct the viewer’s
eye and control their attention using lines.
The rule of thirds in graphic design is a common technique designer and it consists in divide the
design into three rows and three columns, and where the vertical and horizontal lines meet is
where the focus points in your composition should be placed, by doing this technique helps to
make more striking effect to the viewer.
Perspective in graphic design refers to the three-dimensional effect given to a flat image as design
composition and designers can use this technique to create an illusion of depth and in visual
hierarchy objects closer to you drive more attention.
Layout &
Composition
Page-scanning patterns
Readers tend to scan pages based on particular
patterns, observable through their eye movements. When
designers want audiences to notice elements in a particular
order, they often rely on the most common patterns.
Native English speakers, for example, read from left to
right. Therefore, they typically present a similar scanning
pattern when faced with a page of text. Arabic, on the other
hand, is written from right to left. Those accustomed to
reading that language are more likely to scan pages in this
“opposite” direction. Designers should keep these
differences in mind when creating content for global
audiences.
F-Pattern

The most common eye-movement pattern of English readers is the F pattern.


Why? Because that’s precisely how we read a book, a letter or a web page.
We scan the page from left to right along the top and again for each line of
text until we reach the bottom of the page.
Z-Pattern

Designs that rely more on images are often composed in a Z pattern. Because
the brain processes images faster than text, readers can scan the page quickly
by glancing across the top from left to right, then down the page in a diagonal
fashion before completing the scan by again crossing left to right (or right to
left if the audience typically reads in that direction).
Thank you!

You might also like