Posted in / Insights

B2B Website Design Trends for 2018

Web design is a fast-paced industry; that's why web design agencies are always busy!

Although you don't need a new website every year, you should start to notice when it becomes outdated. If you're thinking of redesigning your website, it's important to stay on trend. While you want your website to look different, there are certain features you need to have to appeal to your buyer persona.

For example, if you're having a website designed for a nursery, you should stay away from a black and white colour palette (unless you want to depress everyone!). Or if you have a lot of resources on your website, you'd certainly want to consider full screen forms or custom calls-to-action.


A buyer persona is a semi-fictional representation of your buyer. It's based on real data, surveys and personal knowledge. It forms the foundation of any website build; if you don't know who you're building the site for, (reminder: it's not you!) how do you know what to create?

Here are our favourite website design trends:

1. Illustrations

Illustrations are the best way to make your website stand-out because they're less likely to be repeated. Sure, you can copy words to a certain extent or even try to mimic their design; but if they've used an illustrator you'll struggle to get a replica of that.

And why wouldn't you want to be different? It shows your organisation values creativity and commitment and will make your visitors stop and think.

Add that human touch to your website by using a human to create the imagery on it! When you create your illustrations, ensure they speak about your brand or product, keep them simple and ensure they have a purpose; they aren't just there to look pretty.

Take a look at Slavery Footprint. It's about the most simple illustration you will see but it has a clear purpose, to break the chain of slavery. Simple, effective, unique.


2. To Scroll Or Not To Scroll

Long or short? That's the question every web designer has to face. Scrolling is one of the most significant website design functions for increasing readership. Yet, a tough choice has to be made.

Which one should you choose? Long scrolling is a convenient way to move around, but it comes with a high-price if your users get bored and decide to leave. Too much content can confuse people.

On the other hand, a short scroll gets you quickly to the right place on a website, but if it isn't clear where the user should go next, the bounce rate may hit you like a boomerang. This scrolling battle will go on in 2018; that's for sure!

Parallax is considered a bit outdated, but web designers are always finding new ways to bend the rules and create unique scrolling methods. Take a look at Bear Grylls' website , it sucks you into the site before sending you down the page. It's magical!

New Call-to-action

3. Forms Will Go Full-Screen

More sites are going full-screen with forms and inputs. Making the form the focal point gives you better results, meaning the user isn't distracted by anything else on the website.

This trend is going to rock for two reasons. The first being you won’t be redirected to another page. The second being it'll encourage you to fill out the form because you have plenty of screen space to use.

This form page from FastPay shows how you isolate the user, tell them what to expect when they fill out the form, the benefits of filling out the form and the form itself.

There are plenty of quirky tricks to shake up your forms, including animations and multi-step form fields. You can also experiment with language. But remember, keep it simple. if you overcomplicate things you'll detract the user.

fast pay form

4. Subtle Animations

Animations have been part of business web design for some time. This inclusion won't be much of a surprise to web designers. If you want your B2B site to stand out from the crowd, animations can help. Just don't turn your site into an animated movie. Use rich, but subtle animations and you won’t make a mistake.

You also need to consider file size when adding animation. If you overload your site it'll slow it down and you'll be penalised by Google; and that's never good!

Pete Nottage's website is a fantastic example of how an animation can be the focal point of a website without detracting from what you want the user to do when they get there. The background comprises simple background shapes, which allows the site name, what he does and the different website pages to remain in focus and prevents them being lost to the animation.

5. Split-Screen Homepage

The split-screen style is going to be one of the most popular business web design trends for 2018, especially for corporate homepages. Yet, there's a catch with split-screens. You should it keep it simple. Complex split screens may confuse your customers and they'll bounce straight back to wherever they came from.

There are a few points you consider when designing split-screen pages:

  • Think about what you're offering. if you have more than one service you have two screens, two messages
  • Create a relationship between the screens - although you have two screens if styles don't match you'll end up with opposites that don't work
  • Think of your screen as a card - what do cards do? They convey one message, so stick to one message per screen


Benchmark decided to do something different and split their screen into five! As you hover your mouse over each section, a video begins to play. You'll snap back after a few seconds and remember what you were there for!

6. Minimalist Responsive Web Design

Less is more. That's what designers are starting to embrace. Packing your website full of images, videos and words overwhelm the visitor. If you can convey your message in a simple manner, why not do it?

Don't confuse minimal with boring either, websites can still be colourful and exciting. They're also easier to tweak for mobile use, and with the way things are going, that can only be a good thing.

There are some amazing benefits associated with minimalistic responsive web design:

  • Appealing atmosphere of visual aestheticism and sophistication
  • Reduced loading time
  • Less time is required to locate the important element on the website

botany bay site

Botany Bay's site is simple and looks sleek on mobile and desktop. It shows you that all you need is your brand, a quality picture and simple menu headings.

7. Broken Grid Layouts

Broken grids have come a long way from strict stoppers to a flexible B2B website design trend. A hybrid style that includes both the modern flat aesthetic approach and the layered material design look can ensure the following benefits for your website:

  • Quicker loading times
  • Modern aesthetic - elements drift into a different parts of the page creating a smooth flow
  • Browsing experience is quicker and effortless

8. Floating Action Buttons

If you're going to use floating action buttons, you need to do it right. Firstly, you should use FABs to highlight what action you want the user to take, or the most frequently used action on the page. For example, if you're on a music player, the most common functions would be to pause and play.

Also, not every screen needs a FAB. It has to be a natural action, so when someone goes on their text messaging screen they probably wouldn't conduct a search first.

Make sure your user knows what the button means, if it isn't clear it creates confusion. It might seem small, but do you want to create a psychological barrier for your user to overcome?

More tips for FAB include:

  • Hide when scrolling
  • Only use for positive actions
  • Expand into a set of actions
  • Only one per screen

  • floating action buttons

    9. Focus On Speed

    You don’t have to be an experienced web designer to know that sites loading for more than 5-10 seconds will not be popular with users or Google! There’s no user who'll sit patiently and wait for videos or heavy graphics to load before they get to the website.

    You can use an interactive screen load with sounds and graphics with no need to bore your users into back-clicking. There's a relationship between page abandonment and loading time so every second counts.


    10. Give JavaScript A Break

    Everywhere you look, there's JavaScript to be found these days. Yet, too much JavaScript means only one thing for your impatient users – more time to wait. So, it's very likely to expect that B2B website design trends will give JavaScript a break for a design season 2016/17. Therefore, you should be judicious when it comes to using JavaScript on your website.

    11. Limit The Number Of Typefaces

    Or in plain English, don't use too many fonts! If you want for your website to be consistent, then you shouldn’t use more than two typefaces. If you do use more than one, make sure they complement one another. A seasoned designer will be able to help you with this.

    Being consistent with your typeface means easier readability and shows your brand's personality. So, what should you do? Don’t be afraid to experiment with fonts. Use fonts that work together to ensure interesting contrast for your website users. But once you've found one you like, stick with it.

    web design typeface

    Can You Keep Up?

    B2B website design trends move at the speed of light! To catch up with the latest trends in the industry, you need to be watching all the time. This selection of business website design trends can help you focus your time and resources on the most rewarding and efficient solutions. So, choose your favourite ones and get with the times!

    Editors note: This post has been revamped and updated for 2018. At Red-Fern, we love keeping our content fresh, it ensures our articles are up-to-date, relevant and accurate!

    Planning for Your Website ReDesign

    Learn the 10 key metrics for a successful website re-design


    Pro tip: Developing a launch strategy for a website re-design will help you launch a site that increases leads and conversions

    Share This

    Growth Driven Design Review