Landing Page Layout Principles

People talk about web “design” all the time, but the truth is that the organizational layout of a page may be more important than design when it comes to creating a high-converting landing page. A good landing page must be well organized and hang together as a single unit. Ultimately, all of the elements on a page must be constructed around the visitor’s task and conversion action.

Emphasize Importance But Beware of Banner Blindness

It may seem obvious but it’s worth mentioning because so many websites do this wrong: give the proper visual prominence to important elements. But be careful not to take this to the extreme. In other words, bigger is not always better. While your most important message should be the most visually prominent, graphical elements that are too large and obvious can be ignored by visitors, especially when surrounded by too much white space. This well-documented phenomenon is called “banner blindness.” Too much visual distinction can cause the item to be perceived as an ad and ignored.

Use a Consistent Graphic Style

Use high quality production graphics and images. Don’t mix different visual styles, such as combining photos and clip-art. Ensure that all of the image file sizes are small enough to load quickly. The only exception to this is the product “click to enlarge” close-up. These images should be as large as possible while still fitting on a reasonably sized monitor.

Avoid Stop Signs

Be wary of introducing any kind of horizontal rules or separator into your design. Rules, or even abrupt changes in background color, serve to stop the eye from going further. In effect they say, “this is the end of something” and discourage further exploration. This is also true of too much white space because it reduces scannability.

Keep Critical Elements Above the Fold

Never make the user scroll to find critical information like transactional buttons or important navigational links. Even if they are appropriate near the bottom of the page, include another copy somewhere above the fold.

Avoid Animation

Animation is almost universally annoying and should be generally avoided. If animation is required to illustrate a concept, the user should be given the affirmative option of watching it, and should not have it forced upon them. Similarly, Flash technology should be used only if it significantly improves the user experience.

Connect With Color

Color has a strong emotional impact on people and can dramatically alter moods and attitudes. This is also true on the Web. So you should use color sparingly and conservatively. This applies not only to individual colors, but also to palettes of complementary colors chosen for the landing page’s visual theme. Make sure that your colors look unified, professional, and appropriate for your target audiences.

Don’t use inverse color schemes with dark backgrounds and light text colors. Stick to common color conventions. Use white, or very light, colors for text background areas (wild background patterns make it harder to read.) Use colored text sparingly, and whatever color is used to indicate hyperlinks should not be used on any non-linking text.

Choose Images That Support the Visitor’s Task

Images on a landing page area a powerful two-edged sword. They can support your key messages and desired actions, or they can be a major distraction, interrupting your visitor’s thought process. The best images will support your visitor’s task in one or more of these ways:

• Relate to the content on the page
• Show product views or details
• Show friendly, real people (not models)
• Have clear composition and tight cropping

In contrast, these characteristics will almost certainly ensure that your images will be ignored (at best) or a distraction (at worst).

• Fake, staged, contrived, or slick images
• Stock photos or graphics that are unrelated to the content on the page
• Bright, flashy images that look like advertisements

Remember that your visitors will look at images of other people – they can’t help it. This can be useful in two tactical situations. First, important text or calls to action can be displayed as a caption immediately below the graphic, giving the message more exposure. Second, showing only the top of a picture above the fold can encourage visitors to scroll further down the page.

This article originally appeared in Tim’s ClickZ column August 1, 2011