Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ATTENTION-DRIVEN
DESIGN:
23 VISUAL PRINCIPLES
FOR DESIGNING
MORE PERSUASIVE
LANDING PAGES
OLI GARDNER

ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
1. DIRECTION
Showing the user wh...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
2. MOTION
Using an animated elem...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
3. AFFORDANCE
A visual hint at a...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
4. CONTRAST
Coloring an element ...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
5. NESTING
Sorting text — typica...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
6. HIGHLIGHTING
Emphasizing the ...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
7. WHITESPACE
Isolating an eleme...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
8. ANOMALY
Highlighting one elem...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
9. PROXIMITY
Implicitly relating...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
10. DISTRACTION
Irrelevant crap ...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
11. INTERRUPTION
A break in a pa...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
12. DOMINANCE
Visibly delineatin...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
13. CONSISTENCY
Always presentin...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
14. REPETITION
Presenting the sa...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
15. SYMMETRY
Tricking someone in...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
16. OVERLAPPING
Having one eleme...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
17. ALIGNMENT
Organizing informa...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
18. CONTINUATION
Placing visual ...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
19. SIZE
BIG THINGS BIG IMPORTAN...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
20. PERSPECTIVE
Using images tha...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
21. GROUPING
Dividing similar it...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
22. ENCAPSULATION
Visually separ...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
23. CONTACT
Using the point at w...
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
LEARN HOW TO APPLY THESE
CONCEPT...
Upcoming SlideShare
Loading in …5
×

Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages

0 views

Published on

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

Published in: Marketing, Design

Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages

  1. 1. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES OLI GARDNER 
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 13. CONSISTENCY Always presenting related elements in the same way.
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×