Use the 23 Visual Principles of Attention-Driven Design to eliminate distraction and get the conversions your deserve.
Download the full ebook now: http://bit.ly/attention-driven-design-ebook
2. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
1. DIRECTION
Showing the user where they should
be headed by literally pointing it out.
3. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
2. MOTION
Using an animated element on a page
to capture or draw attention.
4. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
3. AFFORDANCE
A visual hint at a digital object’s
function — like the bevel on a button.
CALL TO ACTIONCALL TO ACTION CALL TO ACTION CALL TO ACTION CALL TO ACTION
Strong affordance Low affordance
5. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
4. CONTRAST
Coloring an element in a way that
causes it to stand out from the rest of
the page.
6. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
5. NESTING
Sorting text — typically in list-format
— into categories of related content
that are easy to skim.
7. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
6. HIGHLIGHTING
Emphasizing the text we most want a
reader to notice. But never more than
10% of it.
8. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
7. WHITESPACE
Isolating an element within empty
space in order to draw attention to it.
9. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
8. ANOMALY
Highlighting one element in a sea of
related elements by tweaking its
presentation.
10. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
9. PROXIMITY
Implicitly relating items together by
placing them near each other.
11. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
10. DISTRACTION
Irrelevant crap on your page that’s
distracting from what really matters
— your CTA.
12. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
11. INTERRUPTION
A break in a page’s content designed
to trigger a thought, or simply meant
to make a page more readable.
13. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
12. DOMINANCE
Visibly delineating two nearby
elements by making one look more
important.
14. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
13. CONSISTENCY
Always presenting related elements
in the same way.
15. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
14. REPETITION
Presenting the same information
multiple times within a page in order
to make it memorable.
16. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
15. SYMMETRY
Tricking someone into completing
your CTA by making them want to
mate with it.
… actually, it’s introducing
symmetrical elements to a page
because humans are visually
attracted to symmetry.
17. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
16. OVERLAPPING
Having one element lay partially atop
another so it appears separate but
related.
18. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
17. ALIGNMENT
Organizing information into
visually-aligned structures, making it
easier to consume.
19. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
18. CONTINUATION
Placing visual elements on the page
in a way that guides the user to
continue reading.
20. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
19. SIZE
BIG THINGS BIG IMPORTANCE
itty-bitty things, itty-bitty importance
21. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
20. PERSPECTIVE
Using images that portray the depth
between a foreground and a
background in a way that makes the
page feel richer.
22. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
21. GROUPING
Dividing similar items into
purpose-based groups, and then
clearly delineating those groups.
23. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
22. ENCAPSULATION
Visually separating a set of elements
from others by containing it within a
border or shape.
24. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
23. CONTACT
Using the point at which two
elements touch to draw the
reader’s eye.
25. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
LEARN HOW TO APPLY THESE
CONCEPTS TO YOUR LANDING PAGES
FOR HIGHER CONVERSIONS.
GET YOUR FREE 68-PAGE GUIDE