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

1. ATTENTION-DRIVEN
DESIGN:
23 VISUAL PRINCIPLES
FOR DESIGNING
MORE PERSUASIVE
LANDING PAGES
OLI GARDNER


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