• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to Design a Great Landing Page
 

How to Design a Great Landing Page

on

  • 2,142 views

A class on the content and design of effective landing pages, by @denykhoung and @hv23 of @trydesignlab. http://www.trydesignlab.com

A class on the content and design of effective landing pages, by @denykhoung and @hv23 of @trydesignlab. http://www.trydesignlab.com

Statistics

Views

Total Views
2,142
Views on SlideShare
816
Embed Views
1,326

Actions

Likes
1
Downloads
7
Comments
0

10 Embeds 1,326

http://blog.trydesignlab.com 765
http://assets.txmblr.com 468
http://trydesignlab.tumblr.com 46
http://yandex.ru 11
https://twitter.com 10
http://www.google.com 9
http://search.yahoo.com 8
http://www.soso.com 5
http://www.bing.com 3
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How to Design a Great Landing Page How to Design a Great Landing Page Presentation Transcript

    • 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? Wednesday, July 17, 13
    • Let’s jump right in... Wednesday, July 17, 13
    • 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
    • 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
    • Content Wednesday, July 17, 13
    • 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
    • • 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
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • • 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
    • Wednesday, July 17, 13
    • • 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
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • • 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
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Design is a plan for arranging elements in such a way as best to accomplish a particular purpose. — Charles Eames Wednesday, July 17, 13
    • Layout Wednesday, July 17, 13
    • CONTRAST Wednesday, July 17, 13
    • 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
    • • Size • Shape • Color • Texture • Orientation • Position Types of Contrast Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • • Size • Shape • Color • Texture • Orientation • Position Types of Contrast Wednesday, July 17, 13
    • • 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
    • HIERARCHY Wednesday, July 17, 13
    • 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 Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • • Creates a sense of order • Eases viewers into the composition and leads them around • Communicates with clarity Effective Hierarchy Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • SPACE Wednesday, July 17, 13
    • 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
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • 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
    • Source: http://oykun.com/journal/white-space/ Wednesday, July 17, 13
    • • Creates a sense of order • Helps with scanning • Reduces cognitive load Effective Use of Space Wednesday, July 17, 13
    • Wednesday, July 17, 13
    • Typography Wednesday, July 17, 13
    • 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
    • Wednesday, July 17, 13
    • 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
    • IMPACT COOPER ROSEWOOD Avenir Rockwell Baskerville Type Personality Typefaces (or fonts) can convey a sense of personality. Wednesday, July 17, 13
    • • 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
    • Visual Design | @denykhoung Wednesday, July 17, 13
    • • Utilize headings Helps “skimmers” get some info. • Watch your line-lengths Between 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 text Set it to gray, ie. #333333. Black is too jarring. Quick Tips for Body Text Wednesday, July 17, 13
    • Visual Design | @denykhoung Wednesday, July 17, 13
    • Visual Design | @denykhoung Color Wednesday, July 17, 13
    • 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
    • Meanings: Cool vs. Warm Warm Colors Energizing Passionate Positive Cool Colors Calming Relaxing Serene Wednesday, July 17, 13
    • Meanings & Associations Blue Sky Sea Depth Stability Trust Masculine Tranquil Green Nature Growth Fertility Freshness Healing Safety Money Violet Royalty Power Nobility Wealth Ambition Dignified 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 Wednesday, July 17, 13
    • Color Branding Wednesday, July 17, 13
    • Color Branding Wednesday, July 17, 13
    • 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
    • Visual Design | @denykhoung Wednesday, July 17, 13
    • Showcase Wednesday, July 17, 13
    • Questions? http://trydesignlab.com?register/invite_code=landing Wednesday, July 17, 13