Practical Landing Page Design

Practical Landing Page Design Series

If you would have asked me two years ago if I thought creating a beautiful landing page is pretty straightforward, I would have answered you with a confident yes. After more than a year working at KickoffLabs where we regularly help customers with their landing pages, I can now see through a non-designer’s perspective and I would no longer answer a yes to that question. I can see the challenges that you’re faced with as you try your best to create beautiful landing pages that also convert exceptionally well.

There are design issues I see over and over on our customers landing pages where even small changes would make their page so much better looking, more trustworthy, and improve conversion rates. Most of these changes don’t require any sort of design sense. But these changes would make the design so much better. That’s why I’m sharing them with you, so you can make your page even better.

In Part 1 I’m going to walk you through some principles to keep in mind when you’re creating landing pages for your contests. These principles will shape the design of your page and are the foundation to a beautiful and effective landing page. In Part 2 we will get into the details of the design itself. And then we will be offering a webinar where I will apply all these principles to some landing pages so you can see practical applications.

For now, let’s start with the basics.

1. The design is not about you.

It’s important to remember that as much as your landing page feels like it’s meant to be yours, it’s not. A truly appealing and effective landing page is meant for your customer. What does this mean in practical terms?

Readability

When your customer lands on your page they must first be able to read the words on your page. I know this may sound obvious but, trust me, for a lot of people, it’s not.

Notice how some words are hard to read? Just trying to read the words causes a little bit of strain. I see this all the time. You want your customers to be able to see your image, but it’s much more important for them to be able to read the words on your page.

On KickoffLabs you have a number of controls to allow you to add enough contrast so that your customer can always see the words on your page. If you have an image in the background you can choose the color overlay to make sure there’s enough contrast with your text to make it readable.

You can also choose the background color for any section on your page (in Part 2 we talk about how to not over-do this). Remember the purpose here is to make sure the text on your page can be read by your customer.

You can choose the color of the text on the page.

And the size.

Please, I beg you, make sure your customer can easily and without any effort read the words on your page.

What Are You Offering

Now that your customers can read the words on your page they need to understand what you’re offering them. I know YOU know what you’re offering, but they don’t. Assume that they have no idea who you are and what you offer. Clearly state what it is you’re offering them or what they would be signing up for.

Do you know what is being offered here? Me neither. I have a general idea it has something to do with building a startup but I don’t really know if it’s a course, a community, a book, or something completely different.

Do you know what is being offered here? Yes, they are giving away free t-shirt quilts every 5 days. It looks like they also sell t-shirt quilts. Cool.

Not only did the words make it clear what they are offering but the image helped communicate and support the text on the page. The image you use can either help communicate your offering to your customer or confuse them.

Make it completely obvious to anyone coming to your page what you’re offering them. Share your page with 10 people who don’t know what you do and ask them what it is you’re offering. Without helping them (I know you’re going to want to, but resist!) see if they can answer you correctly.

With those fundamentals out of the way, let’s get to what will make the difference between a mediocre landing page and a truly exceptional one. Ensure that your design clearly communicates WHY your customer should sign up. I know you want them to, but why should they WANT to put in their email and give you their attention and time? It must be worthwhile enough to them.

Giving something worthwhile away as a reward is a great incentive. Ask yourself what will entice them to sign up and make it something they don’t want to miss out on.

This holds true for your thank you page as well. After your customer signs up re-iterate on your thank you page why they signed up and why they should share this with their friends.

If they invite 5 friends what will they earn here? Free grab-n-go peanut butter! This is why they signed up in the first place and it’s reinforced here. The reward will probably make them want to share this with their friends.

What Action Should They Take

Let’s take a step back and look at one more very important and subtle principle you need to make sure you get right on your landing page.

Follow this logic with me for a second. You’ve ensured that your customer can read the words on your page. You’ve made it clear to them what you’re offering AND why they should sign up. Now you need to make sure they know with absolute certainty what action they need to take next. Make it easy and clear. Make it obvious and enticing. Simply stated, make sure it’s completely clear.

All of the principles we’ve covered you can see on this image on just three rows.

You can read the text on this page.
The first line states what is being offered: a 3D laser printer.
The second line states why they should sign up: sign up early and get it for half the price.
Now the obvious next step is to sign up.

The action you want them to take is what is referred to as, a “call to action”. Makes sense, right? What do you want them to do when they get to your page? Sign up, click on a link, something else? For landing pages it is almost always to sign up.

Your call to action should be close to the WHAT and WHY part of your page. If you have a long page include one form at the top right next to the what and why and an additional call to action throughout the page.

While we’re talking about your call to action remember to not ask for too many things. You should ask for one to two things at most and if you absolutely have to you can ask for a third thing. Most of the time you should just ask for their email. At KickoffLabs, on our Premium plans and up you get Magic Contact Data. This is awesome because with just an email address the Magic Contact Data will provide you with tons of other information about your customer: their name, gender, location, social networks, and much more.

As a general rule, you should not be asking for information that you are NOT going to actually use to help your potential customer on the next step of their journey.

You don’t need five different ways to contact them, but if you are selling desserts you may want to know their ice cream preference… as long as you are going to start using it to provide them with more personalized offers.

They Should Feel Something

The design of your page should resonate with your customer. It should elicit a reaction, even if it’s a small one. This is what you’re striving for. This is the culmination of your all your work. A potential customer arrives at your page and feels excitement at what you’re offering. Your call to action is clear and simple and they feel excited to sign up as quickly as they can and then they share with their friends what they just discovered. All because of a feeling. This is the goal.

In Part 2 I walk you through the actual design elements on your page to reinforce this experience for your customer but that can only come after you’ve communicated clearly.

Just remember that when a potential customer arrives on your page, you’re goal is to get them to feel something – excitement, relief, happiness, or even lust. Take a moment to consider the feeling you want to elicit. In Part 2 we dive more into how to get the design to bring out that reaction.

2. Keep Your Page Simple

This principle touches almost every other principle. In Part 2 (Practical Landing Page Design – Part 2) I probably say this in a hundred different ways as we talk about color on your page, typography, branding, spacing and more. Repeat after me: Simple. Is. Better.

Your title and subtitle should clearly state what you’re offering and why they should sign up and nothing more. The more succinct and clear you can be the better. Keep your title and subtitle simple and clear.

Keep your call to action simple. Only ask for one to two things in your form.

Don’t complicate things, don’t feel like you need to add more text or images or whatever. If you’re not sure you need it, don’t add it. Or you can always A/B test your pages – one with less text and one with more and see which one performs better. On KickoffLabs, A/B testing is so easy you should do it.

Just remember, don’t let all your explanations and images and text get in the way of your customer signing up. Everything should be working towards getting them to sign up. Remove everything that might get in the way.

Attention is Limited

Your users attention and interest is limited.

Cut words, images, styles and anything else to get to the core of your message.

You want to make sure your design doesn’t get in the way of your message but that it brings it out even more.

Provide Space

I talk about this in depth in Part 2, but it’s something I see all the time. Crowding all the elements and text together on a landing page will make the page feel cluttered and busy. Breaking up sections and elements with space will make your page feel cleaner, simpler, and feel less busy.

Limit Fonts

We get into the details of this in Part 2 but you shouldn’t have more than 2 fonts on a page. If you’re not a designer you should probably find one good font and stick with that. Trust me, if you’re not a designer you probably don’t know the nuances of how to properly pair fonts.

Limit Animations

With the advent of CSS3, animations have become really easy for designers and developers to implement on landing pages. But the reality is that oftentimes these animations are distracting or slow down the load time on your page and therefore negatively impact the conversion rate on your page. Consider removing animations.

Please just take a moment and ask yourself, “what can I remove to make my page more clear and impactful?” and remove anything that comes to mind.

3. Conclusion

In summary the first step to getting a beautiful and effective landing page is by following some basic principles.

The first principle is to remember the design is not about you it’s about your customer.

Text on your page should be readable.
Your page should be clear about what you’re offering.
Your page should be clear about why a potential customer would want to sign up.
It should be an easy and a natural next step to sign up.
When you pull all these together, the goal is to get your customer to feel something about what you’re offering and want to share it with others.

In all things keep things simple. Limit text, images, fonts, animations, colors, and anything else that might get in the way or distract your customer from signing up.

Now go and read Part 2 for specific advice on color, typography, and so on. Also, signup for our webinar where we review and apply everything from both Practical Landing Page Design Part 1 and Part 2 so you can see a practical approach to improving the design of your landing pages.

Practical Landing Page Design – Part 1