Why and How Are Home Banners Important? - Stories

Designed by XiMnet

You never get a second chance to make a first impression -- that’s why your homepage is undoubtedly one of the most important web pages on your website.

For any given company, the homepage is its virtual front door. If a new visitor doesn't like what they see, their knee-jerk reaction is to hit the "back" button.

What makes a website's homepage design brilliant then? Well, it takes more than looks alone -- it also has to work well. That's why the most brilliant homepages on this list don't just score high in beauty, but also in brains. But before we dive into the examples, let's dissect some of the best practices of homepage design.

What Makes a Good Website Homepage Design

All of the homepage designs shown here utilize a combination of the following elements. Not every page is perfect, but the best homepage designs get many of these right:

The design clearly answers "Who I am," "What I do," and/or "What can you (the visitor) do here."
If you're a well-known brand or company (i.e., Coca-Cola) you may be able to get away with not having to describe who you are and what you do; but the reality is, most businesses still need to answer these questions so that each visitor knows they are in the "right place."
The design resonates with the target audience.
In addition, not everyone is adept at choosing the correct typography and fonts. A seasoned web designer knows the psychology behind each family of fonts, when to use serif or sans serif, how to make headings and subheadings pop, how to make each paragraph more distinct, and the like.
The design is optimized for multiple devices.
All the homepages listed here are highly usable, meaning they are easy to navigate and there aren't "flashy" objects that get in the way of browsing, such as flash banners, animations, pop-ups, or overly-complicated and unnecessary elements. Many are also mobile-optimized, which is an incredibly important must-have in today's mobile world.
The design includes calls-to-action (CTAs).
Every homepage listed here effectively uses primary and secondary calls-to-action to direct visitors to the next logical step. Examples include "Free Trial," "Schedule a Demo," "Buy Now," or "Learn More."

Remember, the goal of the homepage is to compel visitors to dig deeper into your website and move them further down the funnel. CTAs tell them what to do next so they don't get overwhelmed or lost. More importantly, CTAs turn your homepage into a sales or lead-generation engine, and not just brochure-wear.
The design is effective.
A well-designed page is important to building trust, communicating value, and navigating visitors to the next step. As such, these homepages effectively use layout, CTA placement, whitespace, colors, fonts, and other supporting elements.

Some Website Design Inspirations:

1. Sime Darby

What to learn from this design:
Thanks to the effective use of visual, this banner is simple yet strong to communicate Sime Darby's brand. It hits the target when brand identity is done explaining at just the first impression. Natural and nurturing, the rightly focused image has all components of life sustainability to tell the brand's story.

The communication flow here is such that the user perceives the message first, followed by the CTA to explore more. Goaled.

2. Petronas Dagangan Berhad

What to learn from this design:
What's worth noting here is the use of unoccupied space, blend of colours that creates depth, and customer-centric design. The CTA here is direct - the audience would understand that they're selling a product. Display of the product also encourages the audience to learn more before conversion.

3. Malaysia Convention & Exhibition Bureau (MyCEB)

What to learn from this design:
Who says corporate websites have to look boring? Well, at least, "just another stuffy enterprise" isn't the feeling you get when you arrive at MyCEB's website. Here's one with good use of a top trend design style - bold vibrant colours - they produce contrast, making the words and images stand out on the page. This highers the chance your audience would be enticed to find out more.

4. Asian Banking School

What to learn from this design:
The use of grid layout here is a clever one, and it fulfills its purpose of getting longer message displayed without making it look messy. With F-shaped reading pattern in mind, title is set at the left and sided by an elaboration. Plus, the elaboration is also extremely readble! The image is not only positioned thoughtfully, but also persuasive because the use of their CEO's high-res portrait does affirm the brand's sincerity, before audience could respond with trust.

What do you think of these homepages? Which are your favorites? Share with us on Twitter by mentioning us @ximnetmy.

This article is inspired by Lindsay Kolowich and her article in HubSpot: 20 of the Best Website Homepage Design Examples