Trends in web design, like fashion trends, come and go. Sometimes trends are dictated by necessity (like responsive design). Other trends are industry shifts, such as the change from skeuomorphism to flat design.
The decision to follow a trend must depend on the needs of your users and your business. The decision should never be based solely on “it’s what the cool sites are doing”. Fads fade. A site built only on trends quickly becomes out of date.
Through 2016, we have been introduced to a multitude of new styles and trends as designers continue to shift away from very simplistic and minimalist directions. We are beginning to see a move back towards a more visually comprehensive and impactful design trend. The implementation of new technologies and softwares such as Framer and Origami continue to expand the possibilities of what is possible in web design.
Below, we will look at six web design style predictions which look set to develop and continue through 2017, and some recent examples which have already begun to effectively implement these latest trends.
1. Subtle microinteractions
Microinteractions have really begun to gather traction on the web, and with multiple new and sophisticated tools for prototyping and implementing these, the trend looks set to continue. Buck.tv is a great example of microinteractions done effectively. The hover effects are highly stylised and feature beautiful and satisfying transitional animations.
2. Overlapping depth elements
Nyte template.
A trend that really began to develop with the introduction of Google’s Material guidelines is that of overlapping elements to create depth. The trend is as popular as ever and examples such as the above present a fine example of just how it can be so effective, particularly when use with contrasting colors and large shadows. The result is subtle but high impact, and can help produce a satisfying transition between elements as the user works their way down the page.
3. Hand-drawn iconography
Hand-drawn icons on anyways.co.
Icon trends are also advancing and tie in directly with web design. The anyways.co website shows how carefully implemented hand-drawn icons can provide great contrast to clean and uniform typography. It’s also becoming more abundant for use as call to action pointers such as ‘Get in touch’. This is now more frequent as designers and marketers look to increase conversions using subtle contrasting visual hints.
4. Colorful 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.
5. Minimal mockups
Via Sketch App Sources.
Another trend that Stripe looks to have solidified is that of using minimal product mockups as opposed to their realistic counterparts. This can provide a less severe, subtle flow to a website, and presents the opportunity for the work inside the mockup to really stand out. The above example is a great free version of such a mockup and should help serve as a great resource to begin using the latest 2017 trends in your web designs.
6. Large colored shadows
Image: Dribble.
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 colored shadows as opposed to small monochrome equivalents. When combined with a colored background, as above, this style can enhance the shadowed element and overall visual design of the website.
Recall of Mind
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.
