attention-driven design: 23 visual principles for designing more persuasive landing pages
TRANSCRIPT
![Page 1: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/1.jpg)
ATTENTION-DRIVEN
DESIGN:23 VISUAL PRINCIPLESFOR DESIGNING MORE PERSUASIVELANDING PAGES
OLI GARDNER
![Page 2: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/2.jpg)
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.
![Page 3: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/3.jpg)
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.
![Page 4: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/4.jpg)
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
![Page 5: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/5.jpg)
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.
![Page 6: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/6.jpg)
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.
![Page 7: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/7.jpg)
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.
![Page 8: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/8.jpg)
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.
![Page 9: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/9.jpg)
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.
![Page 10: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/10.jpg)
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
9. PROXIMITYImplicitly relating items together by placing them near each other.
![Page 11: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/11.jpg)
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.
![Page 12: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/12.jpg)
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.
![Page 13: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/13.jpg)
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
12. DOMINANCEVisibly delineating two nearby elements by making one look more important.
![Page 14: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/14.jpg)
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
13. CONSISTENCYAlways presenting related elements in the same way.
![Page 15: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/15.jpg)
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.
![Page 16: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/16.jpg)
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.
![Page 17: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/17.jpg)
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.
![Page 18: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/18.jpg)
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
17. ALIGNMENTOrganizing information into visually-aligned structures, making it easier to consume.
![Page 19: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/19.jpg)
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.
![Page 20: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/20.jpg)
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
19. SIZEBIG THINGS BIG IMPORTANCEitty-bitty things, itty-bitty importance
![Page 21: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/21.jpg)
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.
![Page 22: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/22.jpg)
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.
![Page 23: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/23.jpg)
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.
![Page 24: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/24.jpg)
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.
![Page 25: Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages](https://reader031.vdocuments.mx/reader031/viewer/2022022415/586f84b01a28ab54768b4e43/html5/thumbnails/25.jpg)
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