User experience refers to the interaction between a user and a product or service. The landing page's primary functions are to shape a new customer's impression of your site and encourage returning customers to interact with your brand. For this reason, it's very important to apply good UX practices on your landing page. Here are some good practice commonalities to consider when designing your landing page:

Consistency

Consistency is considered to be one of the main keys to UX design. A user-friendly design should always provide a certain degree of consistency. The reason for this is that a user would not want to find a completely new design every time he uses your service – this ideaof "continuous retraining" often leads to frustration and confusion. Key elements to consider are:

Colour - Working with a consistent colour palette is essential to construct a visually pleasing landing page. There are several free online tools to help you identify your ideal colour palette and maintain it consistently:

  • Adobe Color - this Adobe tool allows you to work around different colour wheel combinations to identify shades that work well together or clash.
  • Color Picker - this Chrome extension allows users to identify colours by HEX value (#000000) and save them. These colour picking tools are very common in web design software. This enables designers to use a consistent shade of a specific colour at all times.
  • Coolors - this is a colour inspiration site which randomly generates aesthetically pleasing colour palettes which are then easily personalised.
Bert - Good colour palette example

Font - your website's typeface should be bucketed into different groups: Headings (H1, H2, H3), Body (text, quote, annotation) and Action text (buttons, links, CTA). Ideally, you want to assign a specific font to one of these elements – for example

  • H1 - 46pt Georgia Bold
  • H2 - 36pt Georgia SemiBold
  • H3 - 24pt Georgia SemiBold
  • Body - 9pt Arial Regular
  • Body Bold - 9pt Arial Bold
  • Button - 10.5pt Georgia SemiBold
  • In this instance, Georgia and Arial are the combined typefaces to make up my site's typography. All heading and button elements use the Georgia typeface, whereas the body text uses Arial – making it easier for me to direct the user's attention with text. If you want to learn more about fonts, make sure to check out our 5 Typography Tips for your Website article. Here are some useful tools for web typography:
  • FontNinja - this is a font identifying tool which also allows you to install found font families. This is a great tool to ensure that your text content remains consistent throughout the full design process. Chrome Extension also avaible.
  • FontPair - this tools offers users a selection of Google Fonts combinations (typically Heading + Body) for your website.
  • FontsInUse - this font archive shows different featured typography styles applied on different designs.
Revolver New York // Good font use example on landing page

Spacing - this is a key element for graphic design – print or web design. Spacing can keep things separate or together, and acts as an indicator for a start or an end. Having consistent spacing is very important in order to lead the customer along the page in concise blocks of information. If you lack of clear spacing, your information may seem cluttered together making it difficult to read for your customer. However, if you include too much spacing and white space, this may give your site an empty feeling.

Borders - these elements go hand in hand with the spacing. Borders allow to pack up groups of information within sections on your page. They may be used to surround images, text boxes, buttons, etc. There are 3 main attributes to consider:

  • Colour - this should be a colour included in your colour palette/design guide – or it could perhaps be a standard grey.
  • Thickness - this should be considered along with other elements, such as icons and their thickness, in order to achieve consistency.
  • Border radius - boxes or other assets on the page can have straight cut edges or rounded edges. Although there is no correct border radius, this should be considered along with your audience, purpose and tone of voice.

Layout

We have now covered the essentials of working with consistent font, colour and spacing – so what's the next step? Now you're ready to lay these elements out on the page following a logical structure. There are several standard elements that should be included in your landing page where possible:

Navigation bar - this is normally placed at the top of your site. It should allow the user to navigate along your site – for example: "Home, Store, Contact, About". This should also include the option to sign in and show the current shopping cart.

Unbounce // Good example of navigation bar

Explain your service - you need to let your customer know what you do and why you stand out from the rest. This can be displayed in different ways:

  • Text - the benefits of using text is that you can go as granular as you want in reference to your product or service. The example below goes into detail regarding the services they offer.
Headspace // Good example of unique value proposition on landing page (text)
  • Headspace // Good example of unique value proposition on landing page (text)
CBD ONE // Good example of unique value propostion on lading page (icons)

Product showcase - this is an important aspect to consider when directing customers from the landing page to your product pages. Some examples may include promotional products, new products, specific collections, etc.

Argos // Good example of landing page product display

Testimonials - these are essential to provide your brand with authenticity and authority. 91% of consumers trust reviews just as much as recommendations from friends and family. These can come in different forms, such as, customer reviews, professional reviews, trust badges, user generated content, etc.

The Tea Story // Good example of landing page testimonials (text)
TrustPilot // Good example of landing page review grid

Newsletter subscription - this is a great way to keep in touch with your customers by regularly updating them – for example: new/featured promotions or products, new blog post, relevant press or news, etc. Your sign up form is the first step to gaining new email subscribers, and it can make or break a visitor’s decision to receive your emails.

Daily Skimm // Good example of landing page newsletter subscription

Footer - this has to be standardised throughout your whole site and it's purpose should be to include any additional information regarding your online store as well as provide additional navigation channels. Elements that could go included in the footer are:

  • Copyright
  • Sitemap
  • Privacy and cookies policies
  • Terms of use
  • Contact
  • Social links
  • Navigation
Spotify // Good example of landing page footer

The example below shows a landing page with all the elements that we have discussed in this post, including consistent elements, a logical layout, useful CTAs and aesthetically pleasing.

MOO // Good landing page layout example

Specificity

Make sure to be specific when communicating your brand or service – any vague information tends to push potential customers away because if you don't seem to know exactly what you offer and why they should use your services – why should they trust you?

This will not only help your customers interact with your store, but will also streamline the design process of your brand.

References

The Ultimate Ecommerce Landing Page Lookbook - https://unbounce.com/landing-pages/ecommerce-best-practices/

How To Craft an Effective Landing Page - https://uxdesign.cc/how-to-craft-an-effective-landing-page-a-brief-case-study-7c592ba4b967

The Importance of Spacing in Print and Web Design - https://www.davidwalkerdesigns.com/articles/importance-of-spacing/#:~:text=Spacing is a key element,to read and visually unappealing.

5 of The Best Ecommerce Landing Page Examples we've seen - https://sleeknote.com/blog/e-commerce-landing-page-examples