21 Dec 2017

12 B2B Website Design Trends for 2018

Read about the 12 B2B website design trends for 2018

In 2018 most B2B website design projects are driven by the desire to not only create a modern and attractive window to the world, but crucially, to increase the number and quality of leads generated through a company’s website.

This requires three key elements:

  • The site must be designed, written and built to attract relevant visitors
  • The site must provide relevant calls-to-action (CTAs) through which anonymous visitors can be converted into leads
  • The site should give visitors a reason to come back, so that they can be nurtured into sales-ready leads

In this article we take a pick of the latest design trends that you can adopt or include as part of your website redesign brief to make sure that your B2B website becomes an effective lead-generation machine in 2018 and beyond.

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.


Button
We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="12 B2B Website Design Trends for 2018 - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>


Survey
Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="12 B2B Website Design Trends for 2018">Answer One</a></li>
<li><a href="#" id="12 B2B Website Design Trends for 2018">Answer Two</a></li>
<li><a href="#" id="12 B2B Website Design Trends for 2018">Answer Three</a></li>
<li><a href="#" id="12 B2B Website Design Trends for 2018">Answer Four</a></li>
<li><a href="#" id="12 B2B Website Design Trends for 2018">Answer Five</a></li>
<li><a href="#" id="12 B2B Website Design Trends for 2018">Other</a></li>
</ul>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>
</ul>


Form
We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g. https://app.hubspot.com/forms/145288/ee2dd282-1afb-4040-b67a-6ea2fe6e32cc/edit:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('12 B2B Website Design Trends for 2018');
}
});
</script>


CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - 12 B2B Website Design Trends for 2018"><img alt="Title of the CTA" src="https://cdn2.hubspot.net/hubfs/145288/hub_generated/resized/21421668-c868-457c-8f68-142438f1e246.png" title="Title of the CTA"></a>
</div>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('12 B2B Website Design Trends for 2018');
}
});
</script>
</div>

1. Infographics and Line Art

With more and more B2B companies starting to replace words with infographics and line art icons to explain the complex content in their blogs, it's expected that their use will continue to grow in popularity. We work with a lot of SaaS companies where icons prove to be particularly useful as a way of showing product capabilities and service benefits with minimum use of words. This is important as visitors often spend only a few seconds on a website page, therefore, grabbing their attention and making what your page is about immediately clear, is crucial. Icons are also a great way of linking to additional content and making your web pages interactive and engaging. That also increases the chances of visitors taking an action.

Examples of line art icons on Teledata's website

2. Parallax Scroll

Throughout 2017, we have seen leaps in development in the way parallax scrolling is being used, which have extend into 2018 as well. Parallax is a visual tool that creates a 3D effect, as the foreground moves at a faster pace than the background. It engages site visitors and increases engagement in ways other design tools have not yet achieved. Although it's said that parallax scrolling has SEO drawbacks, it is actually the overuse and misuse of design that leads to bad SEO results. Therefore, using parallax scrolling on your website shouldn't have any negative impact on maintaining your SEO standard if done well. And no matter what you may hear, parallax scrolling is compatible with mobile. All you need is a good developer to make sure that the parallax setup has been done properly and used in moderation. 

Example GIF of parallax scroll on website

3. Bold Font and Bright Colours

We know that bright colours and bold fonts might seem a little intimidating, and it's no secret that a clean, simple B2B website is always the safest option to go for. However, don't dismiss this trend just yet, utilise it to your advantage and illuminate your website's CTAs, link texts and buttons and your marketing efforts will reap better results with higher level engagement and click-through-rates.

Don't be afraid to bold any important information that you think your readers might find useful and draw their attention this way. Ever heard of the 59 second rule? Visitors will leave your website if they can't find relevant information. Prevent that from happening with captivating bold colours and text to help guide your visitors through your site, just like the example below. Just remember to do this in moderation. Bright, harsh websites with a lot going on can still put your visitors off. Make sure you use this trend to highlight the important parts only. As you can see from this website example, they have used a bright mustard yellow to highlight important actions that they want their visitors to take. This is very effective as it prompts the visitor what to do next, without being intrusive. Try something similar on your B2B website and see if you can improve your click-through-rates.

Example of bold fonts and bright colours on Winnow's website

4. Single Page Websites

Another web design trend that is trending for 2018 is single page websites. A single page website allow clutterless content on one long scrolling page. This limits any navigation challenges of the visitor and is supported by anchors. Anchors can be used like regular links to direct users to certain sections of your website. You can also connect the transition to link easily, such as having the page elegantly scroll to the section your user has clicked on. This is a big advantage for simple page sites that want to drive micro-interactions, as the user doesn't have to wait for another sub-page to load.

Some more advantages of single page websites are:

  • They're mobile friendly - With mobile search surpassing desktop search and with Google's mobile-first indexing being rolled out, single page websites have the advantage. They look better, load quicker and provide a great user experience - everything Google loves.
  • They're easier to build and maintain - Single page websites take a fraction of the time to build compared to multi-page websites and it means they're much easier to maintain over time and update when needed.
  • They can help increase domain authority - A great advantage of a single page website is that whenever you acquire new links they will always point to the same URL and will build up domain authority as a result.

However, there can be some drawbacks. Single page websites aren't the best for SEO as they tend to revolve around one main concept and your website could be seen as lacking depth. Ultimately, because of this lack of depth, ranking for multiple keywords will be affected.

That said, the long page trend works brilliantly when applied to a landing (or lead-capture) pages. Landing pages are one of the most important parts of a B2B website because it is here that the visitor will hand over their contact details in exchange for an offer, such as an eBook. Another advantage of a long scroll website is that it's been designed to take visitors down the buyer's journey as they scroll down the page. So, by the time the visitor gets to the form at the bottom of the page, they are more likely to have become a higher quality lead than when they initially arrived on the page.

Here's a nice example of how the anchor works on a single page website:

Example of an anchor on single page website like ShipWise

5. Advanced Scroll-Triggered Animations

With graphic design and technology advancing rapidly hand in hand, it’s no surprise that scroll-triggered animations are becoming more popular for B2B websites. Not only are they mesmerising, but they are also said to encourage engagement rates. Apple is one example using this trend. The example below may look like a video, but it's simply just animation that is triggered by scrolling.

Scroll-triggered animations are now being used to give visitors a realistic, educational experience of the product, increasing conversion rates. While the feature is currently being used more in B2C environments, there are great opportunities to showcase products in the tech and industrial sector.

Example of a scroll-triggered animation on Apple's website

6. Mobile Optimisation

Mobile optimisation has been a pressing necessity since the launch of the first iPhone a decade ago. In B2B, mobile optimisation is now increasingly important as business people use their phones to research products and explore their options. Research by Google suggested that 49% of B2B researchers use mobile devices for research, and 74% say they are likely to return to a company's site in the future if it is a mobile-friendly site. Our own experience bears this out. Where companies do not have mobile-friendly sites we typically see higher bounce rates (people leaving a site before looking at any further pages) and fewer returning visitors. Both tend to mean lower conversion of visits to leads.

Example of a responsive mobile-optimised website on Axon Garside

7. Responsive Design

Alongside being optimised for mobile, it's also important to consider responsive web design as well. As Google has moved into mobile-first indexing, responsive web design has come on in leaps and bounds. The benefits of responsive web design include:

  • Easier reading
  • Minimal need for resizing, panning or scrolling
  • Simple navigation
  • Being able to adapt to different devices (i.e. mobile, tablet, desktop etc.)

If you want a quicker design that requires little to no maintenance (and being virtually error-free), then a responsive design is a great option for B2B websites as you can offer a smooth and consistent user experience for your visitors. You can learn more in our blog about responsive design.

Take a look at this example of responsive design:

Example of responsive web design on Wired.com

8. Bottom Sticky Menus

Bottom sticky menus are an exciting new design feature which has recently come into play and is one of our favourites at Axon Garside. The trend started late in 2017 and has grown in popularity in 2018 as it continues to revolutionise.

Business Insider reported tells us that on average, people touch their phone 2617 times in a day. It's no wonder that we have decided to optimise a website to look like a smartphone’s layout. Let’s put this into context. When you use your smartphone, over 75% of your fingertip interaction is done on the bottom half of the screen, and all of your most used apps are placed there too. So it is natural for the majority of people to gravitate towards the bottom of the screen for navigation and accessibility.

That’s why innovative website designers are now putting the menu bar at the bottom of the website screen, which is stationary and never moves. Therefore, when you’re scrolling and exploring a website, the menu is consistently accessible. You can finally wave goodbye to having to scroll back up to the top of the web page to navigate to another part of the site.

Take a look at the example below for some inspiration:

Example of a bottom sticky menu navigation on CropTrust website

9. Skimmable Website Content

Having skimmable website content may seem like common sense, however, it's still often overlooked. As we mentioned in trend number three, visitors are giving you less and less time to make a first impression. If they can't figure out what your content is about in a few seconds, they'll leave.

Headlines should be written in a way that helps the reader to understand 90% of the content. The other 10% comes from the supporting paragraphs. Using techniques like this is becoming more and more necessary every year, as B2B buyers are increasingly busy and they need to digest the content quickly.

You can improve your content by cutting out all the fluff in your writing. Fluff clutters your content and people will turn away, so make sure you’re straight to the point. Break up your content with more explicit headings and subheadings. Take a look at the example below for instance.

De-clutter your website content and you’ll be sure to improve your lead generation efforts.

Example of skimmable website content

10. Full Screen Forms

This year, designers are focusing on how to get more visitors onto landing pages and convert them into leads. One trend is to make the submission form take up the entire page for higher impact, ease of use and best possible conversion rates. This is probably one of the most important trends of 2018. After all, converting visitors into leads is the most important aspect of a B2B website and should not be overlooked in the upcoming year.

Example of a full screen form on Typeform

11. Micro-Interactions

You might not realise it, but micro-interactions (MI) are imperative for your B2B website. Micro-interactions improve engagement rates massively. In case you’re unsure what they are, a MI is anything you do on a device.

For example: turning off your alarm in the morning. MI can also be any actions that visitors take on your website. The clever thing about them is that the visitors usually don't realise that they are doing them. Covering the basics on a website is important and it's the small details that truly matter, such as buttons, link texts and placed texts, which will improve UX and give you the edge over the competition. If your visitors don't purchase products or services from your website, you can still use MI to direct visitors towards contacts forms. Therefore, increasing MI in 2018 is the best thing you can do for your website. 

Place some MI on your site and you will be sure to see engagement and lead generation rates increase, while directing your visitors to the most important parts of your website such as landing pages. These MIs below show you how to use them effectively to shorten the buyer's journey.

As you can see from this example, HubSpot have cleverly used MIs to engage their visitors and persuade them to continue down the page. As you scroll over the boxes, they have a pulsing animation, this will tell the reader that the box is clickable and that's exactly what the visitor will do. Once they have clicked on the box, the page will smoothly scroll down to the specific part of the page where they will be given more information - and eventually pulling them closer to purchasing.

Example of micro-interactions used on HubSpot's website

12. Pop-up Forms on CTAs

Some may prefer this trend to number ten, as it's a little more subtle. We are no longer waiting for visitors to click on a CTA to fill out the form. Instead, the forms now pop-up from the CTA. This is a very clever design feature for lead generation. Not only is this new feature speeding up the decision-making process of whether to fill out the form, but it could also attract people who wouldn’t usually acknowledge the CTA - thus, increasing your contacts and leads. This new trend may also eliminate any chances of the CTA or landing page not being attractive enough for people to notice.

Example of pop-up forms on a CTA on Axon Garside's website

There you have it; our top 12 B2B website design trends for 2018. With an increase in micro-interactions, pop-up forms on CTAs, bottom sticky menus, bright colours and responsive design taking over the web, it looks like 2018 will be a good year for website design, and I know we’re definitely excited to see how well they work out for engagement rates and lead generation.

  • Download the B2B website goal setting & assessment worksheet
  • Would you like to see some more examples?

    We've been designing responsive B2B websites on both WordPress and HubSpot platforms for years. If you'd like to see some examples click here.

  • Download the B2B website goal setting & assessment worksheet

Topics: Website Design

Blog Comments