21
13 Comments

The 10 minute No-Nonsense guide on building the perfect Landing Page

Original article here: https://medium.com/@btahir/the-10-minute-no-nonsense-guide-on-building-the-perfect-landing-page-bfb34a5f6006

The Landing Page is like the chocolate flavor of online projects. Sooner or later you’re gonna need it. While you probably shouldn’t spend months building it out, it is an important piece of the puzzle and you should make sure it is optimized for your goal (subscriptions, sales etc).

I decided to make a quick guide on what goes into making an optimized landing page. By the end of this article you will have a good high level idea of what pieces you need to incorporate in your landing page.

The easiest way to approach the Landing Page is to break it into small digestible components (you might literally want to do that if you’re coding in React haha).

The Hero Section

The first thing your users will see when they land on your website is the Hero. This is the big headline + accompanying image you see on most landing pages. The objective of the Hero is to a) capture the attention of the user and b) explain what exactly your product or service does.

You want to be succinct here. For example, Notion has a headline of All-in-one workplace. The sub heading further explains this: One tool for your whole team. Write, plan, and get organized. In a few words you have an idea of what they are about.

You also will typically have a Call-To-Action button or buttons next to your headline so users can immediately convert. This can be signing up or subscribing for your product.

Social Proof

You often see some social proof supplementing your hero. This can come later on in the form of customer reviews/testimonials as well (talked about later) so it can be considered optional but if you have companies already using your product this is a good place to add their logos to signal trustworthiness.

The How-It-Works Section

The how it works section quickly gives a brief overview of how your product achieves what it claims in the Hero. Again — you want to keep this short and simple. You can have a more detailed how to guide in other sections of your website.

It’s very common to show this in terms of Steps with some visuals. For example, Ubers would be Step 1) Request Ride on app, Step 2) Get in car and Step 3) Get off at your destination.

The Benefits Section

This is probably the biggest section in terms of space. You usually see the classic side by side layout of description-image, image-description (on desktop). The objective is to hammer home the benefits of your product. Note: this is different from the how it works section. You should focus on the pain you are solving and the value you bring to the customer.

A standard way to go about it is to talk about a pain in the first part (Are you tired of waiting for a cab?) and then hit them with the value of your product (now you can request a ride in a matter of minutes using your smartphone). The images are a good way to supplement the emotion of the benefit (sad, frustrated, happy, winning etc).

Features

Depending on your product you might not need a features section if you feel the how it works + benefits sections have gotten your points across. But it is a good way to highlight product attributes.

It’s also a good way to highlight supplementary product features and get in the obligatory buzzwords (supercharge your workflow, multi-disciplinary, fancy company integration etc).

Customer Testimonials

Alright — you’re on the home stretch now. You’ve gotten your points across about why your product is awesome. Now you just need to tackle that last nagging doubt that customers will have. Basically — the question boils down to, ‘How can I trust you?’ And the best way to answer that is by showing existing customer testimonials that can vouch for you/your product.

The Final Call-To-Action

Congratulations! You’ve done all you can. From catching their attention, to delivering your message, to removing any doubts about your product. Now all that is left is to once again ask them to buy/subscribe/whatever action you want them to take. This can be as simple as showing them a button or email capture form.

Other Things

Order

You don’t necessarily have to follow this order I have laid out. A lot of times features are shown before benefits or testimonials are positioned more towards the top. It really depends on your messaging. My advice is to test out different variations and see what feels more natural.

Header & Footer

I didn’t include these as part of the landing page because they are usually part of every page of your website and there is nothing inherently landing page related about them. You can play around with them, especially the header, to add to the visual aesthetic of your landing page. The footer is mostly reserved for links to other pages/resources etc.

And that’s it! By following these steps you have crafted a time tested funnel that will hopefully lead to more conversions whether that be sales or subscriptions or something else.

Want a done for you Landing Page?

Maybe you don’t want to go through the hassle of creating all these different pieces. I built a set of React + TailwindCSS Landing Page Templates based on these principles so people can kickstart their projects and focus on their products and messaging rather than the tedious parts of setting everything up.

If you are interested you can check those out here: https://reacttails.netlify.app/templates

  1. 2

    @seattlehacker - nicely written article!

    We have some work needed on our current page. Hit me up [email protected], would be great to have a quick discussion.

    Ali

    1. 1

      Thanks @rizvial. Will hit you up. :)

  2. 2

    Great tips :D

    And great templates! I made some HTML/CSS ones of my own on BuildFaster.co

    Best of luck!

  3. 2

    Thanks @seattlehacker, this is great advice and can also help as a checklist before going live!

    What's your take on launching a new landing page when you have zero social proof to showcase?

    1. 1

      I'm glad it helped. :)

      I've launched before without any so I don't think its a deal breaker but more markety folks than me have come out and said its crucial. I'd say if you can get someone who has used your service to write a brief testimonial than do it.

      The other way to mitigate it is to take risk off the table for someone to try your product out. So you can add a Risk Free No Credit Card 14 day trial which might help ease any doubt.

  4. 1

    Thanks for sharing this helpful guide. Your templates look great too. Why did you choose to go with react instead of just plain HTML ? Isn't it an overkill for a one page website ?

    1. 1

      My regular stack is React/Gatsby so its not any additional burden for me to use it. Also using React or a framework on top gives you benefits like re-usable components so you can easily change the order for the sections and good performance / Progressive Web App out of the box.

      You can also easily build on top to make a full functional website which I also offer as a service.

  5. 1

    Great succinct insight @seattlehacker. Thanks for sharing!

  6. 1

    Thanks for posting. I wanted to make my own so I was using the yellowtail one you're selling as a template. This accompaning guide helps too! I'm not sure how well my product will do so I liked the idea of using Gumroad to sell my landing page as a template to other creators. I think your landing page looks sweet but it's just not the style I'm looking for. Best of luck to you on promoting this, keep up the good work!

    1. 1

      I'm also open to building out a more customized template so feel free to hit me up if you're interested :)

      https://reacttails.netlify.app/services

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments