Понравилась презентация – покажи это...
Слайд 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
