Design Hack for Marketers



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 tosay 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

What’s Inside

The 8mango story

What is design?

Difference between art and design

Importance of design in marketing


Visual cues


Human faces



Food, sex and hunger



White space




Visible call to action

Single call to action


Conversion catalysts


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.

[*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 artlovers.

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


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 oran 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. *


Mona Lisa


Mona Lisa wasn’t done with a specific purpose. Like most art, it was an

expression and is interpreted differently by differentpeople.

Whereas iPhone is a design because it has a purpose and it is interpretedand understood alike by most users.

Design is not just aesthetics. It helps

marketing achieve its goals by:

Interrupt the Autopilot mode


Interrupting the Autopilot mode

Have you ever noticed that as you drive through your daily route, you makeit 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.

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 *


In the following pages I will tell you how to

break the pattern of the habitual and get

noticed with the help of design.


Signals that redirect attention


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




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:

_The down arrow instantly _

Realty Marketing E-book

_catches attention and gives a _

Smart marketing guide for real estate

businesses. Download it free!

hint of the download

Realty Marketing E-book

Smart marketing guide for real estate

businesses. Download it free!

Example of a simple form

A form without a pointer

_A header with the downward pointer _

Try it free for 15 days

_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


Contrast is the state of being strikingly different from the surroundings.




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

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


Types of contrast

Contrast with color

Contrast with size

Contrast with shape

Contrast with position

Contrast with color

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

It is important to use proper contrasting colors (opposites on a color wheel) or else it becomes annoying to the eyes



[*Which one gets your attention? *]

This is a standard YouTube page where we retarget our prospects

Download E-book

The grey button on the ad gets lost, because of the lack of contrast

Download E-book



The purple color on the button gives high contrast which catches the eye

Contrast with size

Join Free Webinar

Join Free Webinar

Starting with

Starting with GoogleAdwords

Google Adwords

Presenter – Salil Panikkaveettil

Presenter – Salil Panikkaveettil

Co-Founder, AdNabu

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


Bigger font and weight has added hierarchy of importance in the otherwise

random design (right) and the eye naturally follows the movement from bigto small.

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

Contrast with shape means getting attention with shape when compared to

other things on the page.




The pentagonal shape is used to break the pattern and catchattention

Shape contrast used on the pricing page

LeadSquared Lite

LeadSquared Lite

Most popular

[*$120 *]

[*$120 *]

/ year

/ year

[*5,000 *]CONTACTS

[*5,000 *]CONTACTS



Inbuilt CRM

Inbuilt CRM

Free training & onboarding

Free training & onboarding

The triangle at the top left corner catches the eye due to its shape

Example of shape contrast

A rectangular testimonial bubble

The hand drawn testimonial bubble breaks the shape pattern and draws

attention to itself

Contrast with position

Contrast with position means getting attention with the physical position of an object when compared to other things on the page.








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

Get it now

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


Human faces connect emotionally with the audience quicker than text or a

generic icon




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

Taking a short story from Nathalie Nahai’s book “webs of influence”

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.

LeadSquared remarketing banners

[_In the first ad, a person’s image grabs more attention and looks more _]

believable than the second one

LeadSquared Support Portal pop-up

Similarly, the second popup gets more attention than the first because of the person’s face

Enclosed within an object


Encapsulation is when you place an object within a shape to highlight its





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


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

Moving images breaking the autopilot mode

Animation may not render here

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? *]


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.

Communicate clearly


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

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.

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.


Ease of reading


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


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.

[*Whichone of these is easier to read? *]

Lead Capture Automation

[*Responsive Landing Pages *]– Increase

your traffic to lead conversion with mobile

responsive landing pages.

Arial font

Lobster font

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 moodof

the visitor.

E legant





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

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


Line height :1

The text looks cramped for space and

makes it difficult to read

Hi, I am Rajat. I hope you are

enjoying this book and learning

something that you can apply

to your marketing to get good


Line height :1.5

Line spacing of 1.5 makes the content

much easier to read

[*Which one is easier to read? *]

Email design with default 1 spacing

Email design with 1.5 spacing


Alignment is arranging objects in correct relative positions. When the

elements are aligned on a page, you get a stronger cohesive designwhich

is much easier to read and looks attractive.







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

LeadSquared’s webinar email template

Perfectly aligned to the left

Not aligned completely to the left, making it difficult to read

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.



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



With white space

Without white space

LeadSquared’s 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


Visual content


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

Illustration with logos

makes it very easy and fast

to understand

LeadSquared captures leads from

A huge list makes it look like

a very hard task, requiring

• Google Adwords

too much effort.

• Website

• Phone

• Online Chat

• Social Media

• Just Dial

• Shopify

• WordPress

• GoToWebinar

• Super Receptionist

• Shiksha

• And more…

Illustration example : LeadSquared landing page

The illustration makes the page easy to scan and understand

Arrangement of objects


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.

Segmenting information with contrast

Segmenting information with encapsulation

Segmenting information with alignment

The driving force


The driving force

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?

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


In the remaining part of the book we’ll see how design can help motivate action.


Call to action


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

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

Download E-book

A link makes it looks less

compelling to click

Download E-book

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 nextstep

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

McDonald’s banner ad

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

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.

Colors have been used in design for centuries to add meaning. Youshould also use them properly to have the right kind of affect


Active, exciting, urgent, raises heart beat and hunger


Balance, nature, growth. Very calm and balanced color


Trust, control, security. Most trusted and loved color in the world


Instinct, warmth, optimism. Most popular color for calls to action


Youthful, warmth, friendly, kind


Authority, sleek, powerful. Indicates luxury and style


Love, romantic, feminine.

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.




Multiple choices create anxiety


Single choice makes it easy to act upon

LeadSquared homepage

Too many calls to action resulting in confusion

Single focused call to action

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.

Example of product demonstrations

Overview video on the landing page

Product video on the support portal

to speed up conversionaction


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 sayin

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

[*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 catalystsat 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


Pain from loss > Pleasure from Gain

See how Quicksprout uses it

Another example from landingpagemakeover.com

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

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.

Please share this e-book if you liked it. It inspires us to create

more content like this

Land More Leads, Close More Deals

Customer Acquisition Platform For YourBusiness


Design Hack for Marketers

ABOUT THE BOOK After being a designer for the 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 aMarketer? It wasn’t long before I realized that in online selling, there is a big overlap between the two. Both are focused towards the 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 LeadSquared (www.leadsquared.com)

  • Author: LeadSquared
  • Published: 2017-06-20 09:05:13
  • Words: 4900
Design Hack for Marketers Design Hack for Marketers