A landing page is often the first impression someone may have of your business. Does this matter? Ultimately, yes.When it comes to landing page design, it can definitely influence someone’s perception of your product or offering. 48% of people determine the credibility of a business by its website design, according to research by Blue Corona.Landing pages that are well-designed convert better, rank better and give potential customers a better impression of your business. We’ve rounded up some great examples of stellar landing page design. Before we dive into those, let’s review some of the best-practices.
Design Best Practices
There are several key factors in designing a website that determine its effectiveness and how it is perceived. A well-designed landing page provides great user experience and communicates a message.Here are some guidelines on what to consider when designing a landing page for your website:
Clear Focus
Landing pages are more effective when they have concise, thoughtful copy with a clear goal in mind. A clear intention on all landing pages helps users interact with what you have to offer. What is the purpose of your website? Are you sharing informational content? Trying to get someone to purchase a product? A website can have many different purposes, but there are few tips to help you define it.
Define Your Audience
The relevance of your pages is an important factor in conversion rates. Be mindful of who your audience is and tailor your message to them. Try to stay away from generic messaging and create different landing pages for specific target audiences to deliver unique experiences.
Outline Your Copy
Outline what you want to say and how you want to say it. Outlines help you organize and structure information in the most effective way. Ask yourself: what is the message I’m trying to get across? What is critical to include? How do I want to present this information? How can I deliver the most value to the user?
Use Bullet Points
Your message should be simple and informative. Use headings and bullet points to break text up and make it easier to read. Be straightforward with your communication.
Clear CTA
Keep your call to action clear and actionable. Consider what stage of the buying lifecycle your consumers are in and adjust your page accordingly.
Keep It Simple
Simpler designs are better. Let’s break down a few reasons why.
Professional and Timeless: Design allows people to immediately recognize the value of your company. Bust designs become outdated quickly. People are more likely to do business with a professional website.
Easier to Scan: A simple design is easier to scan so you can maximize the amount of people who see the most important information.
Faster Page Load Speed: Site load time is a factor of user experience and SEO. slow page load speed contributes to high bounce rates and hinders your search rankings.
Accessibility: Complex features hinder people with disabilities from enjoying your website. Clean design can make your content to as many people as possible.
Builds Trust: Presentation is directly related to the user's trust in a website. Minimalistic design makes your business instantly recognizable. You’ll need a simple layout, lots of white space and a clear focus on every page to build trust through your site.
Easier for Google to Understand: The way your site is structured influences your place in Google search results. A simple structure is easier to crawl, resulting in a higher ranking.
Engaging Visuals
Striking images are one of the best ways to enhance your design. They’re one of the easiest ways to improve user experience on your website. Images break up text and make your page more engaging for users. They can help you guide the viewer's line of sight to important calls to action and can present information. Be sure to keep your images engaging, relevant and on brand.
Keep It Consistent
Brand consistency ensures your brand is easily recognizable and trustworthy in all forms of communication. Consumers trust brands they recognize, and brand consistency is a part of building that trust. A dependable experience across all communication channels goes a long way. You need a seamless look for your website, social media channels, packaging, etc. to make consumers feel more comfortable with your brand.
Visual Hierarchy
Visual hierarchy is arranging elements to show their importance. Designers use visual hierarchy to help users understand information, influence perception and guide them to desired actions. Principles like color, size, type, contrast, scale and balance help achieve this.
Color
Color is one of the most impactful elements of visual design. There are immediate connotations to each color that can show significance. Color has the power to communicate a message and evoke an emotional response. It’s a visual way to draw attention to things that are important. In interface design, color can be used to create a sense of structure and present information in groups.
Size
Size establishes visual hierarchy because larger elements draw attention first and appear to be more important. The biggest object seems to be more important, but it also establishes distinct groups.
Type
Type can enhance the look of your design and if used properly, your ability to convert and overall effectiveness.
Use F or Z Patterns
Every time you design something, it should have a flow. An intentional flow helps control where the eyes go and what users will focus on. Eye-tracking research can help you strategically lay out your landing page to call attention to the most important elements. Studies show that most people’s eyes move in an F or Z pattern.
F Pattern
Via Nielsen Norman GroupThe F-Pattern is the most common user eye-scanning pattern. Users first read from left to right across the upper part of the page. Then, users typically move down the page and then read across in another horizontal movement that covers a shorter area. Towards the end of the page, users scan the left side in a vertical movement.The F-Layout is best for pages with lots of content like blog posts or longer search result pages.
Z Pattern
Source: https://zhuanlan.zhihu.com/p/27447140The Z-Pattern follows the eye the way we read - left to right and top to bottom. First, people scan from top left to top right. Next, down to the left side and the back across to the right. Pages with less text-heavy content work best with this pattern.
Optimize for Mobile
It’s likely that most of your users are accessing your website on their phones or other devices. It’s important to build a mobile-friendly, responsive layout so your website can adjust to different screen sizes.
Examples
Wix
What the page does well:
● Clear CTA and description of business
● Clean layout
● Engaging visuals that entice users to explore more of the site
Zillow
What the page does well:
● Intuitive use - easy to find and search listings
● Clean layout
● Clear, organized value propositions
Codecademy
What the page does well:
● Considers the needs of different audiences and defines how they can meet them
● Clear CTA above the fold
● Consistent branding
Curology
What the page does well:
● Consistent and recognizable branding
● Clear value proposition
● Personalization with interactive header
Harry’s
What the page does well:
● Incorporates white space
● Upfront value proposition
● Minimal navigation
● Visible CTA
● Consistent branding
Abercrombie
What the page does well:
● Highlights their new brand identity
● Capitalizes on fashion trends
● Clean design draws attention to product images
● Strong branding
Gusto!
What the page does well:
● Great use of color and size to create visual hierarchy and guide users through the site
● Recognizable, consistent branding
● Beautiful imagery
● Effective use of white space
