1. Material design becomes more influential
It wasn’t very long ago that Google introduced its Material design as a template for Android devices, but now the majority of designers work with this style. Its user-friendly structure gives designers an intuitive way to build layouts for mobile devices and e-commerce websites. Recurring elements of Material are the so-called ‘card’ lay-outs, responsive animations and effects as well as clear structures (buttons, blocks, icons, drop shadow and fonts). Google has even posted a handy online guide with some design rules.
Examples of Material design
2. 3D makes a comeback
Three-dimensional was frowned upon before Material design; now it’s been given the green light as long as it is purely functional. Designers ‘are allowed’ to use drop shadows again, as well as highlights, patterns and rounded corners – for the simple reason that it makes the elements look more elegant and realistic.
A large proportion of online purchases are now being made on mobile devices. In response to this, websites are being increasingly designed primarily for use on mobile devices (a development called mobile-first). Hamburger menus are becoming a more frequent feature of desktop websites; better use is made of the full width of the screen; images, buttons and icons are larger and clearer.
4. Moving gifs
The moving gif is totally back – in the form of a ‘cinemagraph’. This is a still image (a photograph for instance) with a small, recurring movement – a sort of mini-video. These gifs appear in the background, as headers, banners or sometimes they can function as the product image. Gifs can also help to communicate better (or faster) than text or video.
nOeser, a CloudSuite customer, uses moving gifs
5. Long scrolling and ‘lazy loading’
To avoid long load times but remain user-friendly, web designers are increasingly using a technique known as ‘lazy loading’ which makes objects appear only when they are necessary – i.e. as a user scrolls down.
6. Misaligned grids
The fashion is for everything to be organised and clean, but it can be relevant and creative on occasion to make elements go outside the grid. Take this example from Bang & Olufsen.
A great example of a (purposefully) misaligned grid
7. Product photographs in context
Product photographs in 360° or shot in context grab the visitor’s attention. Creative product photography is going to be huge this year.
The brand Beoplay shows its product in context
8. Full screen menu under the hamburger icon
A full-screen menu when you click on the hamburger icon – we get this more and more often. The advantage is that the user can see the complete website structure at a glance.
NS.nl – the Dutch railways – uses full-screen navigation under the hamburger menu
9. Geometric shapes
Triangles, hexagons and diamonds – a retro-style that is coming back into fashion. You feel as if you’re in the 80s!
You will be seeing more of these geometric shapes in web design