How to Design a Landing Page that Engage Audience

I’m constantly learning new stuff online and one of the things I really want get into is “writing for the web” so I decided to start writing some simple articles related with design. I find explaining my work process a good way to start reading because is when I have time to reflect about it and at same time fix some problem I find in the way.

Navigation

Take advantage of the user patterns already established.

Navigation UI patterns are a shortcut for good website usability.

Now people understand things like the hamburger icon and know that when they click on it they will see more options.

Psst, this can sound stupid but I see this happening a lot of times, don’t forget to make sure that you use the “Back to home” function on navigation. Why not on the logo for example?! 😉

When it comes to focusing in your history, take those simple user patterns in mind and try to not break those because is when you loose your audience or your visitor.

Hero

This can be like the cover of your book. This is starting to be a user pattern so probably you can start playing with it.

Let’s start explaining the app a little bit better with an headline.

Maybe in this phase you already want to start using a CTA (call to action) for those visitors that already know the story and want to take action immediately.

For those who are visiting your landing page for the first time you can have some visual element illustrating that if they scroll the page they will have more content to see.

Example of an hero header and a simple product description by https://asana.com/

User pattern scrolling the page

Mobile and apps like Facebook and Twitter kind of allowed everybody to embrace the idea of scrolling.

If you want to tell a rich visual narrative, the long-scroll is your best friend.

Next, you can start thinking what happens down the page. We have this idea of how eyes move. You can follow the “Z pattern” or the “F pattern”.
Probably for most visual website you’re looking for “Z pattern” layout. Read more about designing for how your eyes work.

Key Features

This is a good section that you can add if you are for example designing a landing page for an app. You should tell (briefly) to the visitors why they should be using your app and how it’s different from the others.

Example of key features section used by http://www.reuters.tv/
One more example of key features section used by http://www.desk.com/

Descriptive copy

You’ve already started telling the story of the app but probably you can write some good descriptive paragraph of copy telling what your product really does and what users can expect from it.

Example of a descriptive paragraph by http://www.getballpark.com/
Another example of descriptive paragraph by https://sproutvideo.com/

App Screenshots

Is importante to showcase the app experience. Experiment with creative screenshots and why not videos to showcase your app experience. Visitors want to know why is your app powerful and how they can use it. Doing this not only inspires them to download it but also helps establish their expectation, which can translate into a smoother on-boarding process and less negative reviews in the future.

Example of App Screenshots being used by https://asana.com/
One more example of App Screenshots being used by https://www.postbox-inc.com/

Reviews and Social Proof

If your app received special recognition or won some awards or if you have some influencers reviews it’s time to show it. 🏆

Also, you can add a social widget showing the way people around the social networks are interacting with your app.

Example of social proof usage by https://wake.io/
Example of social proof usage by https://segment.com/redshift

Footer

On footer usually goes the things that you don’t need to have distracting the main history, something like support links.

Now, it’s time to open your favourite design app and start exploring. Experiment different layouts, test it with people and see good things happening. 👌