These are the 10 web design trends for 2016

[jrineakter]

Towards the end of the year, we retreat and go in search of the good and the beautiful. Throughout the months, we nudge each other every now and then: “Did you see that?” or “That’s cool!” Then we rush to the next deadline and get caught up in the hustle and bustle of the day. Last week, we stopped working and swept up all the good and the beautiful for the ten web design trends for 2016.


Flat design is getting better, we find more user-friendliness, we find beautiful fonts and a delicious page layout. And even though we notice about trendy colors that they are dirty, they are actually quite nice. 2016 will be the year of good and beautiful.

1. From flat to material
It is still flat design that rules the day. Yet something is happening, because flat is just flat. The suggestion of three-dimensionality can help with the use of a website or app. A rectangular surface is a rectangular surface, but as soon as you put a shadow under it, it becomes a button. Google calls it Material Design .

material_logo
Example of material designs by Douwe Egberts and Gmail .

The suggestion of depth and height is back. Usually quite graphically designed: no colour gradient and strong contrasts. The shadow under the button is just as flat as the malta telegram number list button itself, only a shade darker (see the buttons at point 2). Yet here and there we see a genuine drop shadow again . Until recently, the drop shadow was taboo, but if Google uses it again in the calendar app, we can too.

The excuse for material design is more ease of use. But in the meantime we just find the new for 3D very beautiful.

2. Micro-interaction: 'motion provides meaning'
Subtle animation to improve the user experience is everywhere. Or actually: often you don't even see it, you only notice that a website or an app feels good. Your action - clicking, swiping, tapping or 'mouse hoovering' - has a result. You know that you have pressed a button, you see that the form has been sent, you feel that the end of a long page swipe is coming.

Rabobank internet banking
Example of micro-interaction from Rabobank .

make an appointment with the municipality of vught
Example of micro-interaction from the Municipality of Vught .

Compare the micro-interactions with the engineering in expensive cars. You feel the solid luxury of such a car when you close the door, fasten your seat belt or open the glove compartment. These things have been studied and are sublimely executed. We look forward to the Mercedes S-Class of apps and the BMW 7-series on the web.

3. Mobile elements on the desktop
Of all Dutch people between 18 and 80, 82 percent now own a smartphone . The fact that we all tap and swipe on small screens all day long means that we get used to mobile design elements and that we start to appreciate them. And so designers are also using mobile elements for desktop.

A striking element is the use of the 'hamburger menu' on the desktop. We are not so enthusiastic about that: you saddle users with an unnecessary click - after all, you can also show your menu immediately, plenty of space. Moreover, the positioning at the top right on a mobile phone is very convenient, but does not make sense on a desktop screen. But that is besides the point.

mobile_elements_01
Example of a hamburger menu on On the grid desktop

Furthermore, we see many mobile elements on the desktop that are beautiful and good. The narrow type area/text width and generous white space on content pages of, for example, NOS and De Correspondent are wonderfully calm on the desktop. Our fingers are too fat for tiny buttons on a telephone screen, so sturdy buttons became popular. We like that. The fact that swiping long pages became self-evident made us less afraid of scrolling and therefore a more generous use of white space was introduced. Fortunately, we never see cramped pages that desperately try to keep everything above the fold anymore.

mobile_elements_03
Example of a narrow type area/text width at NOS .

4. Hero image on homepage
Although we've been fed up with it for years, we still use it quite often: the homepage slider . In about five images you introduce products, services or an entire organization to the public. And actually everyone knows that no website user will ever watch all the images in a row, but it's so hard to say it in one image.

Yet we increasingly see brave attempts to say it in one photo, illustration, video or even word. A metaphor is carefully sought, a meaningful image is chosen, an illustration is made or video is shot. A short, strong text completes the message. Praise to the hero image !

hero_image
Examples of 'hero images' from Medium and Think Apart .

5. Editorial design
Content pages are becoming less and less boring. Where all text pages used to look the same, headlines, photos, quotes, illustrations and body text now dance happily around each other. We see the layout of newspapers, but there are also sites that pretend to be women's glossy.

A striking detail is the often unusual alignment. We web designers are used to a fairly rigid grid. In editorial design you come across surprising positionings. If you look closely, you can see that there is indeed alignment, but much more playful than we have done so far.