1. Logo

 

The logo section of the home page will commonly be the space for identifying the website brand. The logo can be in the format of either a wordmark, lettermark, or emblem. A logo is an essential element of any brand and it should be able to quickly communicate a company’s ethos and 'personality' to both current and potential customers.

 

2. Headline

 

People rarely read web pages word by word; instead, they scan the page, picking out individual words, sentences, and text patterns such as bullet points. Within three seconds, a website needs to communicate to visitors what the business has to offer.

 

A headline with sub-headline or paragraph text should provide a clear description of a business and the services or products that it provides. This is usually 2-3 sentences of powerful, memorable, and concise text that targets the viewers’ needs with a unique value proposition.

 

3. Banner (or Slider)

 

Is typically a large image or visual placed on the home page of a website. It can either be as a static image, or as a slider with different slides of images or information.

 

This main image is also referred to as the hero image within the hero section of the site. It gives a visual hook to the site visitor, providing an emotional or informative connection to encourage user engagement.

​

4. Main Navigation

 

Sometimes called ‘primary navigation’, this is a set of the most prominent links shown on every page of a website, it helps the user to understand the relationships between individual pages on the site.

 

Navigation is an essential part of a website strategy. If done correctly it can guide users to relevant parts of a site and encourage them to take positive action.

 

Menus can have different locations in the interface (side menus, header menus, footer menus, etc.) and different formats of appearance and interaction (drop-down menus, sliding menus, etc.)

 

A well-designed menu can significantly enhance site search speed, creating a positive user experience (UX).

 

5. Sub Navigation

 

Sub navigation — also known as local navigation — is the interface where visitors can find lower-level categories of a site’s information architecture. These are typically sub-categories of the main navigation links, and are sometimes referred to as child-pages.

 

Types Of Menu

 

Menus can be organised either horizontally or vertically. Some popular types found on diverse websites are :-

 

• Classic horizontal menu -  The most common type of menu which presents the core navigation organised as a horizontal line in the website header.

• Sidebar menu - Presents a vertical list of options sticking to the left or right side of the web page.

• Dropdown menu - A more complex type of menu for content-heavy websites; here, the list of additional options opens below the primary one when it is clicked on or hovered over.

• Megamenu – This is a complex expandable menu in which a large list of multiple choices is presented in a two-dimensional dropdown layout; this approach is effective for cases with a vast number of options.

• Hamburger menu - When the hamburger button (typically marked with three horizontal lines) is clicked, the menu expands; this option saves space and is often applied to mobile versions of websites.

​

6. Main Content

 

Content is the backbone of every website. High-quality informative content is the most important pillar of online success; the content of a site's home page can have a significant impact on everything, including :-

 

• Lead generation.

• Lead nurturing.

• Conversion.

• Traffic views.

• Social media shares.

• Inbound links.

 

Quality content should be original, purposeful, and correctly optimised so that a target audience and search engines are driven to read, view, and share it. The content should convey trust and authority, it should be informative, easy to read, and concise.

 

Content for a product or service can take many textual and visual forms including articles, guides, resources, blog posts, images, and videos, and/or a mixture of all, or any, of these. Ideally, the content should 'tell' a story and induce a positive viewer response.

​

7. Video Content

 

Web page video content is now being used as a powerful tool in creating a positive user experience.

 

Video content simultaneously activates the users' audio, visual, and motion senses of perception, usually within the context of story telling. Such a combination of factors often makes a video presentation strong, emotional, and memorable by :-

 

• Guiding viewers through relatable narrative-based content that gets to the heart of their pain points, creating an emotional connection, and presenting a satisfying solution.

• Demonstrating expertise and authority.

• Fostering engagement and brand recognition.

 

Videos have also become a popular visual hook applied to the hero section of a home page instead of a banner image or a slider gallery. Videos can also be published on various video channels, potentially reaching a new, untapped audience and linking them back to a website.

 

8. Social Proof

 

Social proof, also known as social influence, is a psychological phenomenon that assumes people take action based on the actions of others. It triggers conformity bias (also known as 'herd behavior' or 'the bandwagon effect') by visibly indicating that other people have publicly endorsed a site's product, service or content. It is a psychological phenomenon prospective customers cannot easily ignore.

 

Social proof can take different forms on a website, via :-

 

• Embedded Google reviews.

• Posts of client testimonials.

• Displays of awards and credentials.

 

Also, customers can have an opportunity to be brand ambassadors for a business by posting positive messages via 'leave a review' or 'comment' buttons within a web page.

 

Generally, social proof, if used, should be near the top of the visual hierarchy for a given page.

​

9. Call-To-Action (CTA)

​

A call-to-action (CTA) on a website is an instruction to the visitor in order to encourage them to take some kind of positive action.

 

A CTA might be a simple instruction, via a coloured button or text link, or other visual, such as 'start now' ,'call us now', 'learn more', or 'subscribe to our newsletter'.

 

By encouraging the visitor to take action, rather than merely reading and leaving a site, CTA's are simple and effective ways to generate conversions and ultimately boost sales. They are often used in conjunction with a site's social proof.

 

The simple task of placing concise and easy-to-read CTA's on a website comes with a number of benefits to the business, for example :-

 

• Motivating visitors into deeper engagement.

• Giving more information about a product or service.

• Boosting conversion rates.

• Encouraging customers to add product to their sales cart.

• Growing email subscribers.

• Persuading visitors to share on social media.

​

10. Carousel

 

A carousel is a web page component that displays information in a set of elements that can slide, or fade into view. It allows multiple pieces of content to occupy a single, coveted space by maximising information density without forcing the user to scroll further down the page.

 

Website carousels can organise content on a web page in a visually interesting way, personalising content for different types of customers to engage with them and to help drive conversions.

 

There are several benefits of a using a carousel element on a web page :-

 

• Large amounts of important company information can be displayed in a small amount of space.

• Images are visually appealing compared to text, they can engage viewers, and hold their attention.

• Each image can provide new and fresh content to the viewer.

• A carousel can 'tell' a story, it displays a linear process allowing a viewer to follow a specific journey.

• It is ideal for selling visually based products, promoting the aesthetics of a product or service.

 

All of the above could also apply to a full-width slider gallery in the hero section of a website.

 

11. Contact Form

 

A contact form is a very important element on a website. It keeps visitors from experiencing the frustration of not being able to expediently reach out when they have a problem or a question. And crucially, a contact form is often the start of the company's relationship not only with prospects but with every visitor type that the website has.

 

Other website forms exist, for example there are sign-up forms, application forms, and shipping information forms. All are important for gathering information on site visitors, creating an initial direct contact with the business.

 

However, some site visitors may have different preferred methods of contact. Some may wish to converse with a real person, others may prefer to use a company’s Facebook page and ask their questions there. It is therefore important to consider including that information in a content area within the contact form, detailing :-

 

• Phone number.

• Email address.

• Physical address,

• An embedded map of the business location.

• Hours of operation.

• Social links.

      and, possibly,

• A live-chat feature.

​

12. Footer

 

The footer is the bottom part of the web page and should appear on every site page. As with the header, it is another common zone of global website navigation. The footer provides an additional field for links and information that may be useful to users.

 

Footers can include :-

 

• Brand identity, usually the name and logo of the company or product.

• A sitemap with links to all of the website's pages.

• Links to user support sections, for example, privacy policy, terms and conditions, support team, etc.

• Contact form links and contact information.

• Industry/trade memberships and associations.

• Mission statements.

 

Footers might also include a social bar that contains small social media icons that can link users to a company's social media pages. This can help a business gain followers on social media platforms, ultimately bringing about greater brand awareness and potential business growth.

​

​

15 Examples Of Unique, Compelling, And Innovative Home Page/Website Designs

 

The following websites are examples of the creative use of modern web design features. They demonstrate innovative ways to utilise every possible design and technological boundary to their advantage, creating an impressive immersive user experience.