9 landing page design tips that improve UX and conversions

9 landing page design tips that improve UX and conversions

Learn how to design and build landing pages that delight — and turn visitors into customers.

9 landing page design tips that improve UX and conversions

9 landing page design tips that improve UX and conversions

Learn how to design and build landing pages that delight — and turn visitors into customers.

No items found.
Written by
Jeff Cardello
Jeff Cardello

Creating a high-performing landing page can be tough. It needs to look good, but it also needs to communicate your message. It’s hard enough to drive people to your website — and even harder to keep their attention once they get there. Here’s how to keep people engaged with your landing page till they click that main CTA.

1. Keep your layout clean

Minimalism is not the lack of something. It’s simply the perfect amount of something.

–Nicholas Burroughs

Nothing drives people away from your website faster than a cluttered layout. Take a step back and look at your design. Do you see harmonious symmetry or a chaotic barrage of images and dense blocks of text?

Text and other visual elements should come together logically, each reinforcing the other’s message. Your message will only get lost in a messy layout. So cut out everything that’s unnecessary so the purpose of your page — and what you want people to do with it — comes through loud and clear. (But not too loud.)

The clear, clean Atlast landing page template for Webflow
‍The Atlas landing page template tells you everything you need to know in a straightforward design.

That’s exactly why our very own Customer Success lead, Will Wong, built the cloneable Atlas landing page template with such a clear, clean layout. He even created a landing page design tutorial to show you how he did it!

A clean landing page done right

The Webflow power users over at Timekit did a beautiful job keeping the landing page for their Hour scheduling tool super clean and ultra-clear.

The Timekit team builds beautiful landing pages with Webflow. They've even used it in product design work!

2. Grab attention — and keep it

An environment with excess information devours the one thing that information truly demands: attention. Attention is becoming scarce, so we have to use it wisely when we get it.

–Alistair Croll

The content you place above the fold on your landing page can make or break it. After all, they create a very important first impression. Bold hero images, inspirational headlines, dynamic background videos, and engaging animations can all hold people’s attention — and keep them scrolling for more.

Once they’re engaged, animated transitions between sections can make your design more dynamic and keep people wanting to see what’s next. Just make sure you’ve logically organized your content to keep them reading, instead of just looking for the next cool animation.

Never forget your landing page’s goal: to get people to take a single action.

Too many calls to action, jam-packed navigation, and other distracting elements will only make people lose focus and forget that one key action you want them to take.

Note that it is okay to have a few other links on your page — as long as they keep driving people toward that action.

For instance, many landing pages will include a “Learn more” link next to the main call to action (CTA). Typically, that brings people further down the page to give them more information about the product or service. Hopefully, that’s exactly the info they need to take action.

We use an interactive arrow to drive people further down our interactions landing page, plus a "learn more" link.

3. Gamify your landing page FTW

Play is the highest form of research.

–Albert Einstein

Gamify-ing something means using the elements of gameplay in a context and/or format where they usually aren't used.

It can be a great way to keep people engaged while also communicating your message, because you aren’t just selling them something — you’re entertaining, and in some cases, educating them.

The team behind the Google Doodle has used gamification to great effect bunches of times. Granted, their landing page doesn’t need to be more than a search box and text, but the Doodle adds an element of fun. No other search engine has given you the chance to play a Moog synthesizer, decode a message with a Turing machine, or chomp on ghosts in a game of Pac-Man.

Gamification doesn’t have to be just about fun — but it helps. It can also educate. When we launched our flexbox layout tools, we created a game in Webflow that teaches you how to use flexbox in 28 increasingly difficult interactive levels. It’s a lot more fun than reading detailed documentation (unless you’re into that sort of thing).

‍We used gamification to demonstrate how flexbox works — and intro people to Webflow.

Other game-like Easter eggs Google’s given us

Google the following terms without quotation marks:

  1. Zerg rush
  2. Askew
  3. Do a barrel roll

Oh, and next time your internet’s out, try to load, then hit your spacebar. Enjoy!

4. Don’t sell — teach

Don’t just say ‘the old lady screamed.’ Bring her on and let her scream.

–Samuel Clemens, aka, Mark Twain

There's a right time and way to use marketing language. If you sound like someone selling vacuum cleaners door to door, you’ll send people running … right over to your competitor’s site.

People visiting your website want to know what problem your product can solve or how it can benefit them.

Your landing page should show people how your product/service works and/or walk them through the process of using it. Whichever strategy you use, make sure to break things down into easy steps.

You can build trust in your brand simply through your ability to teach people about your product in the simplest way possible. People will want to buy your product when you demonstrate—without a bunch of fluffy marketing language—why it’s so great.

Use high-quality (but appropriately compressed) images to highlight your product’s features. Short explainer videos are also super-effective for showing just how something works. Make sure that every graphic elements clearly connects to the content on the page.

An educational landing page that walks you through its workflow

The fantastic Olivia AI’s homepage combines showing and telling to clearly communicate not only how valuable Olivia will be, but exactly how she’ll be help you.

Walking people through your product's implied workflow helps them see how it would fit into — and improve — their lives.

5. Share your hope for sharing

Friendship is never anything but sharing.

–Elie Wiesel

We know your product/service is awesome. Your loyal customers know it too.

But the problem that plagues every marketer and growth hacker is: How do you share this awesomeness with even more people? Encouraging others to share your website on social media is a great way to get the word out.

Include a social media block with all the social sites you’re active on in your design. Do you have a just a huge following on Facebook? This could be the only widget you need. People will see how many others love you, and join the masses.

But that’s not enough to get people sharing. On the web, it pays to be explicit. Don’t just make sharing quick and easy: put it front and center, and literally ask people to share. Check out how InVision’s done that on their landing pages, if in a tongue-in-cheek way:

‍When fans share your content, you get more fans. And your SEO improves.

Pro tip: Give people a reason to share

Know what’s even better than asking people to share? Giving them a reason to share (i.e., incentivizing).

So if your beta launch has a waiting list, let people know that a share will bump them up the list, like Olivia AI does. Or, let people download a limited version of something—like a couple weights of your font or a few artboards from your UI kit—like Atipo does. Doing that gives people a taste of something they’ll love, encourages them to come back later to buy the whole enchilada, and helps spread the word about what you’re doing. Win, win, win.

The folks at Atipo make a couple weights of their awesome fonts available for the low, low price of a tweet or a like.
Free ebook: Web design 101

Master the fundamental concepts of web design, including typography, color theory, visual design, and so much more.

Read now
Read now

6. Let the numbers speak for you

In ancient times they had no statistics so they had to fall back on lies.

–Stephen Leacock

We all know that some statistics mean nothing. Just who are these four out of five dentists who recommend Colgate/Tom’s/Aquafresh anyway? And how can they all get 80% of dentists to recommend them?! And how is it that 90% of our brainpower goes unused?

But meaningful stats sourced from customer surveys provide powerful proof of people’s satisfaction.

How many feel that your product has made them more efficient at their jobs? Just how satisfied with it are they? What percentage would agree that your product has improved their company culture?

Statistics provided by your actual customers give you an honest and effective way to show the value of your offering.

Slack uses stats beautifully in this landing page

We’ve really been impressed with this landing page built by Slack, which uses nothing but real data taken from real customers to show you that, yeah, Slack really does cut down on meetings and improve efficiency. At least subjectively.

Slack's stats-driven landing page lets you see how useful the app is, straight from its users' keyboards.

Whenever possible, try to use real, verifiable facts. But for some tools (like Slack), that can be a bit tough, so qualitative input presented in a quantitative style works beautifully.

7. Design (and write) for your audience

I don’t know the rules of grammar… If you’re trying to persuade people to do something, or buy something, it seems to me you should use their language, the language they use every day, the language in which they think. We try to write in the vernacular.

–David Ogilvy

Make sure your landing page speaks to its audience in their language.

Who is your audience? Are they web designers, sneaker aficionados, or model train enthusiasts? A pair of sneakers may be “tight” or “dope,” but a miniature locomotive is not.

Do your research. Learn your audience’s idioms and jargons. Check out the websites of other companies in the same business and see what tone and language they use when speaking to their audience. Then either adopt a similar tone — or do something totally different to stand out from the crowd, while still speaking in your people’s language.

You can also pull info like gender, age, income, and location from Google Analytics and use that to shape content that connects with the people you care about most.

And note that this data's useful for design too: fans of Converse have their own unique aesthetic, just as miniature locomotion fans do. Your website's overall aesthetic should reflect your customers too.

8. Keep up the conversation

A conversation is a dialogue, not a monologue.

–Truman Capote

When you’re knee-deep in the hustle to build out your landing page, it can be all-too-easy to forget some key steps. Including designing what happens after people act.

Depending on the nature of your page, this can range from a simple “We sent you an email! Keep your eyes peeled.” message to a request for social sharing to a secondary product pitch.

Two landing pages we’ve already mentioned do a superb job with this:

  1. Tethr: After you submit your email to get the UI kit’s download link, the page transforms into another landing page, this one pitching the core prototyping product.
  2. Olivia AI: Olivia keeps up the chatbot-style convo with a few animated messages and another CTA asking you to share in exchange for a bump up the waiting list. It’s effective because, of course, you want Olivia STAT — and the share helps spread the word about the product.
Olivia AI keeps the conversation going after you submit your email by asking for — and incentivizing — a share.

9. Make it easy to act

Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.

–Lao Tzu

We’ve mentioned this in our landing page design tips post, but it bears repeating:

CTAs that win are CTAs that are easy to act on.

Nobody wants to scroll all the way down your epically long, wonderfully detailed landing page just to sign up.

So don’t make them.

It’s pretty easy to make your call to action “sticky,” so it remains in place as people scroll down the page. That minimizes the time and effort required to get onboard, and one of the cardinal rules of UX design is: the less effort it takes to do something, the happier people are to do it. Of course, you can also skip the sticky element and just repeat your main CTA a couple times across the page, particularly at the beginning and end.

So make your CTAs frictionless, and your conversion rates will make you very happy.

Build more engaging landing pages

These days, people get bombarded by web pages trying to sell them something. That can make it tough to make yours rise above the noise. But by using, combining, and even remixing these 9 simple tips, you can create landing pages that stand apart from the competition — and get you the attention your product or service deserves.

If you have tips of your own to share, don't hesitate to comment below!

Last Updated
June 6, 2016
Web design

Join the conversation

Related articles


Landing page testing: 6 key tips to ensure conversions

Webflow Team
Read more

How to build a SaaS landing page that converts

Christina Christ
Read more
Web design

10 essential sections to a high-converting landing page

Cameron Roe
Read more

12 inspiring landing page designs that engage and convert

Jeff Cardello
Read more
Web design

5 sure-fire ways to improve your website UX

Lexie Lu
Read more

How Wordle won the internet

Mischa Vaughn
Read more