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

submitted by /u/alvisanovari
[link] [comments]
Startups – Rapid Growth and Innovation is in Our Very Nature!

How long can you retain a landing page without people loosing interest? (Timeline)

So guys, I have this app, the sooner I can launch it the better. BUT I wont have any reasonable funds to work with/pay devs/designers until right around June/July next year. I have no coding experience at all, but Im a trained Graphic designer. I estimate to have around USD 20.000 .

I know a few wealthy people who I have not yet approached about seed money, but they might be early seed investors for equity, earlier than next summer, so that is something to take into t consideration as well.

I have no co-founder, but I guy I know is the perfect candidate for a cofounder, he is a software engineer, with an art background but he already has a full time job, I have not approached him either yet. Might be very difficult to convince.

I have about 8-10 hr s a day to commit to the building of the app until then. I can get a landing page up and running very fast, but then it will take me a few months to get an MVP out. I have no interest in becoming a fulltime coder/programmer, but I would very much like to be able to speak the language, and understand things, I think thats very important for communication and leading a team. The app will be quite complex, in broad strokes a social media platform with photo sharing, communication, time logging, payment system between users. This has yet to be fully fleshed out and thought through as Im just in the beginning of the process.

Monetisation will come from advertisers and user interaction.

what do you reckon, is is better to start collecting interest/email-adresses ASAP, and then release a MVP (that I would have to make myself) after a few months, start approaching VCs, innovation-scolarships, incubators, accelerators, competitions, build it etc?

Basically, what's a good timeline given the parameters I have given above, ie no funds until next summer but plenty of free time and motivation to work on it.

submitted by /u/Timoat
[link] [comments]
Startups – Rapid Growth and Innovation is in Our Very Nature!