Tendencias en Diseño Web 2017

Comienza un nuevo año, es el momento de marcarse buenos propósito, marcarse metas y crear listas de quehaceres. Y entre ellas no puede faltar conocer las tendencias de este año en diseño web. Estar al día y conocer cuales serán los próximos pasos el ecosistema de los diseñadores y desarrolladores webs es fundamental para poder ofrecer al cliente diseños frescos e innovadores: quien no se recicla se queda obsoleto.

Por ello vamos a enumerar algunas de las practicas, diseños, herramientas y elementos que hemos estado estudiando y probando estos últimos meses en SiloCreativo y que creemos serán importantes para este nuevo año, donde empezaremos a verlas poco a poco en la web. ¿nos acompañas? Aviso: el orden es aleatorio, no por estar más arriba tienen más importancia.

Bebiendo de la maquetación Editorial y el espacio en blanco

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.

Algunos ejemplos interesantes y que dan origen a las composiciones actuales son las obras de Herbert Bayer, por nombrar a alguno de los diseñadores que pasaron por la Bauhaus

Composición diseño editorial por Herbert-Bayer

Herbert Bayer y el espacio en blanco

Diseño de poster por Herbert-Bayer

Y del campo de la pintura, aunque con un acercamiento más abstracto, las obras de László Moholy-Nagy también sirven de inspiración aquí, como por ejemplo K VII:

Composición abstracta Laszla Moholy-Nagy K VII

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.

Este cambio de debe principalmente a dos componentes. Por un lado la compatibilidad que ha ido ganando Flexbox en los navegadores, lo que hace que, exceptuando las versiones antiguas de Internet Explorer, tengamos una compatibilidad prácticamente total entre la sintaxis actual y sus prefijos:

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

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.

Boostrap 4 contará con Flexbox

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, aquí tienes un ejemplo sencillo de lo que podemos conseguir trabajando con SVG.

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.

Algunos ejemplos interesantes sobre el uso de estas propiedades los encontramos en la web de Nature Digital, con el uso de GIFs (y también videos) que se ubican tras recortes y tipografías:

Diseño web con CSS mask

También de referencia este artículo de Sara Soueidan en A list Apart hablando sobre estas propiedades. Es algo antiguo, pero aún sirve para iniciarnos ahora que va a ser tendencia:

Diseño Web con Shapes en CSS

Y dentro de este grupo tambien incuiriamos los filters, que nos sirven para modificar el contraste, brillo, colores y otros tantos valores de la imagen original, que combinado con lo anterior será uno de los puntos de investigación y experimentación con imágenes en los próximos meses en diseño web:

Filtros CSS para imágenes en Diseño Web

Ojo con la compatibilidad de estas propiedades, todavía algo inferior a lo 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.

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.

Un ejemplo de como trasladar un diseño gráfico a un diseño web basado en Grid Layout, realizado por Jen Simmons. A la izquierda el poster original, a la derecha el diseño web basado en CSS Grid Layout:

Diseño web basado en Grid CSS

Aquí el ejemplo completo, pero necesitas acceder desde uno de los navegadores soportados o activar las funciones experimentales del mismo para poder observarlo correctamente.

En cuanto al soporte entre navegadores, la cosa está todavía muy verde, así que si quieres tomarlo como una tendencia, mejor a medio plazo que a corto plazo:

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

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. Es el caso por ejemplo de la web de Uber:

Líneas en Diseño Web

Veremos aparecer seguro muchos más diseños con estas guías de distintos colores, grosores e incluso animadas, como estos otros ejemplos.

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.

Y tu, ¿que crees que pasará este año?

Comentarios (7)

  1. Me ha gustado mucho este artículo, ¡ha sido interesante!

    Da gusto leer algo nuevo que aportar para estimular nuevas ideas sobre el mundo de diseño web, una disciplina que recoge un papel importante para la era digital.

  2. ¡Excelente artículo! realmente recoge los puntos más importantes de tomar en cuenta para este nuevo año. Y empezar a experimentar con las nuevas herramientas. Gracias

  3. Un excelente trabajo por tu parte con esta buena aportación, unas tendencias de las que desconocía,saludos y sigue así.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *