Why These 25+ Website Homepage Designs Work So Well
As the name indicates, the homepage is the first page users see in a website. It has to be great, it has to impress.
Below, you’ll find the critical ingredients that have been tried and tested to work, and which will make your homepage stand out from the crowd.
Bring focus to what the site is about
When a user first lands on your website, he/she will want to know as quickly as possible that they’ve come to the right place. Users are fickle, with a short attention span, so they want to be convinced of the value they’ll get, right off the bat. It’s necessary to immediately make it obvious what a website is about, so they know if they should continue spending time on a website or skip and find another site.
A website homepage should communicate value, from the very beginning.
To focus users’ attention, you can do the following:
- Use a relevant keyword (for instance, if you sell consulting services, mention “consulting services”, if you sell shoes, mention “shoes”, etc.). A keyword, if it’s relevant, helps users better understand what the website is about. It anchors in their mind the core topic of the page, and an important part of the website message. Also, a keyword is useful for search engine optimization, as it indicates search engine bots that the web page is relevant for the topic and will better index and position the home page in search engine results pages.
Below is an example of a website homepage that makes good use of a relevant keyword, directly in the homepage. The main and most relevant keyword here is “Education”, and it’s chained in an impactful paragraph that users can’t ignore.
Here’s another example:
Another example where the focus keyword is “Travel”:
- Use a relevant graphic or image that sustains the words and the focus keyword, through visual cues. Such a graphic should immediately make it obvious that the website can give what the reader wants. For example, if they’re searching for a pet care center, you should have an image with a pet, if they are searching for a doctor, place a medical symbol on the homepage. The image and the text (keyword included) should have a strong correlation to one another, so the message keeps its coherence and really has an impact onto the readers.
Below is an example of a website that uses imagery in an outstanding way. It puts to the front a suggestive image for the homepage, an image that is destined to create visual and emotional connection with the readers.
Here’s another example with a suggestive image:
Use a catchy slogan and memorable copy
Slogans are simple phrases designed to grab people’s attention, with a few words and a short message. A good slogan is striking, and it decides in a very short space the persuasiveness power of the homepage.
A good slogan can turn a homepage from good to great, from forgettable to memorable. It brings in the page message, quick and naturally, and it ticks a slight surprise effect that triggers users’ attention and puts them in the mood for reading more.
And to keep them engaged in reading more, the homepage should display good copy. The copy of the homepage has a decisive role for the effectiveness of the web page.
According to studies, there are some criteria that should be taken into account to ensure effectiveness of the homepage copy:
- Promotional writing (this is copy that boasts the benefits of a product/service with obvious commercial purposes) – the less promotional writing on the homepage, the more effective the homepage will be.
- Concise text – the copy on the homepage should be concise and present the essentials of the business; studies show that conciseness of the copy improves usability (users’ easiness in going through the text) with 58%.
- Scannable layout (a layout that is easy to be scanned, visualized, so information is quickly assimilated) – studies show that more easily scannable layouts of the homepage lead to an increase in usability effectiveness with 47%.
Also, the homepage copy needs to perform well, as research showed that 38% of people will stop engaging with a website if the writing or layout are unattractive.
Homepage copy is a unique chance to makes users return to the website, once the first impressions were fine. Otherwise, studies show that 88% of online consumers are less likely to return to a site after a bad experience with it.
This is an example of a good slogan that does its job and has a truly effective impact on the readers’ minds: BE MOVED (Sony’s slogan).
Below is a chart showing how copy can be mapped with the purpose to fit customers’ journey:
Provide a unique value proposition
Every homepage should have its own unique value proposition.
The unique value proposition of a web page communicates what the company does differently than other companies on the market. It delimits the unique benefits people will have from the company.
The unique value proposition is more elaborate than the slogan. It’s, in fact, succinct, punctual copy – a presentation of the solutions that make users’ choice of them the best possible option.
Below is an example of a value proposition that doesn’t exaggerate, and also doesn’t dilute the power of the statement:
Another example is:
A third example might be:
To help you get a clearer understanding of what the unique value proposition is, we listed the key elements that it consists of:
- What you do (in the example above, GetFound application)
- Who you do it for (in the example above, Business people)
- Why you do it better than the competition (in the example above, it makes you rank on top on Google, Yelp, Facebook, etc, in a few easy steps).
Use mood boards to set the tone
Now that we talked about some key elements a homepage should include, let’s see how you arrange them on the homepage. What’s to be prominent, what’s slightly suggested, what other elements should complete the “picture”. Because they all have to outline a home page mood.
A mood board tells users how you approach certain subjects and communicates important aspects about you and your company. A mood board is intended to create a certain kind of personality for your website or companyt. It’s an important way to communicate with your audience. If copy is your message, a mood board is how you transmit the message.
A mood board refers to:
- The color scheme of the website
- Typography used in the homepage
- Illustration style (this might be playing with effects such as overlays, image frames, frame shadows, transparency/opacity, gradients, etc.)
- Spacing rules (how much white space is allotted to different portions of the homepage)
- The general contrast (it emphasizes content hierarchy and elements structure).
Brand & Website Design: Here’s an example of a homepage that makes use of all means to transmit professionalism, high-end expertise, style and elegance in their taking care of brands:
Brand & Website Design: Here’s another example of a homepage that intrigues, arouses curiosity and stirs inquisitive minds to define Act Normal:
Brand and Website Design: a third example of a homepage that shows professionalism and leaves the impression of good website design expertise.
Provide an effective CTA
Some sites are more “action-heavy” than “information-heavy”, such as eCommerce websites. And the home page should be the first to set this content frame. For instance, a visitor on a real estate website wants to quickly go and see house listings, rental offers, etc. If the first thing he sees is a wall of text or images in non-actionable sections (with no buttons for reservations, for instance), he’ll immediately press the back button. Such sites really need to include an immediate, and clearly visible “call to action” or CTA to help the user do what he wants to do.
Below is an example of a real estate website (REMAX), whose homepage clearly brings to the front a pretty large form to fill in with the users’ data that’ll take them to the process of properties search.
Another example is that of TRULIA:
This is proper for websites that act more like interactive tools for people who need to perform niched searches, tailored to their needs/questions/plans. The prominent call-to-action in the homepage sets the user in action to pass through all the research process, gather data, apply filters, and move on to making their decision.
Characteristics of an effective homepage CTA:
- It has compelling text, that triggers action
- It uses the right tone (it “speaks in words users want to hear”). E.g. “Let’s Go!” uses a familiar tone, that fits perfectly the buyer persona searching scenario – “I’m gonna start searching for a new home, so…, good…, let’s go…”.
- It’s prominent and stands out from the rest of the page, through contrast.
Testimonials can be a great way to sustain the homepage content with credibility. They are recommendations of products/services/companies from clients that tested them and have been content with their quality. They are one of the strongest forms of social proof and are intended to make new users to try products/services for themselves.
A testimonial means that the person giving it is putting their reputation on the line. That’s why its power never has to be underestimated.
According to research, 39% of consumers said they read reviews on a regular basis to determine whether a local business is a good business.
Even more, studies demonstrated that 88% of people trust online reviews written by other consumers as much as they trust recommendations from personal contacts.
Using the persuasiveness force of testimonials on the home page of a website is a good way to push readers into buying products/services of your company.
Here’s an example of the Codeacademy homepage that includes testimonials:
Here’s another example:
Another example is:
You homepage design should change
Home pages change and evolve for a variety of reasons. User behavior changes, browsing style changes, web design evolves, and you should keep up with the latest trends. There’s no need to get stuck with one home page design. Your branding guidelines might change during time, or else the company underwent a shift in activity, and a change in home page design is required.
Also, you can make incremental changes to the home page design for your website. You can make optimizations to the home page, for SEO reasons or User Experience, or more conversions.
So, some elements might be replaced by others, you can add new elements that fit the new design and branding guidelines, or you can combine elements in a different way. The result will be a refurbished homepage, with a modern aspect and a message that is better adapted to current users.
Below is an example of a website whose homepage changed, for better results:
Web page layouts one can use for a homepage
The layout is the backbone sustaining all the content placed on the homepage. It plays an essential role in structuring information on the page, so it is easy to read, browse, assimilate by users.
There are a few traits that make the homepage layout to be a good layout:
- It has to be intuitive, so it matches already-formed user behaviors when visiting web pages.
- It has to be predictable, so it’s easy for users to find what they are searching for, in the order they are searching for those items.
- It has to be designed for skimmers. White space, usage of lists and columns, headings are all components making a homepage content quicker to assimilate.
- It has to be responsive. Mobile responsiveness has become a requirement, so homepage layouts should easily adapt to the screen, depending on the device from which users open the page.
Here are some of the most popular homepage layouts working for a wide variety of niches:
Layout 1 – example
Layout 2 – example
You can check for further details about how to choose the correct layout for your website.
Now, you’re almost ready to start designing your homepage. Check to see which elements from the above are appropriate for your website and follow the guidelines. Your website homepage will be just perfect.