If you take a close look at the homepages of some of your favorite websites, you’ll notice a lot of them have similar elements, which isn’t a coincidence. These homepage best practices have come out of website research, user feedback, and conversion analytics.
The home page of a website is the opening page, located at your main website URL. Its goals are usually to:
Welcome visitors
Help them realize they’re in the right place
Immediately make it clear what you do
Guide visitors further into the website
In this article, we’ll introduce you to ten of the most common elements in website homepage design, why you should include them, and how to do it the right way to achieve the four objectives listed above.
1. Header
The header of a website is a consistent area at the top of the site that includes the logo and navigation menu. It appears on every page of the site.
A header may include a logo, navigation menu (see below), call to action (CTA) button (see below), phone number, search box, social media icons, checkout cart or login.
2. Navigation Menu
The navigation is part of the header and includes the links that take visitors to other parts of your website. These can be pages including About, Services, Contact, or anchors to content on pages like Team, Process, Mission.
Hamburger Menu
Typically three lines that can expand and show the navigation menu in the header. The hamburger menu became popular on mobile sites several years ago and is now gaining popularity on desktop sites as well. This condensed menu feature frees up space in the header and, therefore, on every page of the website.
3. Logo and Branding Elements
Logos are usually placed at the top left side of the homepage within the header since that’s where the users' eyes are first drawn to (they scan left to right). However, you can also center your logo within your navigation bar or the first section of the page.
Branding elements like a consistent color scheme, typography, and design themes and patterns are essential to creating a familiar brand experience. If you do not have a brand visual identity or message in place, we highly recommend calling a time out and taking the necessary time to build your brand ID before building your site.
4. Hero Section or Banner
A hero section is usually made up of a large banner image or video, and it comes right below the navigation bar. The idea for the hero section is to quickly give visitors an idea of what to expect from the rest of your website. It should include a promise statement - that shows you understand the visitor and the challenges they face - with a one-line description of the brand.
5. Call To Action (CTA)
Ultimately, every website has a goal, which usually involves conversions. This can mean getting users to purchase something from you, give you their email, and plenty more. The easiest way to get visitors to do something is by asking them, which is where CTAs come in. This can be a button or just plain text, but whichever approach you take, it needs to stand out from the rest of the elements within your homepage. We like to include it in the header, so it continues to show up on every page of the site.
6. Infinite Scrolling
Infinite scrolling has been a popular way to present a site so that rather than load separate pages to view content, all the page content is loaded into a single page that scrolls to show different content areas. The one challenge with this approach is you don't have separate pages to optimize for different search keywords. Instead, we create a short version infinite scroll to entice and guide the user to click through to learn more on an interior page.
7. Brand Bio or Story
Following the banner, we typically place a brand bio or story. This is one paragraph that explains how the brand can help the audience win or improve and why. It builds upon the promise featured in the main hero section.
8. Core Services or Products
One of the things many companies don’t do enough of is list out their core services on their homepage. Typically the Services page is the second most visited page of the business website after the homepage. Users want to find this information quickly to see if you can address their problems.
9. Social Proof or Trust Elements
Ideally, your homepage should inspire trust in your visitors, particularly if you’re running a business. One of the best ways to achieve this is to show users that you’ve received excellent recommendations from past customers.
10. Footer
The website footer is the consistent content area at the bottom of every page of your website. The footer can be anything from a single line of copyright information to a multi-section area with contact information, a map, links, opt-ins, social icons, a search box, and much more.
The footer is a great place to catch the visitor’s attention and guide them deeper into your website when they reach the bottom of the page. It is also where users expect to find Contact information, a My Account link (if applicable), and legal pages like your Privacy Policy.
It Must Be a Responsive Design
Responsive design is one that adapts to the user's device so that it displays the content required most appropriately, regardless of what kind of device is being used to view it. Google is even penalizing sites that aren’t optimizing for mobile because it provides a bad user experience
TIP: Visit your website on a computer and a mobile phone side by side. Does the content reorganize itself on mobile to fit the screen size better? If so, then your website is responsive. If it mobile just looks like a small version of the desktop (text, photos, and most content is small and probably hard to view), then the site is not responsive.
At Ellie Brands, we take responsive a step further and create a custom mobile site that goes beyond reorganizing content, but optimizing each element to ensure a great experience in mobile with larger text size, larger photos, narrow (vertical designs), etc.
While there is a growing percentage of web designers who understand how to design strategically, there are still many business owners who have the “make my site pretty” mentality. By not keeping SEO, content, strategy, user experience, website functionality, and design in mind, companies risk losing business opportunities. Please reach out so we can talk through your brand's goals and the right website strategy to achieve those.