Tendencies for Diseo Web 2017

The design is cyclical, is elements that are tendency by a time but soon they disappear to return to take to years or decades later. Nevertheless some concepts are eternal, the care of the space in target, the minus is more or the combinations of colors even remain more or less stable as light points to follow in the darkness when we faced a new design.

Graphic design - Tendencies for Diseo Web 2017To the publishing model-making something similar happens. The schemes and layouts that takes using in magazines the last years, do not belong to recent innovations. We speak of schemes proposed in first half of century and that is called on to rediscover every certain period of time. Schemes are where prime the typography over the ornament and where the text blocks are organized with the same importance and consideration that the spaces in target or the negative space, since we have enunciated in our predictions on tendencies in design of logos. Everything with the aim of looking for a legibility and harmonic and rested display.

But all this is not new, since we have commented are present schemes already in the publishing design. The challenge is since to make coexist this art of static composition with the design fluid Web and multidevice (we are in the era of the design responsive). We will need therefore spaces and relative sizes of typography (here the units rem, member state and the percentage will play an important role along with the mediaqueries) in addition to enabling the design to maintain a compositional coherence in anyone of his resolutions. What has been shelp, the challenge is served and we will see as this year is solved.

Goodbye to floats in CSS

This year we will say to goodbye to the model-making of ours layouts based on floats. Thanks to them we have designed these last years with a more or less standard system of columns and although it is certain that for small elements or details still they can be useful, does not have much sense to continue maquetando everything a design Web on the basis of this property CSS having our Flexbox reach.

design professional webpages - Tendencies for Diseo Web 2017But mainly what will cause that floats stops having this so predominant paper in the design and model-making of layout will be the launching of Boostrap 4. As you know frameworks of CSS, we like or no, they have much weight in the industry, and in certain way the use of one or the other function or property on the part of shelp frameworks they mark a way that designers and agencies follow thousand of. Perhaps the elections that do this frameworks CSS are not most efficient, but it is a fact that the weight that they have to day of today is very lifted.

The case is that Boostrap, after years with his grid based on floats of version 3 is going to give the jump and to include the possibility of using Flexbox in its future version 4. Still he is in Alpha (you can see it here) although we already we have experienced it with him in some of our WordPress subjects, for example Artie. But at the moment that Boostrap 4 sees the light, Flexbox will arrive at the designs Webs from the day to day and to the great one I publish in the form of grid, and or if we will be able to speak of a standard (or you can begin to mount chats and courses she exceeds: D). Shelp this, others frameworks CSS have been time already working with Flexbox, so well by them.

A new life for the images: Paper clip, Mask and Filters

From its recent appearance, everybody mistress the SVG format. He is light, it goes with any screen whatever his density of pixel well and above he is editable by CSS, being able to change the colors, thicknesses and to realise animations. He is fantastic. If you do not know that we are speaking.

This mini gold rush with the SVG format is moving to the other more classic formats of image, as .JPG, png or GIF: the moment for renewing or for dying, although is certain well that these formats never will disappear (the photographies at the present time are nonviable in SVG for example).

a Web to size - Tendencies for Diseo Web 2017But what if is certain is that in this fashion of which the client wants the greater amount of graphs in SVG has activated the creativity, giving us account that is necessary to rethink the form with which we presented these images in the Web. Until it does not appear the competition we do not put the batteries and we began to innovate, and this is that it is happening to the images in classic format. We want to have JPGs in the Web? Perfect, but how we competed against that SVG so molones, that they are animated and they interact with the user? then CSS to the rescue, applying some of following the properties that already begin to turns in some designs Webs:

We speak of paper clip-path, mask and to filter, properties to modify the form, to integrate the image in one typo or to apply to an effect or variation in the values of the image (for example filters Instagram type). It was able yet to contribute a value to the image, to integrate it in a composition with a certain form and to vary their appearance to adapt it to our range of colors or ours branding.

New tools of design and model-making

New forms to think sometimes require of new forms to work and in this year we will see as some tools remain behind a step when not fulfilling the needs and requirements of the designer Web. We have recently seen it with the code publishers: It sublimates Text, that seemed to agglutinate the monopoly between the maquetadores and developer of group HTML + CSS + JS begins to withdraw against alternatives as Atom or Brackets, personalizables and much more adaptable to the needs and odd habits of each designer on the basis of the extensions and plugins of the same. Recently we spoke for example of Pug for Atom and as it helped us with the HTML.

The same happens in the hinge between the phase of design and model-making. To design in the navigator is at the present time a real alternative thanks to the advances of the inspectors and development tools in front of the old process of €œit design in Photoshop and maquetamos later in CSS€. Although the process to design in the navigator is a priori more blurred, we were able to have a more efficient code and responsive design from the first steps of the design. On the contrary, less creativity, although this is well debatable. We will see this year a transfer of users of Photoshop who will go to design in the navigator, although Adobe insists on retaining them with experiments as Adobe Edge Reflow.

Also we have third via! Intermediate tools with or enough users to its backs as Froont or Webflow, that offers a experience to us to the average cumin between the design of the pure pixel and the model-making in the navigator. We will see new similar tools appear in this new year, but still they need much route to begin them to appreciate as a complete being that solve all the problems to us and necks of bottle that arise in the design of a Web.

Web Design based on Grid and lines

slider 5 - Tendencies for Diseo Web 2017This year we will see if finally the adoption of the module of Grid Layout in tendrmos CSS is a reality or that to hope some months to more begin to see designs based on this new system of grid, that comes to complement the specifications of Flexbox and to allow to construct to designs based on rows and columns us.

This format will allow us to create flexible structures, where as we commented before, the space in target is not the result of a sum of margins, but it acquires organization and it is identified as a block but in the composition.

Although the specifications allow us to create a complex system for the correct operation of a design complete Web (pages and pages), we think that these Grids will begin to become popular in the design of landings, near structures already known as posters and flyers, reason why the inspiration will come again from the graphical design.

Next to this, to leave to the lines guides in whom the design is fitted no longer is something that must shame to us. Some designs show the lines that serve as rules to align the titles, images and pictures of text, being looked for that €œmathematical€ aspect or €œtechnician€, as giving to understand that the service or product that behind hides this ordered and calculated well

Conclusion: Time to undergo in Web Design

These are only some of the keys as far as design Web that we will see in the next months. All will not get to play a predominant role nor will become standards, but they serve to us as starting point to explore and search other forms to work.

I believe that most important it is to understand than we have the tools to our reach, sufficient experimental properties CSS and a very fertile land in front of us. It is hour to put hands to the work and to play with these tendencies to verify if they improve the present design and that incidence has in the Experience of user.