En todo proyecto de diseño, se debe dar gran importancia a estar al corriente de las últimas tendencias visuales web.
¿Por qué debería importarte esto, incluso si no eres diseñador? Si tienes un negocio online o un blog, imagino que no quieres que tenga un aspecto anticuado. Tu diseño tendrá mucho peso en la primera impresión que la gente se forme de ti.
1. Usabilidad
Un aviso: este va a ser un post en profundidad, en el que voy a tocar todos los aspectos del diseño visual. Si eres demasiado impaciente y quieres información rápida, quédate con esto, porque resume todo lo que voy a contar a continuación:
En 2016, el diseño girará en torno al usuario. La experiencia de usuario (UX) será la reina, y dictará el resto de aspectos a tener en cuenta a la hora de diseñar.
Recuerda esto a lo largo del post: a nadie le importará lo alucinante que sea tu diseño, si no es usable al 100%.
Si hablamos del diseño de una web, lo más importante será facilitar la interacción del usuario. Como saben ya todos los expertos en marketing digital, será muy difícil que un negocio online crezca, si no tiene muy en cuenta la experiencia de los usuarios.
El algoritmo de Google, las estadísticas de comportamiento de usuario… Todo apunta en una misma dirección: “tu web necesita cargar rápido y debe ser fácil de usar”.
Por si quedase alguna duda, la velocidad de carga es una cuestión vital para cualquier ecommerce. Los estudios dicen que cuando el tiempo de carga de una tienda online se aumenta en un segundo, las ventas caen en un 27%. Impresionante, ¿verdad?
Así que si el dueño de un ecommerce necesita elegir entre una web muy cool y una web muy rápida, siempre elegirá la rápida.
2. Diseño responsivo
Ya sabemos todos que hay que tener un sitio responsive sí o sí. Hoy, la del móvil es ya la “primera pantalla”. En lo que respecta al posicionamiento, Google está prácticamente “cargándose” a todos los sitios que no cumplan con (su última Guía de Calidad así lo dice).
Hago énfasis en mi primer punto: la usabilidad es muy importantes en todas las plataformas. Y puesto que móvil hoy es ya la primera de todas ellas, la experiencia de usuario para móvil es clave. Un buen diseño responsive ya no es aquel que se ve correctamente en móvil o tablet. Un buen diseño responsive tendrá una usabilidad perfecta para móviles. Dejar fuera de la versión móvil pequeñas funciones que sí están disponibles en la versión desktop ya no es una solución aceptable.
Para salir de dudas: si tus usuarios no pueden disfrutar al 100% de tu sitio web navegando en su móvil mientras vuelven a casa en metro, entonces tienes un serio problema y necesitas revisar completamente tu experiencia de usuario.
Pero en 2016 el significado de la palabra responsive va un paso más allá. No basta tener una web responsive. Ahora, todo el trabajo gráfico debe adherirse a las reglas del sistema responsive. Lo cual quiere decir que ya no hay un sólo tamaño o formato válido para todo.
Sí, la fiebre “responsive” llegará a los logos, banners y cualquier pieza de contenido visual que puedas imaginar. Pero no sólo online, también hablamos del mundo offline (prensa y por supuesto TV).
Brafton, una importante agencia de branding y marketing de contenidos, recomienda: “el buen arte gráfico debe estar optimizado para todos los modernos formatos, dispositivos y estilos de vida.”
El mejor ejemplo de esto es la reciente campaña de Netflix, en la que rediseñaron su branding. Es una identidad visual completamente nueva, con un nuevo logo y nuevo material gráfico para todos sus productos, que sigue a pies juntillas los principios del diseño responsive.
Una de las cosas que hace Netflix es permitir que puedas cambiar de dispositivo para seguir viendo tu serie favorita – y esta campaña de branding logra dar esa misma sensación.
Image credit: Webdesigner Depot
Lo importante para un diseñador es que no hace falta “estrujar” los elementos de branding para que quepan en la pantalla de un móvil. Mostrar sólo una parte de un logo, como ha hecho Netflix, es una forma de imprimir tu identidad de marca en un espacio más pequeño, al mismo tiempo que te libras de todo el ruido o excesivo espacio blanco alrededor que no necesita estar ahí.
Puedes estar seguro de que más marcas van a ir por este camino en 2016.
3. App inspired web design
A estas alturas, no es una sorpresa que muchos usuarios (de todas las edades) se hayan acostumbrado a la experiencia de navegación que brindan las apps nativas.
Los diseñadores llevan tiempo tratando de que la web adopte unas cuantas lecciones del diseño para apps: rapidez, cero distracciones y experiencia personalizada.
Ahora, los marketeros se están dando cuenta de los beneficios de esta tendencia. Tras un tiempo en el que se miraba con desconfianza a los menús para hacer login, ahora muchos negocios empiezan a resucitarlos. Tienen dos grandes ventajas: una, ofrecer la experiencia personalizada que dan las apps, y otra, añadir una capa de exclusividad, algo muy útil ahora que la web se ha vuelto un lugar excesivamente saturado.
Hablaré más sobre los menús en el siguiente punto, pero por ahora lo esencial es: elimina toda la información que no sea esencial y facilita que el usuario pueda interactuar con tu contenido de una manera inmediata.
4. Menús inteligentes
Algunos usuarios odian el casi omnipresente Menú Hamburguesa (esas tres rayitas horizontales que permiten expander o colapsar un menú completo). Se trata de un primer paso, si bien algo torpe, en la dirección de la navegación intuitiva. Pero es hora de dar la bienvenida a los menús inteligentes.
Menús de navegación ocultos, que aparecen de la nada según cual sea la acción del usuario, serán muy pronto la regla y no la excepción. De nuevo, el concepto clave es no distraer a los usuarios de lo que es realmente importante en cada momento.
Incluso si no podemos verlos el 100% del tiempo, nuestra experiencia nos dice que todas las páginas web tienen un menú. Por tanto, no hay por qué preocuparse, aparecerá cuando lo necesitemos.
Los expertos adelantan que los menús inteligentes u ocultos responderán al movimiento del usuario de manera multidireccional. Es decir, de arriba abajo, de izquierda a derecha.. Quizá incluso de manera circular.
¿Qué aspecto tendrá todo esto, exactamente? Puesto que la tendencia es muy nueva, todavía no hay un estándar fijado, sino varios modelos luchando por hacerse con la hegemonía.
Designmodo ha recopilado una lista muy completa de webs de primera que incluyen menús ocultos, así que date una vuelta y decide qué modelo te gusta más.
5. Módulos y texto modular
A nadie le gusta leer un párrafo interminable lleno de texto, ¿verdad?
El truco más antiguo para dividir textos y ofrecer un descanso al lector / usuario es escribir en párrafos cortos y dejar amplio espacio entre ellos (algo que yo estoy haciendo en este post, por ejemplo).
Pero hay un arma mucho más poderosa para maquetar una página web de manera atractiva: el diseño modular.
Es una técnica en la que todo se construye usando una matriz. Pero no tiene por qué ser al clásico estilo de cuadrícula, donde todas las líneas y columnas son iguales, como en un tablero de ajedrez. De hecho, puede ser exactamente lo contrario: una estructura libre y difícil de adivinar, que haga más interesante y atractivo lo que estamos leyendo, ya sea una web, un libro o un folleto.
Imagen: Well Made Studio
Igual que cuando leemos una revista, un sitio web se nos hace más accesible cuando nuestros ojos pueden saltar de un módulo a otro, y el tipo de contenido va cambiando al mismo tiempo que nos movemos por el documento.
6. Scroll infinito y modular
¿Cuál es el último paso dentro de la tendencia de diseño modular? El scroll modular. Lo cual quiere decir que cada módulo dentro de una página web puede tener su propio scroll, con lo que una sola pantalla podría tener varias posibilidades, independientes entre sí, de hacer scroll.
¿Parece demasiado complicado de imaginar? No lo es. De hecho, quizá ya lo hayas visto (aunque a veces es difícil caer en la cuenta). Cualquier sitio web en el que la barra lateral no se desplaza al mismo ritmo que el contenido principal está haciendo uso del scroll modular.
Pero las cosas se van a poner aún más interesantes. Imagina una web dividida en dos grandes columnas, cada una con su propio scroll. Ya existe, y puedes verlo aquí:
En realidad, todo empezó con el scroll infinito. Una tendencia que seguramente ya hayas notado a lo largo de 2015. Algunas de las webs más populares del mundo, como Pinterest, Twitter o Facebook ya lo usan, así que ¿por qué no deberían usarlo los demás?
El scroll modular y el infinito parten de la misma premisa: deslizar la pantalla (o un módulo) hacia abajo es más fácil y rápido que hacer clic. Ante todo, no interrumpe la experiencia de navegación al detenerse para cargar una nueva página. Las nuevas páginas se van añadiendo automáticamente a la pantalla según el usuario se desplaza hacia abajo.
¿Los resultados? Están a la vista. Pinterest y Facebook pueden presumir de tener unos asombroso datos de interacción, como por ejemplo el tiempo invertido en cada página por usuario. Cuando el contenido se ajusta a lo que la audiencia quiere, el scroll infinito puede resultar increíblemente adictivo.
¿Quieres datos concretos? La tasa de rebote de Time.com se redujo en un 15% tras introducir el scroll infinito en sus páginas.
7. Diseño material
El diseño material (un lenguaje de diseño propuesto por Google) lleva apareciendo en este tipo de listas desde 2014, pero no se empezó a adoptar de una manera amplia hasta 2015.
Si ya conocías el diseño material y pensabas que 2015 fue su año, tengo una sorpresa para ti. El diseño material será algo realmente masivo durante 2016. Lo verás en sitios web, apps, gráficos, etc. 2016 será el auténtico año del diseño material.
Lo que quiere decir que Google habrá ganado una dura batalla a Apple, y en el terreno del diseño para más inri. Sorprendente, lo sé, pero cierto.
Así que prepárate para ver sombras largas y sólidas por todas partes.
8. Flat Design
El diseño material llegó para ajustar alguno de los problemas de usabilidad que había demostrado tener el flat design o diseño plano. Pero eso no quiere decir que el flat design esté muerto. De hecho, a lo largo de 2016 el diseño flat también se hará aún más popular.
Como muchas grandes marcas han adoptado en los últimos años los principios del flat design en su lenguaje visual, el público se va acostumbrando al principio de menos es más en todo aquello que tiene que ver con la estética visual.
Images credit: Brafton
Lo que es más, el diseño plano tiene una gran ventaja en el campo de la experiencia de usuario: las imágenes que siguen este estilo pesan menos y no añaden un tiempo extra innecesario al tiempo de carga de la página.
Las líneas generales del flat design reinarán a lo largo y ancho de las webs y blogs de pequeñas y medianas empresas (por ejemplo, con el uso de losbotones fantasma).
Al mismo tiempo, aquellos usuarios un poco más avanzados en cuanto a tendencias de diseño, pasarán al Flat 2.0 (una evolución del flat design que incorpora algunos efectos tridimensionales, para hacerlo más usable).
9. Storytelling visual
Seguro que ya has oído a más de un “gurú” del marketing digital hablando maravillas del storytelling, como si fuese la solución a todos los problemas de tu negocio. Bueno, si hay una manera efectiva de sacar partido al storytelling y diferenciarse de los demás, esa es contar historias de una manera visual.
Ya se sabe que una imagen vale más que mil palabras, y eso vale para los esfuerzos en marketing de cualquier marca o negocio. ¿Qué mejor manera de hacer que tu historia parezca viva y real?
Unos cuantos datos:
En internet, 100 millones de personas ven como mínimo un vídeo por día.
Los usuarios de una web tienen un 64% más de posibilidades de hacer una compra tras ver un vídeo.
El 80% de los usuarios recuerdan haber visto un anuncio en un vídeo 30 días después.
El 92% de los que ven vídeos en dispositivos móviles comparten el contenido con otros usuarios.
Los seres humanos procesamos un elemento visual 60,000 veces más rápido que si leemos la misma idea en un texto. (Source)
En el fondo, el storytelling visual está en línea con lo que te he contado desde el principio: ya no se trata sólo de la estética de un diseño, de parecer cool. Ahora, el diseño tiene que desempeñar una función de contenido; ya no es un mero acompañante de la historia que cuenta el texto.
10. Infografías
¿Conoces una forma mejor de hacer llegar una historia o una serie de informaciones complejas, que hacerlo a través de una infografía llamativa?
No es casualidad que las infografías se hayan puesto de moda en todos los ámbitos del marketing online: redes sociales, SEO, marketing de contenidos… A todo el mundo le gusta una buena infografía, y sobre todo, nos encantan sus resultados: las infografías se comparten tres veces más que cualquier otro tipo de contenido visual.
Bueno, vale, puede que no sea objetivo, ya que me gano la vida creando infografías, pero los datos no engañan.
¿Qué clase de infografías creo que van a generar el mayor impacto en 2016? Pienso que el tiempo de las infografías demasiado simples y aburridas ya ha pasado. Poner tres o cuatro conceptos clave uno debajo de otro, y añadir unas cuantas ilustraciones o iconos ya no pasará el corte.
Es el momento de mezclar las enormes capacidades de contar una historia que tiene la infografía, con el análisis profundo que permiten lasvisualizaciones de datos.
Uff, ¿infografías y big data juntos de la mano? Parece el sueño de cualquier gurú del marketing, pero la verdad es que ya está aquí.
Échale un vistazo a algunas de estas obras de arte. Hay mucho talento ahí fuera:
Con suerte, veremos más ejemplos de este tipo de infografía en el futuro próximo.
11. Tipografías originales
Algo que toda buena infografía tiene casi siempre es uno o dos tipos de letra muy bien elegidos.
Ahora que la tipografía se ha convertido un elemento clave de cualquier estrategia de branding que se precie, el público está cada vez más acostumbrado a ver tipos de letra artísticos y originales en casi cualquier lugar.
La tipografía es un lenguaje en sí mismo. Hace algunos años, sólo los diseñadores gráficos eran capaces de hablar y comprender ese lenguaje. Hoy, cada vez más gente se anima a practicarlo, gracias a que la variedad de fuentes disponibles para web es mucho mayor.
Se trata de otro éxito de Google, ya que el servicio gratuito Google Fonts es una de las principales razones por las que mucha gente se ha decidido a sustituir Arial en favor de tipos más modernos y atractivos (aunque Lobsterya nos la encontramso hasta en la sopa, por favor elige otra fuente).
En 2016 volverán los rótulos grandes, con fuentes en mayúscula y cursiva para los encabezamientos. Otra tendencia muy importante serán las tipografías que parecen hechas a mano. De la misma manera, los gráficos hechos a mano también estarán de temporada (ver más abajo).
12. Retro-moderno
Lo Retro-moderno es cool. Lo que empezó como una moda para los logos, está pasando ya todos los aspectos del diseño gráfico y web.
Pero hay una pequeña diferencia en lo que significará retro a partir de ahora. Antes, cuando decíamos retro siempre pensábamos en la primera mitad del siglo XX, como mucho hasta los años 60.
Lo retro-moderno se refiere a los primeros años de la era del ordenador personal. Un mundo de vídeojuegos, pixel art, grandes móviles tipo zapatófono,Tron, MacGyver… Bueno, MacGyver no. Pero cualquier cosa que fuera importante en el estilo visual de los años 80 y primeros 90, será grande de nuevo.
Image credit: Oxygen Agency
Mucha gente se refiere a todo este movimiento como cultura nerd. supongo que entonces soy un nerd.
13. Colores vivos y vibrantes
En cuanto a la paleta de colores, los años 80 serán la referencia. Prepárate para un mundo de colores flúor y muy vivos.
“Un lugar más feliz y soleado, donde somos libres para expresar una versión más inteligente de nosotros mismos”. De esta manera un poco cursi describe este mundo el Informe Pantone de colores para la primavera 2016.
Los 10 principales colores de la primavera 2016 para Pantone son así:
Hagas lo que hagas, no escojas un color aburrido y lavado para tu web o diseño. Estás advertido.
14. Cuadrículas y formas geométricas
Como dije en el punto #5, el diseño web se basará en matrices geométricas. Tanto es así, que la matriz (grid en inglés) se vaa convertir en un estándarlenguaje CSS. Lo cual quiere decir que crear una parrilla o matriz a tu gusto, usando únicamente CSS, va a ser muy sencillo (más info aquí).
Pero las cuadrículas no sólo dominarán el diseño web. Lo mismo puede decirse de cualquier tipo de arte gráfico, junto con otra importante tendencia: las formas geométricas.
Es lógico. El diseño moderno y minimalista se alimenta fundamentalmente de los principios del Estilo Suizo. Uno de ellos es que todo debe estar planteado sobre una matriz geométrica. Pinterest y todos los sitios web con un diseño basado en fichas o cartas han allanado el camino, y ahora todo el mundo se apunta. El diseño en cuadrícula es claro, fácil de poner en práctica para los diseñadores y fácil de entender para los usuarios.
Y no afecta sólo al diseño online. La decoración de interiores no es ajena a lamoda.
Pero toda tendencia tiene una cara opuesta. Los expertos también creen que, en respuesta a este excesivo predominio de las formas geométricas y perfectamente planeadas, habrá un aumento de formas libres, que vienen a ser como las formas geométricas, pero con defectos e irregularidades.
Es un rasgo del neo-grunge, otra tendencia que ganará peso en 2016.
15. ¡Muerte a la imagen de stock!
Mucha gente se está dando cuenta por fin de que las imágenes de stock o archivo son una de las cosas más aburridas y menos originales que puedes incluir en un sitio web. Esto debería haber pasado hace años, pero 2016 será por fin el año en el que los blogs y negocios online se pondrán poco a poco de acuerdo para “matar” a las imágenes de stock.
Tiene gracia, porque en 2015 hubo un movimiento en contra de los archivos tradicionales y a favor de nuevos sitios alternativos que ofrecían un nuevo tipo de imagen de stock, más natural y actual, aparte de ofrecer las imágenes gratis. ¿El resultado? Todo el mundo acabó poniendo las mismas imágenes y te las encontrabas por doquier.
¿Hay alguna buena razón para usar imágenes de stock? Hay cientos de alternativas. Por ejemplo, imágenes hechas expresamente para tu sitio web, ya sea por ti mismo o por un profesional. ¿Y por qué no una ilustración hecha a mano (vas a ver muchas de estas a lo largo de 2016, pero no las mismas)?
Y mejor aún, ¿por qué no un vídeo?
16. Video y GIFs
Seguramente te hayas dado cuenta de que muchas webs modernas usan un vídeo a pantalla completa como fondo. Sí, es verdad que muchos de ellos tardan bastante en cargar, pero se acabará cuando la gente comprenda que tienen comprimir el vídeo lo más posible antes de insertarlo en su web (he aquíuna guía con 10 reglas para crear vídeos de fondo).
Lo más importante es que en 2016 el vídeo va a reemplazar a la imagen fija en muchos lugares, no sólo en el background de una web. Vine y Snapchat nos han acostumbrado a pasar el tiempo mirando vídeos cortos en bucle.
Mucho ojo a lo próximo: imágenes de perfil que ya no son imágenes, sino un pequeño vídeo o una animación en la que los usuarios ofrecerán un repertorio de sus mejores poses y caras (la era del selfie no ha hecho más que empezar).
Y sobre todo, mucha atención a la invasión de los GIFs animados. Vana estar en TODAS PARTES. Gran parte de la culpa es de Facebook, que ha abierto la caja de Pandora al permitirlos en su timeline ()3 de las imágenes en este post son GIFs, por cierto).
