Tendencias de diseño web en 2019
Publicado por: Adrián Ruiz
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 crear patrones o sombras, y crear animaciones con jQuery, hoy en día es más habitual los diseños flexibles full width, el responsive, las transiciones 3D con CSS para crear animaciones, y los 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 que sea flexible y 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 posicionamiento a aquellos sitios que estén bien adaptados para dispositivos móviles, pantallas pequeñas y pantallas táctiles.
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 que sean 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.
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, a 980×720 porque esa es la relación de aspecto con la que trabajas para un elemento concreto. Pensarás que con CSS puedes solventar el problema, pero lo cierto es si te ahorras esos 44 pixels que sobran, te ahorras también carga extra.
Otro aspecto a tener en cuenta es usar formatos de imagen de nueva generación. Aunque hoy en día pocos navegadores soportan algunos de los más modernos si que 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 en función de eso mostrar las imágenes en dicho formato, y en caso contrario mostramos al usuario un JPG o PNG 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 crear, elegantes, y dotan a tu sitio web de vida propia.
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. ¡Sé libre de ser todo lo creativo que quieras!
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 genéricas, pero no quita que sea una de las tendencias más actuales de diseño web.
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.
Si te ha gustado el artículo síguenos para no perderte nuestras publicaciones: