martes, 5 de marzo de 2019

16 tendencias en diseño web para 2019

16 tendencias en diseño web para 2019


Vamos a ver cuáles son las técnicas y tendencias en diseño web que más vamos a ver a lo largo del próximo año y que ya han empezado a utilizarse.
 #1 Ancho completo

Empezamos por el ancho completo, una de las tendencias de diseño web para 2019 que ya hemos empezado a ver.
Los elementos con ancho completo han tomado fuerza en los últimos meses y se usan especialmente en cabeceras y material multimedia (imágenes y vídeos) para destacar el contenido.
Su objetivo es mostrar la máxima cantidad de información posible con solo un vistazo y captar la atención del usuario que visita la web.
Aquí dejo un ejemplo:
16 tendencias en diseño web para 2019
En este caso, se trata de la cabecera de la página de inicio de una web.
Si consigues transmitir tu propuesta de valor con solo un golpe de vista, habrás conseguido muchísimo 😉

#2 Elementos de gran tamaño

Segunda tendencia en diseño web para 2019, y muy relacionada con la primera.
Los elementos de gran tamaño cobran fuerza por el mismo motivo que comentaba antes: llamar la atención e impactar al usuario.
¿Cuáles son esos elementos de gran tamaño que cada vez vemos más en diseño web?
Botones, vídeos, imágenes, galerías o títulos de páginas.
Aquí te dejo varios ejemplos de páginas con elementos que tienen un gran tamaño y quedan perfectamente integradas en el diseño: un vídeo, una entrada de blog y un título de página.
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019

#3 Fondos en vídeo

Otra tendencia que viene pegando fuerte es, por supuesto, el vídeo en todos los sentidos.
En este caso me quiero centrar en los vídeos empleados como fondos de secciones o de cabeceras.
Aportan un toque muy creativo y visual al diseño, y generan un gran impacto en el usuario.
Si quieres darle fuerza a tu mensaje, acompáñalo de un buen vídeo.
Aquí puedes ver un par de ejemplos:
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019

#4 Tipografías como elemento principal (gigantes)

Otro recurso que cada vez estoy viendo más en otras webs y también usando en mis diseños es el uso de tipografías como elemento principal.
Es decir, tipografías gigantes que se convierten en las protagonistas del diseño y en torno a ellas gira el mensaje principal.
Te dejo un par de ejemplos en los que puedes ver cómo el texto, con una tipografía grande, se convierte en el elemento principal del diseño.
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019

#5 Colores intensos y brillantes

Las paletas de colores con tonos intensos y brillantes también son tendencia en diseño web para 2019.
Como siempre digo cuando hablo de este tema, una buena combinación de colores es fundamental en una web para reforzar su mensaje, valores y personalidad.
Otro tipo de efectos que están de moda son los colores brillantes, aunque debes tener cuidado al usarlos para no saturar al usuario.
Te dejo un ejemplo de web con una paleta de colores intensa y atrevida (el color morado en una web es potente y no está demasiado visto).
16 tendencias en diseño web para 2019

#6 Móvil primero

Otra tendencia en diseño web para 2019 que no podía faltar en este post y seguro que te imaginas es la adaptación al móvil, es decir, dispositivos sí o sí.
En este caso, se trata de plantear un diseño totalmente pensado para  móvil, más allá del clásico responsive que lo que hace es adaptar el diseño de escritorio al teléfono.
El objetivo es disponer de un diseño específico para la versión de escritorio y otro diferente (partiendo del original, por supuesto) para el móvil, como ya estoy haciendo en esta web.
Mi propio ejemplo:
16 tendencias en diseño web para 2019
versión escritorio
16 tendencias en diseño web para 2019
versión móvil

#7 Chatbots

Los chatbots o automatismos en general para sitios web son ya una realidad y se extenderán mucho más a lo largo de 2019.
Conseguir una atención al usuario personalizada ha hecho que se integren en el diseño web servicios de chat o bots de Facebook, por ejemplo.
Estos sistemas permiten acercar la atención al cliente o personalizar secuencias de mensajes, por lo que son muy útiles.
Aquí te dejo un ejemplo real en uno de mis últimos diseños:
16 tendencias en diseño web para 2019

#8 Diseños one page

Los diseños one page (una única página) funcionan muy bien en determinados tipos de proyectos y se convertirán en tendencia de diseño web para 2019.
Como digo, no funcionan igual en determinados sitios web, pero si lo que quieres es mostrar el mayor número de información sin que el usuario se despiste, son la mejor opción.
Tienen sentido, por ejemplo, en páginas de eventos, presentaciones o promociones específicas.
Además, puedes disponer o no de un menú para que el usuario se desplace por la página.
Aquí pueden ver un par de páginas con estilo one page diseñadas por mí:
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019

#9 Estructuras asimétricas

Otra tendencia en diseño web para 2019 son los elementos con estilo asimétrico, es decir, estructuras que se alejan de formas más clásicas o rectas.
Un uso muy interesante de este tipo de estructuras es como separador entre diferentes secciones o apartados en una página, como puedes ver en estos dos ejemplos:
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019

#10 Formas geométricas

Continuando con elementos que se alejan de formas clásicas o rectas, encontramos otra de las tendencias en diseño web que ya hemos empezado ver: las formas geométricas.
Este tipo de diseños aportan un resultado visual muy moderno y creativo, pues suelen combinar diferentes tipos de colores.
Por supuesto, esta tendencia no es apta para todo tipo de proyectos.
Algunos ejemplos:
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019

#11 Páginas seguras: https

Las dos tendencias de las que voy a hablar a continuación hacen referencia más a la parte técnica que visual de la web.
La primera de ellas es la carga de las páginas en https.
2018 ha sido el año en el que los navegadores han empezado a avisar al usuario de aquellas páginas que no tienen el certificado ssl instalado y, por lo tanto, no son seguras.
Aquí puedes ver, por ejemplo, el mensaje que aparece en Chrome cuando navegas por una página segura y cuando lo haces por una que no lo es:
16 tendencias en diseño web para 2019
sin https (web no segura para Chrome)
16 tendencias en diseño web para 2019
con https (web segura para Chrome)









#12 Velocidad de carga (WPO)

Otra de las tendencias a nivel técnico que más ha crecido durante el último año ha sido la optimización de los sitios web para que carguen en el menor tiempo posible.
La velocidad de carga rápida es fundamental por dos motivos:
  1. Beneficios para el SEO. Google quiere páginas rápidas.
  2. Usabilidad. El usuario también quiere webs rápidas. Si tu página es lenta, estás perdiendo un porcentaje importante de tráfico y conversiones.
Por lo tanto, debes optimizar al máximo tu web para que cargue en el menor tiempo posible.
Haz mediciones y test de velocidad con diferentes herramientas para comprobar el estado actual de tu sitio.
16 tendencias en diseño web para 2019
PageSpeed Insights (Google)
16 tendencias en diseño web para 2019
GTmetrix
16 tendencias en diseño web para 2019
Pingdom
Si necesitas más información sobre este tema, te dejo algunos posts en los que ya he hablado anteriormente de WPO:
Plugins para optimizar WordPress y acelerar la velocidad de carga9 herramientas para optimizar imágenes en WordPressClaves para mejorar el SEO y la velocidad de carga de WordPress

Tendencias de diseño web que vimos en 2018 y continuarán en 2019


En este segundo epígrafe quiero destacar una serie de tendencias de diseño web que han estado en vigor durante 2018 y que seguiremos viendo a lo largo de 2019, pues cuando algo está de moda, perdura por más tiempo y no “muere” automáticamente.

#13 Colores degradados

Los colores degradados los he usado durante todo este año y continuará siendo así en los próximos meses.
Estos efectos aportan al diseño un toque muy atractivo, moderno y creativo, y no hace falta decir mucho más de ellos.
Aquí te dejo un ejemplo de página que incluye varios elementos con efecto degradado:
16 tendencias en diseño web para 2019
Y otro ejemplo más con degradados en la cabecera:
16 tendencias en diseño web para 2019

#14 Animaciones

Otra tendencia que ha cobrado fuerza en el último año y continuará utilizándose en 2019 son las animaciones o elementos animados.
Como ya comentaba en el artículo del año pasado, hay que usarlas cuando estén justificadas y tengan sentido dentro del diseño, pues un exceso de ellas puede recargar el resultado.
Aquí puedes ver un ejemplo en el que las animaciones le dan al diseño un toque muy dinámico:
16 tendencias en diseño web para 2019

#15 Modulares

Otra de las formas de diseño muy utilizadas en los últimos meses han sido los modulos.
Los diseños modulares plantean la utilización de diferentes elementos por separado, pero integrados en un concepto común.
Además, se adaptan perfectamente a los diferentes dispositivos y tamaños de pantalla.
Un par de ejemplos:
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019

#16 Tipografías con personalidad

Por último, quiero hablar de otra técnica muy utilizada en el último año y que también estará presente en 2019, como es el uso de las tipografías con personalidad.
Las fuentes handwriting o técnicas como el lettering han cobrado mucho protagonismo en diseño web, pues aportan ese toque artesanal y hecho a mano que tiene tanto gancho.
Aquí puedes ver varios ejemplos con diferentes usos: frases destacadas, títulos de página y artículos de blog.
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019
16 tendencias en diseño web para 2019
Hasta aquí este repaso a las formas, técnicas y tendencias en diseño web para 2019 con los correspondientes ejemplos en cada una de ellas.
AutorMax Camuñas