When it comes to online selling, there is a big overlap between Design and Marketing. One fails without the other. In this ebook, I will tell you how to get better at Marketing using simple Design hacks.

2. 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 wasn’t 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 can’t separate design from it. One fails
without the other. In this book, we’ll talk about exactly how connected they
are. You’ll be surprised to know how much.
Rajat Arora
Designer and Marketer at LeadSquared
ABOUT THE BOOK

3. What’s 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

4. THE 8MANGO STORY
My friend Dhiraj is an artist – 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.
It’s 2016, and now he wants to sell some of his creations. Given the craft he
possesses and the beautiful things he makes, you’d think it won’t 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.
“It is fantastic” “great work” “genius” were the responses he got. All likes, all
appreciations, but very few sales.
www.8mango.com

5. 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 wasn’t targeting the right people? Trust me he was - Art
collectors, CEO’s 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 wasn’t 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.

6. 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 – 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?

7. Mona Lisa iPhone
UNDERSTANDING THE DIFFERENCE
Mona Lisa wasn’t 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.

8. Design is not just aesthetics. It helps
marketing achieve its goals by:

9. Interrupt the Autopilot mode

10. 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.

11. with

12. Signals that redirect attention

13. Realty Marketing E-book
Smart marketing guide for real estate
businesses. Download it free!
VISUAL CUES
Visual cue is a signal to direct attention to something important. We can’t
help but pay attention to an arrow or a pointed finger
A B C
The arrow (visual cue) makes us notice B before anything else
Try this – 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. Let’s take the example of this ad:
Realty Marketing E-book
Smart marketing guide for real estate
businesses. Download it free!
The down arrow instantly
catches attention and gives a
hint of the download

14. 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

15. Examples of visual cues used on banner ads

16. Standing out from the surrounding

17. 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

18. Contrast with color Contrast with size
Contrast with shape Contrast with position
Types of contrast

19. 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

20. 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

21. Join Free Webinar
Starting with
Google Adwords
Presenter - Salil Panikkaveettil
Co-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 “Starting with Google AdWords” 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 Panikkaveettil
Co-Founder, AdNabu
Book your seat

22. 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

23. 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
5,000 CONTACTS
5 USERS
Inbuilt CRM
Free training & onboarding
LeadSquared Lite
$120 / year
5,000 CONTACTS
5 USERS
Inbuilt CRM
Free training & 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

24. Example of shape contrast
The hand drawn testimonial bubble breaks the shape pattern and draws
attention to itself
A rectangular testimonial bubble

25. 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

26. 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

27. Create an emotional connection

28. 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 Nahai’s book “webs of influence”
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 – A simple use of a human image can have a
significant effect on how the visitors feel and act on the web.
Stacy

29. In the first ad, a person’s image grabs more attention and looks more
believable than the second one
LeadSquared remarketing banners

30. Similarly, the second popup gets more attention than the first because of
the person’s face
LeadSquared Support Portal pop-up

31. Enclosed within an object

32. 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

33. Examples of encapsulation in design
The text in the white area gets highlighted
The icons encapsulated within the hands catch attention

34. In an otherwise static surrounding

35. 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

36. Animation may not render here
Moving images breaking the autopilot mode
Animation may not render here

37. Sex, hunger and safety

38. 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.

39. Which side appeals to you more?

40. BONUS TIP
Break the rules
Always remember that your motive is to get attention, not appreciation for
beauty, look and feel. Don’t fall into the trap of making everything
aesthetically balanced. It will get ignored because that’s 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 content’s job to keep the visitor hooked and continue the
journey. In the next part we’ll discuss how design helps in that aspect.

41. Communicate clearly

42. 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
can’t 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 can’t stay on the page anymore. You completely forget about that
subject line which looked so great a few seconds ago.

43. All the hard work of crafting an attention-grabbing subject line was undone
by poor design (unclear communication). I won’t 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 shouldn’t 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.

44. with

45. Ease of reading

46. 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

47. 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 – Increase
your traffic to lead conversion with mobile
responsive landing pages.
Land more leads,
Close more deals
Lobster font
Fonts
There are a millions of fonts available for free which makes a very avoidable
mistake very common – 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
Elegant
Strong Funny

48. 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, 40,000 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 -http://www.outbrain.com/blog
Typography

49. 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 :1.5
The text looks cramped for space and
makes it difficult to read
Line spacing of 1.5 makes the content
much easier to read

50. Email design with default 1 spacing
Email design with 1.5 spacing
Which one is easier to read?

51. 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

52. Perfectly aligned to the left
Not aligned completely to the left, making it difficult to read
LeadSquared’s webinar email template

53. Background – 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

54. Which one is less stressful to read?

55. The breathing space

56. 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 ‘nothing’ but it makes other things pretty.
A
A
With white space Without white space
LeadSquared’s ad creative
Good use of white space Bad use of white space

57. 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

58. Visual content

59. ILLUSTRATIONS
Illustrations help break the wall of words & make the content easily
understandable and pleasing to the eyes. A visual is processed 60,000
times faster than the words because we think in visuals, not in words.
An example from our current website
• Google Adwords
• Website
• Phone
• Online Chat
• Social Media
• Just Dial
• Shopify
• WordPress
• GoToWebinar
• Super Receptionist
• Shiksha
• And more…
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.

60. Illustration example : LeadSquared landing page
The illustration makes the page easy to scan and understand

61. Arrangement of objects

62. 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 someone’s drawing room
Where would you prefer to stay longer?
In our already chaotic life, we don’t 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 –
you have already caught the visitors’ attention, now you would use segmentation
to make them comfortable enough to stick around.

63. Segmenting information with contrast

64. Segmenting information with encapsulation
Segmenting information with alignment

65. The driving force

66. What if a customer sees an attractive hoarding, enters the restaurant, checks
the menu, but doesn’t order food? Or sees a great movie trailer, reads all the
good reviews but still isn’t motivated enough to watch it.
You need a force that drives the user to take that final action – 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 “Uncle Sam” used by the U.S. 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 copywriter’s 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 we’ll see how design can help motivate action.

67. with

68. Call to action

69. 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

70. 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.

71. 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).

72. 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

73. 3) Use Intuitive colors
Colors deliver information really quickly . They can also change the meaning
of the message, influencing the buyer’s 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 McDonald's
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.
McDonald's banner ad

74. Colors have been used in design for centuries to add meaning. You should
also use them properly to have the right kind of affect
RED
Active, exciting, urgent, raises heart beat and hunger
GREEN
Balance, nature, growth. Very calm and balanced color
Blue
Trust, control, security. Most trusted and loved color in the world
Orange
Instinct, warmth, optimism. Most popular color for calls to action
Yellow
Youthful, warmth, friendly, kind
Black
Authority, sleek, powerful. Indicates luxury and style
Pink
Love, romantic, feminine.

75. Call to action

76. 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

77. Too many calls to action resulting in confusion
Single focused call to action
LeadSquared homepage

78. Show how it’s done

79. SHOW HOW IT’S DONE
Showing something in action itself promotes action. The longer the visitor
watches your product/service 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 “no” with conviction, I told him that the quality
didn’t 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
couldn’t 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.

80. Overview video on the landing page
Example of product demonstrations
Product video on the support portal

81. to speed up conversion action

82. 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 – 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 – 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 – 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.

83. 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.

84. 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 > Pleasure from Gain
See how Quicksprout uses it
Another example from landingpagemakeover.com

85. 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 -http://babich.biz/progress-trackers-in-ux-design

86. 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 – creating content that
attracts, engages and converts.

87. 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 Deals
Customer Acquisition Platform ForYour Business