Home Page Design
When people first visit a website, or when a customer returns to your company’s website, they usually have a specific goal in mind. They may want
- a solution for a problem they have
- to quickly find the specific information they are looking for
- contact information such as a phone number or directions
- to complete a specific task and move on
- to buy a product, make a reservation or sign up for a consultation
Your business also has needs that it wants to satisfy. It seems rather obvious that the needs of your target customers should guide your website content and design. But that is often not the case. For example, when you visit a website have you ever wanted to read the company’s mission statement? I thought not.
An effective website redesign must be solely based on appealing to your ideal customer and offering them what they need to have them take the action you want them to take. Anything else gets in the way.
Before embarking on a website, everyone who will be involved in its creation needs to get on the same page as to the purpose of the website. This is also the time to educate them on current user-experience data since it is likely that there are people on the team that may be holding old beliefs about web design.
The answers to the following questions will help to get everyone to understand the purpose, tone, and type of home page design that you will need to create to connect with and meet the needs of your ideal customer.
- Who are your ideal customers for this site?
- What words do they use and how do they describe their main problems?
- What is the main thing you are offering to relieve the most significant problem your customers are dealing with?
- What look and feel will generate the trust of your ideal target client?
- What do the current customers of the company use, or wish they could use, the website for?
- What content are visitors looking for via your home page and how can you help them find it?
- What tasks do visitors need to complete on your home page?
- What products or services are you trying to sell on your home page?
- How will the business measure the success of the home page?
- What are your competitors doing, and how can you improve upon that?
- Where are users going after they leave your home page?
- What search terms will target customers use to find your site?
Once you are armed with this information about your target audience and their needs and psyche, you can start to map out how you will present your company, who you are and what you offer in a way that will establish a connection with your visitor, be memorable, create trust and inspire action.
Since you have such little time to create with your reader, you should consider a few simple rules in every website design. There are certainly times when you can break a rule or two, but be sure to have a good reason before going rogue with them.
Reading on the web is strenuous. Make it easy for your visitors to stay on your site and find what they came for. Make your font sufficiently dark on a light background to have it be legible. Small, light gray font may be ultra-cool but it is not readable. Choose a dark gray font color such as #555555 or darker, and a font size of at least 16 pixels.
No one wants to see a wall of text. Break up the body font with images and break copy into sections of a sentence or two at a time, rather than follow old paragraph rules.
You have to start with these basics since it won’t matter how great your product or service is if your visitors take one look at your site and flee. The following is an example of self-will run riot. There is nothing good to say about their website even though they do have decent pizza.
Your visitor must be able to tell at a glance who you are, what you do and who you do it for or they will leave your page. This starts with clean, legible logo. The logo at the top of a web page should serve as an anchor, not a billboard, usually no more than 2 inches wide and an inch tall 300 x 100 pixels. Research shows that logos are more effective when placed at the top left of a page since that is where the visitor expects to see it.
With long form web pages, it can be useful for orientation and navigation to have the header reduce in size and stay fixed at the top of a page as a visitor scrolls down. If you don’t have that or even if you do, be sure to add a footer with the company name or logo with page navigation links, since the top navigation will no longer be visible.
Horizontal navigation is what is expected and needed on complex sites. This is not the place to get creative so use normal terms for the navigation links so people do not have to guess what you mean. If you have a complicated menu with many submenu items, use a mega/uber menu to help make the navigation options clear.
Above the Fold
The area showing on your computer screen without scrolling is referred to as “above the fold” which is borrowed from newspaper parlance. The norm in the past was to have everything of importance to the business show “above the fold”. Today, with screens of all different sizes and an ability to scroll to the bottom of the page with a swipe of the mouse, the term is less meaningful but often used by the uninformed as a reason to try and stuff everything they can into the top of the site.
This is a big mistake since people don’t necessarily choose the best company to work with. They choose the company that makes their message clear and the choice easy. You will certainly lose your edge if you are trying to do too much too fast.
Hero Image and Main Message
It is far more effective to use above the above the fold real estate to show an image that will resonate with your ideal visitor. Often the best choice is an image of a client who is happy with the results of your product or service. In most cases, the message will be more effective if it is clear and targeted to your ideal client using their own words, rather than having a message focused on your company starting with the word, we.
This area done right will connect with your ideal client who will want to continue to explore your site for more information while at the same time it can subtly represent your brand values and create an affinity for your company.
Be sure you are taking into account the client’s expectations of the requirements and website designs for particular types of businesses. What they would expect to see on a local, electrical service business will be quite different from their expectations of a PR company’s website.
Customers would not expect a local service company to have the same type of office that a PR company would have and that same expectation would hold for the website design that would build trust in each case.
Sliders at the top of the home page are out and sliders for presenting important information anywhere are not effective. It is challenging enough to find one amazing large scale image and create a corresponding just right message that will tap into the psyche of your ideal client and have them hooked. Finding more than one is near to impossible and no one will sit there are watch them all. It is likely then that your ideal client may miss your best image/message, or not take it in since they keep scrolling right on by.
Since a visitor who is coming to your site for the first time is typically not ready to do business with you, even if they like what they see, you need to give them a reason to sign up for your mailing list. That allows you to nurture the lead, dripping out information over time to educate your visitors and give them an opportunity to get to know and trust you enough to take the next steps when they are ready.
If you offer them more than one call to action such as to buy your product or get in touch, be sure that you have been clear about which is the most important call to action you want them to take or they won’t do it.
Below the Fold
The content on the remainder of the page depends on who the clients are and the purpose of the site you are building. What actions do you want your visitors to take and what images and text do you need to include as they move down the page, that will prepare them to be ready to take the next step.
This is where the information you collected beforehand comes in. The better you know your target client, the better you will be at selecting visuals and telling a story that will resonate with your customers.
Have your ideal target client feel they have found a company that completely gets them and offers just what they need. Be personal and engaging so that your target client will know, like and trust you and your company.
If you have a small or sole practitioner business, capitalize on it. People prefer to do business with people, so let your prospects know who you are. Show a current, professionally taken photography where you look approachable. And, don’t try and cover up the size of your business by using the word we or writing in the third person.
Most customers relate to authenticity. In general, smaller businesses prefer imperfect to overly produced websites or videos, but this does not mean you should use poor quality images or cringe-inducing video.
Good images can make your site. Get professional photographs for your products, services and team. It is worth the investment. If you don’t have professional photos, carefully selected stock photos are better than using unappealing, dark or out of focus images. We want to create text and images that create a visceral response and set a mood or an experience that is positive and compelling.
The following are two posts by Cliff Seal on images in web design.
Power of Images and Faces by Cliff Seal
Telling the story
You have to decide on what will work to tell the story on the page. Even with B2B websites, avoid using marketing speak or jargon. Use the words that your clients use when they are not trying to impress anyone. Clear, concise messaging with an emotional component sells. What graphics, colors, and images are needed and where is text required to support the images?
Don’t overwhelm your visitors with too much information. You don’t need to present every service on your home page. Give them what they need and only that and provide a link to get more information.
Examples of your work and testimonials
You do not have to show every example of your work that you have. Instead, choose to show representative examples of your work that are clear and compelling. The same goes for testimonials. Testimonials are much more effective when presented in the context of a product or service page. But, choose the best one rather than overwhelming your visitors with content they will not read.
Make it easy for people to work with you. Instead of giving them a million options, or none, describe a way for your ideal client to start working with you. Give them something to buy, or a webinar or a paid consultation. These types of things are important to give someone a taste before they are ready to hire you for something more extensive.