Compartir en Facebook
Compartir en Twitter
Compartir en Linkedin
Página web Institut del cava
Publicado el 29/10/19
Tendencias en diseño web 2020
testviews 628
Si deseas estar al día y empezar el próximo año con buen pie, en este post vamos a cubrir las tendencias en diseño web para 2020. Canvas, 3D, big typos, contrastes, inteligencia artificial, machine learning, voice recognition, y mucho más.
Un año más aquí estamos, preparándonos para el siguiente. Ya prácticamente en noviembre, queremos estar a tope para el año que viene, y también queremos que nuestros visitantes lo estén. Así pues como es de costumbre, hemos preparado un post para hablar sobre lo que se va a llevar dentro del mundo del diseño web para el año 2020.
Este tipo de post es uno de los posts cornerstone de nuestro blog y por los que recibimos una gran cantidad de visitas e incluso solicitudes de presupuesto a lo largo de todo el año, por parte de usuarios que aterrizan en busca de las últimas tendencias en diseño web, gráfico y marketing. Es por ello que cada año le ponemos más esfuerzo, atención y dedicación que el anterior en la creación del post. Nuestro objetivo es ofrecer contenido de calidad para nuestros visitantes. Ya se trate de profesionales del diseño gráfico/web como de potenciales clientes en busca de inspiración para su nuevo website. Además el hecho de crear un contenido de calidad, nos ayuda a seguir rankeando en los buscadores. Ya sabéis: Content is king!
WOWWW TIO! ya tenemos el nuevo post de los mejores diseños web 2019-2020!!!! Haz click ahora!!
Posts de años anteriores que pueden interesarte: Tendencias en diseño web 2019 – Tendencias en diseño web 2018 – Tendencias en diseño web 2016
Tendencias en diseño web para 2020, be ahead
Tipografías aún más grandes
Una de las tendencias en diseño web para 2020, será sin duda el uso de tipografías de gran tamaño. No solamente en titulares, si no también en el cuerpo del texto general.
Con la masificación de las pantallas en formato panorámico con resoluciones altas y la bajada de precio en este tipo de pantallas que antes eran menos comunes, nos encontramos con que el tamaño de la tipografía para los cuerpos de texto ya está muy lejos de los 12 y 14 píxeles utilizados en los ya lejanos años 2010. Ahora perfectamente podemos utilizar tamaños de 20 píxeles hacia arriba siempre que el tipo de proyecto y website lo requiera.
Para titulares no hay un máximo en tamaño más allá que el buen gusto y el sentido común, por lo que atrévete utilizando tamaños gigantes que ofrezcan un gran contraste. Utilizar tamaños gigantes para titulares bien redactados dará personalidad a cualquier website que quiera destacar y estar preparado para lo que viene no sólo en 2020, si no, en los próximos años.
Cómo y cuando aplicarlo
Aplica esta tendencia web en websites que:
- Necesite de un diseño muy visual y de impacto
- Tengan poca imagen para mostrar y necesites un refuerzo visual de potencia. Utilizar tipografías grandes de forma descarada, dará el punto visual que necesitas
- No estén dirigidos a un público muy conservador
- Tengan un público objetivo con un equipo moderno, en especial, con pantallas grandes
Recuerda que:
- Deberás ajustar los tamaños en las distintas resoluciones de pantalla. Para ello crea las excepciones responsive, abarcando desde 2560px (pantalla grande) hasta los más comunes 1330px (pantalla de portatil)
- Presta especial atención a que los tamaños sean coherentes para la versión Mobile, ya que la mayoría de usuarios en la actualidad ya navega por internet
Websites que incorporan la tendencia
Rogue Studio
En este sitio web podéis ver claramente el uso de tipografías no grandes… si no EXTRA grandes. Y la verdad es que quedan geniales.
Estoy seguro que este website será uno de los candidatos para el post anual en el que recopilamos los mejores diseños web del año.
Granyon Summer Party
Otro gran ejemplo de la tendencia en diseño web aplicada a la perfección. Vemos que no solamente el titular principal y demás titulares, si no que el cuerpo del texto general es grande de por sí.
Team Elite Kickboxing
Para finalizar, el último ejemplo donde podemos ver aplicada la tendencia. Además, podemos ver cómo este website también utiliza a la perfección la tendencia para 2020 de la que hablaremos en el siguiente punto.
Contrastes, colores negativos y colores estridentes
El uso de contrastes y colores negativos es un recurso que lleva utilizandose cada vez más en los últimos años dentro del mundo del diseño y desarrollo web. De cara el año 2020, no va a ser distinto y vamos a ver websites de impacto, utilizando el recurso sin ningún tipo de complejo.
Desata tu lado más atrevido utilizando contrastes y colores vivos. Aplica filtros a las imágenes ya sea previamente con photoshop o similares o utilizando herramientas de desarrollo web más modernas como puede ser la utilización de los blending modes de CSS o incluso con el elemento canvas.
Cómo y cuando aplicarlo
Aplica esta tendencia web en websites que:
- Necesite de un diseño muy visual y de impacto
- No estén dirigidos a un público muy conservador
- Quieras llamar la atención y no dejar indiferente a nadie
Recuerda que:
- En websites corporativos dirigidos a empresas más conservadoras, este recurso debe ser utilizado de forma muy sutil
- Deberás aplicar el uso de contrastes de forma coherente, teniendo en cuenta la imagen corporativa y colores de la empresa/marca
- Aunque ofrezcan contraste, deberás tener en cuenta la armonía visual creando una paleta de colores coherente
Websites que incorporan la tendencia
Ninja guru
En este website podemos apreciar el uso de contrastes en su máxima expresión. Utilizan tanto colores negativos (blanco/negro) como contrastes estridentes (azul/naranja).
Festa da Francofonia 2019
Colores vivos, contrastes, elementos geométricos en movimiento… Un website que no dejará indiferente al visitante y el perfecto ejemplo para una de las tendencias clave en diseño web para 2020.
Kombu
En este website utilizan el contraste para el packaging creado en cada uno de los refrescos, como representación del sabor de la bebida concreta. El uso del efecto «wavy» para las líneas diagonales que coincide perfectamente con el del packaging es una genialidad. Un gran ejemplo en cuanto a la utilización no ya solo de contrastes si no de efectos JS con sentido, que mantiene la línea comunicativa formal para el tipo de producto que ofrece.
Experiencia mobile, aún más importante
A estas alturas todo el mundo sabe qué es el responsive web design o diseño web adaptable y como tal quizá no se trata de una de las tendencias en diseño web para 2020, al menos si lo pensamos como el «average» responsive webdesign.
Con el gran número de usuarios utilizando plataformas mobile para navegar por la red, es imprescindible pensar en este tipo de usuarios y ofrecerles una experiencia totalmente a medida y pensada para el dispositivo y su filosofía de utilización. Eso es, llevar el responsive webdesign a nuevas dimensiones.
Ya no basta con hacer un diseño web adaptable y punto. Ahora hay que pensar mucho más allá y tomar como ejemplo de usabilidad las APPs. Si conseguimos que el formato de navegación a través de nuestro website sea lo más parecido posible a una app, estaremos llegando nosotros al medio al que el usuario habita. Estaremos por delante.
Otro aspecto a cuidar al máximo cuando tratamos con usuarios mobile, es el hecho de ofrecer unos tiempos de carga totalmente optimizados.
Algunos tips
- Elementos como vídeos, será mejor no cargarlos con autoplay, ya que eso consumiría el ancho de banda del usuario y si se encuentra sin wifi le haremos una trastada
- Optimizar las imágenes, sirviendo versiones adaptadas a la anchura del dispositivo, nos ayudará a mejorar los tiempos de carga
- Utiliza menú tipo burger para comprimir los menús en un formato app-like
Websites que incorporan la tendencia
Nicholas Munt
Este website al utilizar ajax para cargar cada página, resulta muy mobile friendly, ya que se asemeja mucho al tipo de navegación y uso que tienen la mayoría de las apps.
Salmoon & Sons
Sobre este website en versión mobile, destacamos el slider con una funcionalidad para swipe totalmente mobile, ya que vemos la totalidad de la imagen deslizarse siguiendo nuestro dedo a la perfección. También tiene un muy buen menú tipo burger, que se desliza desde uno de los lados.
Volia
Como podéis ver, en este website se utiliza un tamaño de tipografías bastante grande, pero que incluso en versión mobile están muy bien tratadas. El menú burger también está muy bien desarrollado y ofrece una transición realmente interesante.
WOWWW TIO! ya tenemos el nuevo post de los mejores diseños web 2019-2020!!!! Haz click ahora!!
Cursores y scrolls personalizados
Una de las tendencias que más estamos viendo y que va en aumento de popularidad es la de crear cursores personalizados en sustitución del cursor default del propio navegador.
Estos cursores normalmente incorporan cierta intracción con los elementos del web site a su alrededor, cambiando por ejemplo el tamaño del mismo, el color, etc. Es una de las tendencias más recientes y que sin duda irá en aumento este nuevo año 2020.
Lo mismo con los scrollbars. Cada vez está más de moda la utilización de scrollbars totalmente personalizados, obviando los de navegador. Estos scrolls también vienen con un deslizamiento suave o smooth scrolling.
También estamos viendo cada vez más el no-uso de scrollbars, a pesar de que haya más contenido debajo. Esta tendencia cada vez más en alza, podéis dar por seguro que será una de las tendencias en diseño web para 2020. La realidad es que el usuario está tan acostumbrado a navegar utilizando el scroll down, que ya nos viene educado tras largos años de interacción con la web. De esta forma podemos empezar a plantearnos el no uso de scrolls, para crear una interfaz mucho más minimalista. Si el hecho de prescindir de la scroll bar nos intimida demasiado, siempre podemos llegar a un punto medio y optar por no poner scrollbar, pero ir guiando al usuario con el típico icono de «scroll down».
Cómo y cuando aplicarlo
Aplica esta tendencia web en websites que:
- Quieras aportar un extra de personalidad
- El usuario visitante es un usuario avanzado/acostumbrado al mundo online
Recuerda que:
- Deberás comprobar que el scroll funcione correctamente en los distintos navegadores
- En dispositivos mobile, es posible que el scroll haga cosas raras, por lo que lo mejor sería que lo ocultaras por completo
Websites que incorporan la tendencia
Aluxion
Podemos ver como disponemos de un scroll personalizado, formado por dos circumferencias. Una grande y otra pequeña. Se desplaza siguiendo nuestro cursor con un pequeño delay y además ofrece un hover muy vistoso. Además también dispone de una scrollbar personalizada, lo cual hace que el conjunto de todo el diseño quede completamente integrado.
Joseph Berry
Este cursor que es muy parecido al anterior, me ha parecido muy interesante y original por el hecho de incorporar la circunferencia exterior en formato tipográfico. Respecto del scrollbar en este caso se han decantado por ni siquiera utilizar y pienso que será tendencia web para 2020, ya que el usuario cada vez está más educado a hacer scroll de forma instintiva.
Matt VBRG
En este site concreto, podemos ver como el cursor interactua con todo el contenido del website, haciendo cambiar colores y aplicando efectos visuales muy llamativos, como el efecto cromado de las imágenes.
Canvas y elementos 3D con Three.js
La utilización de Canvas dentro de un diseño web es una de las tendencias que más protagonismo han ido cogiendo a lo largo de estos años y como es de esperar para 2020 será una de las tendencias en diseño web estrella y sin duda clave para conseguir crear websites de última generación.
Gracias a canvas podemos utilizar opengl para crear experiencias que traspasan los umbrales del html con creces. Y es que con canvas, somos totalmente libres para crear absolutamente cualquier cosa que se nos pase por la cabeza.
Uno de los aspectos del elemento Canvas que está siendo más explotado es el uso de las 3 dimensiones para crear profundidad y objetos 3D con los que interactuar. Llegando a extremos que consiguen que nuestro website, más que un website parezca prácticamente un videjuego.
Para crear estas experiencias 3D utilizando el elemento Canvas, tenemos la famosa librería Three.js. Gracias a Three.js podremos crear objetos 3D o importar modelos creados en programas de modelaje 3D. Además lo cañero del asunto es el hecho de poder interactuar con estos elementos, creando verdaderas experiencias inmersivas.
Sin duda el uso de Three.js para 3D será una de las principales tendencias en diseño web para 2020.
Cómo y cuando aplicarlo
Aplica esta tendencia web en websites que:
- Requieran de una gran experiencia creativa y visual
- Quieras impactar al visitante
- Necesites explorar nuevos métodos para comunicar mensajes de una forma mucho más actual e innovadora
Recuerda que:
- Hacer uso de una herramienta tan poderosa conlleva una gran responsabilidad. Piensa primero en la comunicación y después aplica lo necesario (generalmente, el diseño y la creatividad sirven a la comunicación y no a la inversa)
- Deberás prestar especial atención a los distintos dispositivos y navegadores para que tu experiencia tenga sentido en todos y cada uno de ellos
Websites que incorporan la tendencia
DMC2019
En este website podemos apreciar el uso de Three.js para la creación de un website muy singular, que está basado en un menú en 3 dimensiones a través del cual podemos navegar de forma dinámica a cada uno de los apartados. Además os fijáis, veréis que podéis subir hasta arriba del todo para ver el logotipo del evento que promociona la página web. Si por el contrario nos dirigimos a la parte inferior veremos que tenemos un mapa en 3 Dimensiones que nos muestra la localización del evento. Un perfecto ejemplo de una de las tendencias en diseño web para 2020 aplicada de forma elegante, estridente y super cañera. ¿Será este uno de los websites que figurarán en nuestro recopilatorio de mejores diseños web de este año?
Hack Wired
Otro ejemplo de la utilización de Three.js.
En este website han creado este especie de chicle en movimiento y con un cambio de forma que interactua con el movimiento del cursor. En este caso, el uso del elemento en 3D de three.js es un elemento meramente estético, pero en mi opinión bien aplicado para el tipo de conferencia que promociona el website en cuestión.
Vladimir Gruev
En este caso el desarrollador de este website, ha decidido utilizar la tecnología canvas para crear una experiencia de navegación totalmente diferente a cualquiera que haya visto nunca. Mediante un cubo 3D ha desarrollado tanto un menú super creativo como un formato de navegación y consumo de contenido totalmente innovador. Lo que está claro es que un tipo de usabilidad o experiencia como esta, solo puede ser utilizada para sitios web muy concretos y este es uno de ellos, así que «muscle tought» para el developer!
Canvas y efectos de distorsión en imágenes
Dentro del uso de Canvas, encontramos que una de las tendencias que van más en alza es el uso de distorsiones en imágenes para crear efectos llamativos y muy rompedores.
Apuntad esta tendencia como una de las más cotizadas del próximo año y de los que vienen, porque viene fuerte. Cada vez hay más sitios web de alta calidad gráfica que están incorporando este tipo de efectos. El uso de distorsiones ha venido para quedarse un largo tiempo.
Para este próximo 2020 toca ponerse las pilas y empezar a tocar cositas para crear efectos grunge y morphings para estar al día en cada proyecto de diseño web.
Una de las librerías más utilizadas para crear este tipo de efectos es la libreria Pixi.js. Echadle un ojo porque en pocos minutos de aprendizaje podéis crear experiencias muy interesantes y distintas. Experiencias que harán que tu website destaque muy por encima del resto.
En youtube econtraréis infinidad de tutoriales que explican cómo hacer efectos super cañeros.
Cómo y cuando aplicarlo
Aplica esta tendencia web en websites que:
- Quieras darle un toque de creatividad
- Quieras que destaquen y no queden como un sitio web plano sin mucho más
- Quieras experimentar con cosas locas. El límite lo pones tu
Recuerda que:
- Hacer uso de una herramienta tan poderosa conlleva una gran responsabilidad. Piensa primero en la comunicación y después aplica lo necesario (generalmente, el diseño y la creatividad sirven a la comunicación y no a la inversa)
- Deberás prestar especial atención a los distintos dispositivos y navegadores para que tu experiencia tenga sentido en todos y cada uno de ellos
Websites que incorporan la tendencia
Francesco Michelini
El sitio web de este developer es uno de los ejemplos en los que podéis apreciar el impacto que tiene el uso de canvas en elementos como fotografías para crear distorsiones. En este caso, el efecto de la distorsión se aplica conforme hacemos scroll. También podemos apreciarlo en el momento en que hacemos hover en la tipografía donde muestra los proyectos en los que ha trabajado. Fácilmente podéis pensar en cómo quedaría el mismo sitio web sin el uso de estos efectos. Quedaría como un sitio muy correcto a nivel de diseño y con muy buena ejecución, pero a la que le añadimos el efecto con canvas, pasa directamente a otro nivel.
Julio Cesar
En este website, podéis ver el uso de distorsiones junto con morphings de una forma que queda super impactante y visual. Estoy seguro de que el website no deja indiferente a ninguno de sus visitantes.
Violence
Aquí podemos apreciar otro ejemplo del uso de efectos grunge y distorsiones en imágenes. Además el website trae sorpresa si hacéis click en cualquier área del site. Probadlo y veréis.
Bonus track: Machine learning, inteligencia artificial y voice recognition
Nos salimos un poco del área más visual y pasamos a un tipo de tendencia mucho más enfocada a la funcionalidad y es que en este aspecto, cuando hablamos de machine learning, inteligencia artificial y el uso del reconocimiento de voz, hay mucha chicha de la que hablar.
Algunos sitios web que están utilizando machine learning son Amazon, Pinterest, Twitter, Google, Instagram y otras grandes compañías. Y no es de extrañar.
Gracias al uso del machine learning en nuestro website podremos ofrecer al usuario un contenido mucho más adecuado a lo que espera encontrar y por lo tanto una mejor experiencia, lo cual llevará a un mayor engagement.
Dentro del Voice Recognition, encontramos los smartphones de por si, junto con sus asistentes virtuales con los que podemos interactuar y pedirle cosas como hacer una llamada, enviar un whatsapp o buscar cualquier cosa por internet. También disponemos de dispositivos como Google Home o Amazon Alexa a través de los cuales podemos interactuar con elementos de nuestra propia casa: reproducir canciones, controlar la televisión, obtener respuestas a dudas que tengamos, etc. A este campo aún le queda mucho por explorar, pero sin duda va a dar mucho sobre lo que desarrollar y con ello, va a traer cambios también para la web y cómo interactuamos con ella.
El objetivo es ofrecer la máxima comodidad y experiencia más directa posible al usuario final.
Cómo y cuando aplicarlo
Aplica esta tendencia web en websites que:
- Sean del tipo ecommerce. De esta forma podrás ofrecer productos especificos para cada tipo de usuario, estudiando su perfil de compras.
- Requieran de un formato de navegación y experiencia moderna. Deberás ser creativo y explorar diferentes formatos ya que aún hay mucho por hacer y en este aspecto, muy poco de lo que «copiar». Así que adelantate y se tu del que se copien.
Recuerda que:
- Deberás mantener la cordura y no utilizar este tipo de tecnología «for the sake of it». Utilizala en casos necesarios y de formas realmente prácticas.
Websites que incorporan la tendencia
Amazon, Pinterest, Twitter, Google
WOWWW TIO! ya tenemos el nuevo post de los mejores diseños web 2019-2020!!!! Haz click ahora!!
Conclusiones y resumen para vagos
Como habéis visto, las tendencias en diseño web para 2020 que vienen, no son muy distintas de las que ya teniamos en años anteriores. Simplemente hay que sacar como reflexión que a nivel de front end, hay que empezar a prestar mucha atención al uso de Canvas para crear gráficas potentes y de impacto. Algunas de las librerías para crear este tipo de experiencias web, son Three.js para 3D y Pixi.js para 2D.
Resumiendo las tendencias:
- Utiliza tipografías grandes. Muy grandes. Sin complejos.
- Crea contrastes y juega con los colores negativos
- Enfócate en crear una experiencia única para mobile
- Dale personalidad a tu website utilizando cursores y scrollbars personalizados
- Utiliza canvas y elementos 3D, Three.js es la librería más común y extendida
- Utiliza canvas para elementos 2D y juega con distorsiones en imágenes
- 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
Este año hemos decidido darle al post sobre las tendencias en diseño web para 2020 un enfoque un poco distinto al de otros años y es que hemos apoyado cada una de las tendencias de unos breves tips para utilizarla y ponerla en práctica de forma efectiva, además de ofrecer 3 ejemplos de websites donde están aplicadas las tendencias en diseño web. El objetivo ha sido que tengáis un abanico mayor para vuestra inspiración.
Disclaimer
Suele ser común que la gente nos comente cosas del tipo «pero esta tendencia concreta ya se estaba utilizando el año pasado y el otro». Y sí, hay tendencias que evidentemente ya llevan tiempo utilizandose y que seguirán utilizandose por un buen tiempo más. Es por ello, que si estáis metidos en el meollo algunas tendencias puede ser que ya las conozcáis. Para los que no están dentro del mundo del diseño web o diseño gráfico, seguro que les es de gran utilidad el hecho de conocer los principales protagonistas en cuanto a recursos de diseño web.
comentarás de forma anónima