'

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

Понравилась презентация – покажи это...





Слайд 0

ATTENTION-DRIVEN DESIGN:  23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES OLI GARDNER


Слайд 1

Showing the user where they should be headed by literally pointing it out.   1. DIRECTION ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES


Слайд 2

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

3. AFFORDANCE A visual hint at a digital object’s function — like the bevel on a button. CALL TO ACTION Strong affordance CALL TO ACTION CALL TO ACTION CALL TO ACTION Low affordance ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES


Слайд 4

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

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

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

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

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

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

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

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

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

13. CONSISTENCY Always presenting related elements in the same way. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES


Слайд 14

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

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

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

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

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

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

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

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

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

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


Слайд 24

LEARN HOW TO APPLY THESE CONCEPTS TO YOUR LANDING PAGES FOR HIGHER CONVERSIONS. GET YOUR FREE 68-PAGE GUIDE ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES


Слайд 25


×

HTML:





Ссылка: