When designing your B2B website, it is crucial to step back and consider some general design best practices.
“In a perfect world, conversions would flow like fresh spring water. But in real life, you need to guide your visitors toward a single call to action with a combination of persuasive design and psychological triggers.” (Source: unbounce)
Before we get into it, here’s a quick diagram of all of the different elements of a web page:
Below are some guidelines on B2B website design best practices. Use these on your website to help you increase conversions and get more leads.
Your website navigation should be designed to help your visitors find what they are looking for at each stage of their decision process. Creating a robust navigation system is one of the most important parts of designing a website.
Only move on to the visual design of the navigation after you have a well-planned navigation structure that follows best practices. Neil Patel has a great article on common website navigation mistakes we can all learn from.
The type of menus you use on your website will depend on your audience and their needs. Let’s take a look at some of the most popular ones below.
Primary Menu
According to a study done by Missouri S&T’s on eye tracking, subjects spent 6.44 seconds viewing the main menu. In comparison to other elements on the website, time viewing the main menu ranked 2nd. Your primary navigation must be consistent and designed to contrast against other elements on your page.
Here is a great example of a horizontal primary menu that both stands out and is consistent.
Source: helicopter-view.com
According to a study done by Stone Temple, 63% of all US Web traffic came from mobile devices. Thus, it is crucial that your website is responsive across all devices.
A great way to make your navigation design responsive us by using the hamburger menu. The hamburger menu is an icon made of three horizontal lines.
Additionally, color and text indexing can your visitors distinguish different levels of navigation.
As you can see below, COPMI uses a hamburger menu and large, legible font on their navigation to make it easy to read. They also make use of color and indenting to show different layers within the navigation.
Source: copmi.net.au
A study of 25 million websites by Chartbeat showed that visitors scroll down thousands of pixels.
When designing your footer, ensure you are:
- Maintaining your voice and branding
- Creating visual hierarchy
- Giving it plenty of space
- Separating it from the main content.
Here are some elements that are typically included in the footer:
- Sitemap
- Contact information
- Social Media Links
- Search Tool
- Email Sign Up
- Copyright
- Privacy Policy & Terms of Use
Above is a great example of a footer by The Noun Project. It includes important links, social icons, privacy policy, and a CTA to subscribe.
Minimalistic Design
Minimalism follows the principle that less is more. This concept has become popular in web design. Simpler designs are scientifically proven to be better and can lead to more conversions.
Here are some ways you can apply this principle in your B2B website design:
Use of White Space
“The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout,” according to Jason Santa Maria.
White space plays an important role in improving reading comprehension, prioritizing important interface elements and guiding users on a page.
Below, you can see how Shopify uses white space to minimize distractions to direct users to their desired action, which is to sign up for a free trial.
Effective Use of Color
With minimalistic website design, color choices play an important role in the look of the site.
Color is a powerful way of making crucial elements stand out. Be careful when using bright colors and mix them up with more toned down, complementary hues.
See this example below for a beautiful example of color use. They use black and white photography throughout the website and highlight certain sections with the use of bright colors.
Source: tomkellyslack.com
Choose Your Images Carefully
Pairing your content with the appropriate images can often be better than a thousand words.
Ensure that the images you are using on the website are bright and high definition. Do not use your images as decorations. Whenever possible, use photos that create an emotional connection between your website and your users.
Here is a great example of Super Crowds using one of the products they offer as their hero image. The product image has makes excellent use of negative space so that the user’s attention goes directly to the product. The image isn’t distracting and goes well with the theme of the website.
Source: supercrowds.co
Layout and Typography
Use a Clear and Well Thought Out Layout
To draw your user’s attention on what you want them to notice, your website needs to follow important elements of visual hierarchy.
Listed below are some rules and concepts you can leverage in your design.
- Rule of Thirds: The rule of thirds refers to a 3 by 3 grid that helps you understand the most eye catching points on an image. The four middle sections of the grid are the strategic places interest.
Source: optinmonster.com
In the example above, the most important elements of the banner are placed at these points to grab the viewer’s attention.
- Z Pattern: “A Z-Pattern design traces the route the human eye travels when they read — left to right, top to bottom” (Instapage). This kind of pattern is good for designs that have a couple of key elements of focus and minimal copy. Facebook’s landing page is a great example of the Z-Layout.
To learn more about this pattern, check out this article on The Z-Pattern Layout.
- V Pattern: Using the V pattern can be an effective way to make your CTA stand out. Center your text and lead it down to your CTA in a V Shape. A great example of this method can be seen in the example below:
Source: InkSoft
- F Pattern: According to various eye-tracking studies, the F-Pattern is the way visitors read the screen.
- First, our eyes move to the top of the page to read headlines
- Then towards the upper left corner and left side of the screen
- Lastly, across the page again (reading anything that stands out in that section such as bolded text or headlines)
Source: Instapage
The heat maps above show the generalized F layout. Red / Orange / Yellow are the hotspots where a viewer’s eyes fixated the most. An important thing to note here is that it is not a strict F shape, but more of a rough F outline.
Typography
“More than 95% percent of information on the web is in the form of written language.” (Source: Uxplanet).
Make use of section headers, bullet lists and other elements to make your pages easier to scan. The following typography guidelines are also important things to keep in mind when trying to make reading effortless.
- Don’t use too many fonts: Generally, using more than 3 fonts on a website can make it look messy and cluttered. Too many type sizes and styles can also have the same effect. Make sure the fonts you choose are also easy to read.
Source: UX Planet
- Line Length: According to the advice given by the Baymard Institute, you should “have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your text.”
Image Source: Material Design
- Spacing between lines: To aid readability of your content, keep this general rule by Microsoft in mind: Leading (leading is the term used for spacing between two lines of text) should be about 25 to 30 percent more than the character height for good readability.
- Color and Contrast: Not only is it important to choose the right color palette for your text, contrast between the text and the background is also a crucial element to consider. Using a busy background that text blends in with isn’t good practice.
Responsive Design
According to various studies, more people use their phones to browse the web than they do desktops. This is why mobile responsiveness cannot be ignored.
Below are some best practices that will help you make sure your visitors have a good experience on your website no matter which device they use it from.
Minimize and prioritize
Smaller devices do not have as much breathing space as desktops do. Thus, prioritize the important content and hide the content that people wouldn’t be looking for on smaller devices.
You can also take advantage of elements like tabs, toggles, or clickable sections/graphics that expand on click for sections with large amounts of text.
Scalable Graphics and Responsive Imagery
Modify your images and graphics so that they retain their impact. Saving two different versions of your image – one for desktop and one for mobile – is an important practice as it also helps scale download times for mobile.
Typography
If your visitors have a difficult time reading the content on your website, they aren’t going to stick around.
You want to make sure you are balancing your headings and fonts to be truly optimized for web.
Source: Impact
The image above is a great example of Impact Inbound optimizing their blog to be legible on smaller screens. The body text maintains a 50-60 character window per line of text which is optimal for mobile use.
Other Considerations
Keep in mind that there are many elements of website development that go hand in hand when it comes to driving leads to your company. Some of these include:
- SEO strategy and implementation
- Value proposition,
- CTA’s
- A/B testing
- Continuous maintenance
- Consistency across the website
Conclusion
While there are a lot of other great design principles beyond the ones I’ve shared above, these are definitely some of the top things to keep in mind when designing your website for high conversion. Moreover, always keep a mindset to continuously improve your website.
The concept of growth driven design has become the smarter approach to web design and focuses on results. Month over month improvements after careful analysis of your website data is key to having a high functioning website.
Are you interested in generating leads and improving your B2B website? See how Jumpfactor can help. Request a one on one consultation.
