10 Tips for Designing Landing Pages That Don’t Suck
A landing page is the first experience your customer (or potential customer) will have with your brand. It has to convey information, encourage a call-to-action, and reflect your personality. It’s difficult! Today we’re sharing ten landing page design tips to help.
If you just stick your logo and product image on a template, it’ll be obvious. The page won’t provide the experience or information your customer expected when getting there. Whether it is hard to navigate, difficult to read, or a mess of visuals, designing a landing page that doesn’t suck takes planning and precision. Let’s take a look at ten tips on how to do it better.
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Icons, Vectors & More
Shopify, Tumblr & More
Landing Pages & Email
1. Have One, Clear Goal for the Page
The very first thing to consider when creating or making design adjustments to a landing page is the goal of the page: What do you want users to do when they get there?
- Click a link
- Watch a video
- Play a game
- Enter information in a form
- Make a purchase
- Share on social media
- Read or otherwise interact with content
Then everything on your landing page should be designed and directed at getting users closer to this goal. BarkBox sells dog toy and treats subscription boxes. The landing page above is for their Valentine’s Day promotion, which is themed but pushes users to make a purchase. (Note that every button says “Get Started.”)
2. Design for Your Audience
Landing pages have to be made for the users that will use them. It sounds pretty self-explanatory, but too often this doesn’t happen.
The people and images in the design should be relatable to users. Text and blocks of copy should communicate in a voice and tone that these users appreciate.
It can take a deep dive into your analytics to understand who your key audience is.
- Are they women or men?
- Younger or older?
- Do they live in a certain area
Create a design that appeals to the audience you are connecting with to hopefully increase engagement and user conversions.
3. Use Strong Imagery
A strong image, interesting photo or engaging video makes a strong first impression and goes a long way to helping get users engaged.
Coulee Creative takes an interesting approach. The design doesn’t change, but the headline does change and with each change to the headline the facial expression on the man in the image changes to match.
It’s an element of surprise that’s fun and makes you want to see what he will do next.
4. Craft Compelling Copy
Most landing pages include multiple levels of copy. Every one of these levels needs to be compelling and work toward getting users to the desired action set by your website goals.
Most landing pages use the following types of copy blocks:
- Headline: It should be a few words that grab the attention of users.
- Body text: This is your main message. It should be concise and direct.
- Call to action: Often in the form of a button or link, this tells users what to do with the website. What’s the next step in the process and how do they get there? Provide clear actionable, communication.
- Footer: Standard information, such as branding, contact information, and social media links can help establish credibility and provide a go-to resource for users.
5. Establish Keywords Through Navigation
Navigation elements on a landing page will help tell users what your overall website is about. Think of navigation elements as additional keywords that provide user information and direction.
Baublebar does a good job of this on its Puppy Bowl landing page. The company, which primarily sells jewelry for women, uses the navigation bar to highlight this while showcasing pet “baubles” on this landing page.
Further, below the scroll, the page focuses on jewelry for women with imagery that shows products that aren’t for dogs. All of these navigation cues help users who came to the website for pet products see that the main business is a lot more than that.
6. Make the CTA Clear
Every user should know exactly what to do when they hit your landing page. Clear calls to action are vital. Don’t assume users will just do what you want them to.
Good calls to action can be in the form of buttons, forms to fill out, user instructions (such as scroll for more) and even animations.
Jonathan Patterson’s portfolio uses the latter to establish user action – each of the bright colored blocks includes a dark hover state, which indicates to users that each block can be clicked for more information.
7. Customize Content When You Can
Landing pages by nature are designed to be somewhat specific and special. Often they have a purpose or goal that’s a little more focused than your homepage. Customize landing page content to make the most of this concept.
Trulia directs users to a homepage/landing page that uses geolocation tools so that every user gets information specific to their location from the start.
This simple user experience makes the website feel custom and users will be more likely to engage with content that pertains to them.
8. Include Clear and Relevant Branding
One common issue with landing pages that makes them suck is that they often don’t look like or include visual cues that connect to the main website.
Landing pages should include clear and relevant branding so that users know exactly what or who they are engaging with.
Nike does a great job of this with the shoe customization page on their website. It includes the same header and logo as every other page but the main content is different – and users know it is special because of the funky design on the shoe. It’s not an image of a product for sale; it’s a moving image with custom concepts that users can create.
But users will never wonder if they are still interacting with the Nike brand. It’s always relevant in the design.
9. Consider the Source
When a user clicks a link from somewhere else on the web and arrives on a landing page, they have somewhat of an expectation of what they will find.
The landing page should be designed so that the content is specific to that traffic.
Bills.com has a landing page with a simple form that helps users figure out how to consolidate or manage debt. There’s no other clutter on the landing page and users won’t even see any other information until they’ve completed the pre-screening process shown above.
This design strongly relies on the source of the link – from places like social media or even printed information – to tell users what will happen next.
10. Establish Hierarchy and Flow
A good landing page makes usability obvious. Where are users supposed to look and what are they supposed to do on the page?
Designing using common user patterns and behaviors can go a long way to establishing this flow. Add on levels of images, branding and typography to establish a clear hierarchy as well and users will know in an instant how to engage with the page.
LS Productions, above, has a clean course of action visually – Big scrolling video, to top corner logo to center headline to the Scroll for More CTA. And users get all of this information in a matter of nanoseconds.
A key point to consider is that when you are thinking about a landing page, that’s not necessarily your homepage. Landing pages are the most common first stops for website visitors. (You can figure this out through examining your website analytics.)
Some of these top landing pages might be because of your marketing efforts and how you are driving traffic. But other pages can be popular because of the content therein, links from other sources and search. Knowing where this traffic originates and what users are looking for are a key factor when it comes to setting goals and designing a landing page that doesn’t suck.