8 design tips for high-converting landing pages

Guest Blogger

Designing an effective landing page takes a certain skill. Designers need to temporarily forget about their usual design approach and focus on the single most important goal of every landing page – conversion. Every design element is there to invite users in and motivate them to perform certain actions and direct their gaze to specific messages.

The idea is to attract, hold and control the viewer’s attention to realize the aims of the landing page. Here are 8 tips on how to design landing pages that boast high conversion rates.

1. Don’t forget about the logo

zendesk

Website: Zendesk

Include the company logo on every landing page you create. Users should have a clear idea about where they are and what actions to take. The brand image needs to be there every time to create a stronger association.

Take it even further by having the logo scroll with the user as they read down the page, like Zendesk does.

2. Clear layout

pistat

Website: pistats.io

A high-converting landing page is clean, uncluttered and well-organized. There’s no space for text or images that serve no purpose. Remember not to use extravagant graphics – they will only distract users from their main task and negatively impact the conversion rate of the page.

3. Contrasting colors

picjumbo

Website: Picjumbo

Use contrasting colors to create an order on your white page. Don’t forget that colors also evoke psychological reactions and associations – for instance, green stands for comfort, growth and is generally positive.

Color contrast is key on landing page design – use a limited color palette and any element of a different hue will immediately catch the user’s eye. You can read more in our article, “How color impacts emotions and behaviors“.

Top tip: Colors like yellow or orange are considered “ugly” and because of that they’re perfect for call-to-action messages and buttons – they simply steal everyone’s attention.

4. Mind the size

size

Website: Wistia

Nothing draws attention like size. If one element of your landing page deserves more exposure make it bigger – a large, brightly colored button won’t be missed by anyone.

Ensure that other elements of your landing page are proportional. A number of eye-catching images, buttons and boxes will clutter your page.

5. Encapsulation

kingsley

Website: Kingsley Judd (via Pinterest)

This graphic design trick is perfect for directing users’ gaze – it creates a tunnel vision effect, at the end of which you can locate your call-to-action button.

To see how it works, have a look at the Kingsley Judd example above. Even though the image here is blurred, users will find it easy to follow the strongly arched shape of the figure.

6. A consistent look

tethr

Website: Tethr

When designing your landing page it’s essential that you keep all design elements consistent. A messy design will distract visitors from the goal of the landing page. It’s your job to minimize the amount of time users will need to orient themselves on your page. Choose similar visual elements among your images and colors and no visitor will get lost or annoyed.

7. Directing the gaze

encapsulation

Website: Basecamp

There are several visual elements that help designers to direct the gaze of users and focus on what is really important on the page. Arrows work wonders – they might seem a bit over the top, but they’ll guide users straight to your call-to-action buttons. Don’t forget that some shapes will naturally create a visual pathway for visitors. Take triangles, for instance – their form is already pointing at something.

Use the gaze of figures represented in your photos as well. Viewers naturally tend to follow it, so place your conversion target in the line of vision of your photographic figures and expect users to look exactly there.

8. Leaving blank spaces

ghost

Website: ghost

Does having a clear layout on our landing page mean that we have to make use of all the space available? Not at all! Mind you, not all of the blank spaces have to be filled – some of them are perfect left just as they are and work great if you want to emphasize a significant element.

White spaces improve the legibility of all texts you include on your page – use them in a smart way and you’ll have complete control over the gaze of your users.

Follow those tips and you’ll be sure to make the most from every landing page you’ll ever design.

Want more inspiring tips? Check out our predictions for 2015 landing page trends!

Monique Rivers is an Australian tech blogger who also loves good food and fashion. She works at ninefold.com. Ninefold is a company providing efficient and powerful virtual servers for all those occasions when a business needs to move their ideas into the cloud.

The author

Guest Blogger
Guest Blogger

99designs loves to share design how-to's directly from design professionals themselves. Reach out to share your thoughts, ask questions, or thank these experts for their awe-inspiring tips!

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.