How to Design a Great Landing Page
-
Upload
harish-venkatesan -
Category
Design
-
view
2.903 -
download
25
description
Transcript of How to Design a Great Landing Page
![Page 1: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/1.jpg)
Landing Page Design
July 2013
Wednesday, July 17, 13
![Page 2: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/2.jpg)
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?
Wednesday, July 17, 13
![Page 3: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/3.jpg)
Let’s jump right in...
Wednesday, July 17, 13
![Page 4: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/4.jpg)
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 first impression.
But without a landing page that informs and excites users - your work is pointless.
Wednesday, July 17, 13
![Page 5: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/5.jpg)
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 first glance.
Honor the key principle for your users: “Don’t make me think!”
Wednesday, July 17, 13
![Page 6: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/6.jpg)
Content
Wednesday, July 17, 13
![Page 7: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/7.jpg)
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?)
Wednesday, July 17, 13
![Page 8: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/8.jpg)
• 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 offers
• Get users excited about what your website does without being over-the-top - sell your product’s biggest benefit and use your discretion
Headline
Wednesday, July 17, 13
![Page 9: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/9.jpg)
Wednesday, July 17, 13
![Page 10: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/10.jpg)
Wednesday, July 17, 13
![Page 11: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/11.jpg)
• 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 benefits
• Seriously, simplify
Product Benefits
Your headline got the user interested in reading more - now what?
Wednesday, July 17, 13
![Page 12: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/12.jpg)
Wednesday, July 17, 13
![Page 13: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/13.jpg)
• 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?
Wednesday, July 17, 13
![Page 14: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/14.jpg)
Wednesday, July 17, 13
![Page 15: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/15.jpg)
Wednesday, July 17, 13
![Page 16: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/16.jpg)
• 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.
Wednesday, July 17, 13
![Page 17: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/17.jpg)
Wednesday, July 17, 13
![Page 18: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/18.jpg)
Wednesday, July 17, 13
![Page 19: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/19.jpg)
Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.
— Charles Eames
Wednesday, July 17, 13
![Page 20: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/20.jpg)
Layout
Wednesday, July 17, 13
![Page 21: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/21.jpg)
CONTRAST
Wednesday, July 17, 13
![Page 22: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/22.jpg)
Contrast creates interest. It is defined as "the juxtaposition of dissimilar elements" — the state of being strikingly different from something else.
Visually, contrast helps us see, recognize, and distinguish forms and objects.
Contrast
Wednesday, July 17, 13
![Page 23: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/23.jpg)
• Size
• Shape
• Color• Texture
• Orientation
• Position
Types of Contrast
Wednesday, July 17, 13
![Page 24: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/24.jpg)
Wednesday, July 17, 13
![Page 25: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/25.jpg)
Wednesday, July 17, 13
![Page 26: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/26.jpg)
Wednesday, July 17, 13
![Page 27: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/27.jpg)
Wednesday, July 17, 13
![Page 28: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/28.jpg)
Wednesday, July 17, 13
![Page 29: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/29.jpg)
Wednesday, July 17, 13
![Page 30: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/30.jpg)
• Size
• Shape
• Color• Texture
• Orientation
• Position
Types of Contrast
Wednesday, July 17, 13
![Page 31: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/31.jpg)
• Creates visual interest
• Distinguishes one element from another, allowing for easy recognition
Effective Use of Contrast
Beginner tip: make your use of contrast obvious
Wednesday, July 17, 13
![Page 32: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/32.jpg)
HIERARCHY
Wednesday, July 17, 13
![Page 33: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/33.jpg)
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 levelof importance.
Hierarchy
Wednesday, July 17, 13
![Page 34: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/34.jpg)
Wednesday, July 17, 13
![Page 35: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/35.jpg)
Wednesday, July 17, 13
![Page 36: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/36.jpg)
Wednesday, July 17, 13
![Page 37: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/37.jpg)
Wednesday, July 17, 13
![Page 38: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/38.jpg)
• Creates a sense of order
• Eases viewers into the composition and leads them around
• Communicates with clarity
Effective Hierarchy
Wednesday, July 17, 13
![Page 39: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/39.jpg)
Wednesday, July 17, 13
![Page 40: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/40.jpg)
Wednesday, July 17, 13
![Page 41: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/41.jpg)
Wednesday, July 17, 13
![Page 42: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/42.jpg)
SPACE
Wednesday, July 17, 13
![Page 43: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/43.jpg)
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
Wednesday, July 17, 13
![Page 44: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/44.jpg)
Wednesday, July 17, 13
![Page 45: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/45.jpg)
Wednesday, July 17, 13
![Page 46: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/46.jpg)
Wednesday, July 17, 13
![Page 47: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/47.jpg)
Wednesday, July 17, 13
![Page 48: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/48.jpg)
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
Wednesday, July 17, 13
![Page 49: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/49.jpg)
Source: http://oykun.com/journal/white-space/
Wednesday, July 17, 13
![Page 50: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/50.jpg)
• Creates a sense of order
• Helps with scanning
• Reduces cognitive load
Effective Use of Space
Wednesday, July 17, 13
![Page 51: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/51.jpg)
Wednesday, July 17, 13
![Page 52: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/52.jpg)
Typography
Wednesday, July 17, 13
![Page 53: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/53.jpg)
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
Wednesday, July 17, 13
![Page 54: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/54.jpg)
Wednesday, July 17, 13
![Page 55: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/55.jpg)
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
Wednesday, July 17, 13
![Page 56: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/56.jpg)
IMPACT
COOPER
ROSEWOOD
Avenir
Rockwell
Baskerville
Type Personality
Typefaces (or fonts) can convey a sense of personality.
Wednesday, July 17, 13
![Page 57: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/57.jpg)
• 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 effect and should be avoided.
• When in doubt, go for legibility.
Quick Tips for “Unique” Fonts
Wednesday, July 17, 13
![Page 58: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/58.jpg)
Visual Design | @denykhoung
Wednesday, July 17, 13
![Page 59: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/59.jpg)
• Utilize headingsHelps “skimmers” get some info.
• Watch your line-lengthsBetween 10-12 words per line is best. Long line lengths make it difficult to find 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 textSet it to gray, ie. #333333. Black is too jarring.
Quick Tips for Body Text
Wednesday, July 17, 13
![Page 60: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/60.jpg)
Visual Design | @denykhoung
Wednesday, July 17, 13
![Page 61: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/61.jpg)
Visual Design | @denykhoung
Color
Wednesday, July 17, 13
![Page 62: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/62.jpg)
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
Wednesday, July 17, 13
![Page 63: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/63.jpg)
Meanings: Cool vs. Warm
Warm ColorsEnergizing
Passionate
Positive
Cool ColorsCalming
Relaxing
Serene
Wednesday, July 17, 13
![Page 64: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/64.jpg)
Meanings & Associations
BlueSky
Sea
Depth
Stability
Trust
Masculine
Tranquil
GreenNature
Growth
Fertility
Freshness
Healing
Safety
Money
VioletRoyalty
Power
Nobility
Wealth
Ambition
Dignified
Mysterious
RedIntense
Fire
Energy
War
Danger
Love
Passion
OrangeWarm
Stimulating
Enthusiasm
Happiness
Autumn
Creative
Success
YellowSunshine
Joy
Intellect
Energy
Attention
Bright
Friendly
Black: Mysterious, Elegant, Evil
White: Purity, Cleanliness, Virtue
Gray: Moody, Conservative, Formality
Wednesday, July 17, 13
![Page 65: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/65.jpg)
Color Branding
Wednesday, July 17, 13
![Page 66: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/66.jpg)
Color Branding
Wednesday, July 17, 13
![Page 67: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/67.jpg)
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
Wednesday, July 17, 13
![Page 68: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/68.jpg)
Visual Design | @denykhoung
Wednesday, July 17, 13
![Page 69: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/69.jpg)
Showcase
Wednesday, July 17, 13
![Page 70: How to Design a Great Landing Page](https://reader033.fdocuments.net/reader033/viewer/2022050804/554db852b4c905c2488b4661/html5/thumbnails/70.jpg)
Questions?
http://trydesignlab.com?register/invite_code=landing
Wednesday, July 17, 13