Web Design trends: What to expect in 2018 - Part 2
Hello again. After my last post, we started looking into some additional inspiring design trends, but this time I've approached things a bit differently, by focusing more on User Experience. Yes, it’s awesome arriving at a website filled with animation, vibrant colour, bold typography and beautiful graphics; but what about functionality? After all, a website has to serve a purpose. Whether a brand wants a user to click a button, fill in a form or read an article, a good design can take them there, it has potential to engage the user, and can gently guide them to the ultimate conversion.
In part two of this series, we show you 5 more of my favourite design trends. We also explore how good design coupled with clever UX can help solve your conversion problems.
2. Web Animation
Web animation can genuinely help a brand’s website tell its special story, not just through words, but also with a unique and dynamic online experience. Gone is the need for infinite amounts of industry copy and tedious descriptions of your brand’s many functions. These days, people don’t have time to absorb complicated ideas, life is too short. This is where animation can truly benefit a user’s experience. Not only do these dynamic illustrations communicate instantly, they strengthen a brand’s digital presence by bringing it into a modern and technologically driven environment. Whether it be small animations over buttons, story-telling or animated graphics while the site is loading - web animation offers a clever way to quickly convey a message, while keeping users engaged and driving them to convert.
These are 3 examples of my favourite web animation-focussed websites:
2. Big, Bold Gradients
In the past, flat design has become a significant favourite amongst designers. Even huge brands like Netflix, Airbnb, and Google ditched the gradients and drop shadows to try and match this trend. Websites did the same and we loved it! Then in 2015, the big and bold gradient made a massive comeback. Things continue to evolve in 2018 with a new approach in the design of gradients. They’re no longer the golden oldies we remember, no subtle shading or soft transitions. Gradients just got cheeky with the introduction of sharp and snappy transitions, while still keeping in line with flamboyant, bold and vibrant colour.
Good designers have started incorporating these gradients alone, as filters over photographs, or simply in place of them. Gradients are still an amazing way of improving a site’s engagement, especially if a brand doesn’t have any images to work with - keeping your site contemporary and fresh. Using sharp gradients can also help emphasise conversion points, while still keeping your site clean and legible. Big, bold gradients with sharp transitions are ideal for hauling your website from 2015 straight into the modern world of 2018.
Here are a couple of my favourite gradient enriched interfaces:
3. Rich typography and negative space
These days, users have limited time and teeny-tiny attention spans. With so many distractions and various things to focus on, it’s becoming more and more difficult to effectively communicate to our audiences. Animation can be heavy on a client’s budget, so it’s up to us to come up with new and clever ways of interacting with our users. Another good way to tell a good story is to apply some drama, I’m not talking gossip, I’m talking big and bold words – typography.
Now, it’s pretty obvious (and safe) to simply place giant text over a header image. But why not take it further? Why not explore the clever use of negative space? Negative space is the empty space in a design that forms a unique shape, or even a word. Using negative space creates strong contrast and can be a crafty way to catch the eye of the user, engage them with intrigue and provocatively reveal your message; your final composition will immediately flow beautifully making the final experience look and feel creative.
Here are a couple of my favourite creative uses of typography:
Micro-interactions can best be described as tiny flashes of communication between a user and an element of design. Used carefully, these interactions can help the user navigate to relevant parts of your website. Like a zombie in the Walking Dead, these interactions are minuscule on their own but coupled with other micro-interactions (or zombies), they are able to provide amazing visual responses, making the entire design feel alive and responsive.
It was difficult to choose only 2, but these are a couple of my favourite designs that beautifully incorporate micro-interactions.
5. Diagonal lines
Diagonal lines are tremendously popular amongst web designers in 2018. It is impractical to think that horizontal lines need to be dead-straight for good design to be trustworthy. By separating sections of an interface using sharper diagonal lines, the content is presented in a unique, but still delineated fashion. The diagonal line draws the eye of the user across the entire design, promoting interest and engagement.
Diagonal lines holding illustrative elements can also be used alongside sharp gradients to help create a feeling of depth.
A couple of the most eye-catching examples, I thought were:
Remember, we are all guilty of judging a book by its cover. Users will do that with every website they come across, it’s only natural. But it’s up to us as good designers to not just entice the user with lip-smackingly great design, but also show them how to go further, dig deeper and ultimately fall in love. That’s good design, that’s excellent UX.