21 Dec 2017

11 B2B website design trends for 2018

11 B2B website design trends for 2018

In 2018 most B2B website design projects will be 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 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 opportunities (sales accepted leads)

In this article we take a pick of the latest design trends that you can adopt or include in a website design brief to make sure that your B2B website becomes an effective lead-generation machine in 2018. We’ll also warn against the adoption of one trend which can make a website look great - but can cause real problems with attracting and converting potential leads.

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="11 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="11 B2B website design trends for 2018">Answer One</a></li>
<li><a href="#" id="11 B2B website design trends for 2018">Answer Two</a></li>
<li><a href="#" id="11 B2B website design trends for 2018">Answer Three</a></li>
<li><a href="#" id="11 B2B website design trends for 2018">Answer Four</a></li>
<li><a href="#" id="11 B2B website design trends for 2018">Answer Five</a></li>
<li><a href="#" id="11 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('11 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 - 11 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('11 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 is expected that their use will continue to grow in popularity in 2018. 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.

Line art.png

2. Parallax Scroll

Throughout 2017, we have seen leaps in development in the way parallax scrolling is being used, which will 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 is 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. 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. 

Parallax scroll

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. But 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. Remember the 59 second rule? Visitors will leave your website if they can't find relevant information. Prevent that from happening in 2018 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 orange to highlight important actions that they want their visitors to take. This is very effective as it is telling the visitor what to do next, without being intrusive. Try something similar on your website in 2018, and see if you can direct your visitors. 

Bold fonts

4. Single Page Websites

Another web design trend that will follow us into 2018 is single page website. Single page website allow clutterless content on one long scrollable 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 single page 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 subpage to load.

However, single page websites are not good for SEO, as they tend to revolve around one main concept, therefore, you use your use of keywords would be limited to only one topic. That said, the long page trend works brilliantly when applied to a landing (or lead-capture) pages. These 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 that's been designed to take their visitors down the buyer's journey as they scroll down the page, is that 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 arrived on the page initially. Here's a nice example of how the anchor works:

Single page

5. More Advanced Scroll Triggered Animations

With graphic design and technology advancing rapidly hand in hand, it’s no surprise to us that scroll triggered animations are going to be even more popular in 2018. Not only are they mesmerising, but they are also said to encourage engagement rates. As ever Apple is ahead of the trend. The example below may look like a video, but it’s not, all of the animation 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 more popular in B2C environments, there are great opportunities to showcase products within the industrial sector. 

Scroll animations

6. Mobile Optimisation

Mobile optimisation has been a pressing necessity in B2C 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. A recent X report suggests that "42% of researchers use mobile devices during their B2B purchasing process.", 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.

Free Download - 15 B2B website must-haves 

Mobile optimised

7. Bottom Sticky Menus

Bottom sticky menus are an exciting new design feature which is sure to skyrocket in 2018 and is one of our favourites, here at Axon Garside. The trend started late this year and is expected to rapidly grow in popularity in the new year as it continues to revolutionise.

A Business Insider report tells us that, on average people touch their phone 2617 times in a day - it is 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 there and never moves. Therefore, when you’re scrolling and exploring the 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:

Bottom Nav

8. Skimmable Website Content

Having skimmable website content may seem like common sense, however, it's still often overlooked. As we mentioned in trend number 3, 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 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 people are becoming increasingly busy nd 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 up with more explicit headings and subheadings. Reference to the example below.

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

Skimmable website content

9. Full Screen Forms

In 2018 designers will be focusing on how to get more visitors onto landing pages and convert them into leads. Designers have a new idea now, which 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, converting visitors into leads is, after all, the most important aspect of a B2B website and should not be overlooked in the upcoming year.

Typeform

10. 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 text, especially placed text, 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 M1 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, e.g. landing pages. These MI 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 MI to engage their visitors and persuade them to continue down their 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. This is very clever, as it pulls visitors closer to purchasing.

Micro - Interactions

11. Pop-up Forms on CTAs

Some may prefer this trend to number 10, as it is a little more subtle. In 2018, we are no longer waiting for the visitor to click on the 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 will this new feature speed up the decision making the process of whether to fill out the form, but it could also attract the people who wouldn’t usually acknowledge the CTA, 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.

Pop Up Forms Instead Of CTA

There you have it; our top 11 B2B website design trends for 2018. With an increase in micro-interactions, pop-up forms on CTAs, bottom sticky menus and bright colours 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.

  • 11 B2B website design trends for 2018
  • 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.

  • 11 B2B website design trends for 2018

Blog Comments