16 tendencias en diseƱo web para 2019 + ejemplos

Autor: Max CamuƱas

Fecha: 03/12/2018

Ahora que el aƱo llega a su fin es el momento de observar cuĆ”les van a ser las tendencias en diseƱo web para 2019.

Algunas de ellas ya han empezado a verse (yo mismo las estoy aplicando en mis diseƱos) y otras fueron tendencias de diseƱo web en 2018 y seguirĆ”n estando presentes a lo largo del prĆ³ximo aƱo.

Por lo tanto, en este post te traigo las tendencias en diseƱo web para 2019 con ejemplos de cada una de ellas.

16 tendencias en diseƱo web para 2019


Veamos 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: ancho completo

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: elementos de gran tamaƱo
16 tendencias en diseƱo web para 2019: elementos de gran tamaƱo
16 tendencias en diseƱo web para 2019: elementos de gran tamaƱo

#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 + ejemplos
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: tipografƭas gigantes
16 tendencias en diseƱo web para 2019: tipografƭas gigantes

#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 + ejemplos
16 tendencias en diseƱo web para 2019: colores intensos y brillantes

#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: mĆ³vil
versiĆ³n escritorio

16 tendencias en diseƱo web para 2019: mĆ³vil
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: chatbots

#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: diseƱos one page
16 tendencias en diseƱo web para 2019: diseƱos one page

#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: estructuras asimƩtricas
16 tendencias en diseƱo web para 2019: estructuras asimƩtricas

#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: formas geomƩtricas
16 tendencias en diseƱo web para 2019: formas geomƩtricas

#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: https

sin https (web no segura para Chrome)

16 tendencias en diseƱo web para 2019: https

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: WPO
PageSpeed Insights (Google)
16 tendencias en diseƱo web para 2019: WPO
GTmetrix
16 tendencias en diseƱo web para 2019: WPO
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 carga 9 herramientas para optimizar imƔgenes en WordPress Claves 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: colores degradados

Y otro ejemplo mƔs con degradados en la cabecera:

16 tendencias en diseƱo web para 2019: colores degradados

#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: animaciones

#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: diseƱos modulares
16 tendencias en diseƱo web para 2019: diseƱos modulares

#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 + ejemplos
16 tendencias en diseƱo web para 2019: tipografƭas

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.

Si vas a diseƱar o rediseƱar tu web en los prĆ³ximos meses, solo tienes que escoger la tendencia que mejor se adapta a tu proyecto y refleja sus valores y personalidad šŸ˜‰

Portada: web design concept (shutterstock by robuart)

Summary
16 tendencias en diseƱo web para 2019 + ejemplos
Article Name
16 tendencias en diseƱo web para 2019 + ejemplos
Description
Descubre cuĆ”les son las 16 tendencias en diseƱo web para 2019, los formatos y tipos de diseƱo mĆ”s actuales y que mĆ”s vamos a ver durante los prĆ³ximos meses.
Author
Publisher Name
Max CamuƱas
Publisher Logo

24 Comentarios

  1. Alex Castro

    Ā”Ā”Genial!! Estas tendencias vienen estupendas para personas como yo, que intentamos pelearnos solos frente al peligro con nuestras webs.

    Muchas gracias por el aporte Max.

    Responder
    • Max CamuƱas

      Hola Ɓlex šŸ™‚

      Muchas gracias! Mi consejo: elige una o dos tendencias y dale caƱa a tu web šŸ˜‰

      Abrazo!

      Responder
  2. Isabel Santiandreu

    Me ha encantado el post. Ha complementado muy bien a la clase que nos diste en la Escuela Marketing and Web. Solo me queda ponerme manos a la obra. En cuanto al recurso del video como fondo de cabecera, si mi web es sonre marca personal, Āæmejor imagenes compradas tipo a los ejemplos que has puesto o mejor video en el que salga yo mezclado con video de bancos? ĀæQue opinas sobre esto? Gracias

    Responder
    • Max CamuƱas

      Hola Isabel,

      Muchas gracias!

      Pues depende de mensaje que quieras transmitir con el vĆ­deo, pero si es una web de marca personal, te recomiendo usar recursos propios y no de banco.

      Gracias por pasarte.

      Responder
  3. Nelson DĆ­az

    Saludos amigo Max, otra genial publicaciĆ³n, a partes iguales felicitaciones y agradecimiento para ti amigo.
    Con respecto a los chatbots hermano, ĀæalgĆŗn servicio que puedas recomendar? He visto por allĆ­ un plugin gratuito llamado Clientity, dada la importancia que este elemento puede tener agradezco mucho tu opiniĆ³n.
    Que sigan y se multipliquen tus Ć©xitos amigo mio. Saludos desde Venezuela.

    Responder
    • Max CamuƱas

      Hola Nelson,

      No conozco Clientity, sorry!

      Cuando he tenido que vincular alguna web con un chatbot porque el cliente me lo ha pedido, has ido con redes sociales (Facebook Messenger o WhatsApp).

      Saludos

      Responder
      • Nelson DĆ­az

        Muchas gracias por tu respuesta amigo, investigare al respecto. Saludos.

        Responder
  4. Edu Rubianes

    Muy buena entrada, Max. La verdad es que de un tiempo a esta parte el diseƱo de pƔginas web ha evolucionado mucho y hay verdaderas pasadas de pƔginas!

    Estas tendencias van a estar muy arriba, seguro!

    Un abrazo.

    Responder
  5. Roberto DĆ­az

    Me ha encantado el artĆ­culo, muy bueno, Max.
    Un saludo y Feliz AƱo, mƔquina!!

    Responder
  6. CĆ©sar

    Excelente! me encantĆ³ el aporte. Muchas Gracias, Max.

    Responder
  7. Evan

    Hola Max, ya he pasado varias veces por tu blog y es TOP. Tengo una duda respecto a la estructura web. He oĆ­do que lo ideal es tener solo 7 u 8 pĆ”ginas de primer nivel y que las demĆ”s deben tener una pĆ”gina superior. ĀæEs eso cierto? En mi caso, tengo 6 servicios los cuales no tienen un nivel superior y que muestro en mi menĆŗ dentro de un desplegable. Contando los servicios, blog, contacto, tĆ©rminos y condiciones etc. me planto en casi 12 hojas sin pagina superior. ĀæEs malo para el SEO?

    Responder
    • Max CamuƱas

      Hola Evan,

      Tu web debe tener las pĆ”ginas que necesites, cada proyecto es un mundo. A nivel de usabilidad, sĆ­ que te recomiendo tener 5 o 6 como mĆ”ximo en el menĆŗ superior.

      En cuanto a los servicios, te recomiendo tener una pƔgina madre en la que aparezcan todos y luego subpƔginas para cada uno de ellos.

      Ejemplo:

      dominio.com/servicios
      dominio.com/servicios/1
      dominio.com/servicios/2
      dominio.com/servicios/3

      Por otro lado, las pƔginas complementarias como tƩrminos y condiciones, aviso legal o las diferentes polƭticas te recomiendo que estƩn desindexadas y las coloques en el footer de la web.

      Espero haberte ayudado.

      Saludos

      Responder
  8. Luis Gonzalez

    Que gran aporte Max….Eres un dios…Saludos desde PerĆŗ.

    Responder
  9. Alicia GonzƔlez

    Hola Max!

    MuchĆ­simas gracias por tan buen post.

    Estoy trabajando en el rediseƱo de mi web (y escuela online) y tu artƭculo me viene que ni pintado.

    Gracias por el aporte de valor!

    Un abrazo.

    Alicia

    Responder
    • Max CamuƱas

      Hola Alicia,

      Me alegro mucho de que te sea Ćŗtil šŸ™‚

      Gracias por pasarte!

      Responder
  10. Jose

    Muchas gracias por la informaciĆ³n. Me es de gran utilidad para mis diseƱos.

    Responder
  11. Mariela

    Hola que genial esta tu post!! gracias totales!!

    Responder
  12. Anderson

    QuƩ articulo tan bacano y tan chevere de leer, muy buen aporte.
    Gracias

    Responder
  13. Ruben

    La web ha muerto? Vivo 100% de mis negocios de creaciĆ³n de contenido desde el aƱo 2011. Hoy en dĆ­a las visitas a mis sitios ha disminuĆ­do en un 60 a 80 por ciento… No sĆ© que hacer pero creo que la gente ahora pasa el tiempo en Youtube, Instagram y Facebook y el nĆŗmero de lectores de blogs cada vez se estĆ” reduciendo mĆ”s.

    Responder
    • Max CamuƱas

      Hola RubƩn,

      Para nada šŸ™‚ La web y el blog no han muerto, todo lo contrario en mi opiniĆ³n. Las redes sociales son un canal muy importante hoy en dĆ­a para comunicar tu mensaje, pero a la vez son terreno prestado. Es decir, todo lo que hagas en tu web queda para tu negocio y lo controlas al 100% (con las redes sociales dependes de su algoritmo y sus reglas del juego, que van cambiando con el paso del tiempo).

      Si tienes un negocio digital y vives de Ć©l, mi consejo es que inviertas en tu web a nivel de diseƱo, SEO, branding, contenidos y estrategia de captaciĆ³n de clientes.

      Gracias por comentar!

      Saludos

      Responder
  14. Maite

    Muy buen articulo Ā”me encantĆ³!

    Responder

Enviar un comentario

Tu direcciĆ³n de correo electrĆ³nico no serĆ” publicada. Los campos obligatorios estĆ”n marcados con *

Para cumplir con el nuevo RGPD y que tus datos estƩn a salvo, debes leer y aceptar mi polƭtica de privacidad. Tus datos serƔn guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max CamuƱas y te doy la bienvenida a mi blog (mi casa).

Por aquĆ­ hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseƱo de su web desde cero.

Ā”MƁS SOBRE Mƍ!

masterclass
CƓMO PLANIFICAR TU PƁGINA WEB PARA QUE TU NEGOCIO BRILLE
Ā”accede gratis!