2018-10-17 : 14:20
2018-05-29 : 10:00
2018-05-27 : 23:17
2018-04-23 : 18:03
2018-04-06 : 14:55
2018-10-19 : 10:01
Material design, card layouts, illustration and more – the first half of 2016 has thrown up some strong trends in web design. Here at Justinmind, we recently conducted an online survey into the biggest design trends of the year so far, and among the avalanche of responses and comments 5 key trends emerged. Let’s take a closer look at them and how to mock them up with a prototyping tool.
Before 2014, the world was flat, at least in design terms. Then Google introduced their paper-and-ink inspired visual language ‘material design’, and web designs suddenly began to look weirdly… tactile. Since then, skeuomorphic effects such as padding, depth, grid layouts, responsive animation and transitions have swept across not just Google powered interfaces, but across the web: check out these 10 examples of inspiring material design websites.
Every hero-trend must have its nemesis, and so it is with the next top trend of 2016: material design’s opposite, flat design, which came in one percentage point behind material design in our top trends survey.
Flat design rejects all the skeuomorphic pretensions of material design, instead demonstrating a digital aesthetic characterized by bright colours, sharp edges and a lack of depth, or ‘flatness’. Flat design has proved incredibly popular with advocates of minimalism in web design, as it cuts the clutter and rejoices instead explicatory icons, ‘flat illustration’ and a celebration of the separation between ‘real world’ and ‘screen world’.
There’s little doubt that cards are the top design pattern of 2016, and just shy of 30% of our survey respondents confirmed this. Sites such as Pinterest are based wholly on card layout, and more and more are jumping on the bandwagon, including Facebook, Spotify and Google. So what exactly is the card layout and what makes it so special.
Card layout is as simple as it sounds. Onscreen information is presented in the form of cards that can be stacked, flipped over to reveal ‘the underside’, grouped then spread out, and vice versa. This allows for the non-hierarchical organization of lots of information, independent of screen or device use.
This flexibility has become vital as device use has multiplied and the days of standard screen sizes or shapes have long gone. Cards facilitate the design of responsive sites that adjust to screen size without losing their design cred.
The parallax scrolling trend really gathered speed in 2015 and has shown no signs of slowing down since then. In basic parallax scroll, the site’s foreground moves at a different speed to the background, tricking the eye into seeing a 3D effect. These days, that baseline effect has been taken above and beyond by sites that play with multiplane animation and multi-directional scrolling to really expand the experience. In all well-done parallax websites, the design gains a certain depth and the foreground pops out, focusing users and creating a sense of narrative progression as they scroll. The parallax has certainly come a long way since its first appearance in the arcade game Moon Patrol, back in 1982.
This trend might come as a surprise to some, but illustration has proven a force in 2016 as designers look for ways to avoid the dreaded stock photo. Illustrative web designs can range from a specially sketched font and custom vectorials, to 3D illustrations and entirely illustrated backgrounds. Whether they’re folksy in style or strong graphics, custom illustrations mean designers can have greater creative control over the branding and messaging of their site; illustration also appeals to the imagination, taking flights of visual fancy while reinforcing a site’s uniqueness.