Tendencias de diseño que se destacan

Todos los años, como equipo de diseño de Commencis, hacemos estas observaciones sobre las tendencias de diseño, pero por primera vez las publicamos en línea.

Espero que lo disfruten.

Nuestra investigación resultó con 16 tendencias diferentes:
1 - Retroalimentaciones contextuales y microinteracciones
2 - Enfoque de contenido
3 - Navegación visible y accesible
4 - Narración visual
5 - Ilustración personalizada
6 - Diseño semi plano
7 - Colores vibrantes y degradados
8 - Tipografía en negrita
9 - Diseño experimental
10 - Interacción física
11 - Realidad mixta
12 - Interfaces conversacionales
13 - Asistencia visual
14 - Importancia de la microcopia
15 - Diseño anticipatorio
16 - Ansiedad intersticial optimizada

Vamos a sumergirnos en ...

1- Comentarios contextuales y microinteracciones

Las retroalimentaciones contextuales y las micro interacciones brindan a los usuarios una retroalimentación clara sobre el estado de la plataforma cuando realizan la transición entre pantallas.

Queremos que nuestros usuarios se centren en una cosa a la vez. Tenemos una historia que contar, por lo que debemos guiar al usuario a medida que la contamos.

Diseño de animación de la aplicación de finanzas de Gis1on para Norde

El uso del movimiento es una tendencia cada vez más popular para dar retroalimentación sobre el estado de la plataforma y comunicar los resultados de las acciones del usuario.

Uber Design Hero de Gene Ross para UENO

2- Enfoque de contenido

Las fotografías de productos presentadas en la tienda son el factor más importante para decidir comprar o no comprar.

Las tiendas electrónicas quieren la máxima atención en los productos, por lo que utilizan fotografías únicas con una tipografía impactante.

Aplicación de comercio electrónico de Alex Khoroshok para Thunderrise

Cuando diseñamos para grandes empresas, quieren que toda la información posible se muestre en 1 pantalla. A los clientes no les importa el clúster. Nosotros, como diseñadores, siempre ponemos a los humanos en el centro. Queremos que se sientan seguros, relajados y que elijan por sí mismos (pero los motivamos en la dirección correcta :))

Sitio web de Apple, pantalla Watch Series 3.

3- Navegación visible y accesible

Es crucial tener una navegación que siempre esté visible y accesible en la pantalla.

Si su aplicación tiene un contenido grande y complejo, la estructura del menú de pestañas es buena para usted. Agrupar tu contenido no es un proceso fácil, pero una vez que haces un buen trabajo, tus usuarios se vuelven mucho más felices.

Si su aplicación solo se enfoca en 1 cosa, puede ocultar las galimatías legales, la configuración, el botón de cierre de sesión, etc. bajo un menú de hamburguesas.

La mayoría de las aplicaciones conocidas usan el menú de pestañas ahora porque es realmente transparente para los usuarios y también fácil de navegar.

Patrón de navegación de Google Newsstand por Aurélien Salomon ➔

4- Narración visual

Internet se ha hecho cargo rápidamente mediante una narración rápida y sencilla. Grandes jugadores como Facebook, Instagram y Whatsapp están dando más importancia al intercambio instantáneo de videos para fomentar niveles de interacción.

Para comprender realmente esta tendencia, primero tenemos que entender la historia detrás de ella.

Libros> Películas> Redes sociales> Tweets> Fotos> Historias

  • La primera narración documentada comenzó con libros.
  • Luego, cuando aparecieron las películas, las personas se adaptaron extremadamente rápido, porque era más fácil y rápido.
  • Luego vino la era de las redes sociales. La gente comenzó a compartir sus historias.
  • MSN Messenger mostró qué música estás escuchando, Facebook mostró lo que estás haciendo o sintiendo. Luego, a Twitter se le ocurrieron historias muy breves.
  • Con Instagram, la era de compartir fotos ha comenzado. Las fotos cuentan historias sin perder tiempo con la lectura.
  • Ahora, estamos en la etapa final, los "videos cortos que desaparecen después de un día" eran también las historias.
Enviar un complemento de Dan Mazig para MetaLab
"Pero mi aplicación no es una aplicación de redes sociales, ¿cómo puedo implementar esta tendencia?"

Las historias se pueden usar de muchas maneras, cada incorporación puede ser una historia; Cada progreso de una función en su aplicación puede ser una historia (dependiendo de cómo desee mostrarla), cada pantalla de inicio puede ser una historia.

Onboarding Animado por Anastasiia Andriichuk

5- Ilustración personalizada

Si desea un sitio web o aplicación de aspecto único que cualquier visitante recordará; Los iconos y gráficos personalizados pueden ser su asistente principal.

Grandes empresas como Google, Dropbox, Facebook, entre otras, ya adaptaron esta tendencia. Crearon un lenguaje de ilustración visual para ellos mismos, que resultó maravillosamente. Cada vez que crean un mini sitio web (para los derechos de las mujeres, contra el cáncer, etc.), conservan este lenguaje visual, y los usuarios que visitan su sitio web, inconscientemente entienden el origen.

Tomemos Dropbox, por ejemplo: el dibujo a mano tranquiliza al usuario, atrae al niño que todos llevamos dentro y hace que el producto parezca más accesible y familiar.

Izquierda: por Brandon Land Derecha: por Jason Perez para DropboxGIF de Dynamic Scroll de Sergey Valiukh para tubik

6- Diseño semi plano

En comparación con el diseño semi-plano con el diseño plano, las posibilidades son más comprensibles con el uso de atributos táctiles y sombras familiares.

Se acerca otra lección de historia del diseño:

El diseño de la aplicación móvil para teléfonos inteligentes comenzó con un diseño skeuomorphic. Si no sabes qué es, mira aquí. Aplicaciones móviles de aspecto extremadamente realista.

Entendiendo que esta es una pantalla digital, y no tenemos que hacerla de manera tan realista, una nueva era ha comenzado: diseño plano.

Los diseños planos tuvieron algunos problemas con la legibilidad. Entonces, Google creó el diseño de materiales. Todavía usamos elementos de diseño planos pero sombras, y las posiciones de las capas actúan como objetos de la vida real.

Ahora es la era del diseño semi plano. Esta es la era del movimiento y el enfoque. Queremos que nuestros usuarios se centren en lo que es importante. Entonces, usamos sombras en los objetos que importan. La profundidad viene dada por el movimiento y la sombra. Las sombras no son tan dramáticas como el diseño de materiales.

movimiento de tarjetas de compras ai por Wojciech Zieliński

7- colores vibrantes y gradiente

Habrá más marcas que cambien a colores más audaces y brillantes, ya que los colores brillantes tienden a llamar nuestra atención y generan más emociones positivas que los colores oscuros o neutros.

Los colores brillantes y vibrantes son siempre divertidos, enérgicos y vivos, mientras que los pasteles son más relajantes y discretos.

La música de Apple es uno de los pioneros de esta tendencia. Fusionaron el significado de los colores vibrantes y los degradados con vivir una vida activa y ser saludable.

Exploración de la página de aterrizaje salvajemente por Ghani Pradita para PaperpillarWIP - Aplicación FX de KREATIVA Studio

8- Tipografía en negrita

La tipografía bien diseñada capta la atención de los usuarios y transmite el mensaje al instante. Esto ayuda a los diseñadores en la presentación rápida y dinámica de la información.

Aquí es donde se muestra la importancia de los escritores de contenido. No puedes tirar palabras largas si quieres adaptarte a esta tendencia. Es por eso que necesita un buen escritor de contenido para encontrar mejores palabras para sus títulos.

Esta ha sido una tendencia durante mucho tiempo, pero con el iPhone X recuperó su popularidad.

Lea la aplicación de JPstyle para New Beee

9- Diseño experimental

Los diseños experimentales son una buena manera de agregar algo de diversidad e iluminar el sentido del arte.

Anthony Sho Homepage de Zhenya Rynzhuk para Sochnik

Los sitios web son actualmente el lugar para este experimento, con desplazamientos horizontales, uso de web GL, nuevas formas de animación de transición, etc.

Sitio web de Pablo Llanquin (FREEBIE) por Jardson Almeida ️

10- Interacción física

5 sentidos son ver, oír, probar, oler, tocar. Usamos ver y tocar principalmente, y a veces escuchar. Tocamos las pantallas del teléfono. Esta tendencia explica cómo los teléfonos nos vuelven a tocar. Se llama retroalimentación háptica.

Esta interacción en realidad comenzó con los controladores PS4, XBOX, PSP. Cuando marca un gol o se estrella en un juego de autos, el controlador vibra. Esto te da un sentido adicional del juego.

La retroalimentación táctil ahora es utilizada por muchas aplicaciones móviles, incluso por App Store.

Los comentarios hápticos pueden ayudar a los diseñadores a orientar a los usuarios para que tomen medidas como "comprar", "compartir" o "seguir" algo. También son útiles para llamar la atención del usuario sobre un contenido.

Patrones de guía háptica por Liam Tucker

11- Realidad mixta

Con la realidad mixta, los objetos de ambos mundos pueden fusionarse con tecnologías avanzadas de detección y digitalización, lo que permite a los usuarios experimentar juntos el entorno de la vida real y el mundo virtual.

Hablamos sobre esta tendencia durante muchos años, pero en 2018, la tecnología detrás de esto finalmente se volvió prometedora. Ahora hay algunos lugares de juegos de realidad virtual que aparecen en la ciudad.

Airbnb AR Map Concept por Isil Uzum

12- Interfaces conversacionales

Las interfaces conversacionales son, de hecho, sistemas que se asemejan a la sensación de interacción entre humanos cuando se comunican a través de plataformas.

Cuando usamos esta palabra, los clientes piensan principalmente en chatbots. La interfaz conversacional cubre muchas cosas entre los chatbots. Siri también es una interfaz conversacional. Sin embargo, su aplicación no los necesita para adaptar la interfaz de conversación.

Messenger Bots y concepto de video llamada aumentada por Isil Uzum

Otra forma de seguir esta tendencia es cambiar el tono de voz en su aplicación. Por ejemplo: tiene un campo de entrada para pedirle al usuario su nombre. Puede decir "Nombre", pero también puede decir "Escriba su nombre aquí". Este tono de voz suele ser una mejor manera de conectarse con sus usuarios.

Pantalla de registro de Invision.

13- Asistencia visual

Las aplicaciones basadas en contenido deben tener un lenguaje visual fuerte y no todos los usuarios pueden manejar esto por su cuenta. Por lo tanto, las grandes empresas usan la Asistencia Visual para mantener este lenguaje.

Instagram> Filtros

Airbnb> Fotógrafos profesionales

Buen ejemplo: Airbnb (fotografía profesional)Mal ejemplo: Sahibinden.com (Fotografía amateur)

14- Importancia de la microcopia

La microcopia es un momento relajante para un usuario. Los usuarios a veces se pierden y los escritores de contenido están aquí para arreglar eso :).

Una microcopia se usa cuando un usuario necesita dirección. Nosotros, como diseñadores, debemos mostrar el camino correcto con algunas palabras.

Calendario (Validación de fecha) por Emmanuel Torres404 Ilustración de Mike Piechota para Netguru

15- Diseño anticipatorio

El diseño anticipatorio es un gran salto para el diseño de la experiencia del usuario. Minimiza la carga mental y la fatiga de decisiones para los usuarios al tomar decisiones informadas en su nombre, en función de sus elecciones pasadas.

La aplicación Spotify me sugiere canciones de acuerdo con mis elecciones anteriores.La opción de Netflix

16- Ansiedad intersticial optimizada

Esta es la era de la velocidad. Los usuarios no toleran esperar en absoluto. Entonces, el problema es cómo podemos esperar a que se carguen los servicios sin que los usuarios se den cuenta de que están esperando.

Los cargadores son realmente importantes para esta tendencia. No solo me refiero a cargadores repetitivos, exactamente opuestos en realidad. Estos cargadores repetitivos causan ansiedad en los usuarios. No saben cuándo terminará y qué pantalla verán eventualmente.

No te preocupes, hay soluciones:
- Carga de diseño de esqueleto (Personalmente no me gusta pero aún funciona)
- Solo se muestra el cargador en el componente que tiene un problema de carga
- Crear una animación interesante, donde el usuario puede ver
- Explica exactamente lo que estás cargando y muestra el progreso

Izquierda: Precargador y desplegable para actualizar la animación de Jakub Antalík para Frame.io / Derecha: iFly A380 de Airbus a bordo de la exploración de la interfaz de usuario por Gleb Kuznetsov

Nota del autor:

No puede usar todas las tendencias en su aplicación o sitio web. Tienes que aprender quiénes son tus usuarios, crear personajes y actuar de acuerdo con ellos. Usa algunas de las tendencias.

No te excedas por favor :)

P.s: Este artículo es el resultado de la investigación de Commencis Design Teams. (Recibí mucha ayuda de mi encantador equipo ).