93 792 27 62
  • Contacta
  • Llamar ahora Enviar whatsapp
    Publicado el 16/11/20

    Tendencias en diseño web 2021



    testviews 96

    Bienvenido al post anual de tendencias en diseño web de 2021. Un recorrido para estar preparado para lo que viene empujando en diseño web.

    Utilízalo como fuente de inspiración para tus diseño web. No voy a resumirte las tendencias todavía. Lo mejor es que le des un vistazo al artículo que con tanto mimo hemos preparado especialmente para ti.

    A lo largo del artículo iremos viendo todas las tendencias en diseño web para 2021, conoceremos sus particularidades, aprenderemos los tips que hay que tener en cuenta, el resultado que obtendremos y finalmente terminaremos cada una de las tendencias en diseño web de 2021 con 3 ejemplos reale en los que ya se vislumbra el uso de estos recursos.

    WOWWW TIO! ya tenemos el nuevo post de los mejores diseños web 2020-2021!!!! Haz click ahora!!

    Posts de años anteriores que pueden interesarte: Tendencias en diseño web 2019Tendencias en diseño web 2018Tendencias en diseño web 2016

    Tendencias en diseño web para 2021, go

    Diseño web asimétrico

    tendencia-diseno-web-2021

    Durante muchos años los diseños web se han basado en una estructura en cuadrícula que ha funcionado muy bien durante mucho tiempo porque ayuda a poder ver el contenido de forma clara y directa. Sin embargo el punto negativo que esta forma de trabajo tiene es la falta de personalidad del site.

    De este modo una de las tendencias en diseño web para el 2021 es el diseño web asimétrico.

    Esto rompe por fin con el mal uso de plantillas preestablecidas y themes de pago que están carentes de personalidad.

    El reto para los diseñadores web aquí es conseguir que el nuevo diseño asimétrico mantenga el equilibrio para que la información no se pierda.

    Cómo y cuándo aplicarlo

    Aplica esta tendencia web en websites que:

    1. Necesite de un diseño muy visual y de impacto
    2. No estén dirigidos a un público muy conservador
    3. Quieras llamar la atención y no dejar indiferente a nadie

    Recuerda que:

    1. Recuerda que, independientemente del enfoque, el usuario tiende a fijar su atención en los elementos grandes.
    2. Tendrás que hacer pruebas de usuario para saber si tu diseño web funciona realmente y no se pierda la información
    3. Algunos clientes se mostrarán reacios a este tipo de diseño así que prepárate para venderlo muy bien.

    Websites que incorporan la tendencia

    Aebele Interiors by EXO APE

    mejor-diseno-web-2021-aebeleinteriors-01

    Link al website

    En esta página web tenemos un buen ejemplo de diseño web asimétrico. Los elementos aparecen a diferentes tiempos y se desplazan por la pantalla a diferentes velocidades y, por supuesto, están colocados de forma asimétrica.

    M-trust Co by Lic Inc

    mejor-diseno-web-2021-mu-trust-01

    Link al website

    Otro ejemplo de diseño web asimétrico en el que los elementos que aparecen en la web no están alineados ni el la horizontal ni en la vertical y, sin embargo, conforman un conjunto excelente.

    El resultado es un diseño muy innovador que nos atrae y no nos deja escapar.

    The araw collection by Zhenya Rynzhuk

    mejor-diseno-web-2021-araw-limnia-01

    Link al website

    Una vez más un diseño web asimétrico con el que poder romper con el tradicional diseño en cuadrícula visto hasta el momento.

    Podemos apreciar como el resultado es una página web mucho más dinámica y atrevida.

    WOWWW TIO! ya tenemos el nuevo post de los mejores diseños web 2019-2020!!!! Haz click ahora!!

    Scroll combinado

    tendencia-diseno-web-2021-nextbigthing-1

    Se trata de navegar por la página web de forma dinámica y fácil, en este sentido la tendencia en diseño web para 2021 va a ser encontrarnos con páginas web en las que la navegación mediante el scroll sea parte esencial del recorrido del usuario.

    Scroll vertical con navegación horizontal es algo a lo que nos vamos a tener que acostumbrar como parte de un diseño web completo que entiende el diseño en todas sus dimensiones.

    Con este recurso el usuario podrá navegar por las diferentes partes de la página web de forma más interactiva y eso le dará una nueva visión y resultado a todo el diseño web convirtiéndolo en un site de recorrido.

    El resultado es una experiencia de usuario mucho más rica que se verá apoyada por este recurso que reforzará la idea de que le estamos contando una historia mediante un recorrido con inicio y final infinito.

    Cómo y cuándo aplicarlo

    Aplica esta tendencia web en websites que:

    1. Quieran mejorar la UX
    2. Quieras llamar la atención y no dejar indiferente a nadie
    3. Luchen por estar a la última en tendencias en diseño web

    Recuerda que:

    1. El uso de un scroll vertical debe aplicarse cuando sea necesario.
    2. El diseño debe estar muy bien planteado para que el scroll combinado no sea un inconveniente a la hora de navegar
    3. Para combinar diferentes tipos de scroll hay que saber desarrollar muy bien el diseño.

    Websites que incorporan la tendencia

    Dwl Media by

    tendencia-diseno-web-2021-dwl-3

    Link al website

    Un ejemplo de navegación con scroll vertical y contenido que aparece en formato horizontal.

    El resultado es altamente dinámico y fresh.

    Ussr Obys Agency by

    tendencia-diseno-web-2021-dwl-3

    Link al website

    Otro maravilloso ejemplo de navegación en scroll vertical en el que mediante la rueda del ratón vamos completando el recorrido por la página web.

    El resultado es un diseño web mucho más fresco y dinámico.

    Tiger Tells by

    tendencia-diseno-web-2021-tiger-tells-about-voodoo-6

    Link al website

    El mejor ejemplo de scroll combinado, un diseño web y un desarrollo web en el que vemos perfectamente aplicada esta tendencia en diseño web para 2021.

    Super Menú Burguer

    Uno de los ongoings trends en diseño web es el menú burguer desplegable a fullscreen que, como su nombre indica, es un app like de diseño web.

    Sin duda marcará tendencia en 2021 y es una mezcla de algunas tendencias en diseño web como el uso de grandes tipografías y del burguer menú.

    Con este tipo de menú a fullscreen la línea entre un diseño web de desktop y el diseño web de teléfono móvil queda difuminada ya que lo que se pretende es que el usuario tenga la sensación en todo momento de estar navegando a través de un dispositivo portátil.

    Si se plantea una estructura web correcta este recurso es muy bueno para facilitar la navegación del usuario, mejorar la UX y potenciar su tiempo.

    Cómo y cuándo aplicarlo

    Aplica esta tendencia web en websites que:

    1. Estés buscando un diseño app like
    2. Para páginas web con pocos o muy definidos apartados
    3. Causar sensación a primera vista

    Recuerda que:

    1. La arquitectura de la web debe estar muy clara para que este recurso funcione
    2. Un diseño app like es vital para que la UX sea magnífica así que lucha para que tu cliente lo entienda
    3. Puedes ir un paso más allá y aportar algo más de contenido al menú abierto, como por ejemplo información del footer.

    Websites que incorporan la tendencia

    Evolution Deposit Photos

    tendencia-diseno-web-2021-evolution-depositphotos-2

    Link al website

    El diseño de depositphotos nos ofrece un ejemplo de menú burguer desplegable con muchas opciones.

    Dale un vistazo a como aprovechan el espacio para mostrar información detallada y mejorar la navegación por el contenido.

    Black Meal

    tendencia-diseno-web-2021-blackmeal-1

    Link al website

    Un super burguer menú que no tiene pérdida con el que queda claro el uso de esta tendencia en diseño web con una arquitectura web muy bien definida.

    El resultado es un diseño web app like con el que nos sentimos muy cómodos.

    Ripe Planet

    tendencia-diseno-web-2021-ripeplanet-1

    Link al website

    Por último un diseño web que aplica el super burguer menú en todo su esplendor y en el que se aprovecha el espacio para colocar información de footer como los enlaces a redes sociales y un contacto directo.

    El resultado es un diseño web que nos recuerda el diseño de una aplicación de teléfono móvil.

    Organic Shapes

    organic-shapes-alessandra-zanghi-studio-1

    Se trata de incorporar recursos gráficos en el diseño web que tengan formas orgánicas y alejarse de los vértices en ángulo. Usando este recurso conseguimos que la página web tenga un aspecto más orgánico y natural.

    Esta tendencia en diseño web de 2021 está pensada para acercarse al usuario y que este tenga una navegación muy natural y tranquila aunque también se puede utilizar como contrapunto con un contenido muy agresivo.

    El contraste entre contenido y continente es un recurso que, bien empleado, dará un boost de mejora a nuestro diseño web y a la experiencia del usuario.

    Cómo y cuándo aplicarlo

    Aplica esta tendencia web en websites que:

    1. Necesiten recursos orgánicos para contrastar con el contenido
    2. Queramos que el usuario tenga una navegación suave y tranquila
    3. Acercarnos al usuario

    Recuerda que:

    1. No es apto para desarrolladores sin talento
    2. Hay que saber aplicarlo para que el resultado forme parte de un todo
    3. No todos los proyectos aguantan este tipo de recursos

    Websites que incorporan la tendencia

    Alessandra Zhanghi by Adoratorio

    organic-shapes-alessandra-zanghi-studio-2

    Link al website

    Un diseño web que aplica esta tendencia para acercarse al usuario y que este tenga una navegación suave y tranquila.

    El resultado es justamente el deseado, acabamos el recorrido con una sensación muy tranquila.

    Thibaut Foussard

    organic-shapes-thibautfoussard-1

    Link al website

    Se ha aplicado el organic shape trend combinado con un tratamiento muy agresivo como contrapunto.

    Acabamos nuestro recorrido por esta página web con sentimientos encontrados que no nos deja indiferentes.

    Nahel Moussi 

    organic-shapes-nahelmoussi-1

    Link al website

    El ejemplo más soft de esta tendencia en diseño web.

    Consigue lo que promete, una experiencia muy suave y tranquila.

    WOWWW TIO! ya tenemos el nuevo post de los mejores diseños web 2019-2020!!!! Haz click ahora!!

    3D Content

    3d-content-mav-farm-2

    La tecnología en diseño y desarrollo web cada vez es más potente, la realidad es que las máquinas que tenemos frente a nosotros cada vez son más potentes y capaces de aguantar diseño y desarrollos con elementos en 3D e incluso nos permiten poder interactuar con ellos.

    A eso hay que sumarle que el ancho de banda cada vez es más grande así que preparaos para diseño con elementos en 3D muy potentes, es una tendencia en diseño web para 2021 que veremos crecer hasta el infinito.

    El resultado son diseños web con un aspecto innovador y vanguardista con el que se mejora notablemente la imagen digital de la empresa.

    Cómo y cuándo aplicarlo

    Aplica esta tendencia web en websites que:

    1. Necesite de un diseño muy visual y de impacto
    2. Solo apto para un público con ganas de estar a la última en diseño y desarrollo web
    3. Quieras llamar la atención y no dejar indiferente a nadie

    Recuerda que:

    1. No apto para desarrolladores con un nivel medio de programación
    2. Si no lo haces bien el resultado es contraproducente
    3. Algunos clientes se mostrarán reacios a este tipo de diseño así que prepárate para venderlo muy bien.

    Websites que incorporan la tendencia

    Virgin Hyperloop

    3D-content-virginhyperloop-2

    Link al website

    Un diseño que incorpora elementos en 3D con los que se puede interactuar de forma sencilla.

    El resultado es una experiencia muy innovadora.

    Centogene Solutions by Marvin Schwaibold

    3d-content-solutions-centogene-1

    Link al website

    Un diseño en el que los elementos 3D tienen un papel predominante y que nos muestran el resultado de usar esta tendencia en diseño web en 2021.

    Acabamos el recorrido con la sensación de estar frente a una empresa muy innovadora.

    VCSwipe by Marvin Schwaibold

    3d-content-vcswipe-2

    Link al website

    Otro ejemplo en el que esta tendencia en diseño web para 2021 está presente, con este recurso el contenido de la página web queda muy bien apoyado por recursos gráficos en 3D.

    El resultado es un diseño web muy bien resuelto y apoyado por elementos en 3D.

    Inteligencia Artificial

    No voy a engañar a nadie la Inteligencia artificial todavía anda en pañales por casa y está intentando andar a dos patas pero eso no es motivo para obviar el echo que el machine learning es una herramienta muy potente que hace que nuestra experiencia como usuarios sea muy interesante.

    Se empieza a vislumbrar los primeros intentos de aplicar esta tecnología tan potente a los diseños web y estamos frente a una de las tendencias que veremos crecer poco a poco y a formar parte activa de los diseños y desarrollos web.

    Cómo y cuándo aplicarlo

    Aplica esta tendencia web en websites que:

    1. Quiera jugar con la inteligencia artificial
    2. No estén dirigidos a un público muy conservador
    3. Sorprender al usuario con una experiencia web innovadora

    Recuerda que:

    1. El diseño y el desarrollo serán muy complejos
    2. No es apto para todos los públicos ni para todos los creadores
    3. Será una experiencia cercana a la I.A pero no se puede conseguir nada más de momento por razones de conocimiento

    Websites que incorporan la tendencia

    Discover your fashion DNA

    Link al website

    En esta página web podemos encontrar nuestro look perfecto mediante un desarrollo web en el que el nuestras respuestas se entrelazan con información de around the world para devolvernos el resultado.

    Acabamos la experiencia con muy buen sabor de boca y con ganas de que la tecnología nos permita llegar más allá.

    WOWWW TIO! ya tenemos el nuevo post de los mejores diseños web 2019-2020!!!! Haz click ahora!!

    Story Line

    Link al website

    En pleno lockdown se habilitó esta página web en la que los usuarios de todo el mundo podían dejar sus mensajes y crear una historia mundial del encierro durante el Covid-19.

    Alone with me

    Link al website

    Una experiencia totalmente personal en la que podrás hablar con The Weeknd y conversar sobre ti, se ha usado tecnología deep learning y los datos preexistentes de Spotify para que la experiencia sea real like.

    Hero home

    tendencia-diseno-web-2021-ripeplanet-1

    El uso de tipografías grandes es tendencia en diseño web y como resultado y por evolución natural ha dado pie a un nuevo recurso que va a ser tendencia en diseño web en 2021.

    La hero home son pantallas de inicio en las que el elemento predominante es la tipografía y el texto.

    Como si se tratara de la portada sensacionalista de un periódico este recurso busca impactar de forma directa en el usuario con frases muy potentes, definitorias de la empresa y en la que la tipografía es el elemento principal.

    Cómo y cuándo aplicarlo

    Aplica esta tendencia web en websites que:

    1. Necesite de un diseño muy visual y de impacto
    2. No estén dirigidos a un público muy conservador
    3. Quieras llamar la atención y no dejar indiferente a nadie

    Recuerda que:

    1. Recuerda que, independientemente del enfoque, el usuario tiende a fijar su atención en los elementos grandes.
    2. Tendrás que hacer pruebas de usuario para saber si tu diseño web funciona realmente y no se pierda la información
    3. Algunos clientes se mostrarán reacios a este tipo de diseño así que prepárate para venderlo muy bien.

    Websites que incorporan la tendencia

    1987 Masters

    Link al website

    Un ejemplo en el que esta tendencia en diseño web para 2021 ya se ha aplicado como muestra de innovación y vanguardismo.

    El resultado es una hero home en toda su esplendor en el que la tipografía es elemento principal y mayoritario.

    Fledge

    mejor-diseno-web-2021-fledge-01

    Link al website

    Otro ejemplo de hero home en el que se combina texto de gran tamaño con imagen.

    El resultado, una vez más, es contundente y efectivo.

    Markus

    Link al website

    Un ejemplo 100% hero home, nada más llegar a la página web vemos como se emplea este recurso de forma muy directa.

    El resultado es una home muy potente y contundente de la que no se puede escapar sin absorber la información.

    Conclusiones y resumen para vagos

    Como veis las tendencias en diseño web para 2021 son la evolución natural de algunas tendencias del año pasado que, se han ido perfeccionando y han dado a luz a nuevos recursos gráficos totalmente particulares e individuales.

    Resumiendo las tendencias:

    • Utiliza las tipografías para crear menús burguer de gran tamaño.
    • La tipografía gigante te servirá para apoyar tus home y darles una nueva vuelta de tuerca.
    • Cúrrate el diseño y el desarrollo de elementos 3D y si puedes que sean interactivos.
    • Enfócate en crear una experiencia única para mobile
    • Utiliza canvas y elementos 3D, Three.js es la librería más común y extendida
    • Implemente machine learning e inteligencia artificial para convertir más. Empieza a pensar en cómo aplicar el voice recognition en tus proyectos, ya que es el futuro próximo.

    Sobre el post

    Un año más hemos seguido el formato que tan bien nos funcionó el año pasado y en el que además de tratar y describir cada una de las tendencias en diseño web de 2021 también ponemos algunos de los ejemplos que ya se han visto.

    También tenemos tres tips para el uso de cada tendencia y lo que vas a conseguir con cada una de ellas.

    Disclaimer

    Dependiendo de tu interes y implicación en el diseño web este artículo será más o menos interesante para ti, no.

    No es nuestra pretensión sentar cátedra sobre las tendencias en diseño web, esta es nuestra opinión y no está cerrada.

    Suscríbete y mantente inspirado
    El autor: Daniel Edho
    Project Manager
    Daniel Edho es un fotógrafo, diseñador gráfico y en proceso de
    programador web, ubicado en el Maresme, Barcelona.
    Collector-Survival-Nomad-Bitter-Gamberro-Traveller- Ruralfighter - Hobo - Homie
    www.edhofotografia.com
    ¿Quieres empezar un proyecto?
    Trabaja con nosotros
    Mantente inspirado con nuestra newsletter
    Mejores cursos de diseño gráfico 2019 2020
    leer más
    Hemos ganado la plata en International Design Awards
    leer más
    Tus datos Si no rellenas tus datos,
    comentarás de forma anónima
    Publicar e inscribirme a la newsletter
    Publicar y no inscribirme a la newsletter
    Recordar datos para comentar rápidamente
    Cuéntame las últimas novedades

    Blog & Proyectos

    Un espacio para todo aquel interesado en diseño web,
    diseño gráfico y marketing online.
    serviciosdiseño webbranding integraldiseño de catálogosdesarrollo web
     diseño de logoscreación de landing pagesdiseño de tiendas onlinediseño de packaging
    contacta ahora - 93 792 27 62 - info@codewebbarcelona.com
    Pedir presupuesto