A professional web design is highly important for your business growth. However, if you don’t have an online marketing background, it may be difficult for you to evaluate what a “good design” is. In this post, I’ll cover best practices for building a website for business.
Web design is much more than just aesthetics. With almost 2 bln websites out there, you can imagine the competition. Even if you are in a niche market, you need to offer more than attractive looks to get clients.
A website is not a brochure. Instead, you may look at it as your sales office or a store. Of course, you want it to be good-looking. But most importantly you want it to be working for you.
Your website is your sales office AND your never-resting sales rep, who is working for you 24x7. It works for you when you are enjoying your coffee. It works for you when you are working out. Even when you go to sleep, it keeps working for you - in another part of the world where it’s morning already.
If you have ever hired a sales rep or even a sales team you know, that you need to equip them with good knowledge and tools. A sales team will work best if you have a proper marketing strategy in place. They need to know your competitive advantage, your unique selling points, and what problems your product or service solves.
Same with the website. You need to fill it with the right content, map out your buyer’s journey and make it appealing to your visitors.
1. Tell your visitor who you are and what you can do for them
From the very first moment someone lands on your website, they need to understand what it is about. So the information about your business and what problem you are solving should be at the top of the page. Don’t make them wonder if they are in the right place. Most people, who have doubts that they came to the right website, don’t scroll for more information, as you would hope. They leave. So unless you are a world-famous brand, start by introducing yourself.
You can use the popular formula “I do X for Y to achieve Z”. It always works.
2. Keep your target audience in mind
B2B design is different from B2C. If you have a private law practice, your design needs to look serious and professional. On the contrary, if you are a fitness instructor, you want a bright and dynamic website.
Even businesses in the same niche may need a different look depending on a target audience. For example, if you have an events agency the design depends on an audience. If you organize business breakfasts and conferences, stick to a more traditional design. If you organize birthday parties for children, make it bright and entertaining.
In short, before making a decision on the design, think of who you are creating it for.
3. Limit the number of colors to 5.
If you have had your business for a while, you most probably have a brand color palette - it comes as a part of every branding strategy. Just make sure you stick to the same colors on your website.
If you are just getting started, you can use a color palette generator to create a stylish color palette. You can search the palette by a preferred color or even by concept (like “summer”). You can even generate a color palette from a photo. This is especially useful if you had a professional photo session and plan to add these photos to your website.
A perfect color scheme usually includes 3-5 colors. If you need to use more, try the shades of those main colors.
4. Choose fonts wisely
It’s totally understandable that we want to communicate our unique identity through design elements. But it is important to set the priorities. The goal of the font is to convey a compelling message. So first of all it needs to be readable. It is nice to get creative and add some twists to your wording. Just make sure all your content is easy to read.
The same concerns the colors. Choose a color that contrasts the background. This will make sure your message is noticed and read. The best practice is to use one of your brand colors for your text or the automatic text color.
Popular fonts load faster. So if you use a popular font like Arial, Monserrat or Railway for the majority of your text, a visitor will see your content sooner. In today’s world, you can’t underestimate loading speed. A user is used to pages loading in a few seconds. According to Google, the probability of a bounce (a visitor leaving the site) increases by 32% as a page load time increases from 1 second to 3 seconds.
5. State your value proposition and make it stand out
The strategic task of your website design is to communicate the value of your product or service. Make sure to identify your unique selling proposition. List the benefits that clients get. You may want to use icons to make these statements more visual. Or you may want to use images with statistics that speak in your favor. If you have success stories on your website, add photos or some interactive elements.
Suggested reading: How to create a value proposition that drives sales
This coaching website template offers a great interactive gallery for success stories. It comes with beautiful photos, and if you hover over it, you can read the story about that person.
6. Keep it simple
Most people don’t come to your website to admire the aesthetic. They come looking for a solution to a particular problem. Unnecessary elements will only distract them. Unless a design element supports your message, get rid of it. Not only will they distract your visitors from the desired action, but they will also slow down your website.
Pin this for later!
7. Optimize for multiple devices
In today's web space, it is highly important to make sure your website is mobile-friendly. From 2015 to 2020 mobile traffic has increased from 30% to more than 50% of all web traffic. And this trend is likely to grow. This means if your website is not optimized for mobile you are losing 50% of your website visitors. No business can afford this.
Not only will you lose those incoming visits, but will also not reach new people. Google, which accounts for more than 90% of all web traffic, has applied mobile-first index. This means that Google mostly uses the mobile version of your website for indexing and ranking. If your website is not optimized for mobile, the ranking will stay low. That means it’s unlikely to get found via internet search and you will lose a lot of traffic.
When optimizing your website for mobile, remember your website needs to be both good-looking AND functional. Make sure the images are properly sized. You need to choose the size that preserves the quality.
Blurry images will damage the look. At the same time, there is no need to use super large images. Those are good for printing but terrible for loading speed. Besides, a mobile browser resizes images anyways.
You can play with the size of your images and see how small you can make them without losing quality. But for the reference 1500px wide is usually enough for the Retina screen. For a mobile version of your website as little as 250 px wide might do.
8. Include compelling CTAs
Can’t state it enough: your website is not a brochure. It is a lead generation and sales machine. So when designing every page keep in mind your client’s journey. What do you want a visitor to do next? Don’t make them think twice about it. Make the next step easy and intuitive.
It is a good idea to add several CTAs. You can use design to distinguish a primary call-to-action from a secondary one. A primary CTA is your most desired action. However, these actions can be viewed as too much of a commitment. A visitor may not be ready for that yet. In that case, you can offer them an alternative.
This page gives a good example of primary and secondary CTAs. The purpose of this landing page is lead generation. So I offer a free landing page template and ask visitors to fill out the form at the bottom. They can jump to the form by clicking the primary CTA button “Get it now”. But if they are not sure yet, they can choose a secondary CTA “View the live demo”. In this example, the secondary CTA is meant to build trust and hopefully convince a visitor to fill out the form. As you see on this landing page, the primary CTA is brighter, while the second one is less contrasting.
Another design trick for a CTA is adding a hover effect to your buttons. This means once a visitor hovers over a button it may change size or color. This will make your website appear more interactive and increase CTA clicks.
9. Make the navigation intuitive
The navigation menu is a very important part of your website. It depends on your navigation, whether a visitor will go away (bounce) or stay and explore your website. Whatever your business is, you want your visitor to stay and learn more about your business. Make it user-friendly.
The majority of the websites have their navigation at the top of the page in the header. This is called horizontal navigation. This is the navigation used on nomaddiva.com too. Just look at the top of the page: the sections are listed side by side, so you can easily navigate to the desired section. There is also secondary navigation: as you hover over a digital agency, for example, you see the services I offer, like web design and email marketing. And if you hover over “Knowledge center” you will see my most popular posts.
On mobile versions, there is usually no space for navigation in the header. That’s why most businesses use a small button that stands for menu, which looks like a circle or square with horizontal lines. The best placement for this element is at the top right corner.
10. Make the most use of the header and footer
Every website nowadays has a header and a footer, but not every company uses their full potential.
The must-haves of the header are your logo and your navigation menu. It is a great idea to make your logo clickable, so your visitor can get back to the homepage after browsing your website. And of course, make your navigation well-organized.
These are essential elements. But what else can you do with a header?
First of all, you can add your most important call-to-action here. Look at this coaching website template. In this example, our most desired action is to get a visitor to book a discovery call. So we added a button to the header that takes you to the Calendly booking window. This action is easy and intuitive, that’s why it is guaranteed to get the website owner fully booked.
The header appears on every page of the website, and so will the CTA. Whether your visitor is looking at your services, reading a blog post, or listening to a podcast episode, the CTA is always in front of them.
Another good idea is to add social media buttons to your header. This is especially useful for those with active social media profiles. Social media is a good way to stay in touch with your audience and raise brand awareness. It also contributes to your credibility, especially if your followers are engaged and there is an active discussion going on.
A useful web design trick is using a so-called sticky header. As a user scrolls down the page, the header stays on top of the screen. This is a good option to keep the navigation and the CTA always visible.
A must-have for a footer is your copyright sign. You want your content to be protected. Many website owners just leave it there. But there are many ways to use your footer.
First, you can add your menu and social links there. Basically, just duplicate your header content. You can make the footer as large as you want, so you can expand the navigation and show all the pages from the secondary menu (those that are hidden in the header and only appear as you hover over the main title).
Second, you can add your certifications and licenses here. This will increase the credibility of your website. Look at the website NomadDiva designed for a roofing company in the New York City area. For their business, licensing is important. So you can find the proof of their qualification on every page.
Third, you can use your footer for lead generation. Simply place a lead form on your website footer and voila, your email list will grow faster. This is an especially smart trick if your email tool subscription includes limited forms. Or if you pay extra for every form placement. By placing the form at the footer you save a lot of money. Because technically, it is just one form, but it appears on every page of your website.
Look at how I use this trick in this coaching website template. You can both sign up for a newsletter and send messages. These elements make the website owner look more approachable and increase conversion rates.
Comments