Blog Index

Top SaaS Web Design Trends to watch for in 2018

Jun 24, 2018
SaaS / Website Design and Development
by Stephanie Knapp
Top SaaS Web Design Trends to watch for in 2018

There are a few key design principles and elements that your website needs to have. Although, that doesn’t mean your SaaS web design is all rules and no play.

Technology and trends can quickly evolve, and web design trends are no different. However, staying up to date with new trends and trying updated designs keeps your brand fresh and modern.

Here are our top SaaS web design trends to watch for in 2018

SaaS Web Design Trends You’ll Want to Use

The top SaaS web design trends we found are all about being bold, bright, and unique. While it’s true there are some formulas and basic plans you can follow to layout your SaaS website; these trends think outside of the box. As web design and development tools advance, the possibilities of how to creatively showcase your SaaS are nearly endless.

Bold Colors + Gradients

There is a time and place for sleek and minimal black and white designs. 2018, however, may not be that time. Advances in monitors and devices mean that designers can play with adventurous colors and trust that the end user will see the full experience. Spotify’s signature color may be green, but their home page is splashed with pink and orange.

 

Spotify’s signature color

 

When it comes to bright colors, more SaaS website designers aren’t limiting themselves to a single tone. Gradients have worked their way in and out of trending, but they’re an easy way to add an interesting dimension to a flat screen. Scale chose a purple and pink gradient for their home page.

Impossible Bureau

Animations, Illustration, and Video; Oh My!

As designers play with bolder colors as a result of high-resolution screens that users will view them on, developers can step away from static images as they can assure speed won’t be compromised.

In 2018, if a SaaS website does have a static image, it’s more likely now than ever to be a custom illustration. You can see this in SaaS web design from companies like Slack.

SaaS web design from Slack

SaaS 2018 web design bonus points go to Zingle, who uses both bold colors AND custom illustrations on a single above the hold section on their website.

SaaS 2018 web design by Zingle

 

A step up from static illustration is simple animation. Subtle animation can be used to call attention to a particular area on the page or CTA, to explain a service, or just to entertain. In INTURN’s case, they use the animation below to illustrate the problem they aim to solve.

INTURN’s animation design

On the other hand, Heystack uses animation to illustrate what their service does in a way that’s also entertaining to watch. The SaaS consolidates information from many tools into a single dashboard. They imagine the process as a complex machine shaping and reshaping the input to come out on the other end.

While customer illustration and animations are entertaining, they have a relatively small impact on a visitor’s complete understanding and readiness to buy. That’s why SaaS websites in 2018 are directing efforts to video as well. Videos on a SaaS website can be used for explainers and demonstrations.  They’re a great to incorporate into your content marketing strategy. In fact, four times as many consumers would rather watch a video about a product than read about it.

Fullscreen forms

At the end of the day, your SaaS web design should act as a tool to accomplish you and your users’ goals. One of the goals that your website is most useful for is generating leads.

While animations, bold colors, and explainer videos all help to move a user along the buyer’s journey, it all comes down to collecting an email. When it comes to generating leads, sometimes a great CTA button isn’t enough to get the job done. Therefore, we expect to see more full page pop up forms that make signing up for a demo or downloading a lead magnet hard to miss. LiveChat used this SaaS web design trend on their site in the example below.

LiveChat SaaS web design

Interesting fonts

Website typefaces that are supported across all devices is growing in number and variety. Variable fonts in 2018 SaaS website design mean that fonts of more sizes can be used in different scenarios. For example, designer Jason Pamental explains that “variable fonts make it possible to tailor character width for different screen sizes and languages to provide better line length, adjusting text grade (think overall foreground/background contrast) for people with low vision or in low-light scenarios, as well as adjusting the ‘optical size’ of characters as they are represented at physically smaller sizes for better readability.”

In addition to variable font sizes in different scenarios, this year’s SaaS web design innovators will use more and more unique typography. Most SaaS websites are currently conservative when it comes to interesting and varied topography, but perhaps they’ll take a cue from sites like Nurture Digital who use fonts to make a bold impact.

Nurture Digital uses fonts to make a bold impact

2018 web design will also bring more use of (gasp) serif fonts. UXDesign theorizes that sans serif fonts have been more popular with web designers than serif fonts since screen resolutions have previously been too low to make serif look good. However, that’s changed now. Don’t believe me? Scroll back up to the Slack example. While you were focused on a custom illustration, there was a serif font you may not have noticed.

More SaaS Website Trends

Not every trend that will affect SaaS websites in 2018 and beyond is purely visual. Here are a few more trends to watch out for and implement in your SaaS web design.

Prepare for Voice Interface

For a while it seemed that the screens we interact with, such as the ones on our mobile phones, just kept getting bigger and bigger. But will the need for screens disappear altogether? That’s not likely to happen anytime soon, but the use of voice search and voice assistants is on the rise.

One way that SaaS website designers can get ahead of this technology is to consider and learn about voice navigation as they work on web design and UX going forward. Paul Woods, the CCO of Edenspiekermann suggests that understanding how to build great voice-powered interfaces will become an ever-increasing requirement for the UX designer of tomorrow.”

Personalized Experiences Step Forward

Shopify interviewed product designer Brad Weaver for a piece on 2018 web design trends, in which he boldly predicted that this would be the year the homepage dies. While we aren’t ready to suggest your SaaS website ditches a homepage altogether, Brad may be on to something. His idea is that websites will become more dynamic experiences that have more personalized entry points.

We’re all about tailoring content to your different user personas and stages of the buyer’s journey. Personalized entry points and landing pages optimized for conversions is something to embrace in 2018.

No matter which SaaS web design trends you decide to try in 2018, there are a few non-negotiables your website needs. These are:

  • Mobile compatibility – a potential user should have a great experience no matter what device they use
  • Load time and page speed – Not only does is a fast load time good for UX; it’s important for SEO too
  • Security – if you’re handling user data, make sure you have systems in place to keep it safe

What web design trends do you want to try this year?

You Might Also Like...

Want to collaborate on a future-forward project?

Let's Talk

We collaborate with innovative brands to create cutting-edge digital experiences. Let's connect.