Beruflich Dokumente
Kultur Dokumente
When we use visual hierarchy we make it easier for visitors to ภnd what
they’re looking for. It creates a clear path to conversion and helps highlight
the actions we want the visitor to take.
1. Focal Point
https://www.impactbnd.com/blog/15goldenprinciplesofvisualhierarchyinfographic 1/6
2/6/2017 15 Golden Principles of Visual Hierarchy (& Why You Need it) [Infographic]
The focal point is an area of interest within a composition that captures and
holds the viewer’s attention. In web design, this is usually an important call-
to-action or form.
2. Movement
The human eye is drawn automatically to certain points of interest. While this
depends on the person, the majority of people tend to follow trends, including
how they view a website.
There are two types of reading patterns for cultures that read left to right: the
Z-Pattern and the F-Pattern. Aligning your design/text with these movement
patterns can help your content be better received. If your visitor isn’t moving
the way you want them to, A/B testing layouts that follow these patterns can
be a huge plus.
3. Golden Ratio
4. Balance
5. Repetition
6. White space
https://www.impactbnd.com/blog/15goldenprinciplesofvisualhierarchyinfographic 2/6
2/6/2017 15 Golden Principles of Visual Hierarchy (& Why You Need it) [Infographic]
White space, in web design terms, is “the space between graphics, columns,
images, text, margins and other elements.”
It’s one of the most important design tools because it dictates how a page
ภows and reads and helps with your visual hierarchy. It helps give your
visitors time to breath so to speak and helps certain elements stand out.
7. Visual Triangle
A visual triangle is when you use three elements to create a “triangle” around
content that you want to emphasize. It’s a common design technique used in
scrapbooking. Learn more about it here.
8. Texture
Add some texture to help minimize negative space. Adding a texture to empty
space can be used to strategically attract a visitor’s attention.
9. Types
Not only does the right typeface help with the typographic hierarchy and help
organize your design, but stylistic choices help to contribute to the design’s
overall mood and are a natural way to create emphasis. For example, pairing a
decorative font with a simpler sans-serif is a great way to establish visual
diภerences and importance between text.
10. Random
Sometimes going against the pattern and being random can work in your
favor, but randomness has to be calculated. You cannot just start throwing
elements on a design without any speciภc reason. Use it strategically.
Breaking from your usual design or template is a very eภective to draw
attention to speciภc items and stand out.
11. Rules
https://www.impactbnd.com/blog/15goldenprinciplesofvisualhierarchyinfographic 3/6
2/6/2017 15 Golden Principles of Visual Hierarchy (& Why You Need it) [Infographic]
Standard dimensions, templates, grids; these are all here to guide you, but
you don’t always have to follow these “rules.” Breaking them is one of the
easiest ways to create visual interest and attract attention.
12. Alignment
As mentioned above, using a grid to help keep your elements aligned helps
keep things organized and also makes your website easier to develop and
adapt to multiple devices.
13. Lines
As we know from heat maps, most western visitors follow the trend of
reading left to right. Don’t make your visitor's eye jump all over the place,
keep it in a straight line.
14. Contrast
This is a simple technique where you divide up your design into three rows
and three columns. The point where your vertical and horizontal lines meet is
where your focal points should be.
https://www.impactbnd.com/blog/15goldenprinciplesofvisualhierarchyinfographic 4/6
2/6/2017 15 Golden Principles of Visual Hierarchy (& Why You Need it) [Infographic]
https://www.impactbnd.com/blog/15goldenprinciplesofvisualhierarchyinfographic 5/6
2/6/2017 15 Golden Principles of Visual Hierarchy (& Why You Need it) [Infographic]
https://www.impactbnd.com/blog/15goldenprinciplesofvisualhierarchyinfographic 6/6