Current web design trends forecast exciting changes on the web in the year 2018. We can expect the arrival of a new visual language with bold colors and powerful typography, asymmetrical layouts, brutalist websites, and an increased usage of interactivity and data-heavy, long-form content. Everything is in motion and appeals to the attention of the viewer, while intends to gain trust and prove credibility at the same time.
Have the new web design trends arrived as a counter-movement against minimalism, symmetry, and box-like layouts? Are they a reflection of the so-called call-out culture that recently gained traction in the mainstream? Do they intend to fight the shortened attention span of web users? After reading this article, you can make your own hypothesis, but one thing is sure: a need for change has arrived into the world of web design.
Asymmetrical Layouts
Asymmetrical layouts have already gained popularity in 2017 and we can expect this trend continue in the coming year. As the CSS Grid Layout Module gets more browser support, it becomes easier to implement unusual layouts and create websites with a less framework-y look.
The homepage of the TechStyle Fashion Group is a good example of asymmetrical layouts. As you scroll the page down, you’ll see that nothing is really in line but the page still conveys the information in a persuasive way. And, what is just as important, the asymmetrical layout helps the brand stand out from the crowd and leave a memorable experience in the visitor.
Asymmetrical Split Screens
Split screens have been around for a while, but now they get mixed with asymmetry as well. In 2018, we enter the world of asymmetrical split screens.
Dropbox‘s recent redesign uses this technique on its landing page. As you can see below, Dropbox’s well-known minimalist & modest design is a thing of the past. The new design tries to grab visitors’ attention in a much more forceful and robust way.
Asymmetrical Design Elements
We can’t only use asymmetry in page-level layouts but also in smaller design elements.
For instance, take a look at the photo grid on Experience Olympia‘s redesigned website. The lack of vertical symmetry makes the gallery look as if the photos were hand-picked—a visual effect that creates an authentic and honest feel.
Intense Color Schemes
Intense and bright color schemes will be one of the most important web design trends in 2018. After all, it cannot be a coincidence that Pantone has chosen Ultra Violet for the Color of the Year 2018.
Shawbrook Bank‘s redesign is an excellent example of how to use bold colors smartly, even on the website of a bank that traditionally would be associated with “sensible”, business-wise colors.
Hero Typography
Hero typography is another web design trend that already gained traction in 2017 and we can expect more of it next year. The huge, bold letters excellently fit with the aforementioned trends: intense color palettes and asymmetrical layouts.
For instance, Paradiso‘s design team used the same heavy font weight for the logo and the headers, which instantly grabs attention and raises brand awareness in a commanding way.
Brutalist Websites
Brutalist websites are probably the coolest trend we can expect in 2018. But, are they really what their name implies? According to the definition of the Brutalist Websites collection:
In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design.
If you want an example have a look at the website of the Designer That Reads. As you can see, brutalism does away with fluff and sophistication. Brutalist websites are purposefully shocking and unattractive in order to call immediate attention and show a willingness for radical change.
Explanatory Illustrations
In the age when everyone is concerned about fake news, people do want to understand what happens and why. Explanatory illustrations that show how a product works provide a good way to gain visitors’ trust. Therefore, it’s not surprising that this is one of the rising web design trends of the coming year.
Slack is one of the big companies who use custom explanatory illustrations on their website. For instance, the illustration below is a brilliant solution, as it combines an icon-like figure with a screenshot of the final product. At the same time, it visually explains how to use the Search feature of the app, in a way that feels natural and honest.
Focus on Data
Although data visualization is out for a while, putting data on display provides another solution for web users’ current trust issues.
Neematic, a producer of electric bikes, excellently makes use of this trend on its new website. Instead of writing a long copy that details the advantages of the product, it just simply shows the four more important pieces of data that customers may want to know about an electric bike.
Long Scrolls
Web users seem to get tired with infinite scrolling—a feature that’s especially hard to use on mobile. However, long scrolls have shown up as a middle solution between short and infinite scrolling and they do appear among the latest web design trends. Long scrolls excellently complement longform content which has recently gained serious popularity on the web.
The presence of the long scroll feature is usually marked with different visual cues, just like you can see it on the new website of the Season fashion brand. Season’s design team has placed a downward arrow icon with a vertical “Scroll” label into the bottom left corner. This tiny but visible element prepares viewers for the presence of the feature, therefore contributes to a much better UX.
Purposeful Animations
As I have mentioned in the beginning of the article, motion will be one of the most important web design trends in 2018. If you check out any example in this article you’ll see that animations and hover effects are present everywhere. Animations are probably not a new thing, however now designers create them with a purpose in mind—to show users how a process or a product works.
Bloom Inclusive Credit integrates animations into its website in an incredibly smart way. There are so many animated elements moving around that the whole page seems to be in motion. Surprisingly, this is not as distracting as you would expect, as each animation has its own goal—to help users understand how to use the product.
Interactive & Particle Backgrounds
Full-screen video backgrounds have been around for a while and we can expect them to stay in 2018 as well. However, there are also two new background trends on the web: interactive and particle backgrounds.
Particle backgrounds provide a resource-saving alternative to video backgrounds. They load much faster, as they use lightweight JavaScript but they still add the feeling of motion to the page. Interactive backgrounds let users interact with the website, that leaves a memorable experience for most users.
Creative Wallonia is probably the best example you can find, as it features both background trends at the same time. On the gif demo below, you can see moving colorful particles in the background. Although this motion is uncontrollable by the viewer, the design is complemented with an interactivity feature as well.
The user can draw a doodle in the background by moving the mouse around the page. The design encourages action and creativity, which is an excellent way to engage users on a creative website.
Organic Shapes (Blobs) & Gradients
Organic shapes or blobs have also arrived at the web and we can expect an increase in their usage in 2018. If you want to know more about the new trend have a look at Ian Latchmansingh’s excellent article, 2017 The Year of the Blob.
Blobs also serve the purpose of creating the illusion of motion and dynamism on a web page. According to the aforementioned article:
About 90% of the time the Blob is filled with a gradient and sits on the lowest layer of a design. Its relationship to the brand or product is usually ambiguous, but it’s an easy way to transition between different types of information without being too blocky.
This also means that the new blob trend provides a new reason to make use of gradients in web design. So, we can expect that designers will start to use gradients more frequently in the coming year.
If you want an example have a look at the website of the UnLeash 18 Conference. It features a handful of blobs that create a dynamic look and add a unique touch to the design.
Wrapping Up
To sum it all up, 2018 will bring us vibrant colors and bold typography, a lot of asymmetry and increased brutalism, the revival of gradients, data-heavy content, and plenty of motion in the form of smart animations. To prepare for the coming changes, have a look at our previous articles on color theory, the effective use of gradients, and use cases of animations in web design.
Also, don’t forget to follow Onextrapixel on Facebook and Twitter so that you can keep informed on web design trends in the new year.
