Tendencias en Diseño WEB & MOBILE 2017

La creatividad es una combinación de disciplina y espíritu de niño

Gustavo Bellino

Primero lo primero, esta cita "La creatividad es una combinación de disciplina y espíritu de niño" es de Robert Greene.

Habiendo dicho esto, empecemos. Ya lo se, ya lo se, el año 2017 ya está terminando, no? tal vez debemos pedir a nuestra diseñadora que empiece a escribir el blog post "Tendencias en diseño WEB & MOBILE 2018", no se preocupen, va a llegar muy pronto.  

Revisemos las tendencias más populares.

INTERACCIÓN MICRO (Y SUTIL)

Las micro-interacciones ocurren día a día en nuestra vida cotidiana. Permiten al usuario interactuar con una interfaz y cada vez las vemos mas en las apps y en los dispositivos que usamos. Vamos a ver mucha interacción delicada este año, como una de las tendencias esenciales dentro del UX/UI. Aporta contexto y ayuda al usuario y recarga la usabilidad de nuestros sites y apps. Desde Loaders hasta iconos animados, con una micro interacción eficaz te aseguras conseguir compromiso (engagement) e informar al mismo tiempo (que no es poco).

Ejemplo: Sixux

Diseñadores ♥ Programadores

Más colaboración con mejor comunicación. Ahora que el responsive tiene un hueco en nuestros corazones y mobile first empieza a sonar a conocido, la colaboración entre diseñadores y desarrolladores es imprescindible. A partir de este 2017 iremos dejando atrás el jpg y las capas de Photoshop, con sus documentos funcionales, para subirnos fuerte a visualizaciones dinámicas en prototipos de alta fidelidad. Como es de costumbre, Adobe ha tomado la delantera presentando su versión beta de Adobe Experience Design, en donde se propone la creación de prototipos, mediante el diseño colaborativo en tiempo real. Por otro lado InVision está poniéndose las pilas en compañía de Marvel, UXPin y otros tantos, así que parece que el universo proveerá exports de CSS de alta calidad.

IMÁGENES “HERO”

Las imágenes en las páginas web son un recurso muy potente para captar la atención del usuario desde el primer momento. Las llamadas “Hero images” son aquellas que ocupan toda la pantalla. Con un buen servidor y una buena optimización de tu sitio e imágenes en general no tendrás que preocuparte por tiempos de carga bajos. Este recurso ya viene siendo utilizado desde hace unos años, pero anteriormente los usuarios tendían a no seguir haciendo scroll en las páginas. Ahora ya estamos acostumbrados a este tipo de imágenes de presentación, por lo que la mayoría de usuarios intuyen que debajo de ellas continua el contenido de la web. Ejemplo: airewestperth

SECCIONES LARGAS CON MUCHO SCROLL

Los usuarios ya estamos acostumbrados a hacer mucho scroll en los dispositivos móviles, y por eso mismo vemos que ya no es necesario preocuparse por crear páginas web con secciones cortas en las que se trata de concentrar todo el contenido en la parte superior a toda costa.

Las páginas con mucho scroll y mucho contenido son perfectas además para quienes quieren atraer a sus usuarios a través del storytelling.

Ejemplo: Apple

GRID PINTERESIANO

Pinterest lo popularizó y ahora son muchos los que han adoptado esta tendencia. Es ideal para mezclar en un mismo sitio distintos pedazos de información, que invitan a navegar sin control a través de los diferentes contenidos. Lo bueno de estos diseños es que cada “tarjeta” contiene y presenta la información en pequeños trozos perfectamente escaneables. Aíslan la información de forma muy visual dando un punto de vista gráfico atractivo, y favoreciendo la usabilidad.

Ejemplo: Designe Interaction

ANIMACIONES

Las animaciones bien utilizadas enriquecen notablemente la experiencia dentro de cualquier web, sea cual sea su propósito. Utilizándolas conseguirás generar una experiencia más rica y memorable. Estas son algunas de las técnicas más populares:

Parallax, Loaders, Hover, Slideshow. Todas son técnicas que traen calma, y bajan la ansiedad del usuario, hasta en algunos casos causando una especie de hipnotismo. 

NUEVO DISEÑO FLAT

Google nos lo presentó la digievolución de lo que ya era una realidad. Lo llamó Material design. Dicen que para su creación se inspiraron en la tinta y el papel. Se incorporaron efectos de profundidad, sombras, animaciones y transiciones que mejoraron sustancialmente las interacciones dentro de sus aplicaciones. Ejemplo: cssconfar 

El Flat design es compatible con otras modas del diseño web como el minimalismo, el diseño web responsive o el Material Design. De cara al futuro, es probable que veamos las siguientes tendencias en el diseño Flat.

Las sombras largas (Long Shadows): Dan mucha mas más profundidad a los diseños planos.

Combinaciones de colores vivos: Las interfaces y plantillas más populares han llevado a muchos a comenzar a usar colores más vivos en sus diseños.

Tipografía sencilla: En el Flat Design, las tipografías sencillas ayudan a asegurar que el texto sigue siendo legible.

Botones fantasma: Son los botones que se presentan con un simple contorno, y cambian cuando el usuario se desplaza sobre ellos. Estos mantienen la funcionalidad sin distraer al usuario.

TIPOGRAFÍA

Otra de las tendencias en diseño web que veremos cada vez más frecuentemente es el uso expresivo de la tipografía. Se utilizará como forma y no como medio para comunicar, o dicho de otra forma, se ilustrará con letras. Tus conocimientos tipográficos serán fundamentales para conseguir un buen resultado.

Ejemplo: White Frontier Brewery

Estas son solo algunas de las tendencias que predominarán este año. Más allá de modismos, en diseño web lo que es tendencia o deja de serlo, se determina a partir de una necesidad de mejora constante de la experiencia del usuario (UX). Por lo que no significa que debas aplicarlas de manera abusiva, ni usarlas todas juntas. Lo ideal es que puedas identificar cuál o cuáles son las más adecuadas para tu proyecto.


No olvides compartir este blog post ;)