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.


2. MOTIONUsing an animated element on a page to capture or draw attention.


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


4. CONTRASTColoring an element in a way that causes it to stand out from the rest of the page.


5. NESTINGSorting text — typically in list-format — into categories of related content that are easy to skim.


6. HIGHLIGHTINGEmphasizing the text we most want a reader to notice. But never more than 10% of it.


7. WHITESPACEIsolating an element within empty space in order to draw attention to it.


8. ANOMALYHighlighting one element in a sea of related elements by tweaking its presentation.


9. PROXIMITYImplicitly relating items together by placing them near each other.


10. DISTRACTIONIrrelevant crap on your page that’s distracting from what really matters — your CTA.


11. INTERRUPTIONA break in a page’s content designed to trigger a thought, or simply meant to make a page more readable.


12. DOMINANCEVisibly delineating two nearby elements by making one look more important.


13. CONSISTENCYAlways presenting related elements in the same way.


14. REPETITIONPresenting the same information multiple times within a page in order to make it memorable.


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.


16. OVERLAPPINGHaving one element lay partially atop another so it appears separate but related.


17. ALIGNMENTOrganizing information into visually-aligned structures, making it easier to consume.


18. CONTINUATIONPlacing visual elements on the page in a way that guides the user to continue reading.


19. SIZEBIG THINGS BIG IMPORTANCEitty-bitty things, itty-bitty importance


20. PERSPECTIVEUsing images that portray the depth between a foreground and a background in a way that makes the page feel richer.


21. GROUPINGDividing similar items into purpose-based groups, and then clearly delineating those groups.


22. ENCAPSULATIONVisually separating a set of elements from others by containing it within a border or shape.


23. CONTACTUsing the point at which two elements touch to draw the reader’s eye.


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

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

Marketing