Making predictions about web design trends is not an exact science, but neither is design itself – so what’s wrong with a little creative conjecturing about 2018.
2017 saw a number of web design trends pop up. Including a wave of 3D design as designers started to get on board and familiar with WebGL and 3D rotatable renders, an increased use of the parallax effect, and a little surge for high-quality cinemagraphs to add a little dynamism to a site beyond simple hero image photography.
As we recalibrate on what is important this year, it’s fascinating to ponder which of these trends will carry on, which will fizzle out, and what new design approaches will take the online world by storm over the coming 12 months.
Here are 9 web design trends that I believe will be popular this year.
1. Data storytelling
Data storytelling is web design that places narrative at the forefront. Allowing site visitors to scroll through engaging visual and written copy, it’s a digital timeline people can follow. It’s a format that’s been popular with illustrators and writers looking to move into online spaces, like the SBS Online animated adaptation of writer Nam Le’s The Boat.
However, brands have recently found this scrolling storytelling format great for hooking site visitors in while giving them information. Like with smartphone security software Ben The Bodyguard’s homepage, which uses a noir aesthetic and graphic novel sensibility to illustrate the need for a “bodyguard” software.
2. Animation
While not exactly a new trend, animation is an evergreen one, and with each coming year, both the technology and designers themselves are getting better at working with it.
Specifically, I anticipate a greater union between animation and content, with conceptual animation being used to illustrate processes, journeys and product evolutions (e.g. the below “conveyor belt” animated analogy for a web design company that targets small to medium business).
Additionally, rather than a static web page with animated panels, growing animation literacy among web designers means we anticipate everything from animated backgrounds utilizing parallax effect, through to animated hover effects being layered to create a cohesively engaging site with plenty of moving parts. The combo of animated text and the animated tablet for the Squarespace homepage is a great example of this.
3. Broken grid layouts
A broken grid layout offers an interesting way to add dimension to a page, along with a visually interesting journey for your eyes to go on – particularly when combined with a parallax effect or an animation.
Whether you’re marketing specifically to digital natives or not, the fact is that most people using the internet have been for a decade at least – making simple and rigid layouts less of the necessity they were for the early days of disoriented internet newbies.
In fact, broken grid layouts represent one part of a growing reactionary wave against the status quo in web design, a response grounded in artistic traditions of collage and remixing. As 2018 passes we expect broken grid layouts will become an increasingly common layout practice to see, particularly for product pages and lookbooks, as with clothing brand Quechua’s Nature Hiking lookbook page.
Another great example we’ve found is the Kitchen Of Uber Eats page, which layers images, text of different sizes and numbers to create amazing depth.
4. Illustrations
Cameras have never been better, photo editing software has never been more advanced, and internet loading speeds have never been more accommodating of high-res media. So it might seem counterintuitive that illustration would be making a comeback in web design. However, a clear illustration style cannot only illustrate a concept, but also a brand identity.
Take, for instance, this jobs page for French digital design agency Octave & Octave. Rather than a beautiful yet potentially bland stock photo, these illustrations capture a sense of childlike creativity, humor, and fun which lets you know a lot about the brand. While setting the site visually apart from the 95% of sites that would have just got a stock photo. This is the kind of smart design branding that I expect will grow throughout 2018.
Illustration can also be a great way to connect with all age groups, as can be seen in the site design for Slurpee.
5. Page transitions
Most designers simply think about ensuring each page of their website looks as good as possible. But what about what happens between pages – when a site visitor clicks to another page in your menu? It’s usually the same for every website, from blogs to some of the world’s biggest brands. You click the link, your browser goes blank while the next page loads.
But that’s not the only way to go between pages. Page transitions allow a seamless motion between elements of your site, and make browsing a site continuous – helping people stay browsing for longer. In 2018, we expect more sites taking up the page transition approach, as can be seen here on digital communication studio Reed.be’s site.
Or, for an inventive (and slightly trippy) wave effect, filmmaker Tao Tajima’s website offers a great source of web design inspiration that incorporates transitions with video content.
6. Dynamic gradients
Shifting gradients are sure to be much more common throughout 2018. A gentle form of animation often utilized in site backgrounds, dynamic gradients play with color in a way which engages audiences without oversaturating them with flashy, moving parts, as seen in the slow-flowing homepage for Elje Group.
Want to get it for yourself? There are free gradient code snippets on CodeMyUI that are easy to use – get on board with this 2018 trend now.
7. Chat UI
Artificial intelligence is getting better and better, and while we’re not predicting a complete Skynet takeover for 2018, simple call-and-response AI will likely become more and more common through the humble on-page chatbot.
Globally there’s a general trend away from actually calling a business towards these simple messenger interfaces (honestly, what do you use your phone for more – actually phoning someone or messaging them?).
Advancements in machine learning mean crafting chatbots which capture the personality and brand identity of your company is easier than ever, and the immediate reply rate chatbots offer, mean you can capitalize on the momentum of someone visiting your site – rather than having them lose interest waiting for an email reply or, god forbid, putting them on hold.
Chatbots aren’t perfect yet, and they can take a lot of work to get on track. However, even a simple chat widget (albeit operated by a human) can greatly improve the usability of your site.
8. Web VR
There aren’t many sites that are VR ready, but those that are ready are capitalizing on the growing availability of dedicated VR hardware and VR ready smartphones. Simple, cheap cardboard glasses can be put together to turn most modern smartphones into VR goggles.
The in-depth experience of VR offers unparalleled user engagement, and larger brands have begun to take advantage of this for branded content and product displays. As VR becomes more and more popular, we anticipate VR ready web design will become more common through 2018.
9. Voice UI
Voice assistants are trending across hardware like Amazon Echo (“Hello, Alexa”) and smartphones like OK Google. As people’s comfort with commanding their technology increases, we’re likely to see a rise in site-specific Voice UIs.
With similar benefits to AI chatbots, these could help people navigate sites – particularly those with vision impairments and other accessibility needs. Looking into 2018, don’t be surprised if you click onto a site and find it talking back to you.
Wrapping up
These have been my 9 web design predictions for 2018. What do you think the year ahead will hold for the digital landscape? Let me know in the comments below.
Guest Author: Saijo George works as an SEO Strategy Director for Melbourne based award-winning marketing agency Supple. When he is not reading up on web design and digital marketing, he is either working on side projects OR playing Hearthstone. You can find him on Twitter and LinkedIn.