Animations in web sites is nothing new, in fact since the mid 90’s designers and developers have been coming up with new ways to make digital experiences more engaging. When Adobe Flash came onto the scene it gave designers a new and exciting method of storytelling. Coupled with the fact that our lives are busier than ever and capturing people’s attention requires ever more imaginative creative solutions, animation helps cut through the noise while being engaging and informing.
So why is this a trend for this year?
1) The speed of networks and browsers is ever increasing constantly feeding our demand for information. This gives designers greater bandwidth in which to communicate and hence allows for more creative digital experiences. 2) Better prototyping tools – with the creation After Effects and InVision Studio this gives designers a code-free environment whereby they can let their imagination run wild and really convey what they want from the user experience. And communicate this to the client and developer and can speed up the whole process.
What are we going to see?
Subtle animations/interactions – obviously with such a creative tool it can sometimes be all too easy to go crazy when it comes to building animations into your designs. First of all, the use of animations needs to align with the overall objectives for the website and what we are trying to communicate, using animations just for the sake of it isn’t good design and a good balance needs to be met with any implementation.
This year I think we’ll see less crazy transitions and more subtle use of animations through logos’ pre-loaders, illustrations and button states. They are particularly useful in making users feel like they are manipulating an interface by providing feedback for their actions. Paying attention to the details can really take your designs to the next level.
It can sometimes be challenging to convey a brand online in a highly engaging way, especially if you don’t have access to high quality content. However, over the last few years WebGL has exploded onto the scene and with libraries such as Three.JS designers now have another powerful tool in which they can create highly engaging visualisations.
Simply speaking, WebGL is a way to render interactive 3D and 2D graphics inside browsers with hardware acceleration, without any plugins. From data visualisations, particle systems, faster video performance to fully immersive 3D environments, it gives designers an incredible visual platform in which they can tell their stories. Couple this with animations and other UI features such as parallax to help create more depth to your designs and it helps create a truly engaging digital experience.
Over the last 12 months we’ve seen designers use typography more and more in their websites. From bigger and bolder to interactive effects the use of fonts for artistic effect will increase throughout 2018. With device resolutions getting sharper and the huge variety of web fonts now available this gives designers more creative choice and allows them to move away from the dominant Helvetica san serifs and adopt more serif style fonts used on screen. All of this, plus the dramatic effects created by oversized typefaces and masking effects goes to show that 2018 will not all be about subtlety, and we can expect to see this trend continue.
We’ve also seen many print and editorial trends appear in digital. These will include experimental and artistic typography, more creative layouts and placements involving imagery, and bolder variations in alignment and kerning.
Bold colours and Flat design 2.0
Flat design was a radical departure from the skeuomorphism and hyperreality of the 00s and ever since flat design appeared way back in 2010 it has had an impact on some big brands. From Instagram, Stripe, and Apple’s iOS icons, as well as playing a starring role in the high-profile redesigns of companies like Dropbox and Mastercard Flat design is here to stay. In terms of web design we saw sites adopt this 2D minimal design with open arms and 2014, Flat 2.0 made use of subtle gradients and shadows to create more depth determine visual hierarchy and generally a better user experience to end users. I n 2018, I think we’ll continue to see websites adopting the best of both worlds, bold colour palettes with the reintroduction of shadows and gradients to add better functionality and beauty to the designs.