Web design trends for 2017 (pt. 1)

Who needs trends?

In reality, there are deeper, more rational and precise criteria for project evaluation than looking only at their compatibility with trends. Good project, regardless its style of decoration, distinguishes itself with a balanced composition, an intelligent contrast of typefaces, geometrical forms, colors, etc. These values are timeless and not dependent on fading trends (such as flat design).

However, there are reasons to follow the trends. Visiting such websites as Awwwards, FWA or CSS design awards may inspire you and in the result, help to reach outside of your design habits. You can learn about the new visual worlds, which then you can (consciously or not) integrate with your graphic language.Watching the work of others helps you to keep on improving your skills while being up-to-date when it comes to the latest technologies.

Familiarity with trends will help you to not only create a modern project but also to be a contributor to the world of web design.

Background

Generally speaking, articles such as this are based on the ending year, where authors are trying to predict what will happen in the following one. However, it’s worth to look more broadly at the trends of recent years. During 365 days relatively not a lot of things change, what results with articles that are focused on only details, such as rounding corners or ghost buttons.

Gaining a broader view will help you to understand and see more. A general picture will show you main trends, their origins, meaning, and direction of development. Often a trend lasts long enough for it to get used a bit too much, what results with its ending - designers and users get simply bored with a particular style.

It seems that right now we are in such a groundbreaking moment when the reign of minimalism in web design is coming to an end.

Minimalism in web design

Minimalism in web design appeared relatively recently and supplanted the most decorative styles that can be collectively called Web 2.0. Colorful typography that's inserted by using the img tag, gel gradients, rich textures, ribbons, and shadows have been replaced by large white surfaces, simple button blocks, and web fonts.

The development of the minimalistic style coincided with two facts. Slow perish of Flash as a web technology and the very rapid development of mobile Internet. Websites needed to become simple and lightweight to work on smartphones and tablets, hence the reduction of unnecessary elements.

Over the last few years, the development of minimalism in web design produced its view variations, such as Flat Design, Material Design or Metro.

All three of those styles were similar when it comes to the approach to composing an image and having a very clear design objective. Websites created in those styles usually had static, symmetrical, simple, and closed compositions. Interfaces were ascetic, without unnecessary detail, and with limited skeuomorph (what was common during the Web 2.0 era). The aim was to maximize the readability of content. Aesthetics was a bit of aby-product. A function has always been more important than form (Form follows function).

The end of minimalism

In the last period, you could've noticed a new, noticeable style, which is much more expressive and dynamic, and with more detail and decorations.

I'm not saying, of course, that in the near future minimalism will completely disappear. It will survive because its position is strongly established in the corporate world. Also, it will always be seen as some sort of reference point for the development of other visual worlds. However, it's unquestionable that at the moment there are a lot of fresh ideas which strongly alter the existing web design.

New tendencies

In the last year or two, it became visible that many designers are trying to move away from simple and closed compositions. More and more open-styled, seemingly chaotic, “broken” and cut compositions are being created. Previously worshiped grid lost its importance and its rules were deliberately and consciously bent. The content started to be shifted, seemingly moved, its parts sometimes overlapped and intermingled.

Designers are now putting a greater emphasis on expression, originality, and user engagement than on the readability and usability.

A great role in this process is played by new technological capabilities, especially Canvas. There are many websites with "mysterious" canvas animations of geometric shapes. It is a bit dark and strange. There are less and less "pure", meticulous websites, with more and more madness and eclecticism.

Source: resn.co.nz

Modern projects are often a bit confusing, less intuitive than the minimalist ones, but they make a really strong, lasting impression on users.

Trends of 2017

(Remember, not all of the tendencies that I'm going to describe below are closely related to the departure from the minimalistic design. Many of them are just so often repeated, that they can be easily called trends.)

Engaging creations - the growing popularity of the Canvas technology

Up until recently, most of the websites were based on a similar scheme. On the first page, there was a large, full screen Key Visual (an illustration, photograph, or film) with added claim, CTA, logo, and hamburger menu. The interactions were fairly predictable, boring, and limited to scrolling down and clicking on obvious navigational elements, such as links in the text and buttons.

With the minimalist approach, all websites became very similar, used the same elements and similar compositions. The only thing that varied was a 'flat' and 'closed' content, which was completely non-interactive - you could not click, select or drag it.

Such overused, block layouts dominated since the beginning of the Internet (with the exception of Flash). The situation began to change with the development of Canvas technology. This trend, however, only quite recently gained more significance.

Interactive stories

Thanks to Canvas, a rigid boundary between the content and the interface, began to fade. KV became interactive and integrated with the content of the page, often going towards dynamically changing illustrations, videos, or even mini-games.

Source: gettyendless.com

This is a new form of user involvement, thanks to which users enter the space of the brand, where they can "touch" and move around displayed products.

Dynamic animations

Canvas enabled quite unprecedented animations, which are dynamically generated by users and often use 3D technology. By using a cursor, users can create colored explosions of paint or quirky illustrations and fractals.

It's a new world, in which designers want to collaborate with users and together create websites! (In this quest web design is based on the old concept of netart)

Engaging interactions

Canvas significantly changed the way we navigate around websites, which more and more frequently cease to be a collection of hyperlinked information. Now websites became virtual "places", where users can "move around" and "do something".

Rather than just read and watch, they begin to travel via scrolling, dragging, and catching. Users can send paper airplanes around the world, find themselves in dark horror-like forest, explore space, or play with a bizarre composition of bird sounds.

Source: paperplanes.world

This completely changes the nature of websites. Instead of being like canonical school essays, they became interactive worlds where the only limit seems to be the imagination of artists.

Canvas in 2017

Canvas itself does not interfere in any way with the idea of minimalism. It is noted, however, that after years of flat, static web design, it's a tool for opening minds. It provides opportunities, which for years have been blocked by simple "cannot do", that designers have heard while showing their creations to the development team.

So far tendency to use Canvas is quite new. Therefore, sometimes the used effects are a bit detached from the media and may seem to be a pointless showiness. I am convinced, however, that in 2017 the use of Canvas will be more frequent, while created project will get more mature. Developers and designers will learn to create in this technology, and with the increase of its popularity, the capabilities will become more understandable to the everyday user.

Thought out narratives - smooth animations between sections

Animations on websites are nothing new. You also can't say that they are at odds with the minimalist approach. However, as well as Canvas, they a component of greater possibilities in web design. New opportunities are always tempting as they allow you to do something different, fresh, and original.

The richness of animations leads to the elimination of the rigid division into sections of the page. Website smoothly changes itself during scrolling. Content disappears and appears with a soft animation. The sequences of these transitions are becoming more thought out. Those are not just some random effects between blocks of content but staged narratives where each element appears at a scheduled time (Nationalgeographic.com, stylenovels.com). Animations are part of a website from the beginning of its creation, not just a casually added detail.

Interesting animations enrich simple layouts. They add a new value, constitute the uniqueness of the page. They are an essence of the whole project, such as for instance on Ifly50 or tennentbrown.co.nz. They often create a beautiful, smooth structure of websites, such us on Cuberto.com, lookbook.wedze.com, skarv-fashion.com or corentinfardeau.fr.

In 2017 animations will be even more commonly used. In my opinion, animations, similarly to interactivity, are the hallmark of a good project. Web design can never be confined to a series of flat images presenting specific sections. The fewer sections are divided in a block-like manner with a very clear division, the better.

That's it for the first part of my prediction for the world of web design in 2017! Stay tuned for the second part, where I will discuss asymmetry, seaming chaos, typography and much more!

EDIT: It's already published! You can find the second part of the article on Awwwards' blog! MUST READ :)