The web design stratosphere is constantly evolving. Every year, trends are born, some fade into the ether and some just continue to shine. Much like pixels are to an image, these design elements come together to shape the face of the internet as we know it.
It’s no secret that the graphic evolutions we view on our screens are often the results of giant digital media companies latest innovations & creations. But design is also affected by a wide variety of time-sensitive elements such as fashion, culture, art and more.
So the big question is: What are the hottest website design trends for 2017?
General overview
In this mobile era, everything we’re looking for is at our fingertips – literally, we just have to scroll in order to find it. Even on desktops, we use a mouse wheel or trackpad and it’s mostly thanks to social networks. As websites get longer and longer, image are going full width and the rules of typography are changing to meet the needs of these new layouts.
Website owners aren’t focusing anymore on providing the most detailed information to their visitors, but are instead choosing to convey their message in the most efficient and immediate way. We’re not saying that your pages should lack content, we are just saying the content is presented a better and more engaging ways.
1. Large coloured shadows
As shadows continue to make their comeback, designers are looking at more creative ways of using them in their designs. One example of this is the use of large coloured shadows as opposed to small monochrome equivalents. When combined with a coloured background, as above, this style can enhance the shadowed element and overall visual design of the website.
As 2016 nears an end, web design continues to slowly shift away from the very flat trends that have been so prevalent in the previous few years. Designers are continuing to develop visually interesting and bold styles which are effective in conveying a brand while maintaining and improving ease of use for the user.
2. Colourful shape gradients
Stripe’s new website was incredibly well-received across the design industry and gives us a glimpse at the styles that designers may be inspired by into 2017. One of the most bold and impactful styles used by Stripe is the shape-filled gradient header that is becoming ever synonymous with their brand. It uses multiple angular gradients and combines them to great effect. 2017 is likely to see more gradients introduced, particularly in hero sections of websites where designers have the most ability to attract the attention of new visitors.
3. Immersive, full-screen video
Campos Coffee use simple typography in conjunction with a dynamic full-screen video to craft a simple but strong message
The old saying ‘a picture paints a thousand words’ still remains true today, and in the world of UI design is still a great way to quickly grab the user’s attention. Vision is said to be the strongest of all human senses, and a large, single image is quickly able to summarise both message and tone of voice in a more efficient, succinct way.
Imagery has long been a staple of UI and web design, and its success has slowly paved the way for its natural successor – video. We’re seeing video used more and more in digital design, and for good reason. Where traditional photography is static, video is dynamic. It’s great at catching the eye of users and as a means of visual storytelling.
Conventional imagery isn’t going to disappear any time soon, but one thing’s for sure – 2017 and beyond will be full of more rich, interactive and full-screen video as a means of engagement and story-telling.
4. Micro-interactions
This example clearly indicates to the user that their action has been implemented as they toggle between the available states
Micro-interactions, typically in the form of small, on-screen animations are playing a vital role in UI and UX design today, especially on mobile and smaller screen devices.
From a user-experience perspective, micro-interactions are not only small, entertaining on-screen animations or transitions, but are forms of visual feedback for the user and their actions. Micro-interactions let users know what is happening, what has happened, and what will happen next as they interact with the UI.
Using Facebook’s famous ‘like’ as an example: when a user clicks the thumbs-up icon to like something, it increases in size and turns blue before returning to its original size, all in one fluid animation, informing the user that their action (like) has been completed.
Clever designers are able to put the ‘fun’ into ‘functional’ too, by entertaining users as well as informing them. From playful loading animations, to slick icon transitions, effective micro-interactions engage and inform at the same time.
5. Parallax
Epicurrence, an action-sports meet-up for creatives, opt for a very obvious use of parallax, creating a fast-moving and engaging experience, reflective of the event that it’s promoting.
The use of parallax, something which often works great in conjunction with less traditional layouts. In a nutshell, parallax is the effect where the background moves at a slower rate than the foreground, giving a sense of depth and dynamism as users scroll. It isn’t a new mechanic, but something which is being implemented more and more as brands experiment with its functionality.
6. Flashy Typography
Yes. Big typographies have been trending for a long time now and that’s exactly why more and more web designers try to show their creativity and dive into uncharted waters. Before typography rules were very strict and things like hyphenated words and unclear lines were taboo. But-Not-Anymore.
Of course, mastering typographies is an art and as Picasso said: “Learn the rules like a pro, so you can break them as an artist.” In other words, you should investigate the topic and learn as much as possible before dealing with this design tool. Once you feel confident about your knowledge, start playing with colours, arranging the spacing, combining it with your images and mixing different fonts … the sky’s the limit.
Conclusion
As with trends of any nature, some come and go, whereas others stay the course and become fundamentals.
However, change happens at lightning pace in this creative industry and it’s important to keep up to speed with what’s happening to stay relevant. UI choices should always be fuelled by achieving a great UX, and achieving a great UX will always change as new technologies emerge and develop. It’s an ever-changing landscape that requires constant learning and innovation.