Tendencias de diseño: Flat Design 2.0

El diseño plano ha conquistado el mundo del diseño en los pocos años que ha existido, pero ningún movimiento de diseño se mantiene 100% puro en sus raíces e ideales. Eso es exactamente lo que está sucediendo con el diseño plano: gradualmente se han visto cambios sutiles aunque significativos en su iteración original.

Estos cambios fueron suficientes para que los observadores y expertos apodaran la nueva iteración como Flat Design 2.0. 2.0 es muy interesante porque logra el delicado equilibrio entre los cambios necesarios para alterar la experiencia del usuario y mantenerse fiel a sus principios originales.

Sin embargo, la evolución de Flat a 2.0 fue inevitable: a medida que los diseñadores se sintieron más cómodos con Flat, pudieron ver que, a pesar de su popularidad, algunos problemas no se estaban abordando correctamente. Y ahora tenemos 2.0 para abordar algunas de estas deficiencias.

Orígenes del diseño plano

Considere el diseño plano como una especie de rebelión contra el estilo de diseño entonces popular de skeuomorfismo. Se basó en los efectos 3D para copiar las propiedades de la vida real de los objetos 3D como una forma de utilizar la familiaridad para ayudar a la experiencia del usuario. Por ejemplo, en las iteraciones iniciales del Kindle Fire de Amazon, había una estantería en 3D de fondo para reforzar el propósito de la tableta para la lectura.

Cuando Apple, un gran defensor del diseño skeuomorphic, decidió, en 2012, abandonar el skeuomorphism, eso anunció un giro completo hacia el plano, que se ha mantenido muy popular durante los últimos años. Su énfasis en el minimalismo también ha ayudado a impulsarlo a su ubicuidad actual.

Flat se caracteriza por su ausencia de:

• elementos elevados que significan a los usuarios que se puede hacer clic en ellos;
• elementos huecos o hundidos que significan para los usuarios que se pueden rellenar (piense en los campos de búsqueda y otros campos de entrada).

Transición a 2.0

A pesar del éxito de Flat, algunos diseñadores comenzaron a notar fallas legítimas que no se estaban abordando en la comunidad de diseño. Si bien el plano ganó mucho impulso debido a su minimalismo bienvenido, fue un poco demasiado lejos en la dirección austera. Las características de algunos efectos 3D resultaron ser excesivas y afectaron negativamente la experiencia del usuario.

Por lo tanto, era inevitable que ocurriera otro cambio. Ahí es donde nos encontramos hoy con los albores del diseño plano 2.0.

Problemas de usabilidad de Flat Design

Todos los problemas de usabilidad de Flat se pueden resumir en la siguiente afirmación: Flat normalmente se intercambia en las necesidades de un usuario por la estética de la cadera.

En otras palabras, los diseñadores que diseñan una interfaz para que sea «plana» pondrán un mayor énfasis en mantener las cosas mínimas, no 3D y vibrantes / audaces en lugar de poner la experiencia del usuario en primer lugar. Normalmente ahí es donde empiezan todas las cosas malas en el mundo del diseño, y es por eso que el plano ha evolucionado a 2.0.

Estos son los problemas de usabilidad comunes con flat:

• ausencia de significantes de suma importancia (degradados, sombras, subrayados, etc.);
• ausencia de patrones familiares (azul, texto subrayado para enlaces, etc.);
• ausencia de indicaciones contextuales (colocación de CTA, copia procesable, etc.).

Quizás el ejemplo más notorio en la memoria reciente de todos los problemas de usabilidad de Flat fue el lanzamiento de Windows 8 por parte de Microsoft, con su llamada interfaz de usuario Metro. Ese diseño era el epítome del plano porque todo era plano al extremo.

La la experiencia del usuario fue tan mala porque un diseño completamente plano significa que los usuarios no reciben las pistas necesarias para decirles qué se puede hacer clic y qué no en una interfaz. Como resultado, los usuarios se ven naturalmente obligados a dedicar más tiempo a resolver esto mediante la experimentación o, peor aún, a realizar acciones por error que no querían en primer lugar.

Como puede ver, la pantalla de Windows 8 es tan plana que es imposible que la gente sepa en qué hacer clic y en qué no. Incluso si los usuarios ya están familiarizados con la navegación básica del sitio, eso no significa que sea una buena idea eliminar todos los significantes (pistas que les dicen a los usuarios que pueden interactuar con los elementos de la página) y pistas de posibilidades (indicaciones de cómo los usuarios pueden interactuar con elementos de la página).

Grandes ejemplos de Flat Design 2.0

2.0 es un cambio sutil o una mejora con respecto a flat, por lo que puede requerir más concentración para detectar el verdadero 2.0 en los sitios web y las interfaces. Es por eso que lo guiaremos a través de algunos grandes ejemplos actuales de 2.0 que ya están en pleno funcionamiento.

La guía de Dropbox

Guía de Dropbox Puede que al principio parezca muy plano, pero si miras más de cerca, verás sugerencias en 3D que comunican claramente a los usuarios que algunos elementos se destacan sobre otros. Esto es principalmente evidente en las imágenes de la cabeza del niño (en el lado izquierdo) y los destornilladores (en el lado derecho). Ambas imágenes tienen bordes negros fuertes, aunque sutiles, que comunican profundidad y la impresión de que están sobre el fondo en lugar de mezclarse con él.

Helado de Tolia

El sitio de Tolia está lleno de efectos sutiles y elevados que dan la impresión distintiva de 3D, mientras que el diseño general sigue siendo plano y mínimo. La impresión elevada está presente en el título, el subtítulo y la descripción (es decir, la copia de la página). También está presente en el botón de llamada a la acción y en la copia de la llamada a la acción dentro del botón. Puede agradecer el uso sutil de sombras finas alrededor de los bordes de estos elementos por dar esta impresión elevada.

Google Santa Tracker

Como era de esperar, Google está en el tren 2.0, y su Rastreador de santa La página muestra cómo se puede integrar 2.0 de una manera divertida y útil. Las sutilezas de 2.0 abundan en la página en todo, desde los degradados y sombras en los distintos edificios y las burbujas emergentes (cuando los usuarios se desplazan sobre cualquier edificio) hasta la impresión 3D del título en la parte superior de la página.

Publicis Groupe

Publicis Groupe’s La página del 90 aniversario cuenta con la influencia 2.0 de una manera bastante obvia. Si miras el lado izquierdo de la página, verás la combinación de sombras y degradados descendiendo e irradiando hacia afuera desde el círculo pálido y en la sección azul debajo de él. El minimalismo severo también indica que su estética de diseño todavía está fuertemente arraigada en el plano puro.

Jumeirah

Este sitio para un hotel de lujo en los Emiratos Árabes Unidos está dominado principalmente por un video gigante de fondo, pero no dejes que eso te distraiga de la sutileza de su contribución 2.0. El titular «Jumeirah Inside» presenta un sombreado muy sutil que da con éxito la impresión de 3D y al mismo tiempo conserva el aspecto general y plano.

Una evolución por demanda

En el mundo del diseño, las cosas suelen cambiar porque existe una demanda. Alguien se dará cuenta de que falta algo y encontrará una manera de mejorarlo, o alguien más tomará un concepto y lo llevará a otro nivel que se basa lógicamente en un concepto determinado.

En lo que respecta a 2.0, definitivamente es una combinación de ambos, ya que las deficiencias de usabilidad de flat se solucionan extendiendo el concepto original de una manera que aún respeta los principios del minimalismo que define el flat.