SlideShare una empresa de Scribd logo
1 de 25
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Más 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
 

Más 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

The Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoadThe Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoadFabio Bin
 
MRK634 Digital Digest Powerpoint Akshank Shukla
MRK634 Digital Digest Powerpoint Akshank ShuklaMRK634 Digital Digest Powerpoint Akshank Shukla
MRK634 Digital Digest Powerpoint Akshank Shuklaashukla15
 
SVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdfSVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdfvikrs213
 
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
 
Assignment 1 Task 1 - Apple's Marketing Mix slides
Assignment 1 Task 1 - Apple's Marketing Mix slidesAssignment 1 Task 1 - Apple's Marketing Mix slides
Assignment 1 Task 1 - Apple's Marketing Mix slideskatherinemiller93
 
Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesCrafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesVWO
 
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptxToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptxivanrazine1
 
Bathroom Taps by Gravity Bath. It is designed to control flow of water.
Bathroom Taps by Gravity Bath. It is designed to control flow of water.Bathroom Taps by Gravity Bath. It is designed to control flow of water.
Bathroom Taps by Gravity Bath. It is designed to control flow of water.gravitydigital2023
 
Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)
Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)
Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)Marketing 2.0 Conference
 
Content Marketing for Travel Related Websites
Content Marketing for Travel Related WebsitesContent Marketing for Travel Related Websites
Content Marketing for Travel Related Websitesrichardb29
 
Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...
Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...
Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...Opus Momentum
 
Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Nedko Nedkov
 
Amazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptxAmazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptxWill Haire
 
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
 
Marketing PowerPoint Michael McFellin.pptx
Marketing PowerPoint Michael McFellin.pptxMarketing PowerPoint Michael McFellin.pptx
Marketing PowerPoint Michael McFellin.pptxmichaelmcfellin
 
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
 
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
 
Converting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROConverting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROVWO
 
Digital Marketing PPT.pptx(PPT related the Digital marketing)
Digital Marketing PPT.pptx(PPT related the Digital marketing)Digital Marketing PPT.pptx(PPT related the Digital marketing)
Digital Marketing PPT.pptx(PPT related the Digital marketing)digitalwithalok1
 
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
 

Último (20)

The Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoadThe Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoad
 
MRK634 Digital Digest Powerpoint Akshank Shukla
MRK634 Digital Digest Powerpoint Akshank ShuklaMRK634 Digital Digest Powerpoint Akshank Shukla
MRK634 Digital Digest Powerpoint Akshank Shukla
 
SVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdfSVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdf
 
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
 
Assignment 1 Task 1 - Apple's Marketing Mix slides
Assignment 1 Task 1 - Apple's Marketing Mix slidesAssignment 1 Task 1 - Apple's Marketing Mix slides
Assignment 1 Task 1 - Apple's Marketing Mix slides
 
Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesCrafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing Pages
 
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptxToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
 
Bathroom Taps by Gravity Bath. It is designed to control flow of water.
Bathroom Taps by Gravity Bath. It is designed to control flow of water.Bathroom Taps by Gravity Bath. It is designed to control flow of water.
Bathroom Taps by Gravity Bath. It is designed to control flow of water.
 
Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)
Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)
Marketing 2.0 Conference (Event Information Deck | Dec'24-Mar'25)
 
Content Marketing for Travel Related Websites
Content Marketing for Travel Related WebsitesContent Marketing for Travel Related Websites
Content Marketing for Travel Related Websites
 
Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...
Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...
Opus Momentum - Data Driven and AI Enabled Digital Marketing Agency | Company...
 
Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024
 
Amazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptxAmazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptx
 
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
 
Marketing PowerPoint Michael McFellin.pptx
Marketing PowerPoint Michael McFellin.pptxMarketing PowerPoint Michael McFellin.pptx
Marketing PowerPoint Michael McFellin.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
 
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
 
Converting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROConverting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CRO
 
Digital Marketing PPT.pptx(PPT related the Digital marketing)
Digital Marketing PPT.pptx(PPT related the Digital marketing)Digital Marketing PPT.pptx(PPT related the Digital marketing)
Digital Marketing PPT.pptx(PPT related the Digital marketing)
 
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
 

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