Tendencias de diseño web en 2019

Repasamos las tendencias actuales en diseño web del 2019. Desde uso de diseños responsive, hasta la optimización de carga y el SEO.

Como cada año, ciertos sectores tecnológicos que están siempre en constante evolución presentan nuevas tendencias que a lo largo del año se van consolidando en muchas webs ya sean amateurs como de marcas de renombre.

Y como viene siendo lógico, el diseño web es uno de esos aspectos que año tras año va evolucionando en tendencias. Cuando hace una década era muy habitual diseños centrados, background repeats de imágenes para patrones o sombras, y animaciones con jQuery, hoy en día es más habitual los diseños flexibles full width, el responsive, transiciones 3D con CSS para animaciones, y colores vivos y planos.

Mobile-first

Con la llegada de los media-queries y el enorme impacto de los smartphones con el tiempo ha dejado de ser tendencia el uso de vistas aparte para diseños de móvil como el típico m.misitio.com. Una práctica que en mi opinión, me parece horrible.

Hoy en día siguiendo unas buenas pautas es fácil hacer un diseño de escritorio flexible que en vistas responsive se adapta perfectamente y requiere pocos retoques, aunque mucho mimo.

Pero el concepto «Mobile-first» va mucho más allá de un diseño compacto y adaptable que se adapta a cualquier pantalla. También hace referencia a la usabilidad, la accesibilidad, y especialmente, el SEO. Este último punto es importante, pues Google da prioridad en el posicionamiento a aquellos sitios que estén bien adaptados para dispositivos móviles, pantallas pequeñas y pantallas táctiles.

Gráfica de tendencias de posicionamiento del 2017

Como consejo, recomiendo un buen uso de display flex pero sin abusar, solo para casos puntuales, trabajar con fuentes em, y respetar los grandes margenes entre elementos clicables, que no estén muy cerca unos de otros.

Optimización y velocidad de carga

Un aspecto que tiene mucho que ver con el anterior, y es que la finalidad es la misma; el SEO. Para que un sitio sea user friendly es importante que sea optimo y ligero, esto son cosas que Google tiene en cuenta y ayudan mucho no solo a posicionar mejor tu sitio, sino también a ofrecer una mejor experiencia de usuario.

Un ejemplo de PageSpeed con DESOPHICT
Un ejemplo de PageSpeed con DESOPHICT

Optimizar un sitio web puede ser algo complicado si no sabes por dónde rascar, pero las imágenes siempre son algo que se pueden optimizar bastante.

Si trabajas por ejemplo con un CMS como WordPress este te generará las imágenes a su propio criterio, a unas resoluciones concretas cuando tal vez no necesitas que te genere una imagen a 1024×720 si no, por poner un ejemplo, 980×720 porque es esa la relación de aspecto con la que trabajas. Pensarás que con CSS puedes solventar el problema, pero lo cierto es si te ahorras esos 44 pixels que sobran, te ahorras carga también.

Otro aspecto a tener en cuenta es usar formatos de imagen de nueva generación. Aunque hoy en día pocos navegadores lo soportan algunos de los más modernos si dan soporte a WebP el cual su tasa de compresión frente a JPG y PNG es abrupta. Una buena opción es comprobar si el navegador soporta WebP y entonces mostrar las imágenes en dicho formato, por lo contrario mostramos al usuario un JPG optimizado.

Transiciones CSS

Lejos quedan ya aquellos tiempos en que se usaba jQuery casi solo para hacer animaciones chulas. Hoy en día con CSS3 y el buen renderizado que tienen los navegadores permite hacer animaciones naturales que no consumen excesivamente mucho. Son ligeras, fáciles de hacer, elegantes y dotan a tu sitio web de vida propia.

Ejemplo de transición CSS3

Y lo mejor de todo es que ya están soportados en casi todos los navegadores que más se usan en todo el mundo.

Videos de fondo

Es una tendencia cada vez más habitual gracias a la buena compresión de nuevos formatos como WebM y el soporte nativo para videos de HTML5. Yo personalmente no soy muy partidario de este tipo de elementos para webs muy particulares, pero no quita que sea una de las tendencias más actuales de diseño web.

Ejemplo de una web con video animado de fondo

Colores fuertes que potencian el UX/UI

La mejor forma de representar un buen diseño UX/UI suele ser con colores llamativos, fuertes y vibrantes. La alta saturación y el uso de paletas fuertes suelen transmitir una sensación positiva en el usuario, y cuando logras eso, es que tu diseño está funcionando perfectamente.

Igualmente es importante calcular qué colores vas a usar y con qué combinaciones. No se trata simplemente de meter un popurrí de colores saturados para llamar la atención y ya está, es importante el lenguaje visual y guiar al usuario por tu web a través del diseño.

Publicado en:

Deja un comentario:

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