Landing Page: The right UI/UX & features

Landing Page: The right UI/UX & features
Landing Page: The right UI/UX & features

A landing page is the immediate output of a brand’s, product’s, company’s clickable advertisements and search engine optimised results.

It is essentially the outer appearance of the inside world. The content on the landing page is in accordance with the content that either appears in the search results of a user’s browser or a part of the advertisement that the user clicked which enabled him to land on the brand’s/product’s/company’s website.

A landing page is not a home page. Often new web designers and developers get confused between a landing page and a home page. The difference is as that of a thin hair but it is extremely crucial to understand so as to improvise and uphold the user experience and the reputation of the brand, product, company.

A home page contains a network of links which can enable a user to navigate through the entire website and has detailed content. A landing page, on the other hand, does not contain any links to navigate through the website and just comprises of an effective call to action, some content and a powerful and visually appealing design.

Why thinking about the UI/UX is important?

“You cannot bore people into buying your product – you can only interest them in buying it.”

~David Ogilvy

In this technologically advanced era, everyone desires to have instant results with the least amount of work. To ensure that your user is staying hooked to your website and gets interested in buying your product and services, you need to give them an unforgettable experience.

Shouldn’t you use an already existing template instead of reading this blog and trying to implement it? The magic of “different” is often underestimated. Almost all websites on the internet are made similarly. People spend less time on building their website, pick an already existing template and modify it with content related to their product. To gain a monopoly, it is imperative to stand out.

A personalised experience in accordance with the product’s vision gives a feeling of familiarity and trust to the user. If you have made efforts into creating your product, building your brand and establishing your company, a landing page full of the latest and effective UI/UX techniques will make certain that you get the fruit of your hard work.

Picking the Right Colours for your Landing Page

  • Using the colour wheel to create your colour palette
    Here I have used Adobe Colour CC (https://color.adobe.com/create/color-wheel) to create colour palettes using the colour wheel. It is a powerful tool which can be used easily and smoothly.
    a) Analogous Colours
    Since analogous colours are found in nature, these colours can be used to generate a harmonious, calm and serene flow on your landing page.
Figure 1 Analogous Color Scheme using Adobe Color CC
Figure 1 Analogous Color Scheme using Adobe Color CC

b) Monochromatic Colours
When you are unsure of which colors to use but you have one color in mind which resonates with the image of your brand, product or company, a monochromatic colour scheme will come to your rescue. These colors blend into each other well.

Figure 2 Monochromatic Color Scheme using Adobe Color CC
Figure 2 Monochromatic Color Scheme using Adobe Color CC

c) Complementary Colours
Complementary colours are useful when you want an element to be visible distinctively on your background. Usually, one of these colours is used as the background and the other colour is used to create an element in the foreground.

Figure 3 Complementary Color Scheme using Adobe Color CC
Figure 3 Complementary Color Scheme using Adobe Color CC

d) Shades
You can imagine shades to be a palette wherein one base (primary) color is taken into consideration and different amounts of black colour are mixed with it to generate a palette. These colors will blend in each other well and since a different amount of contrast is used to generate these shades, each color will be visible distinctively. Different shades of one colour offer a sense of familiarity and the image of the product is upheld.

Figure 4 Shades using Adobe Color CC
Figure 4 Shades using Adobe Color CC

3. Understand the colour meanings and use them to your advantage

blog banner 1

Canva is an online graphic designing tool. It offers pre-made templates which one can tweak as per their own requirements and also create their own designs. They have a dedicated blog on graphic design techniques. They have prepared an amazing resource about different colours and their meanings. You just
have to select the colour you’re looking for on their page and a detailed description of the
colour and its usage will be presented to you. You can check out this resource.

3. The 60-30-10 rule
It is always advisable to choose three colours for your landing page and apply the 60-30-10 rule.

Figure 3 60-30-10 Rule © https://apple.com/in/
Figure 3 60-30-10 Rule © https://apple.com/in/

Notice how the white colour takes up most of the space (60%), this colour is used for your background. The black colour covers up the navigation bar and the headings (30%) and the Call-To-Action elements (buttons and links) make up the blue colour (10%). Using the 60-30-10 rule will make your landing page look professional and subtle.

4. Colour palette generators
For non-designers, or for those who have just started out with web design, there exist many amazing tools which can assist you in creating a beautiful colour palette for your landing page. I have curated a list of colour palette generators below which are fast and easy to use.

Picking the right Typography for your Landing Page

  • Number of fonts
    There should be a maximum of two fonts on your landing page. One for all your headings and one for all your content. Use of multiple fonts creates a disturbance on your page and takes away the focus from the purpose of the page and makes the users invest their time into trying to read different elements and eventually, they won’t be staying on your page for long.
  • Content Alignment
    Look at the image below:
Figure 4 Text Alignment
Figure 4 Text Alignment

Try reading the left aligned text and the centrally aligned text, which one are you able to read better? The left-aligned text, isn’t it? While reading, our eyes tend to find it comfortable to read paragraphs with the same indentation. Unless extremely necessary, align your content to the left, or to the right depending upon the position of your text on your page.

  • Font sizes and weights
    Different font sizes and weights differentiate one piece of text from another based on their importance. The headline you want the users to read first should have the largest font size and the boldest font-weight. Your mind processes big and more prominent elements before the other elements. Make sure you put that to good use.
Figure 5 Font Sizes and Weights
Figure 5 Font Sizes and Weights
  • Popular typography fonts

Below is the list of some popular fonts that will add to the beauty of your landing page. Whenever in doubt, you can always come back to this blog and pick any font that goes with the vision of your brand.

Figure 6 Font - Heebo
Figure 6 Font – Heebo
Figure 7 Font - Lato
Figure 7 Font – Lato
Figure 8 Font - Montserrat
Figure 8 Font -Montserrat
Figure 9 Font - Open Sans
Figure 9 Font – Open Sans
Figure 10 Font - Oswald
Figure 10 Font – Oswald
Figure 11 Font - Poppins
Figure 11 Font – Poppins
Figure 12 Font - Raleway
Figure 12 Font – Raleway
Figure 13 Font - Roboto
Figure 13 Font – Roboto
Figure 14 Font - Slabo
Figure 14 Font – Slabo
Figure 15 Font - Source Sans Pro
Figure 15 Font – Source Sans Pro

Picking the Right Image/Illustration of the Hero Section of your Landing Page

“A picture speaks a thousand words.” Undoubtedly that’s true. The first thing that a user will notice
is the image you have put up on your landing page. Keep in mind the undermentioned things while
selecting the image you need:

  • Image Quality: There are a lot of online resources which will offer you premium HD quality images for free. However, hiring a professional photographer to click an image which resonates with the brand can also prove to be a great and viable option.
  • Relevance to the brand/product/service/company: This goes without saying that the image needs to be either of the product that is being offered or of something related to the product.
  • Creativity: The sky is the limit for your imagination. To make sure that your landing page attracts a large user base you need to have a picture that speaks for itself. Make good use of the resources available online. In case you’re unable to find a good image, use vector illustrations or patterns to beautify your page.
  • Colours of the Image: The colours of the image should be in alignment with the colours of your page or vice-versa to offer a nice blend-in on your landing page.
  • Image Copyrights: If you are using an online resource, make sure to give proper credits and attribute the author. It gives out a positive message about your ethical practices.

Creating an Effective Call-To-Action
A call to action is a button or a link which tells the user what to do next now that he has landed on your page. Often same phrases are used on the websites for the CTA buttons. To offer a personalised experience, try replacing the already existing phrases with the undermentioned phrases:

  • Replace “Learn More” with “Find Out What We Stand For”
  • Replace “Get Started” with “Dive In”
  • Replace “Discover” with “Explore Our Vision”
  • Replace “Continue” with “Visit Our Home”
  • Replace “Download” with “Download Our App Now”
  • Replace “Start Now” with “Let’s Begin”

To create, be inspired
It is important to be inspired by the already existing websites which have received appreciation from far and near to start with your project. Visit the websites below and understand their distinctive features and why they make to the list of best web designs.

  • Pitch: https://pitch.com
  • Cellag: https://www.cellag.org/
  • Wealth Simple: https://www.wealthsimple.com/en-ca/
  • Sennep: https://www.sennep.com/
  • Portfolio of Bruno-Simon: https://bruno-simon.com

Keep in mind, when you are designing the landing page, it should come from within. Do not copy big brands or other carefully designed websites. They were not built keeping in mind your product/business/services.
As much as advertisement and marketing are important to attract a large customer base towards your product, a dedicated landing page is crucial to attracting a large user base towards your website.

We are sure that you liked this article. Why don’t you check out the top 10 React.Js books to enhance your web development skills?

By Pooja Gera