16 tendencias de diseo grfico y web para 2016

Como en cualquier agencia de diseo grfico que se precie, le damos

gran importancia a estar al corriente de las ltimas tendencias visuales,
online y offline. Por eso, hoy quiero compartir las que para m sern las
16 tendencias ms importantes durante 2016.

Por qu debera importarte esto, incluso si no eres

diseador? Si tienes un negocio online o un blog, imagino que no
querrs que tenga un aspecto anticuado. Tu diseo tendr mucho peso
en la primera impresin que la gente se forme de ti.
Si pasas horas escribiendo un post para tu blog, no te gustara que
tuviera un aspecto visual moderno y que destaque sobre los dems?
Pues toma nota de estas tendencias y ponlas en prctica antes de que
todo el mundo lo haga:

1. Usabilidad
Un aviso: este va a ser un post en profundidad, en el que voy a tocar
todos los aspectos del diseo visual. Si eres demasiado impaciente y
quieres informacin rpida, qudate con esto, porque resume todo lo que
voy a contar a continuacin:

En 2016, el diseo 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 disear.
Recuerda esto a lo largo del post: a nadie le importar lo alucinante que
sea tu diseo, si no es usable al 100%.
Si hablamos del diseo de una web, lo ms importante ser facilitar la
interaccin del usuario. Como saben ya todos los expertos en marketing
digital, ser muy difcil que un negocio online crezca, si no tiene muy en
cuenta la experiencia de los usuarios.

El algoritmo de Google, las estadsticas de comportamiento de usuario

Todo apunta en una misma direccin: tu web necesita cargar rpido y
debe ser fcil de usar.
Por si quedase alguna duda, la velocidad de carga es una cuestin 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 dueo de un ecommerce necesita elegir entre una web muy
cool y una web muy rpida, siempre elegir la rpida.

2. Diseo responsivo
Ya sabemos todos que hay que tener un sitio responsive s o s. Hoy, la
del mvil es ya la primera pantalla. En lo que respecta al
posicionamiento, Google est prcticamente cargndose a todos los
sitios que no cumplan con (su ltima Gua de Calidad as lo dice).
Hago nfasis en mi primer punto: la usabilidad es muy importantes en
todas las plataformas. Y puesto que mvil hoy es ya la primera de todas
ellas, la experiencia de usuario para mvil es clave. Un buen
diseo responsive ya no es aquel que se ve correctamente en mvil o
tablet. Un buen diseo responsive tendr una usabilidad perfecta para
mviles. Dejar fuera de la versin mvil pequeas funciones que s estn
disponibles en la versin desktop ya no es una solucin aceptable.
Para salir de dudas: si tus usuarios no pueden disfrutar al 100% de tu
sitio web navegando en su mvil 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 ms all.

No basta tener una web responsive. Ahora, todo el trabajo grfico debe
adherirse a las reglas del sistema responsive. Lo cual quiere decir que ya
no hay un slo tamao o formato vlido para todo.

S, la fiebre responsive llegar a los logos, banners y cualquier pieza de

contenido visual que puedas imaginar. Pero no slo online, tambin
hablamos del mundo offline (prensa y por supuesto TV).
Brafton, una importante agencia de branding y marketing de
contenidos, recomienda: el buen arte grfico debe
estar optimizado para todos los modernos formatos , dispositivos
y estilos de vida.
El mejor ejemplo de esto es la reciente campaa de Netflix, en la que
redisearon su branding. Es una identidad visual completamente nueva,
con un nuevo logo y nuevo material grfico para todos sus productos, que
sigue a pies juntillas los principios del diseo responsive.
Una de las cosas que hace Netflix es permitir que puedas cambiar de
dispositivo para seguir viendo tu serie favorita y esta campaa de
branding logra dar esa misma sensacin.


Image credit: Webdesigner Depot

Lo importante para un diseador es que no hace falta estrujar los
elementos de branding para que quepan en la pantalla de un mvil.
Mostrar slo una parte de un logo, como ha hecho Netflix, es una forma
de imprimir tu identidad de marca en un espacio ms pequeo, 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 ms 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 navegacin que
brindan las apps nativas.

Los diseadores llevan tiempo tratando de que la web adopte unas

cuantas lecciones del diseo para apps: rapidez, cero distracciones y
experiencia personalizada.

Ahora, los marketeros se estn dando cuenta de los beneficios de esta

tendencia. Tras un tiempo en el que se miraba con desconfianza a los
mens para hacer login, ahora muchos negocios empiezan a
resucitarlos.Tienen dos grandes ventajas: una, ofrecer la experiencia
personalizada que dan las apps, y otra, aadir una capa de exclusividad,
algo muy til ahora que la web se ha vuelto un lugar excesivamente.

Hablar ms sobre los mens en el siguiente punto, pero por ahora lo

esencial es: elimina toda la informacin que no sea esencial y facilita que
el usuario pueda interactuar con tu contenido de una manera inmediata.


4. Mens 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 direccin
de la navegacin intuitiva. Pero es hora de dar la bienvenida a los mens
inteligentes.

Mens de navegacin ocultos, que aparecen de la nada segn

cual sea la accin del usuario, sern muy pronto la regla y no la
excepcin. 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 pginas web tienen un men. Por tanto,
no hay por qu preocuparse, aparecer cuando lo necesitemos.

Los expertos adelantan que los mens inteligentes u ocultos respondern

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, todava no hay un estndar fijado, sino varios modelos
luchando por hacerse con la hegemona.

Designmodo ha recopilado una lista muy completa de webs de

primera que incluyen mens ocultos, as que date una vuelta y decide
qu modelo te gusta ms.

5. Mdulos y texto modular

A nadie le gusta leer un prrafo interminable lleno de texto, verdad?

El truco ms antiguo para dividir textos y ofrecer un descanso al lector /

usuario es escribir en prrafos cortos y dejar amplio espacio entre ellos
(algo que yo estoy haciendo en este post, por ejemplo).

Pero hay un arma mucho ms poderosa para maquetar una pgina web
de manera atractiva: el diseo modular.
Es una tcnica en la que todo se construye usando una matriz. Pero no
tiene por qu ser al clsico estilo de cuadrcula, donde todas las lneas y
columnas son iguales, como en un tablero de ajedrez. De hecho, puede
ser exactamente lo contrario: una estructura libre y difcil de adivinar, que
haga ms 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 ms
accesible cuando nuestros ojos pueden saltar de un mdulo a otro, y el
tipo de contenido va cambiando al mismo tiempo que nos movemos por
el documento.


6. Scroll infinito y modular

Cul es el ltimo paso dentro de la tendencia de diseo modular?

El scroll modular. Lo cual quiere decir que cada mdulo dentro de
una pgina web puede tener su propio scroll, con lo que una sola pantalla
podra 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 difcil 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 an ms 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
ms populares del mundo, como Pinterest, Twitter o Facebook ya
lo usan, as que por qu no deberan usarlo los dems?


El scroll modular y el infinito parten de la misma premisa: deslizar la

pantalla (o un mdulo) hacia abajo es ms fcil y rpido que hacer clic.
Ante todo, no interrumpe la experiencia de navegacin al detenerse para
cargar una nueva pgina. Las nuevas pginas se van aadiendo
automticamente a la pantalla segn el usuario se desplaza hacia abajo.
Los resultados? Estn a la vista. Pinterest y Facebook pueden presumir
de tener unos asombroso datos de interaccin, como por ejemplo el
tiempo invertido en cada pgina por usuario. Cuando el contenido se
ajusta a lo que la audiencia quiere, el scroll infinito puede resultar
increblemente adictivo.

Quieres datos concretos? La tasa de rebote de Time.com se

redujo en un 15% tras introducir el scroll infinito en sus
pginas.

7. Diseo material
El diseo material (un lenguaje de diseo 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 conocas el diseo material y pensabas que 2015 fue su ao, tengo
una sorpresa para ti. El diseo material ser algo
realmente masivo durante 2016. Lo vers en sitios web, apps, grficos,
etc. 2016 ser el autntico ao del diseo material.
Lo que quiere decir que Google habr ganado una dura batalla a Apple, y
en el terreno del diseo para ms inri. Sorprendente, lo s, pero cierto.
As que preprate para ver sombras largas y slidas por todas
partes.

8. Flat Design
El diseo material lleg para ajustar alguno de los problemas de
usabilidad que haba demostrado tener el flat design o diseo plano. Pero
eso no quiere decir que el flat design est muerto. De hecho, a lo largo
de 2016 el diseo flat tambin se har an ms popular.
Como muchas grandes marcas han adoptado en los ltimos aos los
principios del flat design en su lenguaje visual, el pblico se va
acostumbrando al principio de menos es ms en todo aquello que
tiene que ver con la esttica visual.

Images credit: Brafton

Lo que es ms, el diseo plano tiene una gran ventaja en el

campo de la experiencia de usuario: las imgenes que siguen
este estilo pesan menos y no aaden un tiempo extra innecesario al
tiempo de carga de la pgina.
Las lneas generales del flat design reinarn a lo largo y ancho de las
webs y blogs de pequeas y medianas empresas (por ejemplo, con el
uso de losbotones fantasma).
Al mismo tiempo, aquellos usuarios un poco ms avanzados en cuanto a
tendencias de diseo, pasarn al Flat 2.0 (una evolucin del flat design
que incorpora algunos efectos tridimensionales, para hacerlo ms
usable).


9. Storytelling visual

Seguro que ya has odo a ms de un gur del marketing digital

hablando maravillas del storytelling, como si fuese la solucin a todos
los problemas de tu negocio. Bueno, si hay una manera efectiva de sacar
partido al storytelling y diferenciarse de los dems, esa es contar
historias de una manera visual.
 Ya se sabe que una imagen vale ms 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 mnimo un

vdeo por da.
Los usuarios de una web tienen un 64% ms de
posibilidades de hacer una compra tras ver un vdeo.
El 80% de los usuarios recuerdan haber visto un anuncio
en un vdeo 30 das despus.
El 92% de los que ven vdeos en dispositivos mviles
comparten el contenido con otros usuarios.
Los seres humanos procesamos un elemento visual 60,000
veces ms rpido que si leemos la misma idea en un texto.
(Source)

En el fondo, el storytelling visual est en lnea con lo que te he contado

desde el principio: ya no se trata slo de la esttica de un diseo, de
parecer cool. Ahora, el diseo tiene que desempear una
funcin de contenido; ya no es un mero acompaante de la historia
que cuenta el texto.


10. Infografas

Conoces una forma mejor de hacer llegar una historia o una serie de
informaciones complejas, que hacerlo a travs de una infografa
llamativa?
No es casualidad que las infografas 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 infografa, y sobre
todo, nos encantan sus resultados: las infografas se comparten tres
veces ms que cualquier otro tipo de contenido visual.
Bueno, vale, puede que no sea objetivo, ya que me gano la
vida creando infografas, pero los datos no engaan.
Qu clase de infografas creo que van a generar el mayor impacto en
2016? Pienso que el tiempo de las infografas demasiado simples y
aburridas ya ha pasado. Poner tres o cuatro conceptos clave uno debajo
de otro, y aadir 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 infografa, con el anlisis profundo que permiten
lasvisualizaciones de datos.
Uff, infografas y big data juntos de la mano? Parece el sueo 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:

Los hbitos de descanso de 27 de los mayores genios de la

historia

Cmo baten sus alas 5 animales diferentes

Mapas de pases hechos con sus comidas regionales

Con suerte, veremos ms ejemplos de este tipo de infografa en el futuro
prximo.

11. Tipografas originales

Algo que toda buena infografa tiene casi siempre es uno o dos tipos de
letra muy bien elegidos.

Ahora que la tipografa se ha convertido un elemento clave de

cualquier estrategia de branding que se precie, el pblico est cada vez
ms acostumbrado a ver tipos de letra artsticos y originales en casi
cualquier lugar.
La tipografa es un lenguaje en s mismo. Hace algunos aos, slo los
diseadores grficos eran capaces de hablar y comprender ese lenguaje.
Hoy, cada vez ms 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 ms modernos y atractivos
(aunque Lobsterya nos la encontramso hasta en la sopa, por favor
elige otra fuente).


En 2016 volvern los rtulos grandes, con fuentes en mayscula y

cursiva para los encabezamientos. Otra tendencia muy importante sern
las tipografas que parecen hechas a mano. De la misma manera, los
grficos hechos a mano tambin estarn de temporada (ver ms 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 diseo grfico y web.
Pero hay una pequea diferencia en lo que significar retro a partir de
ahora. Antes, cuando decamos retro siempre pensbamos en la primera
mitad del siglo XX, como mucho hasta los aos 60.
Lo retro-moderno se refiere a los primeros aos de la era del ordenador
personal. Un mundo de vdeojuegos, pixel art, grandes mviles tipo
zapatfono, Tron, MacGyver Bueno, MacGyver no. Pero cualquier
cosa que fuera importante en el estilo visual de los aos 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 aos 80 sern la referencia.
Preprate para un mundo de colores flor y muy vivos.
Un lugar ms feliz y soleado, donde somos libres para expresar una
versin ms 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
diseo. Ests advertido.

14. Cuadrculas y formas geomtricas
Como dije en el punto #5, el diseo web se basar en matrices
geomtricas. Tanto es as, que la matriz (grid en ingls) se vaa convertir
en un estndarlenguaje CSS. Lo cual quiere decir que crear una parrilla
o matriz a tu gusto, usando nicamente CSS, va a ser muy sencillo (ms
info aqu).
Pero las cuadrculas no slo dominarn el diseo web. Lo mismo puede
decirse de cualquier tipo de arte grfico, junto con otra importante
tendencia: las formas geomtricas.

Es lgico. El diseo moderno y minimalista se alimenta

fundamentalmente de los principios del Estilo Suizo. Uno de ellos es
que todo debe estar planteado sobre una matriz
geomtrica. Pinterest y todos los sitios web con un diseo basado
en fichas o cartas han allanado el camino, y ahora todo el mundo se
apunta. El diseo en cuadrcula es claro, fcil de poner en prctica para
los diseadores y fcil de entender para los usuarios.


Y no afecta slo al diseo online. La decoracin de interiores no es ajena

a lamoda.

Pero toda tendencia tiene una cara opuesta. Los expertos tambin creen
que, en respuesta a este excesivo predominio de las formas geomtricas
y perfectamente planeadas, habr un aumento de formas libres, que
vienen a ser como las formas geomtricas, 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 imgenes de stock
o archivo son una de las cosas ms aburridas y menos originales que
puedes incluir en un sitio web. Esto debera haber pasado hace aos,
pero 2016 ser por fin el ao en el que los blogs y negocios online se
pondrn poco a poco de acuerdo para matar a las imgenes de stock.

Tiene gracia, porque en 2015 hubo un movimiento en contra de los

archivos tradicionales y a favor de nuevos sitios alternativos que ofrecan
un nuevo tipo de imagen de stock, ms natural y actual, aparte de
ofrecer las imgenes gratis. El resultado? Todo el mundo acab
poniendo las mismas imgenes y te las encontrabas por doquier.
Hay alguna buena razn para usar imgenes de stock? Hay cientos de
alternativas. Por ejemplo, imgenes hechas expresamente para tu sitio
web, ya sea por ti mismo o por un profesional. Y por qu no una
ilustracin hecha a mano (vas a ver muchas de estas a lo largo de 2016,
pero no las mismas)?
Y mejor an, por qu no un vdeo?


16. Video y GIFs

Seguramente te hayas dado cuenta de que muchas webs modernas usan
un vdeo 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 vdeo lo ms posible antes de
insertarlo en su web (he aqu una gua con 10 reglas para crear
vdeos de fondo).
Lo ms importante es que en 2016 el vdeo va a reemplazar a la imagen
fija en muchos lugares, no slo en el background de una web. Vine y
Snapchat nos han acostumbrado a pasar el tiempo mirando vdeos
cortos en bucle.

Mucho ojo a lo prximo: imgenes de perfil que ya no son imgenes, sino

un pequeo vdeo o una animacin en la que los usuarios ofrecern un
repertorio de sus mejores poses y caras (la era del selfie no ha hecho
ms que empezar).

Y sobre todo, mucha atencin a la invasin 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
imgenes en este post son GIFs, por cierto).

Para terminar, aqu tienes los 15 GIFS animados ms divertidos de

2015.

Es tu turno

Pues hale, he llegado a 16. Si quieres mantenerte al da sobre lo que se

cuece en diseo grfico y web a lo largo de todo el ao, te recomiendo
las siguientes herramientas:

Newsletters. Suuscrbete a Webdesigner News (diaria)

y Webdesigner Depot newsletter (semanal). Quiz sigas un montn
de blogs de diseo. Pero no te quepa duda de que es imposible leerlos y
estar al da en todos. Estas dos newsletters te harn el trabajo ms fcil.
Siempre acabo haciendo clic en al menos un par de los posts que
recomiendan.

Muz.li. Una extensin de Chrome que te mantiene informado de todo lo

que est generando buzz en la comunidad de diseo online. se describen
a s mismo como crack para diseadores web. Suena adictivo.
 Crayon. Definido como el buscador de inspiracin para marketing ms
completo de la web, es como un Pinterest para diseadores y
marketeros interesados en destacar hacer destacar el aspecto visual de
sus proyectos. escoge a unos cuantos influencers a los que te interese
seguir y podrs aprender diariamente de sus elecciones y
recomendaciones. Un gran lugar para buscar inspiracin para logos,
lnding pages, identidad de marca, etc.

Visually. Un portfolio de diseo grfico a tamao gigantesco. A

diferencia de otras opciones como Behance o Cargo, adems del voto de
la comunidad, aqu cuentas con las elecciones de los editores de
Visually. Tengo la buena suerte de que mi portfolio es uno de los
favoritos de los editores. Si quieres saber un poco ms sobre mi y mi
trabajo, Visual.ly blog hace un tiempo.