Landing Page Layout Principles

  |  October 4, 2011   |  Comments

7 ways to make or break your landing page.

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.

Tim is off today. This column was originally published on Aug. 1, 2011 on ClickZ.

ClickZ Live Toronto On the heels of a fantastic event in New York City, ClickZ Live is taking the fun and learning to Toronto, June 23-25. With over 15 years' experience delivering industry-leading events, ClickZ Live offers an action-packed, educationally-focused agenda covering all aspects of digital marketing. Register today!

ClickZ Live San Francisco Want to learn more? Join us at ClickZ Live San Francisco, Aug 10-12!
Educating marketers for over 15 years, ClickZ Live brings together industry thought leaders from the largest brands and agencies to deliver the most advanced, educational digital marketing agenda. Register today and save $500!


Tim Ash

Tim Ash is CEO of, a landing page optimization firm that offers conversion consulting, full-service guaranteed-improvement tests, and software tools to improve conversion rates. SiteTuners' visual attention prediction tool can be used on a landing page screenshot or mock-up to quickly identify major conversion issues. He has worked with Google, Facebook, American Express, CBS, Sony Music, Universal Studios, Verizon Wireless, Texas Instruments, and Coach.

Tim is a highly-regarded presenter at SES, eMetrics, PPC Summit, Affiliate Summit, PubCon, Affiliate Conference, and LeadsCon. He is the chairperson of, the first conference focused on improving online conversions. A columnist for several publications including ClickZ, he's host of the weekly Landing Page Optimization show and podcast on His columns can be found in the Search Engine Watch archive.

He received his B.S. and M.S. during his Ph.D. studies at UC San Diego. Tim is the author of the bestselling book, "Landing Page Optimization."

Connect with Tim on Google+.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Analytics newsletter delivered to you. Subscribe today!



Featured White Papers

Gartner Magic Quadrant for Digital Commerce

Gartner Magic Quadrant for Digital Commerce
This Magic Quadrant examines leading digital commerce platforms that enable organizations to build digital commerce sites. These commerce platforms facilitate purchasing transactions over the Web, and support the creation and continuing development of an online relationship with a consumer.

Paid Search in the Mobile Era

Paid Search in the Mobile Era
Google reports that paid search ads are currently driving 40+ million calls per month. Cost per click is increasing, paid search budgets are growing, and mobile continues to dominate. It's time to revamp old search strategies, reimagine stale best practices, and add new layers data to your analytics.




    • GREAT Campaign Project Coordinator
      GREAT Campaign Project Coordinator (British Consulate-General, New York) - New YorkThe GREAT Britain Campaign is seeking an energetic and creative...
    • Paid Search Senior Account Manager
      Paid Search Senior Account Manager (Hanapin Marketing) - BloomingtonHanapin Marketing is hiring a strategic Paid Search Senior Account Manager...
    • Paid Search Account Manager
      Paid Search Account Manager (Hanapin Marketing) - BloomingtonHanapin Marketing is hiring an experienced Paid Search Account Manager to...