How to Design a Landing Page When You’ve Never Designed One In Your Life

Does the thought of designing something fill you with dread? Do you feel like you don’t have a creative bone in your body?

Fear not. Help is here.

Today with this post we want to recover the artist that you have in you.

To clarify, web design includes various elements, such as web graphic design, interface design, user experience design, and search engine optimization.

In our case, we're going to focus on the “graphic design, interfaced design and user experience design” aspects of a landing page design, and how these elements affect conversion.

To increase our chances of success online, we need to engage our visitors’ visual cortex, and not just their reading skills. Just as good headlines, copy, and calls-to-action are critical to conversion success, so is design.

But many of us don’t have access to good designers, or can't afford one. We often have to take matters into our own hands and design our own landing pages.

And even if you don’t have to design your own landing page, it’s important to know the elements of successful landing page design so you can avoid wasting time and heartache with designers who want to create works of art instead of conversion-oriented landing pages.

Key Elements to Successful Landing Page Design

The following are 6 key elements to successful landing page design. A word of caution: these are recommendations based on industry best practices. However, if you just stick with the industry best practices you’ll fail. Take these recommendations as a good baseline, but you must always, and I repeat, always, perform A/B tests on your landing pages to find out which aspects of your design works, and which aspects don’t.

And keep on testing until you can increase your conversion rate from low single digits into high single digits, or even double digits.

1.   Landing page design: Make a great first impression

Want to make a great first impression? Make sure your landing page looks good.

Peep Laja, a conversion-oriented website designer, says that “first impressions matter.” It can lead to higher satisfaction, is more important than usability for user perception, and a first impression can last for years (or in the case of somebody visiting your landing page, long enough to make a purchase).

The Beatsbydre.com Urbeats earphone landing page has a really attractive overall design. The design is clean, uncluttered, with nicely contrasting colors that match (black and red, matching the colors of the earphones themselves). The landing page has a premium look and feel, which matches the premium quality of the earphones it sells.

Make a great first impression.

2.   Landing page design: Visually emphasize the most important elements

If you want to direct your visitors to the most important part of your landing page, you need to emphasize this visually. Use a large headline to tell your visitors they’re in the right place. Use a prominent product image or video to get them excited about what you’re selling. Then direct them to your call-to-action by using contrasting colors that pop.

The landing page for the book “Content Strategy for Mobile” by Karen McGrane, hosted by book-seller A Book Apart, does a great job emphasizing the headline, product image and call-to-action buttons.

The product image also does a great job emphasizing the topic of the book. The book discusses how to create a content strategy that spans multiple channels, from desktop, to mobile, to tablets and beyond. The product image, with the book displayed in all its form factors, visually displays the multi-channel delivery of the book.

The image is a visual example of the concepts of the book.

Visually emphasize the most important elements.

3.   Landing page design: Make use of white space

A web page that is cluttered and has very little white space is a web page that repulses visitors. Part of what creates clutter is the use of extravagant images, as this Hubspot article explains. In A/B split tests, Hubspot found that using too many “over-the-top images” distracts rather than helps the conversion goals of a landing page. It also increases load times. A one-second delay in page-load times led to a 7% loss in conversions.

Peep Laja says that cluttered web pages make it so difficult to read that people won’t even bother trying.

But a landing page with plenty of white space and no clutter helps to focus a user’s attention to the main call-to-action.

While not necessarily a landing page, Lullabot’s website, which is designed like a landing page (a growing trend), uses white space very effectively. The white space frames and focuses attention on the most important elements: the graphical logo, the value proposition, and the red call-to-action ribbon.

Remove clutter and use white space to your advantage.

4.   Landing page design: Use visual proof points

Social proof helps to build trust with your website visitors, and testimonials do a great job building social proof. But visual elements can boost your social trust-building efforts.

Use high quality logos from some of your most prominent customers. Use trust seals or awards icons. In this infographic Kissmetrics reports that ACLens increased conversions by 41%, and increased revenue per transaction by 58% by including the VeriSign security certificate.

On this Sprout Social landing page, they feature the attractive logos of some of their more prominent customers to show potential customers that this is a prestigious thought leader in the social analytics space. The logo area is not too prominent, so as not to distract from the main call-to-action to start a free trial. But it’s there above the fold for those who are looking for social proof.

Boost your social proof by providing visual social proof.

5.   Landing page design: Keep your most important elements above the fold

As the internet presents our visitors with billions of alternative choices, we have just a few seconds to capture their attention, let them know they’re in the right place, provide them with proof points, and direct them to our calls-to-action.

If we have to make our visitors scroll to view the elements that that lead them on the path to purchase, we will lose them, and our conversions will suffer.

In this article, the Nielsen Norman Group reported that numerous eye-tracking studies showed viewing time went way down for information that web visitors had to scroll down for. Their recommendation? Prioritize your content, and make sure that “anything truly important remains above the fold.”

In this example of another website that looks like a landing page, content management consultants SiteWorx place their value proposition and their call-to-action above the fold.

Everything else is below the fold, and is available for those who want to spend more time researching the firm.

Keep your most important elements above the fold.

6.   Landing page design: Proximity can help or hurt you

When designing your landing page, be careful where you position your elements in relation to each other. Bryan Eisenberg says that by placing elements next to each other you might confuse your visitors. Eisenberg uses an example of an online retailer who placed text about children’s movies next to a search box. Visitors thought the search box was exclusively to search for children’s movies, which was a mistake.

You can also use proximity to your advantage. By placing your call-to-action form or button next to your value proposition or product image, you increase the change that your visitors will fill out the form or click on the button.

Fandango uses proximity to get their visitors to take action almost immediately. At the top next to the Fandango logo, they have placed a drop-down movie list, a theater search box, and a movie search box. They've already got you looking for movies before you’ve had a chance to explore the rest of the site.

Use proximity to help your visitors, not to confuse them.

These six elements should get you started designing an effective landing page.

How to get started - Landing Page Design

Now that you know about some of the basic elements for designing a high-converting landing page, what next? Do you need to go out and buy PhotoShop? Do you need to learn how to write HTML, CSS and JavaScript?

Thankfully no. There are many options available to enable you to design your own landing page with drag and drop simplicity. We provide a tool for that (if you’d like to check it out).

And if you still feel you need more advice, we’ve provided the following links for further study:

• 8 Universal Web Design Principles You Should Know
• 5 Dimensions of Landing Page Element Success
• Design for Persuasion