How to Design a Great Landing Page

Landing Page Design
July 2013
Wednesday, July 17, 13

Co-founders of Designlab, the Codecademy for design.
We teach design principles to people to help them create
web and mobile products.
Who are we?

Let’s jump right in...

You can do a ton of legwork in getting visitors to your site:
generating word of mouth, buying Adwords, creating the
next viral Twitter campaign, etc.
A landing page is your chance to make a
great ﬁrst impression.
But without a landing page that informs and excites users -
your work is pointless.

Similarly, a good landing page couples clear, compelling
content with easy-to-understand design.
Any great product combines design and
content in a meaningful way.
Your content and design should allow the user to
understand what your product does clearly, at ﬁrst glance.
Honor the key principle for your users: “Don’t make me
think!”

Content

A great landing page typically has the following 4 elements:
Anatomy of a landing page
1. Headlines + primary copy (what is this?)
2. Support copy - product highlights (why should I care?)
3. Call-to-action (how can I use this?)
4. Social proof (who else is using this?)

• On average, you have eight seconds to grab a user’s
attention
• Use a headline that’s clear, to-the-point, and catchy
• Don’t be vague or keep the user guessing about what your
product actually oﬀers
• Get users excited about what your website does without
being over-the-top - sell your product’s biggest beneﬁt and
use your discretion
Headline

• Provide details about your product that answer the question
“what will this product do for me?”
• Use either 3-5 bullets, OR a short description paragraph
• Simplify, simplify, simplify - be as concise as possible while
selling your product’s beneﬁts
• Seriously, simplify
Product Beneﬁts
Your headline got the user interested in reading more -
now what?

• Give the user one clear action they can do on the page -
sign up, leave their email, download, etc. Usually a verb.
• More than one objective confuses the user and reduces
conversion rate - don’t do it.
• The call-to-action is usually a button/form that stands out
from the rest of the page and is obvious - we’ll talk about
how to use color, placement, proximity, etc.
Call-to-action
Okay, I’m interested - what do I do now?

• User testimonials, especially when you can use photos.
People trust faces!
• Press badges - e.g. “As seen on TechCrunch”
• Social media badges - e.g. “4000 people like us on
Facebook”
Social Proof
Some users will still be on the fence - indicators of your
product’s credibility really help here. Some examples:
The goal is to build trust and credibility with your product -
reduce the user’s anxiety about interacting with a new,
unknown web site.

Design is a plan for arranging
elements in such a way as best to
accomplish a particular purpose.
— Charles Eames

CONTRAST

Contrast creates interest. It is deﬁned as "the juxtaposition
of dissimilar elements" — the state of being strikingly
diﬀerent from something else.
Visually, contrast helps us see, recognize, and distinguish
forms and objects.
Contrast

• Size
• Shape
• Color
• Texture
• Orientation
• Position
Types of Contrast

• Creates visual interest
• Distinguishes one element from another, allowing
for easy recognition
Eﬀective Use of Contrast
Beginner tip: make your use of contrast obvious

HIERARCHY

The arrangement of items in which the items are
represented as being "above," "below," or "at the
same level as" one another.
The “levels” are the order in which elements are
presented to the user and usually related to level
of importance.
Hierarchy

• Creates a sense of order
• Eases viewers into the composition and leads
them around
• Communicates with clarity
Eﬀective Hierarchy

Elements which are near to each other—in close proximity
—are grouped together.
Use of space is key to controlling the proximity of
elements.
• Related items should be grouped together.
• Vice versa, items that are not related should not be
placed together.
Proximity

You may have heard designers say, give that some
breathing room—they’re asking for white space.
White space is the empty space surrounding an element (it
is not necessarily white).
Allotting more space to elements creates contrast between
the element and the space surrounding it.
Space: White Space

Source: http://oykun.com/journal/white-space/

• Creates a sense of order
• Helps with scanning
• Reduces cognitive load
Eﬀective Use of Space

Typography

Typography is the art and technique of arranging
type in order to make language visible.
It is arguably the most important aspect in web
design…
Typography

Serif vs. Sans-Serif
• Viewed as modern
• Commonly used for
headings
• Most popular system font:
Helvetica & Arial
• Viewed as traditional
• Serifs increase legibility
• Most popular system
font: Times New Roman
& Georgia

IMPACT
COOPER
ROSEWOOD
Avenir
Rockwell
Baskerville
Type Personality
Typefaces (or fonts) can convey a sense of personality.

• Use them for headings, where they will create the
greatest impact.
• Consider the personality of your site or app and choose
accordingly.
• Using more than one or two font families can produce a
ransom-note eﬀect and should be avoided.
• When in doubt, go for legibility.
Quick Tips for “Unique” Fonts

Visual Design | @denykhoung

• Utilize headings
Helps “skimmers” get some info.
• Watch your line-lengths
Between 10-12 words per line is best. Long line lengths make it
diﬃcult to ﬁnd the start of the next line.
• Set your line-height (distance between lines)
For body text, 150% of the font size is good.
• Never use black text
Set it to gray, ie. #333333. Black is too jarring.
Quick Tips for Body Text

Visual Design | @denykhoung
Color

Color is subjective
• Differs by personal taste
• Differs by personal experiences
• Differs by culture
Color is powerful
• Evokes emotions & reactions
• Allows for instant visual recognition
Color

Meanings: Cool vs. Warm
Warm Colors
Energizing
Passionate
Positive
Cool Colors
Calming
Relaxing
Serene

Meanings & Associations
Blue
Sky
Sea
Depth
Stability
Trust
Masculine
Tranquil
Green
Nature
Growth
Fertility
Freshness
Healing
Safety
Money
Violet
Royalty
Power
Nobility
Wealth
Ambition
Digniﬁed
Mysterious
Red
Intense
Fire
Energy
War
Danger
Love
Passion
Orange
Warm
Stimulating
Enthusiasm
Happiness
Autumn
Creative
Success
Yellow
Sunshine
Joy
Intellect
Energy
Attention
Bright
Friendly
Black: Mysterious, Elegant, Evil
White: Purity, Cleanliness, Virtue
Gray: Moody, Conservative, Formality

Color Branding

Color Selection
• Match your color choice to the associations you want for
your product
• Consider your audience and your competition
• Flexibility (yellow is hard to work with)
Color Use
• Think contrast (especially in regards to the CTA)
• Indicate functionality
• Use sparingly with neutrals
Quick Tips on Color

Showcase

Questions?
http://trydesignlab.com?register/invite_code=landing

How to Design a Great Landing Page

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

How to Design a Great Landing Page