There are many facets to designing a successful, conversion-focused landing page. But if we were to break down the basic elements that contribute to the overall success and address key pain points, then the following seven items stand out to me as essential to the success of a landing page design.
I’m sure you have heard the KISS acronym, Keep It Simple Stupid? If ever there were a time to keep it simple, it would be with a landing page. The most successful landing pages maintain a level of simplicity in each aspect of the page, be it content, imagery or the call to action. So let’s take a look at them one by one, shall we?
The content hierarchy has a big impact on the flow of the page. The content of the page should be broken up in a way that can be consumed easily and lead the viewer to the conversion point. If the content and imagery is unorganized, or weighted too heavily on the page, it can negatively affect the purpose of the page.
The page shown here contains quite a bit of information that are broken up into small, digestible blocks. There is also a clear hierarchy starting at the very top, with the remainder of the page providing supporting content, ending with testimonials. This page is well structured, and simple in execution. Unfortunately, it has two competing calls to action.
An effective and conversion focused landing page design should guide the user to the call to action, without the need for overt manipulation. Visitors follow common behavioral patterns when looking at a page for the first time. Simply put, they usually begin in the top left corner and scan diagonally into a sweeping spiral. Using imagery and good design is more elegant, guiding the reader without holding their hand.
The example below executes this concept very well. Can you spot the leading devices?
The image is relaxing, and does a fabulous job of enticing you to schedule your next vacation. But two elements of the image, combined with good design are pointing you to the call to action. First, the green box with the headline gets your attention. Then the eye is drawn to the smaller block of green and to the bright orange pillows and then voila, you’re looking at a very simple submission form. If the pillows did not help, the landscape in the background probably did. They are two leading devices that connect the headline to the call to action.
Another note about the flow of a page; use white space. No, that is not a “hole” that needs to be filled. Open space around key elements can bring focus to the element and help it stand out. White space also helps break content into blocks. White space is good when used properly, so please learn how to use it effectively.
Color and Contrast
Color selection and execution in the design is crucial for an effective landing page design. The human eye is attracted to both color and contrast; but in order to be effective, you must have both.
In the example to the right, the left side of the image has color, but not enough contrast. On the right hand, we are using the same color hue but with higher contrast. A simple method to determine if the contrast is high enough is to convert the image to black and white. Even in black and white, the right hand side of the image is the best option.
Now take a look at the example below. The layout and color palette is somewhat muted. Take a moment to scan the page.
Let’s see if you and I followed the same path? I began with the red logo and down to the headline, then to the female on the phone and to the awards at the lower end of the page.
Did you overlook the call to action as I did?
The form block blends in with the content. It is absorbed by the black and white text of the page. The use of color in this example leads you past the call to action. Now, I’m not suggesting that you make all your contact forms bright red, but if the form had a color border and a colorful “Register” button underneath it, your eye would have moved laterally to the form rather than the awards. If the primary call to action is muted, then your conversions will be effected.
One of the best features of the modern web is the ability to use a much broader selection of typefaces to enhance communication. Good typography improves legibility and provides structure. But great typography becomes part of the user experience, delivering a more emotional and powerful message.
Both of these examples make great use of typography to more effectively generate an emotional response. The first example uses a simple typeface in extra bold that gives the sense of movement, complimenting the image in the background. In the second option we see a vintage style typeface that compliments the product being offered (an app that allows you to give your pictures a vintage feel).
If the typefaces on either of these sites had been just your average computer typeface, centered on screen, would they be as effective?
One final note regarding typography: stick to the KISS principle. More than three typefaces on a page is a train wreck. And making every other word bold for emphasis is the equivalent to making nothing bold. It’s like everyone in a meeting talking at the same time. Don’t do it.
Personally I find pages without visuals rather boring, but then again I do have the attention span of a gnat. (The dog from Disney’s “Up” comes to mind. “Squirrel!”) Your landing page does not need to have an image per se. However, it better have some color and good typography if it is going to be effective.
In my opinion, this page is a good example of an elegant failure. I personally find it completely unconvincing. Sure, the call to action is easy to spot and easy to use. But the page does not really convince me as to what exactly they are offering. A strong visual in the background or even off to the side would have made a much better first impression. After all, the first impression is all you get.
Imagery not only adds visual appeal and support for the message, but it can also lead the reader to the all-important call to action. The example below comes to mind. Although the hand is swiping the card, the finger is pointing toward the form. The lower hand and phone are tucked up nicely to the form element. And the strongest colors are behind the form element, naturally attracting the reader’s eye. A great example of a simple design that is very effective.
Call to Action
Yes, I saved the best for last. Each and every item in this list has but one purpose, to generate a conversion. The call to action can come in a few different formats such as a button, form, or other action. Regardless of the specific format, the call to action MUST stand out. So following are a few tips for creating a successful call to action.
- Keep It Simple: allow for white space (open space) around the primary button that completes the action. White space around an element such as a button will naturally attract the eye. Note the spacing around the buttons in the example below. A little separation from other elements gives the buttons higher visibility.
- Button: make it larger than the average button; for a form, make sure the form is encapsulated using color or positioning.
- Colors: use color that contrasts with the background elements. In both examples above, color plays a big role is making the actionable elements stand out.
- Forms: only get the most basic information you need to collect for a follow up. People do not enjoy filling out forms, so keep them as short as possible. Don’t be greedy.
- Use descriptive text in the actionable button so that the user clearly understands what they are about to do. Examples could be:
- Download Free Trial
- Register for Event
- Join Our Mailing List
- Submit Your Application
- Make A Reservation
Landing pages are the perfect opportunity to present a targeted message to a captive audience. But all too often they message is weak and the page poorly designed, leading to lackluster performance. Take some time to evaluate your page and apply some of these basic principles and I am confident you will see better results.