Latest Web Design Trends – 7 massive trends to watch
The desire to gain and retain attention is driving web design trends. Material design, animation and micro interactions are just a few of the trends...
Reading Time: 5 mins
7 massive web design trends
The first website launched on 06 August 1991. We don’t have an original copy, but this is an updated version.
In the 25 years, since the first website we have seen the evolution of
- page structure – starting with table-based layouts;
- interactive content – led by the introduction of Flash;
- separation of content and design through CSS; and
- SEO-driven design.
Now UX leads the design the focus. Demonstrated through minimalist designs, hero images, blended typography, long scroll and single page sites.
So what are the trends currently driving web design? Here are 7 trends to watch:
1. Material Design
Flat design, where objects feel as though they are on a single surface, has been popular for the last few years. Stripping everything else away to contrast colours, fonts and icons. This is an example demonstrating the best attributes of flat design:
The main criticism is a loss of visual hierarchy provided by gradients, textures and shadows. Thus impacting on discoverability and usability. The outcome can be plain sites that are not intuitive.
Enter…Material Design. Which in plain terms is like flat design, but with the employment of a visual hierarchy – i.e. uses the Z axis. Just check out this short video to show Material Design in action.
Material Design has three principles:
- Material is the metaphor – surfaces and edges of the material provide visual cues.
- Bold, graphic, intentional – to immerse the user in the experience.
- Motion provides meaning – serving to focus attention and maintain continuity.
As a product tied to Google, it has the potential to limit individual creativity. But for web design coming out of the flat design period, it serves to drive and improved UX. This is what makes it a current trend.
2. Animation, GIFs, Video and Animated Infographics
The driver for current digital marketing trends is attention. Animation is a key enabler for gaining and focusing attention where you need it on your web pages.
Just as material design improves visual hierarchy, so do animations – e.g. expanding forms. Effective use of animation helps gain attention and provide understanding of the workflow.
There are a range of other animation assets that can assist in gaining attention:
GIFs (Graphics Interchange Format) are not new. But there has been a massive increase in their use in marketing. They are cheap, have a small file size and easy to consume. But can have an impact better than an image.
We know that video on landing pages can increase conversion by 80%. Video provides an effective means to tell a story that is beyond the reach of persuasive copy. Cinemagraphs (video backgrounds) are also making their way into more webpages as designers look to go beyond hero images.
To state the obvious, infographics are popular. Just like all other content marketing assets now, it is hard to get noticed. Animated infographics are the next evolution. Just check out the amazing productions from animagraffs.
3. Micro / Mini Interactions
Trends 1 and 2 show a move away from the flat, static and linear. Micro interactions continue this general move towards improved UX.
Micro interactions are a single task designed to provide feedback to the user. Examples include:
- Animation when hovering on an object.
- A bar moving when you adjust a setting.
- Haptic feedback when clicking on an object.
- Clicking on a like or share button.
Increasing granularity and specificity in web design will further develop these interactions.
4. Minimise Interstitial Anxiety
Load time has a direct relationship with visitor drop off and page rankings. There are countless statistics on the percentage drop subject to page load time. User expectations are only going to increase. So any statistics cited now will be surpassed in the near future.
Interstitial Anxiety is the tension felt in the delay between taking an action and getting a response. For example clicking on an object and waiting for the next page to load.
Minimising interstitial anxiety is a logical extension of the other trends to gain and retain attention. The fix is to not just present a blank screen. We will continue to see different ways to minimise this anxiety, such as unique types of loading animation:
5. Individual Responsive Design
One of the key digital marketing trends is personalisation. Dynamic mapping of presentation to a user’s preferences is an important part to conversion. For example, Amazon focuses on providing a unique home page for each user – with tailored recommendations. The outcome is an additional 10% to 30% in revenue for the business.
But UX for conversion is more than just shopping preferences. In 2017, half of the world’s population was using the internet. To understate, that is a wide demographic.
Responsiveness is often thought of in terms of the device. But with human-driven design, responsiveness is now being thought of in terms of the individual.
Just consider some broad demographic differences and their potential impact on design:
- Age – size of font, use of language and complexity of design.
- Culture – colour associations and cultural variables.
- Language – L to R versus R to L, horizontal or vertical and text length.
We know device responsiveness is a fundamental of design. Now it is time to progress individual responsiveness.
6. Custom illustration and iconography
Despite the ever increasing number of stock image sites, they are the ‘fast food’ of design. Nothing demonstrates personality more than a visual experience found nowhere else on the web.
Source: the neighbourhood
That fleeting chance of attention is maximised through custom design. To be specific:
- an icon set that matches your language; and
- custom illustration that speaks in concert with your content.
7. Card-Based Design
Card-based design has been around for a while. So this trend will have appeared on lists preceding this one by a few years.
But look at the other trends of Material Design, animation and individual responsiveness. Cards provide a ready-made design pattern to support these trends. Cards enable any combination of animations to deliver a portal for the consumption of further content.
They also provide scope for:
- Maximising micro interactions within specific sections of content.
- Segmenting presentation to limit interstitial anxiety.
- Plug and play presentation for individual responsive design.
Cards are here and only going to be used more and more.
These are 7 latest web design trends for:
- Material Design
- Animation, GIFs, Video and Animated Infographics
- Micro / Mini Interactions
- Minimise Interstitial Anxiety
- Individual Responsive Design
- Custom illustration and iconography
- Card-based Design
The takeaway? Web design that converts, requires more than cool graphics and persuasive text in a trendy font. The trends are focused on providing the individual with an experience that will:
- Gain and retain attention
- Enable easy comprehension
- Respond to preferences