5 Unbreakable Rules of Landing Page Design

Zach Ball

When creating a landing page for your website, it is important to make sure that it is visually appealing, easy to navigate, and free of errors. This article will tell you the five unbreakable rules of landing page design that can make or break your website.

The landing page of your website fulfils many functions. It’s like a front door to your website:

  • it provides the user a snapshot of your topic or product
  • its visual design and colors convey subtle information about your professionalism, trustworthiness, and attitude
  • its links and organization reveal the structure and contents of the rest of your site
  • and the words you choose and how you use them reflect on your attention to detail and dedication to your product or topic.

With your landing page conveying so much, it is important to get it right. Here are the things to consider when designing a landing page.

Include media

The first rule of landing page design is to always include a picture or video, especially if you are selling a product.  The user wants to see what you have to offer, and visual representation helps to do this.

Another reason to include a picture is to prevent the page from being a wall of text, which is too dense and may scare users off.  Using media is also important to prevent the page from being too sparse, which may give your site the appearance that it is unfinished.

Make sure the picture or video is relevant, of course: do not just put up a picture to have a picture. This is easy to do with the wealth of stock photos out there. Make it specific to the topic of your page.

include media

If you are selling a product, it is a good idea to make a video showing it off and host it on YouTube. You can have even more impact and seem more professional if you host the video yourself, however this removes the social media aspects of YouTube, which can be very helpful from a marketing standpoint.

It’s also a good idea to make sure your media is high quality, and can be viewed on the majority of users’ systems. Make sure to use a common format and test it on different systems and different browsers. This will not only reveal media incompatibilities, but other design issues as well.

Avoid clutter

It is important to keep the topic of the landing page focused.

Introduce the topic or product and provide a short description, a picture, and relevant links. Do not overload the page with endless text and useless links, as this will overwhelm and confuse the user.

A good rule for text is that it should be no longer than 15 words wide. Wide columns of text are harder for the user to follow with their eyes. If your column width is too wide, your users may become lost and give up on your site. If your page has a word width of over 20 words, you need to reduce the column width.

Make sure to keep the links to a minimum in the body text of the main content area. This is because too many links in the body text is distracting and your users may be too busy clicking on links to get around to reading your content. It is best to put those links in a sidebar or along the top of the page.

avoid clutter

A good way to assess the degree to which your site is cluttered is to do the squint test. The squint test consists of squinting your eyes until you can only see the outline and basic shape of your page. Notice areas of empty space and areas that have content. Make sure there is a good balance and that each area has a good mix of negative space and content.

Avoiding clutter refers not only to content but to design elements as well. This does not mean that you cannot have any design elements on your landing page; quite the contrary, without them your page would be boring and unappealing. The trick is to use them as a highlight or accent.

Use designs to frame your content and to fill in blank spaces. Keep the designs simple and unobtrusive. If the designs are too extravagant or eye-catching, they may distract from your content, which is what you want your user to focus on.

Use perfect grammar and spelling

One of the most important rules of landing page design is to have perfect grammar and spelling.

Nothing will turn users off faster than a spelling error or horribly constructed sentence. While it might not be fair, users do attribute spelling and grammar errors to the author’s lack of skill, expertise and authority.

Spelling and grammar errors are easy to miss, especially in your own writing. The solution is to have two or three people edit your work. Three pairs of eyes are better than one. Make sure at least one of the people editing your work is an experienced editor and is able to correct poor grammar.

spelling and grammar

The way you use words can have a powerful effect on your users. Choose your words carefully, as words have a great effect on tone and mood. For example, if you are selling flowers, keep the tone light and cheerful and avoid complex or uncommon words.

Create effective links

It’s very important to make sure that your users can recognize where the links on your page are located, what they link to, and how they relate to the links around them.

Effective linking is the cornerstone of good navigation and it is most important on your landing page, the front door to your website.

The most important aspect of effective linking is giving your links good names. The link text should be concise and descriptive. Keeping link names short will help to keep your sidebar width down, which is more appealing.

It’s also important to keep links grouped together on the side in a sidebar or along the top of the page. Links tend to get lost when they are placed in the body text in the middle of the page within paragraphs.

Organize your links in a meaningful way: alphabetical, chronological, largest to smallest, and so on. This will help users to find the link they need quickly if they can easily recognize the organization scheme you are using. A good example of this is when you see a drop down menu from which you are to select your home state, the states are usually listed in alphabetical order so you can quickly find your home state.

create effective links

The final thing to consider when creating links is that the links on the page should be obvious as links. Do not make your users go hunting for links or have them clicking on words or pictures that are not links. While your users may be able to find links by hovering the mouse cursor over them, this may frustrate some. You want it to be as easy as possible for users to navigate your site.

Group links into categories, give them obvious names, and make sure they stand out as links. Your users will thank you.

Use colors wisely

The final rule when making a website landing page is to make wise use of colors.

Colors have a very strong effect on users.

  • Blue conveys a sense of trust and reliability. Notice how many businesses use the color blue in their logos.
  • Red is exciting, a warning, stop, or blood.
  • Black can be evil, nothingness, modern, or stylish.
  • Yellows and oranges are fiery, flashy, and bold.
  • Green is natural, money, or calm.

Keep in mind that these are just generalizations. They vary across cultures, especially. Do some research before you choose colors for your website.

landing page colors

The next most important thing to keep in mind when choosing colors is to keep the number of colors to a minimum. It is nice that your browser can render hundreds of colors; it is not necessarily pleasing to the eye to have five, ten or more colors on a page. A reduced color palette will have two to four colors.

Anything else?

Pay attention to trends and feedback from your users. Design trends change more often than you would think and it is a good idea to keep abreast of them so you can change with them lest your site begin to look dated.

Conducting usability tests is a good way to determine what is working and what is not. Sit down with your users and ask them to find certain information on your site to test navigation, or just ask them how they like the design. It’s a good way to get a sense of what you need to change.

If you take your time and pay attention to all of the rules listed above, you will go a long way to making a landing page that is professional, inviting, and effective at driving traffic to your site and keeping your site visitors engaged.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://ebooksuccess4free.wordpress.com Jason Matthews

    You really nailed some important aspects of this, as most landing pages I encounter make me instantly turn away from the site and close the tab, opting instead for a webpage that feels less “salesy.”

  • http://lechlak.com Andrew Lechlak

    Bookmarked this article. Outstanding job illustrating your points. I appreciate it.
    I have been getting more into Landing Pages since I am running Adwords campaigns.

  • http://www.ewiusb.com deathshadow

    They’re all good points, but many of them are often ridiculously overdone — the example image of the massive banner for example; as a user that makes me go find some other website on the same subject because 1) I won’t wait for the media to load, 2) on most sites I end up asking “what has this got to do with the product” — stock photo of some people sitting there often leaves me asking “just what has that got to do with the product or the site, besides wasting my bandwidth”. It’s why I’m NOT a fan of the ‘massive banner in the content” nonsense… pushing content of actual value down the page.

    Well, on top of it often shoehorning you into making a fixed height content area thanks to the PSD jockeys having no clue what ‘dynamic’ means. I don’t mind the occasional image or relevance; but blowing a quarter megabyte or more on some goofy stock photo that probably has nothing to do with the product — not so much; and that’s what MOST of those “media” banner areas amount to on sites.

    Though admittedly I’m a freak who’s typical response to “AAAH!!! WALL OF TEXT!” is “Literacy, try it!”

    I end up like the old ladies in the Wendy’s commercial… “where’s the beef”

  • http://www.webpagefavs.com/ Les

    You mention that black is seen as evil and that is true in Western cultures however this colour is seen as a sign of purity in Eastern cultures, particularly in Asia; think of it as the role of black and white as being reversed.

  • http://webconsiderations.com Bert Hixson

    I have a client that wants only an image on the home page that links to an internal page on the site.(The image includes “Enter”.

    She does already have a pretty big client base and group of followers but I am thinking that this may hurt SEO.

    I certainly would like some feedback.

    Thanks.

    • http://www.ewiusb.com deathshadow

      That’s called a “splash page” and is on just about every “top ten” list of how NOT to design websites alongside auto-playing music, opening new browser windows, text content as images, failure to explain what the site is even about on your main page (which in a way is the same thing), or the belief that HTML 5/CSS3 is some sort of miracle salve.

    • Halil Özgür

      +10 deathshadow

      But if your client insists on it and/or if it is essential, then make it just an overlay image (a la Light/Thick/Color Box), preserving the home page underneath. And make it close-able. That way it can be both useful and searchable.

  • http://www.localinternetleads.com Local leads

    For me you have left out the most important rule RELEVANCY!

    While this is somewhat implied in many of the others it certainly needs to be emphasized by itself.
    Too often we click on or follow a link and end up on a page where you think where the hell am I and what does this have to do with what I am looking for?

    For those of us that have done a lot of PPC work this should be second nature as your ads will just not perform. In PPC you have to have relevancy all the way through – search term > ad > landing page.

    I can follow all your rules and have a great landing page but if it is not relevant it will not perform.

  • http://www.dorseyharrington.com Dorsey

    I agree with others’ comments regarding the use of stock photos. If I’m looking for a product, I, too, would prefer to see that product prominently displayed to confirm that I’m at the right place.

    My second personal gripe is spelling and grammar. There’s no excuse for poor spelling with the ubiquity of spell-checkers, and grammar is something we all should have learned in school. If something as simple as writing well is too difficult to get right, I’m suspect about the entire site.

    One thing that seems to have gone the way of the Dodo is the fancy Flash landing pages that rell me to “wait while my marketing message is being loaded”. I can’t click away from them fast enough.

  • http://www.platformic.com Mike

    Nice article, I agree with everything you said. To play devil’s advocate a bit, I would like to point out that you can get away with having a text heavy landing page if typography is applied correctly. What I mean is if you use the right typography you can make a word look like an image or at least a more aesthetically pleasing representation of what the word is actually saying.

    I think another good takeaway from your article is that all of these rules only work if the correct grid system is applied to keep text and images layout in a manner where they are in harmony with each other and proportionate them themselves and the rest of the page.

    Thanks for the good topic, keep them coming.

    • Zachary Ball

      This is a good point and it makes me see the tremendous value in a talented designer I know a great hand lettering artist http://www.dancotton.com that can turn your words into a multimedia experience.

  • http://www.lockitsocket.com Gary Ingram

    Great post that simplifies the major considerations instead of over-complicating the issue.

    I couldn’t agree more with your comments on spelling and grammar. You may want to check the second to last paragraph in the “create effective links” section. Look for “of”.

    • http://www.onsman.com Ricky Onsman

      Well done, Gary – you spotted the deliberate mistake (ahem). Fixed now.

      Which just goes to show you can’t rely only on a spellchecker, either.

  • Brad

    Good, valid points but you do not ALWAYS have to use an image or video on a site as a header. There are a lot of really nice designs emerging using purely typographic headers and they are just as effective as using an image or video.

    I think it all has to do with what the design actually needs and what suits it rather than “it HAS to have it”.

    • Zachary Ball

      I agree. There really isn’t a one size fits all but it’s better to be informed of the thoughts behind effective landing pages.

  • http://www.123stockimages.com Santhosh

    Very informative article! I know what the colors stand for and it is easy to understand the page’s effect on user when one color in the page dominates. But when 2 or more colors dominate, it is really puzzling to understand the effect. Is there any resource to understand the combined effects of multiple colors?

  • Simone Collins

    Speaking of relevancy, you have included a number of screen shots of websites, but not mentioned how they relate to your points. Are they good or bad examples in your opinion? Why? As they stand now, they’re just decoration.

    • Zachary Ball

      The first example was selected because of these two reasons. The image is used to instill hope and fun for the target market and secondly the form is simple and easy to use.

      The second example was chosen because of its simplicity and creativity. A great graphic designer can make a huge difference.

      I like the third because of the format is a litltle different with the form on the left third and the image of the girl in the middle and right third, I also liked how the “click here ” button is exciting.

  • A

    Question? would using a video/picture affect the loading time of a website? In a users point of view, if a certain website is loading way too long, the chances are, i would just close that window and look for another one, thus, loss of traffic/potential client.

    @brad, can you give examples or website we can take a look about the thing you mentioned “using purely typographic headers”

    • Zachary Ball

      Videos and pictures do have the potential to slow a sites load time just be sure to use videos and pictures that aren’t too big.

  • http://hometipster.com Hometipster.com

    Thanks, very interesting. We are currently in the middle of a complete redesign. It took us over two months to finalize the design so that it met with our visitors feedback, provided easier navigation and made it far more interactive. About another month and it’ll go live. Some good points here that we can incorporate. Thanks!

  • http://www.trener.nl Arno Smit

    I really love the graphic on the use of colors.

  • http://www.mobile-friendlywebsites.com Ros

    Good, clear article and just in time before I complete the landing page of my website! Thanks.

  • http://tag-design.com Farry Aprianto

    One of misspelling case I’ve just saw yesterday is on this site.
    It’s not a landing page per se (it’s a home page,) but it’s annoying nevertheless.
    Especially when it has a great web design.

    http://theartofscalability.com/

    Notice “Architectue” on the subtitle. :)

  • http://www.webconcepts.com Stewart Cook

    Nice article. I would say though that the LP under effective links would be better if the blonde girl was to the left of the form as currently the visual cues draw the attention away from the form if that is the intent of the page. I know you just used it as an example but wanted to add that.

    • http://www.designspike.com Ally Shoshana

      Absolutely agree with you on this one. That’s a bit of a miss. Perhaps if she was still the the right of the form but looking at the form that would increase visual cue to look at the form??

  • http://tonykelsey.wordpress.com Tony Kelsey

    Ahhh…I just finished designing/building a landing page today. Looks like I am in good shape. Thanks for the info.

  • http://gallery-point.blogspot.in/ monica

    Really like this article… there are some good points to be noticed,,,
    thanks

  • http://www.mindxstudio.com/ Mrinal

    Glad to found such useful post landing page design unbreakable rules. Learn a lot by study your hard work. Thanks you so much.