Practical Landing Page Design Series
Part 1: Design basics everyone should understand.
Part 2: Advice for color, images, fonts, and whitespace.
In Part 1 I talked about some foundational principles that will help you create beautiful and effective landing pages. Today I’m going to walk you through some of the specific details on your page.
Color
When your customers first arrive on your page one of the first thing that they will see are the colors. The way you use colors is extremely important.
Add Credibility
The use of too many colors on the page is one big way that a page looks unprofessional. With that loss of professionalism your brand also loses it’s credibility. And too many colors makes it unclear where you should click or what you should do on the page.
Do you see how adding too many colors makes it hard to digest what you should pay attention to and what you should do on the page? There’s just too much to take in.
Use Only 1 to 2 Colors
As a general rule you should limit the number of colors on your page to 1 to 2 colors.
Do you see how limiting the colors on the page brings out those colors and still makes it look beautiful. You can also see how limiting the colors on your page makes your call-to-action stand out!
If you’re a designer and want more you can. But even designers probably wouldn’t ever go over four or five colors – especially on a landing page. This is how multiple colors look on a landing page when done correctly.
Do you see how the colors go together? They don’t contradict each other and make it unclear where to look. If you’re not a designer stick with only using 1 to 2 colors on your page
Assign a role for each color.
You will want one color to act as your call-to-action. This would be your buttons, for instance. This color should be a strong color that stands out.
Try to limit your one color to only the calls-to-action that you really want to stand out. If you feel like you need one more color throughout your page try to make sure it’s not a color that really stands out but one that complements the page.
Not all pages will need this complimentary color but on some landing pages it is important for the page to look nice. I recommend trying to limit your page to one strong color and if needed one complementary color.
Here’s a page where the call-to-action color is green. Wherever the green is used it stands out because it’s the only real color on the page.
Here’s an example of how to use a complementary color on a page:
Can you see how the complimentary color (the dark blue) doesn’t overpower the call to action color? It’s there to help the page but doesn’t pull your attention there the most.
Call-to-Action
A call-to-action is the thing you want your customer to do when they land on your page. For landing pages that is usually to submit their emails address in exchange for some opt-in offer.
Get really clear about what it is you want your customer to do when they get to your page. The design on your page should do everything toward leading your customer to do that one thing.
Secondary Call-to-Action
You might have other things you would like them to do. For example, you may want them to watch a video, like you on Facebook, or something else.
The problem I see over and over with these secondary calls-to-action is that it’s not clear to the customer what you really want them to do and what would be nice if they did. Your call-to-action should be obvious and clearly the thing to do on the page. The secondary call-to-action should be smaller, lower down on the page, and obviously secondary.
I would also encourage you to ask yourself how crucial that secondary call-to-action really is. Consider removing it and instead focus on making that primary call-to-action clear, enticing, and the focus of the page.
10 Foot Test
To make sure your call-to-action is clear enough you should run the 10 foot test.
Here’s how the test works. Open up your landing page and step 10 feet away. Look at your page. Does your call-to-action stand out? If it doesn’t you need to change your page to make it stand out more.
The 10 Foot Test is a great way to get a clearer perspective of the focus of your page. It’s a great way to make sure you’re focusing on your call-to-action.
Too Many Fields
In addition to being clear, you should make your call-to-action easy to complete. This means only ask for the information you absolutely need. Limit the number of things you ask for to only one to two things.
Only ask for that information you are actually going to use.
You could, for instance, ask for their first name and email. But, only ask for their first name if you’re going to use to personalize your emails to them (or some other reason). Otherwise, just ask for their email.
Make the call-to-action as easy for your customers to complete as possible.
Typography
Choosing the correct fonts for your landing pages is another area that will make a big difference in the design of your page.
One Font Family
This might be the easiest of all the design principles to implement perfectly. Follow this one rule and you will be fine. Limit your fonts to one font family.
A font family is the font you read on the page. For example: Helvetica, Arial, Verdana, Times New Roman. These are all different font families
If you’re a designer you might want to add another font family to the page and that’s fine – you will know when it’s needed. If you’re not a designer limit yourself to one font family.I can’t think of ever seeing a landing page with more than 2 fonts that looked really clean and good. I can think of a lot of pages that had only one font family that looked great.
Style Fonts to Communicate More Effectively
With one font family you can do a lot of things with your text to make it stand out.
Most font families give you have the option to add italics, bold, underline and so on. You can also change the size of your words/sentences and modify whether they are upper-case, lower-case, or capitalized.
This page has one font family. Do you see how the size, weight, and changing of case allows some words to stand out and others to play a secondary role on the page?
At the same time can you see how too many fonts impacts the page negatively?
As a basic rule don’t modify your text styles in any way unless you feel like your message isn’t coming across on the page. Only then make things italics, bold, or upper-case.
If you start making changes like, for instance making all titles upper-case, please be consistent. Don’t make some upper-case and some just capitalized. If you decide titles are upper-case then make each title upper-case.
Don’t Write Novels
Do you feel like reading the words here:
Doesn’t that just feel like a lot of work to read through all of that text? Now look at part of this page:
Because the words are cut down you’re more likely to read them and it will be a lot more fun!
Take a look at the text on your page. Is there anything that you could remove? How can you cut down the words on your page so that you’re more direct and clear. Reducing the amount of text on your page or breaking it up into more digestible parts will actually increase the likelihood that your customers will read your words.
Your customers are most likely going to scan your page. They may read small one to two sentence paragraphs, so keep it simple.
Little Detail That Makes a Big Difference
Choosing a nice font for your page can be a little detail that can make a huge difference. I was working on a page where the topic was grief. The main heading on the page (“Free Grief Course”) looked too hard (the edges were too squared). Take a look at the page below and see if you can notice how the font gives the page a certain feel. The page was meant to bring comfort and understanding and the font detracted from this feel.
Now look at how changing the font for only the title (“Free Grief Courses”) changed the feel of the page. This new font family is softer and rounder and worked better with the content and message of the page.
Can you see the difference a font can make in how a page feels? It’s a little detail that can make a big difference. So take a few moments to consider what font family you should use on your page and if that matches what you’re offering.
Help Getting You Started with Fonts
At KickoffLabs all of our landing pages have a default font family that we recommend you at least consider for your landing page. You might find, like I did with the grief course page, that a particular font doesn’t quite work. But, we will help you start off with a nice font family that is easy to read on the web and will look really nice on most pages.
If you choose to change fonts, I recommend you consider some of these font families (ordered alphabetically):
Images
Right alongside with the colors on your page, images will be one of the first thing your customer will notice when they land on your page. Getting your images right is so important.
Before even reading the words on the page your customers will see your image and will begin to make immediate assumptions about your company, about what you’re offering, and it’s value.
Image Quality
Let’s start with the basics here. Your image needs to be clear and crisp. You don’t want an image that is pixelated.
If you’ve never worked with images you’re probably wondering how to get a nice, clear, crisp image while keeping the image size small. I’m glad you asked.
Image Sizes
You want a nice high quality image that isn’t too large. Large images will slow down the time it takes to load your page. About half of your visitors will abandon your page if it takes more than 3 seconds to load. So how can you have nice, clear, crisp images that don’t slow down your pages loading time noticeably?
The first thing I recommend is to make sure and get your image sized correctly. You don’t need an image that is 5,000 pixels wide. Here is a great article that will help you size your images correctly: Landing Page Image Guide
In that support article you will see a section about compressing your images. That is my second recommendation. I compress every image before it ever goes on any web page. You should do the same. When done correctly compressing an image reduces the size of your image (sometimes by more than 75% of the size!) without impacting the quality of that image.
If you have any questions about the details of this you should read the guide on placing images on your landing page.
Text and Logo in Background Images
You may be tempted to add the headline and logo into your background image. Or maybe just some text you want your customers to read when arriving on your page. Resist that temptation. Here are a couple reasons why you should not add text or your logo to your background images.
You don’t know what screen size your customers will be viewing your page. They may be on a desktop computer with a wide screen, or a laptop, or maybe they’ll be on a tablet, or their phone. You cannot guarantee that the content in your background image will be viewable on all these different screen sizes.
The role of the background image is different than the role of the content on your landing page. Background images are meant to be in the background and merely supporting the page. They aren’t meant to carry the burden of being the primary content on the page.
The content on your page lays on top of your background image. As the screen size changes your content responds to these changes and will lay over top of different parts of your background image. If you have content in your background image you run the risk of having your primary content lay on top of and cover up the content in your image. This will not only be a bad experience for your customer, but it will look really bad.
Content is meant to live on your page not in your images and therefore the search engines will not be able to find your content. What this means is that when people are searching for what you offer they may not find you because your content was never indexed into the search engines. In other words, placing content in your images negatively impacts your Search Engine Optimization (SEO).
I promise you, placing text and logos inside your images will cause you a lot more trouble than placing them on top of your images. So, save yourself a lot of time and hassle and just keep your background images free of text and logos.
Message of the Image
Your image isn’t just about the aesthetics of the page. Your images are communicating to your customers. Your customers are going to see your images before they read your text (unless you’ve sized your images wrong and they take too long to load, in which case please refer back to the section above on images sizes).
The images on your page are telling a story and will reinforce the words on your page.
Using images that visually show what you do or offer will help your customer to understand the WHAT of your page much faster and easier.
When images and words aren’t synchronized it becomes very confusing for your customers. They will see your image and imagine what you offer as one thing and read the text on your page and get confused because it seems you’re offering something different. It causes confusion.
What is being offered on this page? Can you see how the background image causes confusion about what exactly is offered?
Now look at the next image and see what you think is offered. The only thing that changed on this page was the background image.
Do you see how the image can help you understand what is offered and make the offering even more enticing? Your images are communicating something to your customers. Make sure it’s what you want it to communicate.
Stock Images
I am a huge fan of stock images when they are used correctly. You don’t want a stock image that looks like a stock image. You want a stock image that fits specifically what you are offering. This could be easy or hard depending on what it is you offer.
Let me show you an example of a stock images used correctly.
Can you see how this images, although stock, doesn’t look and feel like it because it is so perfectly suited for the page?
Here’s an examples of a stock image used incorrectly.
Do you see how the images are very general and not at all specific to their page?
Of course, if you have professional photographs of your products/services that is the best case. But, if you’re validating an idea and don’t have any professional images yet, you can use stock photography but just make sure it’s specific to what you’re offering.
Check out this article for more information on choosing a perfect image for your page: Landing Page Image Guide
Mobile Design
On average, websites are getting 50% or more traffic from mobile devices. So, you need to make sure your website looks great on mobile.
You can check your mobile landing page designs a number of different ways. If you’re a KickoffLabs customer the easiest way is to check straight from the landing page designer:
If you have a lot of landing pages that you will need to test another great option is browserstack.com. I use browserstack on an almost daily basis to make sure different landing pages look great on different mobile devices.
If you don’t have access to either KickoffLabs or browserstack you can always check using your own mobile phone (or borrow a friend’s phone). You should check your landing page on both an iPhone and an Android device.
Here are a few things you should look for when evaluating your landing page on smaller screens.
Fonts
The first thing I look for is to make sure the fonts respond to the size of the screen. They should become smaller as the page size decreases. Sometimes even with that reduction there are some customizations you will need to make (adjusting some text to be smaller and sometimes slightly larger).
Images
Take a look at your images and make sure they scale down as well. Make sure the images aren’t still the full width and cut off on your mobile device.
Background images are a little different. They scale differently, particularly depending on the size of your image. The aspect ratio is different going from desktop to mobile: on desktop your image is wider while on mobile it’s narrower and taller. But, this all may be moot because you may want to remove that image on mobile anyway…
Removing that background image is something I recommend you at least consider. Let me explain why.
The first reason you might want to remove the background image is that the mobile page will load faster and that’s a big issue on mobile devices. You will reduce your customers leaving your page before you page loads.
The second reason is that the smaller screen usually doesn’t look great with a background image. The screen size doesn’t usually leave enough space around your text to display the background image very well and so the image becomes more of a distraction than a communication mechanism.
Whatever you decide to do just make sure your images are properly handled on mobile devices.
Content Order
The next thing I look at is to make sure the way my content collapses looks correct. Sometimes you’ll find the order of the content doesn’t quite make sense. Just take a look through the page to make sure each sections appears in the correct order. When someone arrives on your page from their mobile device it flows and makes sense.
Spacing
Sometimes the amount of spacing to make your page look good on desktop is too much or too little when on a smaller screen. You want to continue to have plenty of white space but you want to just check to make sure it’s not too little or too much on a mobile screen. I’ll cover white space next so apply those same principles to a smaller screen.
Call-to-Action
The call-to-action is what you want your customer to do when they get on your page so you’re going to want to take an extra look at it on mobile. You will want to look and make sure it shows up correctly, the design still indicates that it’s clearly the thing they should do on the page, and complete the call-to-action to make sure it works on mobile.
You might think that just because it works on desktop it will work on mobile, but that’s not always the case. If your customer can’t complete your main call-to-action all the effort you’ve gone into getting them to that page is now basically worthless.
If your call-to-action is an email sign up form, fill it out and make sure it works as you would expect. Just test your call-to-action on mobile to make sure your customer can successfully complete that action.
White Space
Oh how I love white space on landing pages. If you’ve ever been to one of our landing page reviews (if you haven’t been you should attend and submit your page to be reviewed) you most likely heard me talk about adding space to different areas of the page.
White space can mean the difference between a mediocre design and a stunning one. Leave everything else the same and only change the white space and you change the design.
Take a look at our Clean Flat Hero theme with the whitespace removed.
Now look at the same page with some white space.
Adding white space in KickoffLabs is so easy. Here’s exactly how I added the white space to that page:
White space can change your landing page from feeling cluttered and busy (and oftentimes confusing) to one that is appealing and clear.
So, make sure the text and elements on your page have enough white space around them.
Video and Animations
Animations and videos are a couple optional touches you can add to your page. They aren’t necessary and sometimes they do more harm than good. I will walk you through what to avoid and what to do with regards to videos and animations on your landing pages to make sure they look great and convert just as well.
Animations
If you’re not familiar with what animations are don’t worry. You’ve seen these animations you just haven’t put a name to them yet. On a landing page most of the elements on the page (think images, text, buttons, etc.) can be animated. The animations can present themselves in a variety of ways. The elements can slowly fade in, fade and slide in, bounce, jump around, pulse, or change size or position when you hover over them or reach a certain point on the page and so on.
Animations can be overused. It’s easy to get excited by all the fun things you can do with the elements that you overdo all the animations. When overdone they become a distraction pulling away the attention from what you want people to do – which is complete the call-to-action.
Here’s an example of some unnecessary and distracting animations:
Animations become a real problem when they are applied to the text and they fly in or move around and thus making the text unreadable.
Animations can add some really nice touches to the page. Here’s an example of animation that slowly fades in. It isn’t distracting and it adds a nice touch to the page:
Just remember not to simply add animations just for the novelty of it. And above all, make sure the animations aren’t distracting, causing text to be unreadable, or in general causing a negative experience for your customers.
Videos
The most important thing to remember about video is that it is a secondary way for your customer to get information about your products or services. It is complementary to the content on the page. It supports and goes into more detail. Your page should be 100% fine without the video on the page. You shouldn’t rely on it to communicate what you’re offering.
You should look at the video as an optional piece of content. One that your customers may or may not see. It should not be the primary way you communicate with them.
And above all it should be left up to the customer whether or not they want to watch the video. A sure way to get a very negative reaction from your customer is to set your video to autoplay with the sound on. There is almost nothing else you can do to get people to leave your page more quickly as setting your video set to autoplay with the volume on.
If your customer wants to watch the video they can but you should not make that choice for them. You will lose their trust and make them mad. And the next time you send them a link they will be much less likely to click on your link in fear that another video will unintentionally play in their office and embarrass them and make them look bad in front of their co-workers.
Simplicity
In Part 1 I talked about a number of different ways you can make your page simple. It’s worth quickly reading over that section if you haven’t recently. Just remember to keep your page simple. Don’t complicate your page. In fact, you should ask yourself what you can remove from the page.
Your page will feel a lot cleaner and much more simple by following the recommendations in the colors and typography sections above. In a nutshell, limit the colors on your page to 1-2 colors and only use 1 font family and no large sections of just text.
Consistency
Take a look over your page and make sure you stay consistent. Let me walk you through a few things to look at specifically.
Remember to limit your colors to 1 to 2. Choose one of those colors to be your main call to action and use it consistently for that purpose. If you need another color use that to make your page look nice. Stay simple and consistent with your colors.
Look at the text on your page. If you’ve chosen to capitalize the titles are you doing that for all the titles?
The language you use on your page should also stay consistent. Your customers will get confused if you refer to the same thing in a different way. Try to stay as clear and consistent as possible.
Keep the elements on your page the same. For example, if you’ve chosen to make your buttons rounded, make sure they’re all rounded. This holds true for images, form (and button) sizes, font sizes, and links. Choose one style and stay consistent.
One other small details is to make sure the padding you provide around the elements on your page holds consistent across each section. Don’t have one section that has plenty of white space and another that doesn’t have any. Keep the padding consistent across the page.
Branding
Make it clear who is offering the products/services on your page. Usually this is a simple logo at the top. And maybe something in the footer about your company, privacy policy, copyright info that confirms to your customer who you are and that this is a legitimate offering.
Logo Size
You want your customer to know it’s you but not to scream it in their face.
As a basic rule you want your image to be large enough that you can read it or recognize your brand but not larger than any other element on the page. Here’s the size I would place that same logo on that page:
It’s still large enough to be read and recognized but not so large it overpowers the page.
Make Your Logo Background Transparent
While we’re talking about branding let me just share one thing I’ve noticed across a lot of landing pages. A simple logo that has a transparent background are usually the ones that look the nicest on landing pages. Making sure your logo has a transparent background isn’t hard to do. Save it as a png (jpg’s do not support transparent backgrounds) with the option to keep the background transparent. Here’s the difference between a transparent background and one that’s not.
Transparent:
Not Transparent:
Make sure the colors, logo, offering, etc is consistent with your brand. If someone is familiar with your company, when they get to your landing page it should look and feel like your company’s landing page. It shouldn’t be a surprise at all. They should recognize it as you.
Conclusion
Follow these simple guides to make your landing page look professional, beautiful, and perform better:
- Limit the colors on your page to 1 to 2 colors. Assign your colors a role and make sure the color with the most contrast to the rest of the page is the color you use on your calls to action.
- Limit the number of fonts on your page to just one. Only change the style of that font in order to better communicate with your customer.
- Your images play an important role in communicating what you’re offering to your customer. Make sure your images are a proper size for your landing page and don’t slow down the load time of your page.
- Make sure your landing page looks just as good on mobile as it does on desktop because statistically about half of your traffic will come from mobile devices.
- Understanding what you offer is not dependent on watching the video on your page. In fact, videos should simply support and compliment the main content on your page by going into more detail.
- Add white space to your page. Simply adding white space can make your landing page more appealing, enjoyable, and clear.
- Keep your page consistent and simple by cutting out any unnecessary words, colors, fonts, text and anything else that isn’t absolutely necessary and make sure the styles you apply to each are consistently used.
- The logo on your page should be big enough to be read and recognized but not really any bigger.
The more you see these principles applied to landing page design the easier it will be for you to apply them to your page. Join us for a webinar where we review each of these principles and apply them to the design of some landing pages. Learn more about this webinar here.