Tendencias para el Diseño Web en el año 2017

El diseño es cíclico, hay elementos que son tendencia por un tiempo pero luego desaparecen para volver a llevarse años o decadas más tarde. Sin embargo algunos conceptos son atemporales, el cuidado del espacio en blanco, el menos es más o incluso las combinaciones de colores permanecen más o menos estables como puntos de luz a seguir en la oscuridad cuando nos enfrentamos a un nuevo diseño.

Con la maquetación editorial sucede algo parecido. Los esquemas y layouts que se llevan usando en revistas los últimos años, no pertenecen a innovaciones recientes. Hablamos de esquemas propuestos en la primera mitad de siglo y que toca redescubrir cada cierto periodo de tiempo. Son esquemas donde prima la tipografía por encima del ornamento y donde los bloques de texto son organizados con la misma importancia y ponderación que los espacios en blanco o el espacio negativo, como hemos enunciado en nuestras predicciones sobre tendencias en diseño de logotipos. Todo con el objetivo de buscar una legibilidad y presentación visual armónica y descansada.

Pero todo esto no es nuevo, como hemos comentado son esquemas presentes ya en el diseño editorial. El reto es como hacer convivir este arte de composición estática con el diseño web fluido y multidispositivo (estamos en la era del diseño responsive!). Necesitaremos por tanto de espacios y tamaños de tipografía relativos (aquí las unidades rem, em y los porcentaje jugarán un papel importante junto con las mediaqueries) ademas de capacitar el diseño para mantener una coherencia compositiva en cualquiera de sus resoluciones. Lo dicho, el reto está servido y veremos como se resuelve este año.

Adios a los floats en CSS

Este año diremos adiós a la maquetación de nuestros layouts basada en floats. Gracias a ellos hemos diseñado estos últimos años con un sistema de columnas mas o menos estándar y aunque es cierto que para pequeños elementos o detalles todavía pueden ser útiles, no tiene mucho sentido seguir maquetando todo un diseño web en base a esta propiedad CSS teniendo a nuestro alcance Flexbox.

Pero sobre todo lo que hará que los floats dejen de tener este papel tan predominante en el diseño y maquetación del layout será el lanzamiento de Boostrap 4. Como sabéis los frameworks de CSS, nos guste o no, tienen mucho peso en la industria, y en cierto modo la utilización de una u otra función o propiedad por parte de dichos frameworks marcan un camino que siguen miles de diseñadores y agencias. Puede que las elecciones que hagan dichos frameworks CSS no sean las más eficiente, pero es un hecho que el peso que tienen a día de hoy es muy elevado.

El caso es que Boostrap, tras años con su grid basado en floats de la versión 3 va a dar el salto e incluir la posibilidad de usar Flexbox en su futura versión 4. Aún está en Alpha (lo podéis ver aquí) aunque nosotros ya lo hemos experimentado con él en alguno de nuestros temas WordPress, por ejemplo Artie. Pero en el momento que Boostrap 4 vea la luz, Flexbox llegará a los diseños webs del día a día y al gran publico en forma de grid, y ya si podremos hablar de un estándar (ya podéis empezar a montar charlas y cursos sobre ello :D). Dicho esto, otros frameworks CSS llevan ya tiempo trabajando con Flexbox, así que bien por ellos.

Una nueva vida para las imágenes: Clip, Mask y Filters

Desde su reciente aparición, todo el mundo ama el formato SVG. Es ligero, va bien con cualquier pantalla sea cual sea su densidad de pixel y encima es editable por CSS, pudiendo cambiar los colores, grosores y realizar animaciones. Es fantástico. Si no sabes de que estamos hablando.

Esta mini fiebre del oro con el formato SVG está desplazando a los otros formatos de imagen más clasicos, como .JPG, PNG o GIF: el momento de renovarse o morir, aunque bien es cierto que estos formatos nunca desaparecerán (las fotografías hoy por hoy son inviables en SVG por ejemplo).

Pero lo que si es cierto es que en esta moda de que el cliente quiera la mayor cantidad de gráficos en SVG ha activado la creatividad, dándonos cuenta que es necesario repensar la forma con la que presentamos estas imágenes en la web. Hasta que no aparece la competencia no nos ponemos las pilas y comenzamos a innovar, y esto es que está pasando a las imágenes en formato clásico. ¿Queremos tener JPGs en la web? Perfecto, pero ¿cómo competimos contra esos SVG tan molones, que son animados e interactúan con el usuario? pues CSS al rescate, aplicando algunas de las siguiente propiedades que ya comienzan a verse en algunos diseños webs:

Hablamos de clip-path, mask y filter, propiedades para modificar la forma, integrar la imagen en una typo o aplicar un efecto o variación en los valores de la imagen (por ejemplo filtros tipo Instagram). Con todo ello conseguimos aportar un valor a la imagen, integrarla en una composición con una forma determinada y variar su apariencia para adecuarla a nuestra gama de colores o nuestro branding.

Nuevas herramientas de diseño y maquetación

Nuevas formas de pensar a veces requieren de nuevas formas de trabajar y en este año veremos como algunas herramientas se quedan un paso por detrás al no cumplir las necesidades y requerimientos del diseñador web. Lo hemos visto recientemente con los editores de código: Sublime Text, que parecía aglutinar el monopolio entre los maquetadores y desarrolladores del grupo HTML + CSS + JS empieza a perder terreno frente a alternativas como Atom o Brackets, mucho más personalizables y adaptables a las necesidades y manías de cada diseñador en base a las extensiones y plugins de los mismos. Hace poco hablábamos por ejemplo de Pug para Atom y como nos ayudaba con el HTML.

Lo mismo sucede en la bisagra entre la fase de diseño y maquetación. Diseñar en el navegador es hoy por hoy una alternativa real gracias a los avances de los inspectores y herramientas de desarrollo frente al viejo proceso de “lo diseño en Photoshop y maquetamos después en CSS”. Pese a que el proceso de diseñar en el navegador es a priori más borroso, conseguimos tener un código más eficiente y responsive design desde los primeros pasos del diseño. Por contra, menos creatividad, aunque esto es bien discutible. Veremos este año un trasvase de usuarios de Photoshop que se pasarán a diseñar en el navegador, pese a que Adobe se empeñe en retenerlos con experimentos como Adobe Edge Reflow.

También tenemos tercera vía! Herramientas intermedias con ya bastantes usuarios a sus espaldas como Froont o Webflow, que nos ofrecen una experiencia a medio comino entre el diseño del pixel puro y la maquetación en el navegador. Veremos nuevas herramientas similares aparecer en este nuevo año, pero todavía les falta mucho recorrido para empezarlas a apreciar como un ente completo que nos resuelva todos los problemas y cuellos de botella que surgen en el diseño de una web.

Diseño web basado en Grid y líneas

Este año veremos si finalmente la adopción del módulo de Grid Layout en CSS es una realidad o tendrmos que esperar algunos meses más para comenzar a ver diseños basados en este nuevo sistema de grid, que viene a complementar las especificaciones de Flexbox y permitirnos construir diseños basados en filas y columnas.

Este formato nos permitirá crear estructuras flexibles, donde como comentábamos antes, el espacio en blanco no sea el resultado de una suma de márgenes, sino que cobre entidad y se identifique como un bloque mas en la composición.

Aunque las especificaciones nos permitan crear un sistema complejo para el correcto funcionamiento de un diseño web completo (páginas y páginas), creemos que estos Grids empezarán a popularizarse en el diseño de landings, cercanas a estructuras ya conocidas como posters y flyers, por lo que la inspiración procederá nuevamente del diseño gráfico.

Junto a esto, dejar las líneas guías en las que se encuadra el diseño ya no es algo que nos deba avergonzar. Algunos diseños muestran las líneas que sirven como reglas para alinear los títulos, imágenes y cuadros de texto, buscando ese aspecto “matemático” o “técnico”, como dando a entender que el servicio o producto que se esconde detrás esta ordenado y bien calculado

Conclusión: Tiempo de experimentar en Diseño Web

Estas son solo algunas de las claves en cuanto a diseño web que veremos en los próximos meses. No todas llegarán a ocupar un papel predominante ni se convertirán en estándares, pero nos sirven como punto de partida para explorar y buscar otras formas de trabajar.

Creo que lo más importante es comprender que tenemos las herramientas a nuestro alcance, suficientes propiedades CSS experimentales y un terreno muy fértil frente a nosotros. Es hora de ponerse manos a la obra y jugar con estas tendencias para comprobar si mejoran el diseño actual y que incidencia tienen en la Experiencia de usuario.