The present document can't read!
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

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

by unbounce

on

Report

Category:

Marketing

Download: 0

Comment: 0

258,287

views

Comments

Description

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

Transcript

  • 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 where they should be headed by literally pointing it out.  
  • 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.
  • 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 ACTION CALL TO ACTION CALL TO ACTION CALL TO ACTION Strong affordance Low affordance
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 9. PROXIMITY Implicitly relating items together by placing them near each other.
  • 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.
  • 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.
  • 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.
  • ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 13. CONSISTENCY Always presenting related elements in the same way.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 19. SIZE BIG THINGS BIG IMPORTANCE itty-bitty things, itty-bitty importance
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 http://get.unbounce.com/attention-driven-design/?utm_medium=slideshare-cta&utm_source=slideshare&utm_campaign=ebook-attention-driven-design&utm_content=slide-deck
Fly UP