View Cart

Premium tuts, articles and royalty free designs resources

Become a better designer, access tons of premium tuts and royalty free designs resources.

Premium Design Bundle

How to Design an Eye-Catching Landing Page

Landing pages might be considered the ultimate challenge in web design; they have the same basic elements and objectives as any regular website, but their scope is limited to just one page. And while websites usually have a few diverse goals, landing pages have just one purpose: to incite visitors to complete a simple action – convert into customers. What your business defines as conversion may be anything from subscribing to a newsletter to buying a product—but whatever your goal is, the object of the entire page’s design must encourage the customer to take the desired action.

Even if a layman isn’t familiar with the term, web users come across landing pages all the time. Most of them are perceived as a minor irritation along the way to more interesting destinations. So what it is that grab a users’ attention, makes them read on, and commit to an action? It’s all about the right combination of catchy, thoughtful content and intriguing imagery, combined into a simple, but direct, layout. And while there’s no perfect formula that works for every type of landing page, there are some elements that should be fairly universal. Take a look at some of these essential components, to make sure that you’re always incorporating them into your landing page designs:


Strong Headline and Call to Action

Because a landing page has such limited scope, it’s important to allow users to focus on just one central statement and one directive; more than that can be confusing. Optimizely is a textbook example of this necessary simplicity; its easily-identified headline and call to action (CTA) are clear and compelling, and, importantly, the page is limited to just one idea and CTA.

Clear and Concise Writing Style

Unless your landing page caters to a particularly erudite audience, your writing should be as simple and short as possible. Any excess should be stripped away, leaving more room for white space and imagery.

Carefully Selected Phrasing

Your phrasing should be clear and concise, but it’s equally important that it be appealing. Any time you can rephrase a statement to make it feel more positive, sincere, or reliable, you should. As an example, Swap has a few great turns of phrase to take note of on their landing page. They use key watchwords like “3 easy steps!” (numbers are eye-catching), “we have a secret” (which makes them feel like exclusive experts), and “compare…with secondhand alternatives.”

Unique and Compelling Selling Point

Think of the content of your landing page as a narrative, the entire point of which is to convince your readers that your product is valuable to them. One of the best ways to make this point is by emphasizing the unique niche that your product fills.

SimpliSafe’s layered defense for home security landing page does this well by creating a unique narrative: No matter the size of your home, it’s your castle and you have the right to defend it like one. The guide then goes on to teach home owners how to create layers of defense around their “castles” in order to protect their property. SimpliSafe could have written up dry, run-of-the-mill content about the importance of home security systems, but they took a much more memorable route instead.


Breaking Up Text Vertically

Despite your best editing efforts (and depending on the nature of your product), it often becomes necessary to have a lot of written content on your landing page. The two best ways to deal with this issue is 1) spread the text out vertically, and 2) add iconography. Just remember when you have a lot of text that it’s best practice to get as much information above the fold as possible.

Using Icons

Icons have practically no downside; they can be small and simple or large and elaborate, and they always add to the readability and interest of any text block. As infographics and other icon-heavy types of webpages have shown, sometimes a great set of well-designed icons can practically carry a landing page design. Zoho’s description of features (pictured above), for example, would be deadly dull without the addition of icons. My Asset Tag’s intangible asset guide (pictured below), on the other hand, uses large icons to break up sections of the landing page and guide readers through the content.


Meaningful Color Choices

Different combinations of colors encourage certain reactions in people, and these influences can be a subtle yet powerful motivator. There are many connotations associated with each color, but some of the most elemental ones are practically universal: for example, red is an energizing color that works well for grabbing attention, while blue is a good hue for creating a soothing effect. It’s definitely worthwhile to investigate color psychology, and make sure that your palette is the right choice for the message you’re trying to send.

Plenty of Contrast

Because the headline and call to action are so essential to a good landing page, it’s important to utilize all the tricks of the trade to emphasize these elements. One of the best ways to do this is by using contrasting colors, which when applied correctly can be extremely impactful. Simply Business’ guide to CRO uses a soothing and calming light blue, but puts the headline, CTA, and most important elements in a contrasting burnt orange, which immediately catches the user’s attention.


Photography and Illustration

Depending on the goals of your landing page and your brand identity, you might go several different ways with your illustrative elements. A really modern, graphic approach might use simple color blocking with interesting type, while a simple and minimalist approach would maybe choose thin, clean type and a wash of light color. But most landing pages are enhanced by the addition of either photography or illustration.

Bear.CSS, for example, uses its cartoon-style illustration style to enliven the page and add a sense of playfulness to a fairly dry and utilitarian product. Rdio on the other hand, uses layered and colorized photography to inject the simple layout with an edginess that matches the product perfectly.

Interactive and Video

Sometimes a video or interactive element can convey what no amount of text or images can. If that’s the case for your product, make sure that it’s as smoothly produced as Path’s video; the concept is so perfectly explained that there’s no need for any other elements above the fold.

No matter what your product is, there’s a way to present it in a landing page that should speak to your target audience and create the conversions that you’re hoping for. Cross these items off your list to make sure you’re starting off on the right foot.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Similar articles:

Fatal error: Call to undefined function sim_by_mix() in /home/gigille/public_html/wp-content/themes/designtnt-new/single.php on line 81