Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages
Transcript of Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages
ATTENTION-DRIVEN
DESIGN:23 VISUAL PRINCIPLESFOR DESIGNING MORE PERSUASIVELANDING PAGES
OLI GARDNER
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
1. DIRECTIONShowing 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. MOTIONUsing an animated element on a page to capture or draw attention.
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
3. AFFORDANCEA 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. CONTRASTColoring 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. NESTINGSorting 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. HIGHLIGHTINGEmphasizing 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. WHITESPACEIsolating 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. ANOMALYHighlighting 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. PROXIMITYImplicitly relating items together by placing them near each other.
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
10. DISTRACTIONIrrelevant 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. INTERRUPTIONA 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. DOMINANCEVisibly delineating two nearby elements by making one look more important.
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
13. CONSISTENCYAlways presenting related elements in the same way.
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
14. REPETITIONPresenting 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. SYMMETRYTricking 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. OVERLAPPINGHaving 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. ALIGNMENTOrganizing information into visually-aligned structures, making it easier to consume.
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
18. CONTINUATIONPlacing 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. SIZEBIG THINGS BIG IMPORTANCEitty-bitty things, itty-bitty importance
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
20. PERSPECTIVEUsing 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. GROUPINGDividing 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. ENCAPSULATIONVisually 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. CONTACTUsing 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