SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
ATTENTION-DRIVEN
DESIGN:
23 VISUAL PRINCIPLES
FOR DESIGNING
MORE PERSUASIVE
LANDING PAGES
OLI GARDNER

ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
1. DIRECTION
Showing 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. 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. AFFORDANCE
A visual hint at a digital object’s
function — like the bevel on a button.
CALL TO ACTIONCALL 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. 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. 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. 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. 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. 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. PROXIMITY
Implicitly relating items together by
placing them near each other.
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
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. 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. 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. CONSISTENCY
Always presenting related elements
in the same way.
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
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. 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. 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. 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. 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. SIZE
BIG THINGS BIG IMPORTANCE
itty-bitty things, itty-bitty importance
ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES
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. 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. 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. 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
LEARN HOW TO APPLY THESE
CONCEPTS TO YOUR LANDING PAGES
FOR HIGHER CONVERSIONS.
GET YOUR FREE 68-PAGE GUIDE

Mais conteúdo relacionado

Mais procurados

Beginners guide graphic design
Beginners guide graphic designBeginners guide graphic design
Beginners guide graphic designsuniltalekar1
 
Design Element Line 2
Design Element Line 2Design Element Line 2
Design Element Line 2hlograsso
 
Design Principles and Elements
Design Principles and ElementsDesign Principles and Elements
Design Principles and ElementsMark Rotondella
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design compositionsuniltalekar1
 
Three point
Three pointThree point
Three pointKeriC325
 
Modern Graphic Design
Modern Graphic DesignModern Graphic Design
Modern Graphic DesignYekaterina22
 
IBM Design - Delightful Experiences at Scale
IBM Design - Delightful Experiences at ScaleIBM Design - Delightful Experiences at Scale
IBM Design - Delightful Experiences at ScalePierre Henri Clouin
 
Two point perspective
Two point perspectiveTwo point perspective
Two point perspectivemarsha devine
 
Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Digital Surgeons
 
The History of Graphic Design
The History of Graphic DesignThe History of Graphic Design
The History of Graphic DesignMatt Erickson
 
A Brief History of Graphic Design
A Brief History of Graphic DesignA Brief History of Graphic Design
A Brief History of Graphic DesignSara Gonzalez
 
Good practises in graphic design, typography and editing: “Clear Layout. Basi...
Good practises in graphic design, typography and editing: “Clear Layout. Basi...Good practises in graphic design, typography and editing: “Clear Layout. Basi...
Good practises in graphic design, typography and editing: “Clear Layout. Basi...Tomasz Charnas
 
Pecha Kucha & Presentation Design by @itseugenec
Pecha Kucha & Presentation Design by @itseugenecPecha Kucha & Presentation Design by @itseugenec
Pecha Kucha & Presentation Design by @itseugenecEugene Cheng
 
Good Design Principles for App Developer (UAB) 2017
Good Design Principles for App Developer (UAB) 2017Good Design Principles for App Developer (UAB) 2017
Good Design Principles for App Developer (UAB) 2017Marçal P.
 
Types of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteTypes of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteRavi Bhadauria
 
VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1Virtu Institute
 

Mais procurados (20)

Principlesofdesign
PrinciplesofdesignPrinciplesofdesign
Principlesofdesign
 
Beginners guide graphic design
Beginners guide graphic designBeginners guide graphic design
Beginners guide graphic design
 
Best Tips for Logo Design
Best Tips for Logo DesignBest Tips for Logo Design
Best Tips for Logo Design
 
Design Element Line 2
Design Element Line 2Design Element Line 2
Design Element Line 2
 
Design Principles and Elements
Design Principles and ElementsDesign Principles and Elements
Design Principles and Elements
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Three point
Three pointThree point
Three point
 
Modern Graphic Design
Modern Graphic DesignModern Graphic Design
Modern Graphic Design
 
LO3 - Lesson 2 - Mood Boards
LO3 - Lesson 2 - Mood BoardsLO3 - Lesson 2 - Mood Boards
LO3 - Lesson 2 - Mood Boards
 
IBM Design - Delightful Experiences at Scale
IBM Design - Delightful Experiences at ScaleIBM Design - Delightful Experiences at Scale
IBM Design - Delightful Experiences at Scale
 
Two point perspective
Two point perspectiveTwo point perspective
Two point perspective
 
Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers
 
The History of Graphic Design
The History of Graphic DesignThe History of Graphic Design
The History of Graphic Design
 
A Brief History of Graphic Design
A Brief History of Graphic DesignA Brief History of Graphic Design
A Brief History of Graphic Design
 
Good practises in graphic design, typography and editing: “Clear Layout. Basi...
Good practises in graphic design, typography and editing: “Clear Layout. Basi...Good practises in graphic design, typography and editing: “Clear Layout. Basi...
Good practises in graphic design, typography and editing: “Clear Layout. Basi...
 
Creative Thinking
Creative ThinkingCreative Thinking
Creative Thinking
 
Pecha Kucha & Presentation Design by @itseugenec
Pecha Kucha & Presentation Design by @itseugenecPecha Kucha & Presentation Design by @itseugenec
Pecha Kucha & Presentation Design by @itseugenec
 
Good Design Principles for App Developer (UAB) 2017
Good Design Principles for App Developer (UAB) 2017Good Design Principles for App Developer (UAB) 2017
Good Design Principles for App Developer (UAB) 2017
 
Types of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteTypes of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia Institute
 
VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1
 

Mais de Unbounce

Mit conversion-optimierten AdWords Landing Pages den Umsatz verdoppeln
Mit conversion-optimierten AdWords Landing Pages den Umsatz verdoppelnMit conversion-optimierten AdWords Landing Pages den Umsatz verdoppeln
Mit conversion-optimierten AdWords Landing Pages den Umsatz verdoppelnUnbounce
 
UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...
UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...
UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...Unbounce
 
DMKwomen 2017 Mit Social Media Command Centers Datensilos aufbrechen und be...
DMKwomen 2017 Mit Social Media Command Centers   Datensilos aufbrechen und be...DMKwomen 2017 Mit Social Media Command Centers   Datensilos aufbrechen und be...
DMKwomen 2017 Mit Social Media Command Centers Datensilos aufbrechen und be...Unbounce
 
DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...
DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...
DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...Unbounce
 
DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...
DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...
DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...Unbounce
 
DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...
DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...
DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...Unbounce
 
[Webinar] DMKwomen 2017 Eröffnung
[Webinar] DMKwomen 2017 Eröffnung[Webinar] DMKwomen 2017 Eröffnung
[Webinar] DMKwomen 2017 EröffnungUnbounce
 
Using Overlays to Get More Conversions
Using Overlays to Get More ConversionsUsing Overlays to Get More Conversions
Using Overlays to Get More ConversionsUnbounce
 
A Internet Está Destruída E Os Profissionais De Marketing Sao Culpados
A Internet Está Destruída E Os Profissionais De Marketing Sao CulpadosA Internet Está Destruída E Os Profissionais De Marketing Sao Culpados
A Internet Está Destruída E Os Profissionais De Marketing Sao CulpadosUnbounce
 
[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...
[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...
[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...Unbounce
 
[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter Chats
[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter Chats[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter Chats
[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter ChatsUnbounce
 
[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...
[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...
[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...Unbounce
 
[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im Monat
[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im Monat[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im Monat
[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im MonatUnbounce
 
The Why & How of Selling Landing Pages for Digital Agencies
The Why & How of Selling Landing Pages for Digital AgenciesThe Why & How of Selling Landing Pages for Digital Agencies
The Why & How of Selling Landing Pages for Digital AgenciesUnbounce
 
[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...
[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...
[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...Unbounce
 
[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...
[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...
[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...Unbounce
 
[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...
[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...
[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...Unbounce
 
[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...
[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...
[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...Unbounce
 
[Webinar] In 10 Schritten zum strategischen Content Marketing
[Webinar] In 10 Schritten zum strategischen Content Marketing[Webinar] In 10 Schritten zum strategischen Content Marketing
[Webinar] In 10 Schritten zum strategischen Content MarketingUnbounce
 
[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...
[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...
[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...Unbounce
 

Mais de Unbounce (20)

Mit conversion-optimierten AdWords Landing Pages den Umsatz verdoppeln
Mit conversion-optimierten AdWords Landing Pages den Umsatz verdoppelnMit conversion-optimierten AdWords Landing Pages den Umsatz verdoppeln
Mit conversion-optimierten AdWords Landing Pages den Umsatz verdoppeln
 
UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...
UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...
UML! 001 Warum Du noch heute Deinen Facebook Ads die DNS Deiner Landing Page ...
 
DMKwomen 2017 Mit Social Media Command Centers Datensilos aufbrechen und be...
DMKwomen 2017 Mit Social Media Command Centers   Datensilos aufbrechen und be...DMKwomen 2017 Mit Social Media Command Centers   Datensilos aufbrechen und be...
DMKwomen 2017 Mit Social Media Command Centers Datensilos aufbrechen und be...
 
DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...
DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...
DMKwomen 2017 Conversion Optimierung: Mit A/B Tests und Personalisierung zu e...
 
DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...
DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...
DMKwomen 2017 So sprichst Du mit Account-Based Marketing (ABM) zielgerichtet ...
 
DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...
DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...
DMKwomen 2017 Content-Recycling: So wird ein einzelnes Webinar zur Leadgeneri...
 
[Webinar] DMKwomen 2017 Eröffnung
[Webinar] DMKwomen 2017 Eröffnung[Webinar] DMKwomen 2017 Eröffnung
[Webinar] DMKwomen 2017 Eröffnung
 
Using Overlays to Get More Conversions
Using Overlays to Get More ConversionsUsing Overlays to Get More Conversions
Using Overlays to Get More Conversions
 
A Internet Está Destruída E Os Profissionais De Marketing Sao Culpados
A Internet Está Destruída E Os Profissionais De Marketing Sao CulpadosA Internet Está Destruída E Os Profissionais De Marketing Sao Culpados
A Internet Está Destruída E Os Profissionais De Marketing Sao Culpados
 
[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...
[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...
[Webinar] Tech Inbound Sessions: Die Homepage ist tot - Wie du Content für de...
 
[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter Chats
[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter Chats[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter Chats
[Webinar] Tech Inbound Sessions: Inbound Marketing mit Twitter Chats
 
[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...
[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...
[Webinar] Tech Inbound Sessions: So tunen wir deine Landing Page für die turb...
 
[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im Monat
[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im Monat[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im Monat
[Webinar] Mit der richtigen SEO-Strategie von 0 auf 35.000 Besucher im Monat
 
The Why & How of Selling Landing Pages for Digital Agencies
The Why & How of Selling Landing Pages for Digital AgenciesThe Why & How of Selling Landing Pages for Digital Agencies
The Why & How of Selling Landing Pages for Digital Agencies
 
[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...
[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...
[Webinar] 20 Tricks, um hochqualifizierten AdWords Traffic auf deine Landing ...
 
[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...
[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...
[Webinar] So entwickelst du einen Prozess für A/B-Tests, der deine Umsätze st...
 
[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...
[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...
[Webinar] Der richtige User Research Mix als Sprungbrett für die effiziente C...
 
[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...
[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...
[Webinar] 4 Dinge, über die du dir Gedanken machen solltest, bevor du eine La...
 
[Webinar] In 10 Schritten zum strategischen Content Marketing
[Webinar] In 10 Schritten zum strategischen Content Marketing[Webinar] In 10 Schritten zum strategischen Content Marketing
[Webinar] In 10 Schritten zum strategischen Content Marketing
 
[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...
[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...
[Webinar] DMK16 Marketing Trends + Webinare als essentieller Bestandteil im C...
 

Último

Voltas turnaround strategy management case
Voltas turnaround strategy management caseVoltas turnaround strategy management case
Voltas turnaround strategy management caseAnkit Sarkar
 
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling ResearchIce Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling ResearchTINT Marketing
 
2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain Visibility2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain VisibilitySearch Engine Journal
 
Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Joseph Skibbie
 
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch DeckPodvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch DeckNedko Nedkov
 
Run more experiments with fewer resources
Run more experiments with fewer resourcesRun more experiments with fewer resources
Run more experiments with fewer resourcesVWO
 
The 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.groupThe 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.groupLivewire
 
Ppt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing coursPpt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing courstegveersingh09
 
A_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdfA_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdfVWO
 
Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)yaeyukimoto
 
Digital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services PreviewDigital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services PreviewDigital Gravity
 
scope in Digital Marketing & advertising
scope in Digital Marketing & advertisingscope in Digital Marketing & advertising
scope in Digital Marketing & advertisingKBS SHOP
 
A navigation of two creative processes Study
A navigation of two creative processes StudyA navigation of two creative processes Study
A navigation of two creative processes Studystuwilson.co.uk
 
Dhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing InternDhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing Internrisabhpandeyconnect
 
Digital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEMDigital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEMNazal Digital
 
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptxFriends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptxGregory Edwards
 
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxFriends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxNavah Hopkins
 
The best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdfThe best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdfShifali roy
 
The Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoadThe Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoadFabio Bin
 
Cricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance reportCricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance reportSocial Samosa
 

Último (20)

Voltas turnaround strategy management case
Voltas turnaround strategy management caseVoltas turnaround strategy management case
Voltas turnaround strategy management case
 
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling ResearchIce Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
 
2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain Visibility2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain Visibility
 
Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!
 
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch DeckPodvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
 
Run more experiments with fewer resources
Run more experiments with fewer resourcesRun more experiments with fewer resources
Run more experiments with fewer resources
 
The 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.groupThe 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.group
 
Ppt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing coursPpt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing cours
 
A_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdfA_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdf
 
Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)
 
Digital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services PreviewDigital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services Preview
 
scope in Digital Marketing & advertising
scope in Digital Marketing & advertisingscope in Digital Marketing & advertising
scope in Digital Marketing & advertising
 
A navigation of two creative processes Study
A navigation of two creative processes StudyA navigation of two creative processes Study
A navigation of two creative processes Study
 
Dhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing InternDhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing Intern
 
Digital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEMDigital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEM
 
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptxFriends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
 
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxFriends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptx
 
The best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdfThe best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdf
 
The Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoadThe Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoad
 
Cricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance reportCricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance report
 

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

  • 1. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES OLI GARDNER 
  • 2. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 1. DIRECTION Showing the user where they should be headed by literally pointing it out.  
  • 3. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 2. MOTION Using an animated element on a page to capture or draw attention.
  • 4. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 3. AFFORDANCE A visual hint at a digital object’s function — like the bevel on a button. CALL TO ACTIONCALL TO ACTION CALL TO ACTION CALL TO ACTION CALL TO ACTION Strong affordance Low affordance
  • 5. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 4. CONTRAST Coloring an element in a way that causes it to stand out from the rest of the page.
  • 6. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 5. NESTING Sorting text — typically in list-format — into categories of related content that are easy to skim.
  • 7. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 6. HIGHLIGHTING Emphasizing the text we most want a reader to notice. But never more than 10% of it.
  • 8. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 7. WHITESPACE Isolating an element within empty space in order to draw attention to it.
  • 9. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 8. ANOMALY Highlighting one element in a sea of related elements by tweaking its presentation.
  • 10. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 9. PROXIMITY Implicitly relating items together by placing them near each other.
  • 11. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 10. DISTRACTION Irrelevant crap on your page that’s distracting from what really matters — your CTA.
  • 12. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 11. INTERRUPTION A break in a page’s content designed to trigger a thought, or simply meant to make a page more readable.
  • 13. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 12. DOMINANCE Visibly delineating two nearby elements by making one look more important.
  • 14. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 13. CONSISTENCY Always presenting related elements in the same way.
  • 15. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 14. REPETITION Presenting the same information multiple times within a page in order to make it memorable.
  • 16. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 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.
  • 17. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 16. OVERLAPPING Having one element lay partially atop another so it appears separate but related.
  • 18. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 17. ALIGNMENT Organizing information into visually-aligned structures, making it easier to consume.
  • 19. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 18. CONTINUATION Placing visual elements on the page in a way that guides the user to continue reading.
  • 20. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 19. SIZE BIG THINGS BIG IMPORTANCE itty-bitty things, itty-bitty importance
  • 21. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 20. PERSPECTIVE Using images that portray the depth between a foreground and a background in a way that makes the page feel richer.
  • 22. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 21. GROUPING Dividing similar items into purpose-based groups, and then clearly delineating those groups.
  • 23. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 22. ENCAPSULATION Visually separating a set of elements from others by containing it within a border or shape.
  • 24. ATTENTION-DRIVEN DESIGN: 23 VISUAL PRINCIPLES FOR DESIGNING MORE PERSUASIVE LANDING PAGES 23. CONTACT Using the point at which two elements touch to draw the reader’s eye.
  • 25. 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