Trends in Web Design in 2017

The New Year just started, so it is time to set goals and create lists of chores. And among them the new trends of this year in web design cannot miss. Being up to date and knowing what the next steps will be for the web designers and developers will be fundamental to be able to offer the client fresh and innovative designs: those who do not recycle become obsolete.

Therefore, we will list some of the practices, designs, tools and elements that we have been studying and testing these last months in Silo Creativo and that we believe will be important for this new year, where you will begin to see them little by little on the web. Notice: the order is random. Not because they are higher they have more importance.

Drinking from the Editorial layout and white space

The design is cyclical; there are elements that are trend for a while but then disappear to take back years or decades later. However, some concepts are timeless. Caring of the white space, less is more or even combination of colours remain more or less stable as points of light to follow in the dark when we face a new design.

With the editorial layout something similar happens. Schemes and layouts that have been used in magazines in recent years do not belong to recent innovations. We talk about schemas proposed in the first half of the century that have to be rediscovered every certain period of time. They are schemes where fonts are above the ornament and where the blocks of text are organized with the same importance and weighting as the blank spaces or the negative space, as we have stated in our predictions about trends in design of logos. All with the aim of seeking readability and visual presentation harmonic and rested.

Some interesting examples that give rise to the current compositions are the works of Herbert Bayer, to name some of the designers who passed through the Bauhaus.

Herbert-Bayer-bauhaus

Herbert-Bayer-design

And of the field of painting, although with a more abstract approach, the works of László Moholy-Nagy also serve as inspiration here, as for example K VII:

Laszla-Moholy-Nagy-K-VII-design

But all this is not new, as we have commented, they are schemes already present in the editorial design. The challenge is how to make this art of static composition coexist with fluid and multi-device web design (we are in the era of responsive design!) We will therefore need spaces and sizes of fonts (rem, em units and percent will play an important role along with mediaqueries) as well as training the design to maintain a compositional coherence in any of its resolutions. What is said, the challenge is served and we will see how it is resolved this year.

Goodbye to floats in CSS

This year we will say goodbye to the layout based on floats. Thanks to them we have designed these last years with a system of columns more or less standard and although it is true that for small elements or details can still be useful, it does not make much sense to continue designing a whole web design based on this CSS property having Flexbox.

This change is due mainly to two components. First, the compatibility that has been gaining Flexbox in browsers, which makes, except for the old versions of Internet Explorer, having a virtually complete compatibility between the current syntax and its prefixes:

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

But above all what will make floats stop having this predominant role in the design of the layout will be the launch of Boostrap 4. As you know CSS frameworks have a lot of weight in the industry, and in a way the use of one or another function or property by these frameworks marks a path followed by thousands of designers and agencies. The choices that make CSS frameworks may not be the most efficient, but it is a fact that the weight they have today is very high.

bootstrap-4-design

Boostrap, after years with its grid based on floats version 3, it will include the possibility of using Flexbox in its future version 4. It is still in Alpha (you can see it here) although we have experimented with it on some of our WordPress themes, for example Artie. But when Boostrap 4 sees the light, Flexbox will arrive at the daily of web designs and the big public in a grid, so we can talk about a standard (you can start to create talks and courses about it: D). That said, other CSS frameworks have long been working with Flexbox, so good for them.

A new life for images : Clip, Mask y Filters

Since its recent appearance, everyone loves the SVG format. It is light, goes well with any screen whatever its pixel density and above it is editable by CSS, being able to change the colours, thicknesses and make animations. It is fantastic. If you do not know what we are talking about, here is a simple example (in Spanish) of what we can get working with SVG.

This mini gold rush with the SVG format is shifting to the other more classic image formats such as .JPG, PNG or GIF: it is time to renew or die, although it is true that these formats will never disappear (the photographs today are unviable in SVG for example.)

But what is certain is that this fashion where the customer wants the most graphics in SVG has activated the creativity, realizing that it is necessary to rethink the way we present these images on the web.

Until the competition does not appear we do not start to innovate, and this is happening to the images in classic format. Do we want to have JPGs on the web? Perfect, but how do we compete against those SVGs so cool that are animated and interact with the user? CSS can help you applying some of the following properties that already begin to be seen in some web designs:

We speak of clip-path, mask and filter, properties to modify the form, to apply an effect or variation in the values of the image (for example filters type Instagram.) With all this we manage to bring a value to the image, integrate it into a composition with a certain shape and vary its appearance to suit our range of colours or our branding.

Some interesting examples on the use of these properties can be found in the Nature Digital website, with the use of GIFs (and also videos) that are located after clipping and fonts :

design-css-mask

We show you this article by Sara Soueidan in A list Apart talking about these properties. It is something old, but it is still good to start with this trend:

design-web-CSS

And within this group we would also include filters, which serve to modify the contrast, brightness, colours and other values of the original image; combined with the above will be one of the points of investigation and experimentation with images in the coming months in web design:

design-web-CSS-filter-image

Be careful with the compatibility of these properties, still somewhat less than ideal:

Can I Use CSS clip-path? Data on support for the flexbox feature across the major browsers from caniuse.com.

Can I Use CSS masks? Data on support for the flexbox feature across the major browsers from caniuse.com.

Can I Use CSS filters? Data on support for the flexbox feature across the major browsers from caniuse.com.

New design and layout tools

New ways of thinking sometimes require new ways of working and this year we will see how some tools fall behind by not meeting the needs and requirements of the web designer. We have recently seen it with code editors: Sublime Text, which seemed to agglutinate the monopoly between the designers and developers of the group HTML + CSS + JS is beginning to lose ground to alternatives like Atom or Brackets, much more customizable and adaptable to the needs and hobbies of each designer based on the extensions and plugins of them. We recently talked about Pug for Atom and how it helped us with HTML.

The same happens in the hinge between the design phase and layout. Designing in the browser is today a real alternative thanks to the progress of the inspectors and development tools in front of the old process of “designing it in Photoshop and later crafting it in CSS.” Although the design process in the browser is a priori blurrier, we have a more efficient and responsive design code from the first steps of the design. On the contrary, there is less creativity, although this is well arguable. We will see this year a transfer of Photoshop users that will be redesigned in the browser, although Adobe is bent on retaining them with experiments such as Adobe Edge Reflow.

We also have third way! Intermediate tools with already many users behind their backs like Froont or Webflow that offer us a half experience between the design of the pure pixel and the layout in the browser.

We will see new similar tools appear in this new year, but they still have a long way to begin to appreciate them as a complete entity that solves all the problems that arise in the design of a web.

Web design based on Grid and lines

This year we will see if finally adopting the Grid Layout module in CSS is a reality or we will have to wait a few more months to begin to see designs based on this new grid system, which comes to complement the specifications of Flexbox and allow us to build designs based in rows and columns.

This format will allow us to create flexible structures, where as we said before, the blank space is not the result of a sum of margins, but that it covers entity and is identified as a block more in the composition.

Although the specifications allow us to create a complex system for the proper functioning of a complete web design (pages and pages,) we believe that these Grids will begin to become popular in the design of landings, near structures already known as posters and flyers. Inspiration will come again from graphic design.

This is an example of how to move a graphic design to a web design based on Grid Layout, done by Jen Simmons. On the left, the original poster, on the right, the web design based on CSS Grid Layout:

Grid-CSS-design-web-layout

Here you have the complete example, but you need to access from one of the supported browsers or activate the experimental functions of the same to be able to observe it correctly.

As for the support between browsers, the thing is not yet well defined, so if you want to take it as a trend, better in the medium term than in the short term:

Can I Use CSS css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Along with this, leaving the guidelines in which the design fits is no longer something that should embarrass us. Some designs show the lines that serve as rules for aligning titles, images and text boxes, looking for that “mathematical” or “technical” aspect, as if to imply that the service or product behind it is orderly and well calculated. This is the case, for example, on the Uber website:

design-web-with-line

We will see many more designs appear with these guides of different colours, thicknesses and even animated, like these other examples.

Conclusion: Time to experiment in Web Design

These are just some of the keys in terms of web design that we will see in the coming months. Not all of them will play a dominant role or become standards, but they serve as a starting point for exploring and seeking other ways of working.

I think the most important thing is to understand that we have the tools at our disposal, enough experimental CSS properties and a very fertile ground in front of us. It’s time to work and play with these trends to see if they improve the current design and what impact they have on the user experience.

And you, what do you think will happen this year?

About 

Hi! My name is Ricardo Prieto and I work (and write) about web design, layout and user experience at SiloCreativo, where we help people to develop their projects with tutorials, tips and resources.

Leave a Reply

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