Here are some predictions on 2017 webdesign trends according to www.awwwards.com

Open composition

Web Design Trends 2017

Until recently the design world was dominated by compositions which were closed, symmetric, and static. With 2016 came a lot of websites that strayed from this style. Open compositions of loosely suspended elements that are fleeing somewhere off-screen are gaining popularity – examples of such work can be seen at romainpsd.com, durimel.io, or booneselections.com. Distribution of elements on these websites gives the impression that they still “exist” somewhere beyond the edge of the monitor.

Asymmetry

Web Design Trends 2017

2016 also broke the rule of symmetry, which dominated the industry for quite a long time. Many designers created asymmetric layouts which are not perfectly balanced on the left and right sides. As examples I would like to show you a great website culture.pl, a chaotic dada-data.net, and previously mentioned durimel.io.

Greater diversity

Web Design Trends 2017

Designers created more dynamic compositions that have larger amounts of intersecting diagonal lines (poigneedemainvirile.com, vanderlanth.io), or that were based on more complex (residente.com/en)/organic shapes (helloheco.com, predictiveworld.watchdogs.com).

The apparent chaos

In 2016, many designers consciously and deliberately began to move away from the minimalistic way of composing. There was a desire for greater freedom and a less rigid approach to designing. Behind it certainly stands a need for making a change, but also an ordinary sense of boredom. At some point everyone will get fed up with creating simple layouts with simply arranged elements.

However, while analyzing the projects from 2016 it became noticeable that the chaos is only apparent. Layouts are still based on the classic contrast of forms, colors, textures, sizes, etc. What has changed is the location of the different elements and the harmony of dependency between them. Currently, items such as headers, icons, or paragraphs are deployed more often, as if in spite of trite logic. Despite being a part of a single theme block, they are split apart and situated a fair distance from each other. They are not aligned to one of the edges of the container and have different paddings.

There are geometric figures “suspended in mid-air” that only have a decorative purpose (melanie-f). It’s also characteristic to overlap elements on each other. Texts partially overlap the photos, such as on e03.epicurrence.com and melville-design.com, or images overlap each other, which can be seen on olivierbernstein.com.

It’s also a distinctive procedure to disrupt the typical minimalist harmony. Enormous headlines contrast sharply with delicate and thin decorations and separators.

Richer background and patterns

Increasingly, there are more backgrounds and patterns used in web design, for instance small dashes, stripes, or dots.

Especially common is the grid pattern, which is treated as a “frame” for the other elements of the layout. Those elements are moved over the grid on the parallax principle and often are arranged in a chaotic manner.

Grid pattern

Web Design Trends 2017

One of the first sites that used the grid pattern was werkstatt.fr, which didn’t use the characteristic movements.

A slightly different way of using grid pattern is showed on klimov.agency, brand.uber.com, and maisonullens.com. In those cases it has a very specific function – to make all movement of elements logical. It allows to rationalize unconventional decisions and provides answers to questions like “why is the edge of an illustration not in harmony with the edge of a button?”. It creates a rhythm and at the same time justifies its violations.

On freebies.lorenzobocchi.com content is already loosely arranged when it comes to the grid, similarly to the previously mentioned e03.

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match