10
14 Comments

What are the UX principles behind good landing pages?

I want to create a great landing page to display my product. What are the general design principles for going about this? What font? What spacing? Etc.

on January 10, 2020
  1. 4

    I saw a great Twitter thread about landing pages this morning:

    There are a lot of great tips here with visual examples that will help guide your own design!

    1. 1

      Yep this is great, thanks!

  2. 4

    IHMO, you should first start from your target audience and problem you want to resolve by offer your product/services and prepare text content based on that.

    I would answer on questions:

    1. What is my value proposition which i want to show my vistors?
    2. What is the problem we resolve?
    3. What kind informations i would like to show (split them by a sections)

    Font depends about offer. If you do more e-commerce or business for Lawyers than i would suggest use more Serif fonts instead of Sans Serif.

    From Serif fonts i can recommended you: Sentinel Screen Serif, EB Garamond, Adobe Garamond Pro
    From Sans-Serif my fonts for 2020: Muli, Rubik, Heebo, Circular, Roboto (still)

    From colors you can use:
    https://search.muz.li/
    https://www.eggradients.com/random-color-palette-generator

    You need to think like a process:

    • From where user came on my site?
    • What then want to see to realize their dreams?
    • Always have any CTA for specific solution.
    • Avoid situtatuion where user is wuthout nothing on the end
    • Does user has enough information to finalize what he wants?

    I hope this help on beggining

    1. 1

      This is great advice. Working backward can help you find what your messaging should be.

    2. 1

      Great, thanks a ton

  3. 1

    I'm actually redesigning my landing page also. What I have been keeping in mind is my value proposition, the problem I am solving, and what I want the user to do.

    My friend suggested I write a press release about the product and use that to help figure out the value proposition and what information I need to be sharing.

    I started in Sketch making ugly blocks that represented the message I wanted to say. Just a gray box with some text and more text describing it.

    Once I had the general flow I was able to make it look a bit nicer. I took inspiration from other sources and followed pages that made an impact on me. I explore webpages quickly. The ones that captivate me the most, are the ones that are simple and clear. They have product demos and nicely illustrate the product. So that's what I wanted to follow.

    My main flow is to describe the product in an easy captivating way with the title. Show a quick teaser of the product. Move onto the main value prop. Try and hook the user in with that. If they need more. Then I have two more value props. After the third having social proof can assure the user they're in good hands. Then a call to action if they want to be a part of the community with a free offer for signing up.

    Here is a PDF of what I worked on today. Id love to talk more. Follow me on twitter if you want to talk :)

    https://drive.google.com/file/d/1IO98dI7QaOk1FCRsU1ZYcHFIuxqYv-dg/view

  4. 1

    Hey ! I suggest that you zero in on the flow of the content before you start the design.
    Since your landing page is for a product the flow of content might be something like this

    a)What the product is & what it solves
    b)Factors to build trust like, user testimonials & mentions of other websites that have featured your product.
    c)Highlighting your product features
    d) And an e-mail subscription if required.

    With regard to design however check this out, it has some great design landing page templates.
    https://exponentwptheme.com/mobile-app/
    https://oshinewptheme.com/

      1. 1

        Another thing I missed out - make sure your design works responsively so that it works smoothly on a mobile screen also.

  5. 1

    It depends on what the page is about. Aside from the standard good design practices you may have things like:

    1. Clear value prop
    2. Guides user to your desired action
    3. Focused - no distractions
    4. Passes "so what?"
    5. Solves a real problem
    6. Easy to sign up
    7. Prioritizes benefits over features
    8. Plenty of social proof

    There's so much to this that I made an extension with 100+ items: https://www.producthunt.com/posts/conversion-checklist

    1. 1

      Awesome -- thanks!

  6. 3

    This comment was deleted 6 years ago