Overall Landing Page Design, First Impressions, Visual Cues
by Peep Laja last updated on 0

Overall Landing Page Design, First Impressions, Visual Cues

People make snap judgements. It takes only 1/10th of a second to form a first impression about a person, and websites are no different. It takes about 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about your website that determines whether they like your site or not, whether they’ll stay or leave.

But what is good design? Google did a study on this and found that 2 key things determine how likely people are to like a web page:

1. Visual complexity. Websites that are visually complex were consistently rated as less beautiful than their simpler counterparts

2. Prototypicality. “Highly prototypical” sites – those with layouts commonly associated with sites of it’s category – with simple visual design were rated as the most beautiful across the board.

In other words, the study found the simpler the design, the better.

The human brain prefers to think about things that are easy to think about. That’s why you prefer visiting sites where you instinctively know where everything is & you know what actions you’re supposed to take. That’s why you want to stick with typical layouts, and stay away from too much innovation when it comes to landing page design.

 

Create strong visual hierarchy

Squeaky wheels get the grease and prominent visuals get the attention. Visual hierarchy is one of the most important principles behind effective web design. It’s the order in which the human eye perceives what it sees.

Exercise. Please rank the circles in the order of importance:

scheme-importance

Without knowing ANYTHING about these circles, you were easily able to rank them. That’s visual hierarchy. You should rank elements on your website based on your business objective. If you don’t have a specific goal, you can’t know what to prioritize.

Here’s an example, it’s a screenshot I took of the Williams Sonoma website. They want to sell outdoor cookware.

The biggest eye catcher is the huge piece of meat (make me want it), followed by the headline (say what it is) and call to action button (get it!). Fourth place goes to a paragraph of text under the headline, fifth is the free shipping banner and the top navigation is last. This is visual hierarchy well done.

Screen Shot 2014-06-16 at 17.16.30

Good design promotes trust

In a research study for Consumer WebWatch, conducted by Stanford University credibility experts, they found that good design makes web pages look trustworthy.

They found that what people *say* about how they evaluate trust of a website and how they *really* do it are different. So forget about privacy statements, go for good design instead.

Nearly half of all consumers in the study assessed the credibility of sites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and color schemes.

 

What to keep in mind when planning the design of your landing page

1. Keep it as simple as possible – one large image vs. a bunch of little ones, one column instead of three – utilize as much white space as possible.

Design elements you typically want to have on your landing page:

  • Have one benefit-oriented headline
  • Sub-headline or intro paragraph that lays out the specifics of the offer
  • 1-2 paragraphs of body copy
  • Bullet list with 3 items
  • 1 large image or video
  • 1 email capture form with a single call to action button

2. Obey the rules of cognitive fluency when you lay out your design. Put things where your visitors have grown accustomed to finding them.

3. Rely on your own colors, logo, and typeface to communicate clearly and subtly. Don’t add copy and/or images unless it communicates something your visitor actually cares about.

4. Remember that “prototypical” doesn’t mean that every aspect of your site should fit that mold.

5. Keep mobile devices in mind! Tablets and smartphones are already forming a large share of web traffic, and it just keeps growing. Make sure your design is mobile responsive.

 

Think of videos too

Using just the right images boosts your conversion rate, but a video is so much better than a photo. It’s the closest you can get to seeing the product or product demonstration in person. There’s a plethora of case studies where using a video on a landing page boosted conversions.

If the product is complicated, using video to explain how it works causes less friction than reading a bunch of text. You can present a ton of information with just a 30 second video – equivalent of half a page of text, if not more.

Should you have one? Ask yourself: what can video do that text and images can’t? If you can make a case that it would enhance the experience, go for it.

videos-in-landingpages

Here’s how to ensure you video works great:

Ask to watch the video

If you have a video on your landing page, just don’t assume people will watch it. Add a call to action above the video explaining why they should do it + setting expectations to the length.

Example: “Watch this 20-second overview” or “See how XYZ works in 30 seconds.”

Start with a bang

Skip lengthy intros, cut right to the chase. The first seconds will determine whether they keep watching or not. Add your biggest and boldest claims up front.

Make sure the video explains the main thing in the first 15-20 seconds, so even if they don’t watch the full video, they get the point.

Keep it short

Because the explainer video is an introduction to your offer & the problem, it should be as compact as possible – preferably between 1-2 minutes, to maximize your watch through potential. The longer the video, the more people will stop watching before the end.

Script is everything

Quality of the video comes down to the quality of the script. According to serial entrepreneur Neil Patel, a good explainer video script should contain the following elements:

  • An introduction to your company & an overview of the problem you solve
  • Why the problem is valid for the industry
  • Specific example of the problem
  • Explain how you solve the problem
  • Give the call to action
  • Answer any objections & state your guarantees
  • Use client proof to seal the deal

Test

You can’t know in advance whether video is going to be better than static image. You need to test it!

 

 

Subscribe for fresh tips & top articles

GetResponse Sp. z o.o. needs data contained in this form to provide you with materials you requested. For more information, read Privacy Policy.

Thanks for signing up!

We'll send you an email to confirm this shortly.

Become a GetResponse Blog writer!

Write for us