Embed Size (px)
Citation preview
n
After being a designer for most part of my professional life I drifted to
marketing unintentionally As I created landing page after landing page
redesigned websites tested ad creatives built case studies e-books and
infographics to drive traffic and sales I found myself at a loss for what to say
when someone asked me what my role was at work
Was I still a Designer or had I transitioned into a Marketer
It wasnrsquot long before I realized that in online selling there is a big overlap
between the two Both are focused towards three goals
Getting Attention Holding Interest and Encouraging Action
This is exactly what this book is trying to achieve Help marketers meet these
goals with design and help designers get a better understanding of their role
in marketing
When we talk about marketing we canrsquot separate design from it One fails
without the other In this book wersquoll talk about exactly how connected they
are Yoursquoll be surprised to know how much
Rajat AroraDesigner and Marketer at LeadSquared
ABOUT THE BOOK
Whatrsquos Inside
The 8mango story
What is design
Difference between art and design
Importance of design in marketing
GET ATTENTION
Visual cues
Contrast
Human faces
Encapsulation
Motion
Food sex and hunger
HOLD INTEREST
Readability
White space
Illustrations
Segmentation
ENCOURAGE ACTION
Visible call to action
Single call to action
Demonstration
Conversion catalysts
THE 8MANGO STORY
My friend Dhiraj is an artist ndash a really good one From the trash we discard
without even a second thought he creates a fascinating world of miniatures In
2006 he started 8mango to showcase the work he was doing In the years that
followed his art received a lot of appreciation from people and media alike
Itrsquos 2016 and now he wants to sell some of his creations Given the craft he
possesses and the beautiful things he makes yoursquod think it wonrsquot be hard to sell
them Because he knows Photoshop and social media well selling should be
easy - make a pretty picture add a buy now button run an ad on social media
and wait for the leads to roll in
But it has not been that simple
ldquoIt is fantasticrdquo ldquogreat workrdquo ldquogeniusrdquo were the responses he got All likes all
appreciations but very few sales
www8mangocom
But why no sales
Probably there is no demand for such art But art is never really driven by
demand In fact it opposes it most of the times
Thinking he wasnrsquot targeting the right people Trust me he was - Art
collectors CEOrsquos of creative companies and some serious art lovers
I have seen people steal his artwork images and get thousands of shares
Something that Dhiraj never could There has to be something he wasnrsquot doing
right And his is not an isolated incident There are countless businesses with
excellent product or services and a huge demand but they still fail to sell them
online
There could be a million explanations for that But if you ask me there are
three major ones
1) Not getting noticed by their audience
2) Getting noticed but failing to engage them
3) Failing to convert the engagement to sales
In this book I will tell you how to get better at these three aspects of
marketing using design as the weapon
In simple words design is to communicate with a purpose Before
designing even a single dot you should have a clear idea of what you intend to
achieve You probably saw the circle below and read it before reading this
paragraph That was intentional ndash achieved by the contrast in shape and color
(circular and yellow)
How is art different from design
I did not have a formal education in either so whenever I met a designer or an
artist this was the first question I asked After speaking to many people and
reading quite a bit I figured out one simple explanation
Art is interpreted and design is understood
WHAT IS DESIGN
Mona Lisa iPhone
UNDERSTANDING THE DIFFERENCE
Mona Lisa wasnrsquot done with a specific purpose Like most art it was an
expression and is interpreted differently by different people
Whereas iPhone is a design because it has a purpose and it is interpreted and
understood alike by most users
Design is not just aesthetics It helps
marketing achieve its goals by
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Whatrsquos Inside
The 8mango story
What is design
Difference between art and design
Importance of design in marketing
GET ATTENTION
Visual cues
Contrast
Human faces
Encapsulation
Motion
Food sex and hunger
HOLD INTEREST
Readability
White space
Illustrations
Segmentation
ENCOURAGE ACTION
Visible call to action
Single call to action
Demonstration
Conversion catalysts
THE 8MANGO STORY
My friend Dhiraj is an artist ndash a really good one From the trash we discard
without even a second thought he creates a fascinating world of miniatures In
2006 he started 8mango to showcase the work he was doing In the years that
followed his art received a lot of appreciation from people and media alike
Itrsquos 2016 and now he wants to sell some of his creations Given the craft he
possesses and the beautiful things he makes yoursquod think it wonrsquot be hard to sell
them Because he knows Photoshop and social media well selling should be
easy - make a pretty picture add a buy now button run an ad on social media
and wait for the leads to roll in
But it has not been that simple
ldquoIt is fantasticrdquo ldquogreat workrdquo ldquogeniusrdquo were the responses he got All likes all
appreciations but very few sales
www8mangocom
But why no sales
Probably there is no demand for such art But art is never really driven by
demand In fact it opposes it most of the times
Thinking he wasnrsquot targeting the right people Trust me he was - Art
collectors CEOrsquos of creative companies and some serious art lovers
I have seen people steal his artwork images and get thousands of shares
Something that Dhiraj never could There has to be something he wasnrsquot doing
right And his is not an isolated incident There are countless businesses with
excellent product or services and a huge demand but they still fail to sell them
online
There could be a million explanations for that But if you ask me there are
three major ones
1) Not getting noticed by their audience
2) Getting noticed but failing to engage them
3) Failing to convert the engagement to sales
In this book I will tell you how to get better at these three aspects of
marketing using design as the weapon
In simple words design is to communicate with a purpose Before
designing even a single dot you should have a clear idea of what you intend to
achieve You probably saw the circle below and read it before reading this
paragraph That was intentional ndash achieved by the contrast in shape and color
(circular and yellow)
How is art different from design
I did not have a formal education in either so whenever I met a designer or an
artist this was the first question I asked After speaking to many people and
reading quite a bit I figured out one simple explanation
Art is interpreted and design is understood
WHAT IS DESIGN
Mona Lisa iPhone
UNDERSTANDING THE DIFFERENCE
Mona Lisa wasnrsquot done with a specific purpose Like most art it was an
expression and is interpreted differently by different people
Whereas iPhone is a design because it has a purpose and it is interpreted and
understood alike by most users
Design is not just aesthetics It helps
marketing achieve its goals by
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
THE 8MANGO STORY
My friend Dhiraj is an artist ndash a really good one From the trash we discard
without even a second thought he creates a fascinating world of miniatures In
2006 he started 8mango to showcase the work he was doing In the years that
followed his art received a lot of appreciation from people and media alike
Itrsquos 2016 and now he wants to sell some of his creations Given the craft he
possesses and the beautiful things he makes yoursquod think it wonrsquot be hard to sell
them Because he knows Photoshop and social media well selling should be
easy - make a pretty picture add a buy now button run an ad on social media
and wait for the leads to roll in
But it has not been that simple
ldquoIt is fantasticrdquo ldquogreat workrdquo ldquogeniusrdquo were the responses he got All likes all
appreciations but very few sales
www8mangocom
But why no sales
Probably there is no demand for such art But art is never really driven by
demand In fact it opposes it most of the times
Thinking he wasnrsquot targeting the right people Trust me he was - Art
collectors CEOrsquos of creative companies and some serious art lovers
I have seen people steal his artwork images and get thousands of shares
Something that Dhiraj never could There has to be something he wasnrsquot doing
right And his is not an isolated incident There are countless businesses with
excellent product or services and a huge demand but they still fail to sell them
online
There could be a million explanations for that But if you ask me there are
three major ones
1) Not getting noticed by their audience
2) Getting noticed but failing to engage them
3) Failing to convert the engagement to sales
In this book I will tell you how to get better at these three aspects of
marketing using design as the weapon
In simple words design is to communicate with a purpose Before
designing even a single dot you should have a clear idea of what you intend to
achieve You probably saw the circle below and read it before reading this
paragraph That was intentional ndash achieved by the contrast in shape and color
(circular and yellow)
How is art different from design
I did not have a formal education in either so whenever I met a designer or an
artist this was the first question I asked After speaking to many people and
reading quite a bit I figured out one simple explanation
Art is interpreted and design is understood
WHAT IS DESIGN
Mona Lisa iPhone
UNDERSTANDING THE DIFFERENCE
Mona Lisa wasnrsquot done with a specific purpose Like most art it was an
expression and is interpreted differently by different people
Whereas iPhone is a design because it has a purpose and it is interpreted and
understood alike by most users
Design is not just aesthetics It helps
marketing achieve its goals by
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
But why no sales
Probably there is no demand for such art But art is never really driven by
demand In fact it opposes it most of the times
Thinking he wasnrsquot targeting the right people Trust me he was - Art
collectors CEOrsquos of creative companies and some serious art lovers
I have seen people steal his artwork images and get thousands of shares
Something that Dhiraj never could There has to be something he wasnrsquot doing
right And his is not an isolated incident There are countless businesses with
excellent product or services and a huge demand but they still fail to sell them
online
There could be a million explanations for that But if you ask me there are
three major ones
1) Not getting noticed by their audience
2) Getting noticed but failing to engage them
3) Failing to convert the engagement to sales
In this book I will tell you how to get better at these three aspects of
marketing using design as the weapon
In simple words design is to communicate with a purpose Before
designing even a single dot you should have a clear idea of what you intend to
achieve You probably saw the circle below and read it before reading this
paragraph That was intentional ndash achieved by the contrast in shape and color
(circular and yellow)
How is art different from design
I did not have a formal education in either so whenever I met a designer or an
artist this was the first question I asked After speaking to many people and
reading quite a bit I figured out one simple explanation
Art is interpreted and design is understood
WHAT IS DESIGN
Mona Lisa iPhone
UNDERSTANDING THE DIFFERENCE
Mona Lisa wasnrsquot done with a specific purpose Like most art it was an
expression and is interpreted differently by different people
Whereas iPhone is a design because it has a purpose and it is interpreted and
understood alike by most users
Design is not just aesthetics It helps
marketing achieve its goals by
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
In simple words design is to communicate with a purpose Before
designing even a single dot you should have a clear idea of what you intend to
achieve You probably saw the circle below and read it before reading this
paragraph That was intentional ndash achieved by the contrast in shape and color
(circular and yellow)
How is art different from design
I did not have a formal education in either so whenever I met a designer or an
artist this was the first question I asked After speaking to many people and
reading quite a bit I figured out one simple explanation
Art is interpreted and design is understood
WHAT IS DESIGN
Mona Lisa iPhone
UNDERSTANDING THE DIFFERENCE
Mona Lisa wasnrsquot done with a specific purpose Like most art it was an
expression and is interpreted differently by different people
Whereas iPhone is a design because it has a purpose and it is interpreted and
understood alike by most users
Design is not just aesthetics It helps
marketing achieve its goals by
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Mona Lisa iPhone
UNDERSTANDING THE DIFFERENCE
Mona Lisa wasnrsquot done with a specific purpose Like most art it was an
expression and is interpreted differently by different people
Whereas iPhone is a design because it has a purpose and it is interpreted and
understood alike by most users
Design is not just aesthetics It helps
marketing achieve its goals by
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Design is not just aesthetics It helps
marketing achieve its goals by
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Interrupt the Autopilot mode
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Have you ever noticed that as you drive through your daily route you make it
home without even consciously realizing it This is what we call the autopilot
mode which is how human mind operates when we do everyday things like
driving home
But the autopilot mode breaks when someone suddenly jumps in front of the
car You are forced to pay attention and act in response to this interruption
GETTING ATTENTION
Interrupting the Autopilot mode
Just like that there is so much marketing noise
on the web television radio billboards and
practically everywhere that people consume
them without even registering the message
properly It is becoming exceedingly difficult for
the marketers to get their point across To stand
out they need to interrupt this autopilot
mode
In the following pages I will tell you how to
break the pattern of the habitual and get
noticed with the help of design
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
with
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Signals that redirect attention
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
VISUAL CUES
Visual cue is a signal to direct attention to something important We canrsquot
help but pay attention to an arrow or a pointed finger
A B CThe arrow (visual cue) makes us notice B before anything else
Try this ndash get a group of people on the street every one of them watching
the sky with their finger pointing upwards Almost without exception the
passers by would pause at least for a moment to look in the same
direction That is a visual cue - the line of sight of people and the pointing
fingers Letrsquos take the example of this ad
Realty Marketing E-bookSmart marketing guide for real estate businesses Download it free
The down arrow instantly
catches attention and gives a
hint of the download
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Example of a simple form
A form without a pointer
Try it free for 15 days A header with the downward pointer
pushes the focus towards the form forcing
the viewer to pay attention to it
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Examples of visual cues used on banner ads
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Standing out from the surrounding
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
When I started writing this e-book like most people I was thinking of
contrast only from the perspective of color (black and white) But as I dug
deeper I realized there is much more to it
Apart from color contrast can be for size shape and position as well We
are attracted to contrasting things because the brain pays more
attention to anything that breaks the monotony
Whether you are making a banner ad a landing page or any visual creative
the contrast should be given to the most important piece of information
That is why the headline is generally big and bold and call to action is a
different color They are important and contrast gives them the necessary
attention
CONTRAST
Contrast is the state of being strikingly different from the surroundings
A B C
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Contrast with color
It is important to use proper contrasting colors (opposites on a color wheel)
or else it becomes annoying to the eyes
Contrast with color means getting attention with a strikingly different color
than the other elements It is the most common contrast type used in
marketing (buttons error messages hyperlinks tips)
Color wheel depicting contrasting colors
BAD CONTRAST GOOD CONTRAST
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Which one gets your attention
This is a standard YouTube page where we retarget our prospects
Friday 13th May 2016
Download E-book
Download E-book
The grey button on the ad gets lost because of the lack of contrast
The purple color on the button gives high contrast which catches the eye
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Join Free Webinar
Starting with
Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
BOOK YOUR SEAT
You can see 2 versions of the same ad The ad on the left probably
caught your attention Why
Because the variation in text size and weight has given us a clue of what to read
first It feels natural to follow the pattern of big size first Bigger objects attract
more attention and are perceived to be more important compared to the
smaller ones
That is why we read ldquoStarting with Google AdWordsrdquo before the other
text
Bigger font and weight has added hierarchy of importance in the otherwise
random design (right) and the eye naturally follows the movement from big to
small
Contrast with size
Join Free Webinar
Starting with Google Adwords
Presenter - Salil PanikkaveettilCo-Founder AdNabu
Book your seat
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
A big font for headline provides the size contrast
A big e-book cover provides contrast against the smaller text
A big bright button provides size and color contrast
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Contrast with shape means getting attention with shape when compared to
other things on the page
Contrast with shape
The pentagonal shape is used to break the pattern and catch attention
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
LeadSquared Lite
$120 year
5000 CONTACTS
5 USERS
Inbuilt CRM
Free training amp onboarding
Most popular
The triangle at the top left corner catches the eye due to its shape
A B C
Shape contrast used on the pricing page
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Contrast with position means getting attention with the physical position of an
object when compared to other things on the page
Contrast with position
Below (on the left) you will see that the text pops out immediately because it
breaks the positional arrangement and sits outside the linear geometry
Get it now
1000 downloads
A
B
C
D
E
F
G
Get it now
1000 downloads
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
A discount coupon as a cutout on the top right corner catches attention quickly because of its position and shape
An angled headline is noticeable because of its angle compared to other elements
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Create an emotional connection
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
We are attracted towards faces and are curious to know what they mean to
us It has also been proven that a happy face actually makes us happy
Taking a short story from Nathalie Nahairsquos book ldquowebs of influencerdquo
HUMAN FACES
Human faces connect emotionally with the audience quicker than text or a
generic icon
Adam
Shibani
In 1992 a group of neuroscientists made a starling discovery They were
studying the brain of macaques to observe which neurons became active
when they picked up peanuts when one of the researchers got peckish and
inadvertently picked up a nut himself Rather surprisingly he observed the
same neurons that had fired when the monkey had picked up the nut were
now firing as the monkey watched the researcher
What does it mean ndash A simple use of a human image can have a
significant effect on how the visitors feel and act on the web
Stacy
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
In the first ad a personrsquos image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Similarly the second popup gets more attention than the first because of
the personrsquos face
LeadSquared Support Portal pop-up
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Enclosed within an object
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
A B C
ENCAPSULATION
Encapsulation is when you place an object within a shape to highlight its
importance
The encapsulated form(below) catches attention of the viewer
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
In an otherwise static surrounding
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
A C
MOTION
Motion is the action or process of moving or being moved
Motion alerts us especially when the surrounding is static It is an
inherent response probably passed down from our ancestors who
perceived motion as an alert for danger Think a moving tiger or a snake
That is why moving sliders and gif images are so popular on websites and
ads Marketers have been using this with good results for a while now be
it on a banner ad or a sliding homepage
Be wary of overusing it as motion can be annoying after a point It
becomes stressful to consume a lot of information in little time
Watching a fast moving train causes a headache because of the amount of information our eyes have to consume in a small timeframe
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Sex hunger and safety
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
BASIC NEEDS - Sex food and safety
One of the best ways to attract attention is to target the basic
physiological needs of human beings - sex hunger and a need for safety
They are powerful triggers widely used in marketing to get noticed
Just like motion they have a very delicate balance Overusing them can ruin
your campaigns Check how Volkswagen uses it intelligently
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Which side appeals to you more
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
BONUS TIP
Break the rules
Always remember that your motive is to get attention not appreciation for
beauty look and feel Donrsquot fall into the trap of making everything
aesthetically balanced It will get ignored because thatrsquos what everyone
does The more usual it is more are its chances to fail
8mango creative used on the website
Be it silly powerful simple or bizarre if it gets the attention of the
audience with the right message it has done its job
Now it is the contentrsquos job to keep the visitor hooked and continue the
journey In the next part wersquoll discuss how design helps in that aspect
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Communicate clearly
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
HOLD INTEREST
Communicate clearly
After getting attention the next step is to hold it long enough to persuade
your audience into taking an action
Keeping the audience interested is probably more difficult than attracting
them Arguably it is the function of copywriting but what if the viewers
canrsquot read what you have to say even when they want to
For example - sometimes we see a fantastic email subject line in our inbox
but when we open it the design is so bad that it loses all its credibility and
you just canrsquot stay on the page anymore You completely forget about that
subject line which looked so great a few seconds ago
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication) I wonrsquot say that good content
always need great design but I can safely say that bad design can
effectively ruin excellent content
Navigating through bad design is a pain that your readers shouldnrsquot have to
undergo Therefore in the next chapter you will learn how good design can
help convey your message better by making it easy to understand
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
with
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Ease of reading
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
READABILITY
Readability is the ease with which the audience can read your message
Because of course for a written message to succeed people should actually
read it Typography and font faces play a very important part in readability
mood setting and perceived article length
A simple play of font white space and alignment makes this paragraph easier to read
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
When it comes to retaining the visitor readability is the number one
priority Spend some time choosing your fonts as they define the
personality and character of your message and can also affect the mood of
the visitor
Which one of these is easier to read
Arial font
Lead Capture Automation
Responsive Landing Pages ndash Increase
your traffic to lead conversion with mobile
responsive landing pages
Land more leadsClose more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common ndash picking fancy over simple Early in my career I
made this mistake way too often Overwhelmed with choice I always chose
fancy fonts ruining the simplicity and readability of the page
Serious
ElegantStrong Funny
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
The arrangement of text on a document or a creative is called typography
You can get very creative with it But when our focus is highly readable
content a sudden burst of outrageous fonts and shapes can be a distraction
Artistic and captures attention but not readable
An experiment conducted by Errol Morris tested whether or not typeface
influences the way that people consume information To conduct the
experiment 40000 readers were presented with the same passage but in
six different typefaces The readers were then asked whether or not they
agreed or disagreed with the passage Those readers who were given the
passage in Baskerville were much more likely to agree with it especially
when compared to Comic Sans and Helvetica Clearly the study illustrates
the importance of typography and its influence on the reader
Source -httpwwwoutbraincomblog
Typography
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Line Spacing
Line spacing is the vertical distance between the lines of text It has a big
role to play in the readability of the content
Hi I am Rajat I hope you are enjoying this book and learning something that you can apply to your marketing to get good results
Hi I am Rajat I hope you are
enjoying this book and learning
something that you can apply
to your marketing to get good
results
Line height 1
Line height 15
The text looks cramped for space and makes it difficult to read
Line spacing of 15 makes the content much easier to read
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Email design with default 1 spacing
Email design with 15 spacing
Which one is easier to read
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Alignment is arranging objects in correct relative positions When the
elements are aligned on a page you get a stronger cohesive design which
is much easier to read and looks attractive
A
B
C
A
B
C
We like symmetrically aligned things be it a face an object or anything else
visual Alignment makes it easier to understand things
The graphic on the left is aligned and easier to read
Alignment
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Perfectly aligned to the left
Not aligned completely to the left making it difficult to read
LeadSquaredrsquos webinar email template
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Background ndash Foreground contrast
In the initial pages of the book we saw how to use different types of
contrast to gain attention In this chapter we will understand how
contrast can affect the readability on the page
A A
Black on white may look great for a few seconds but reading a full
paragraph of black on white tires the eye It might work well while
scanning but the reverse works best when you want the person to read
Black on white was preferred on newspapers because it demanded less
ink But later it became the standard as the readers found it less stressful
to the eye
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Which one is less stressful to read
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
The breathing space
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
WHITE SPACE
White space or negative space is the empty space around the design
elements on a webpage Often ignored it is one of the most beautiful
aspects of design It is literally lsquonothingrsquo but it makes other things pretty
AA
With white space Without white space
LeadSquaredrsquos ad creative
Good use of white space Bad use of white space
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
White space example LeadSquared email template
See how white space in this template makes the other elements more
attractive and improves readability
Email template with beautiful white space
Email template with no white space reduces its readability
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Visual content
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
ILLUSTRATIONS
Illustrations help break the wall of words amp make the content easily
understandable and pleasing to the eyes A visual is processed 60000
times faster than the words because we think in visuals not in words
An example from our current website
bull Google Adwordsbull Websitebull Phonebull Online Chatbull Social Mediabull Just Dialbull Shopifybull WordPressbull GoToWebinarbull Super Receptionistbull Shikshabull And morehellip
LeadSquared captures leads from
Illustration with logos makes it very easy and fast to understand
A huge list makes it look like a very hard task requiring too much effort
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Illustration example LeadSquared landing page
The illustration makes the page easy to scan and understand
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Arrangement of objects
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
SEGMENTATION
Segmentation is the arrangement of objects in a meaningful manner A well
structured page can be the difference between highly loved and highly repelling
content
Think that you enter someonersquos drawing room
Where would you prefer to stay longer
In our already chaotic life we donrsquot need more clutter especially not online
Visitors bounce off quickly if the information is not structured clearly
You can segment the information with the tricks we learned earlier - color
contrast encapsulation alignment etc The only difference here is the motive ndash
you have already caught the visitorsrsquo attention now you would use segmentation
to make them comfortable enough to stick around
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Segmenting information with contrast
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Segmenting information with encapsulation
Segmenting information with alignment
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
The driving force
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
What if a customer sees an attractive hoarding enters the restaurant checks
the menu but doesnrsquot order food Or sees a great movie trailer reads all the
good reviews but still isnrsquot motivated enough to watch it
You need a force that drives the user to take that final action ndash of ordering
the food or booking that movie ticket How would you get this driving force
ENCOURAGE ACTION
The driving force
You must be familiar with this very popular
Portrait of ldquoUncle Samrdquo used by the US in
WWI to encourage military recruits This
might as well be the most popular poster of
all time as over 4 millions copies were
printed in an year But what makes it so
successful How it encouraged all of
America to stand up and do their part
during the war Design maybe
Again It is a copywriterrsquos job to create compelling actionable offers but design
also plays its part in providing the driving force to act Like in the above
example - Uncle Sam pointing figure directly at you staring at you It feels he is
actually talking to you Would the copy have the same effect without the
illustration
In the remaining part of the book wersquoll see how design can help motivate action
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
with
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Call to action
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
MAKE CTA VISIBLE
Friday 13th May 2016
Download E-book
Friday 13th May 2016
Download E-book
It is also important to make your call to action look like a button We are
used to clicking buttons It gives us the cue that we are supposed to do
something now (take an action)
A button like call to action nudges the visitor to click it
A link makes it looks less compelling to click
Call to action or CTA is an instruction to the audience to provoke a response
Since it is the action center of your marketing campaign it should be
strikingly visible on the page This is what you want your visitor to not miss
Your call to action should be
1) Contrasting
2) Above the fold
3) Color intuitive
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
1) Keep it contrasting - Squint test
Stand a little far away from the monitor and squint your eyes Do
you still see the call to action button clearly This is a popular test to
gauge the effectiveness of the call to action
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Squinting eyes
The last one fails the squint test because of the lack of color and size contrast
You can use the color wheel to find the right color contrasts (the opposites)
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
2) Keep CTA above the fold
Keeping it above the fold increases its chances of getting clicked If your page
is long repeat the CTA below the fold as well
CTA above the fold tells a visitor to take the next step
CTA below the fold decreases its possibility of getting clicked
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
3) Use Intuitive colors
Colors deliver information really quickly They can also change the meaning
of the message influencing the buyerrsquos decision making For example we see
red on a traffic signal and we stop We see green and we feel we are good to
go We perceive color before we absorb any other form of information
Check out the ads below I have changed the color tones of the McDonalds
banner ads
You will notice that each of them are highly saturated (lot of color
brightness) and catch attention but something looks wrong in the altered
colors because it does not evoke the right type of emotion
The green banner makes the burger look like a vegetarian one
The Blue banner gives the perception that the burger would be cold
The red just fits right
The red color is associated with most of the fast food companies as well
because it increases heartbeat and is proved to increase hunger
McDonalds banner ad
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Colors have been used in design for centuries to add meaning You should
also use them properly to have the right kind of affect
REDActive exciting urgent raises heart beat and hunger
GREENBalance nature growth Very calm and balanced color
BlueTrust control security Most trusted and loved color in the world
OrangeInstinct warmth optimism Most popular color for calls to action
YellowYouthful warmth friendly kind
BlackAuthority sleek powerful Indicates luxury and style
PinkLove romantic feminine
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Call to action
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
SINGLE CALL TO ACTION
It is important to understand that too many choices can create anxiety and
make it difficult for the visitor to decide which eventually may lead to no
action at all
TRY IT FREE
TRY IT FREE TAKE DEMO TALK TO US
Single choice makes it easy to act upon
Multiple choices create anxiety
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Show how itrsquos done
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
SHOW HOW ITrsquoS DONE
Showing something in action itself promotes action The longer the visitor
watches your productservice in action the more likely he is to take the next
step
A few months ago I saw a Dholki (popular Indian double sided drum) seller
just outside work I did not intend to buy it But he played it so well that it
caught my attention (just attention) He asked me to try it I did with zero
buying intention To say ldquonordquo with conviction I told him that the quality
didnrsquot look good enough and it would break In response he placed the
Dholki on the ground and stood on top putting all of his 80 Kg frame on it I
couldnrsquot say no after that
A demonstration of your offering will make it easier for a visitor to visualize
what it can do for them and encourage him to take the next step That is the
reason for the popularity of demo videos You will often find them on the
home pages and the landing pages
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Overview video on the landing page
Example of product demonstrations
Product video on the support portal
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
to speed up conversion action
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
ADDING CONVERSION CATALYSTS
Catalysts increase the rate of reaction In this particular case the ideal
reaction is when a visitor acts on your CTA There are a few tricks which
can help a visitor take that action quicker
1) Adding trust elements ndash If you make a claim prove it by adding trust
elements on the page People like facts and social proof They are powerful
triggers and help convince the visitors to take the next step
2) Creating urgency ndash The fear of missing out (FOMO) as they say in
marketing We are more keen on saving a dollar than earning it It is a
powerful action trigger which is based on the loss rather than the gain
3) Reference points ndash Reference points tell the visitor where they are
and how long will it take them to complete the process It makes the action
intuitive and encourages conversion
In the next few pages we will see how to place these conversion catalysts at
the right place to maximize their effect
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Adding trust elements
Trust elements like reviews testimonials awards client lists press
coverage lists assure the visitor that he is not alone in choosing your
product Make sure to keep them near your call to action
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Adding urgency
Limited Offer Till stocks last Limited Time are some examples of urgency
Check below how the warning sign and clock adds to the urgency to
message
Pain from loss gt Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeovercom
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Point of reference
While doing a complex task people like to know where they are More
importantly how much work is still left Making it clear and intuitive avoids
frustration and helps a visitor to stick increasing the chances of conversion
An example of point of reference in Survey
Multi step form indicating 3 steps
Source -httpbabichbizprogress-trackers-in-ux-design
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Finally we are done This is the most I have ever written on a stretch It
was tiring but all the hours of hard work would be worth it if this book
helps you narrow the bridge between marketing and design and see
them as inseparable means to the same end ndash creating content that
attracts engages and converts
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
Please share this e-book if you liked it It inspires us to create
more content like this
TRY IT FREE
Land More Leads Close More DealsCustomer Acquisition Platform For Your Business
