Editor’s Note: This blog was originally published in 2014. It has since been updated it to reflect the most current, accurate information.
Think back to the last time you searched for a company online, only to discover that their website was outdated, difficult to navigate, and an all around aesthetic nightmare. Did you stay on the homepage and weed through the mess? Or did you make a break for the nearest exit? We'd put money on the latter, and we wouldn't blame you. No one wants to spend time on a subpar website.
Is Your Website’s Homepage Design Remarkable?
A great website designed with user experience in mind is one of the most beneficial investments a brand can make. Your homepage, in particular, can have a huge impact on how many potential customers stick around to learn more about your brand, as opposed to making a beeline for the "back" button.
But how do you know if your homepage is lacking? And what constitutes good homepage design, anyway? Good homepage design can be broken down into three elements: content, tech, and visual design.
Keep reading to learn more about these design elements and to see them in action.
What Is "Good" Homepage Design?
Think of your website's homepage as your brand's virtual receptionist. The homepage serves as the first impression for an unfamiliar visitor and, in many cases, it receives the most traffic out of any of your pages. Unfortunately, many brands don't consider the homepage an important area of design and prefer to invest more time - and money - into the products and services pages.
The homepage isn't necessarily the place where customers convert, but it is the place where customers get their first impression of your brand. And if that first impression isn't a good one, they probably aren't going to stick around to learn more about your free trial or limited-time offer.
Your homepage serves three key purposes:
- To attract and captivate visitors
- To educate visitors on your brand
- To encourage visitors to visit other pages on your website
How to Design Your Homepage to Deliver
OK, so you know what your homepage is supposed to do. Now, how do you make sure it can actually do it? To get the most out of your homepage, keeps these six things in mind:
1. Establish Your Identity
Making a statement about who you are as a company is among the most important things you can accomplish with your homepage design. Too many times, a homepage is designed with too many goals in mind.
Ideally, your homepage needs to do three things:
- Introduce and give visitors a clear sense of your brand
- Provide visitors with clear paths to other pages on your site
- Be memorable (unique design, a catchy logo, or an overall appealing look)
When a visitor arrives at HubSpot.com, they are immediately introduced to what the company does and why it matters. There are clearly designated paths that lead to additional pages if the visitor wants to learn more.
2. Keep It Simple
Unless you already have an impressive and established following, a complex homepage is not the way to go. An excessive amount of widgets, calls-to-action, links, and general clutter distracts and overwhelms visitors, ultimately causing them to reach for the "back" button.
Don't make your visitor work to find the information they are seeking - because they won't. Keep your homepage simple and clean with:
- Easy-to-read text
- Plenty of white space
- Clearly labeled sections that make navigation a breeze
This homepage from Burger Up in Nashville is simple. Right off the bat, it provides visitors with critical information: the restaurant's address, hours, and phone number. It has a streamlined design, the fonts are clean and easy to read, the logo and visuals are attractive, and there are links to the menu and the weekly burger updates.
3. Keep It Above the Fold
The term "above the fold" refers to the upper half of the front page of a newspaper that features an important news story. That section of the paper is quite literally above the fold. When a web designer uses the phrase “above the fold,” they’re referring to the part of the homepage that is immediately visible in a browser. It's the part of the homepage that visitors see without scrolling; the first impression of the first impression, if you will.
It’s important to note that what's above the fold on a laptop or desktop computer probably varies from what's above the fold on a smartphone or tablet. Your homepage design needs to work across all devices and operating systems, so take the time to craft a layout that complements all of them.
4. Choose Your Font Wisely
You may not know it, but the font you choose for your homepage can actually have a psychological effect on your visitors and greatly influence how they feel about your brand. Homepage design isn't as simple as slapping up some text and calling it a day. The first step in choosing a homepage font is to truly know your business. Understand your product or service and have a clear idea of the brand you want to build around it.
You want your homepage - and the rest of your website, for that matter - to feel cohesive and uniform. Achieve consistency by avoiding using too many different fonts and by opting for simplicity and legibility over elaborate, flowery fonts. Sometimes a more ornate font is appropriate; that's up to your discretion. Simply put: if you have text that you want your visitors to read, make it easy to read.
If you’re new to the website design game and want to learn more about fonts, check out this guide to free web fonts.
Take a look at The New Yorker website. Their web design team clearly has a handle on the iconic magazine's aesthetic, as it seamlessly translates from print to the web. They use just the right amount of varying fonts, contrasting colors, and bold, complementary graphics to keep readers coming back.
5. Pay Attention to Your Use of Color
In the same way that your font can have a psychological effect on your visitors, your color scheme can also affect how they interpret and engage with your homepage. Poor use of color not only sends visitors away from your website; it can have a detrimental effect on how you communicate the temperament of your brand.
Using too many colors in harsh hues and contrasts can make your visitors' heads spin. It also denotes antiquated design techniques that make visitors think you're living in the past.
Don't make your color palette more complicated than it needs to be. When in doubt, keep it neutral. Don't be afraid of white space.
Chip and Joanna Gaines' Magnolia Market homepage is a great example of use of color. The color scheme maximizes whitespace and a neutral, complementary palette, and bold, beautiful graphics provide the perfect amount of color and visual interest.
6. Have a Bold Supporting Image
A website is a highly visual medium. People react to the use of graphics and visuals differently than they do to simple words. Make sure that your homepage includes an image that embodies your brand's vision or encapsulates your spirit. The image should inspire your website visitors to learn more about your company. The use of videos is another smart option.
Avoid using images that are obvious stock photos or otherwise inauthentic. It's a dead giveaway that your company didn't spend the time on design that it should have.
The Banana Republic homepage does a fantastic job of conveying luxury. Their choice of images embodies the style and understated elegance of the brand, and the closeup of the coat adds a sensory element that ties into the brand's promotion of fine fabrics.
Your homepage design is an undoubtedly important part of both your website's and your company’s success. From immediately appealing to your visitors, to providing them with a user-friendly navigation experience, your homepage is the portal through which they can discover your company and ultimately your brand. Conscientious website design can help your company make a splash with your visitors and lead them down the path toward becoming loyal followers and repeat customers.
This post was originally published in April 2016 but has been updated to reflect the ever-changing website best practices.