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!
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
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.
Aplica esta tendencia web en websites que:
Recuerda que:
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.
El uso de contrastes y colores negativos es un recurso que lleva utilizándose 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.
Aplica esta tendencia web en websites que:
Recuerda que:
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.
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.
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.
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 interacció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».
Aplica esta tendencia web en websites que:
Recuerda que:
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 interactúa con todo el contenido del website, haciendo cambiar colores y aplicando efectos visuales muy llamativos, como el efecto cromado de las imágenes.
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.
Aplica esta tendencia web en websites que:
Recuerda que:
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 interactúa 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!
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.
Aplica esta tendencia web en websites que:
Recuerda que:
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.
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.
Aplica esta tendencia web en websites que:
Recuerda que:
Amazon, Pinterest, Twitter, Google
Como habéis visto, las tendencias en diseño web para 2020 que vienen, no son muy distintas de las que ya teníamos 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:
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.
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.
Respuesta rápida: Como creativos hacemos todo el diseño web a medida para ofrecer un valor creativo y un diseño único. Como desarrolladores web esto nos deja libres de limitaciones y conseguimos un mejor rendimiento.
Respuesta elaborada:
Nuestra filosofía de trabajo ha sido desde siempre, la creación a medida de los proyectos de diseño web que desarrollamos. Esto implica que tanto el diseño como el desarrollo estén hechos a medida. Como diseñadores y como creativos, pensamos que no debería ser de otra forma, por lo que rechazamos de forma rotunda el uso de plantillas en el desarrollo de páginas web. Normalmente utilizamos WordPress como gestor de contenidos, para que el cliente pueda subir sus contenidos a través de un sencillo panel de administración al que tiene acceso mediante usuario y contraseña.
Gracias a que WordPress es una famosa plataforma para la creación web, muchos estudios se aprovechan del poco conocimiento por parte de sus clientes y crean websites utilizando plantillas prefabricadas que pueden ser adquiridas a bajo coste, únicamente modificando los textos, imágenes, colores, y poco más. En nuestro caso, cada página web que creamos lo hacemos desarrollando nuestra propia plantilla a medida para el proyecto concreto y empezando todo desarrollo con un documento totalmente en blanco, escribiendo cada línea de código.
Esto nos permite:
Respuesta rápida: Si la propuesta de diseño web presentada no es la que esperas, presentaremos nuevas propuestas de diseño hasta que quedes 100% satisfecho.
Respuesta elaborada:
Normalmente solemos acertar a la primera en el momento de presentar una propuesta de diseño web. Evidentemente siempre hay modificaciones que hacer y que nuestros clientes nos solicitan. Estas modificaciones las hacemos y resolvemos con celeridad. Sin embargo, en los casos en los que la propuesta de diseño web presentada no se ajusta a la línea de que esperaba el cliente, presentamos nuevas propuestas con el objetivo de que quedes 100% contento con el resultado final.
Respuesta rápida: Nuestra cantidad y calidad en los proyectos de diseño y desarrollo web que hemos llevado a cabo a lo largo de los años nos avalan. Puedes consultar nuestro porfolio de proyectos haciendo click aquí. También puedes consultar los premios que hemos recibido por nuestros proyectos.
Respuesta elaborada:
No es poco frecuente que en el momento de aceptar un presupuesto nuestros potenciales clientes se muestren preocupados y nos cuenten historias anteriores que han tenido con otros estudios de diseño y desarrollo web. Desde que los han dejado a medias en el desarrollo web, hasta que el desarrollador contratado ha desaparecido sin dar señales de vida dejando un proyecto sin terminar.
Llevamos años diseñando y desarrollando páginas web para clientes de todo el mundo. Si nos has pedido presupuesto, imaginamos que esto se debe a que ya has consultado los proyectos que tenemos publicados en nuestra página web. Sin embargo, si aún no lo has hecho, te animamos a que le eches un vistazo con ojo crítico haciendo click aquí y seas tu mismo quien determine si somos o no somos dignos de tu confianza.
Además de disponer de un inmenso portfolio de proyectos realizados, también podemos añadir a la ecuación el hecho de que hemos sido premiados en numerosas ocasiones por nuestros trabajos de diseño. Haz click aquí para ver los premios y menciones por nuestros trabajos y proyectos de diseño web y gráfico desarrollados.
Respuesta rápida: El presupuesto es cerrado, siempre que nos ciñamos a lo presupuestado y que el cliente no pida funcionalidades nuevas, además hay que tener en cuenta que: *hosting y dominio, *textos, *traducciones y *fotografías las ofrece el cliente. En caso de necesidad, podemos ofrecer nosotros mismos los puntos anteriores y en todo caso figuraría como punto en los detalles del presupuesto. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.
Respuesta elaborada:
Los presupuestos de desarrollo y diseño web que ofrecemos son siempre cerrados, y únicamente serían ampliables (bajo previa aceptación), en el caso de que el cliente nos pidiera una funcionalidad nueva a medio desarrollo, entendiendo como funcionalidad nueva, cambios o añadidos mayores en el funcionamiento de la página web.
El cliente ofrecerá el *hosting y dominio, los *textos del website, las *traducciones y las *fotografías.
*El hosting y dominio en caso de no ofrecerlo el cliente, podemos contratarlo con nuestro proveedor habitual, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.
*Los textos del website en caso de no ofrecerlo el cliente, podemos ofrecer nuestro servicio de redacción, y teniendo en cuenta que el coste correrá a cargo del cliente.
*Las fotografías necesarias para crear el sitio web, en caso de no ofrecerlas el cliente, las compraremos en nuestro banco de imagen habitual, resultando en un coste de 15€ por fotografía, y teniendo en cuenta que el coste correrá a cargo del cliente. Nosotros mismos te haremos la propuesta de fotografías que consideremos que van más en línea con el proyecto. Tu nos tendrás que dar el visto bueno antes de hacer cualquier compra, la cual la asumiremos nosotros y la repercutiremos en la factura del final de proyecto.
*Las traducciones en caso de no ofrecerlas el cliente, podemos mandarlas a hacer a nuestro proveedor habitual, ofreciendo un precio cerrado según el número de palabras a traducir, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía no tiene ningún tipo de coste.
Respuesta rápida: Presentaremos las propuestas de diseño web, haremos las modificaciones que nos pidas, Desarrollaremos la página web en nuestro servidor, al cual tendrás acceso para ver el progreso, pondremos el sitio web en vivo. Nuestro trabajo está garantizado, así que cualquier error que se aprecie y que sea responsabilidad del estudio será debidamente solucionado sin ningún coste.
Respuesta elaborada:
Fase 1 (Diseño):
Fase 2 (Desarrollo):
Fase 3 (Puesta en vivo):
Respuesta rápida: Dispondrás de un manual y además te ofreceremos una formación de forma gratuita.
Respuesta elaborada:
Al finalizar el proyecto te entregaremos un manual de uso para que puedas gestionar los contenidos que hayamos definido de los cuales necesitas poder gestionar, tales como proyectos, productos, artículos, etc.
Además te ofreceremos una sesión de formación de forma gratuita para enseñarte a utilizar el gestor de contenidos.