Tendencias de diseño: Flat Design 2.0
El diseño plano ha tomado por asalto el mundo del diseño en los pocos años que ha existido, pero ningún movimiento de diseño se mantiene 100% puro hasta 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 doblaran la nueva iteración como Flat Design 2.0. 2.0 es muy interesante porque alcanza el equilibrio perfecto entre los cambios suficientes para alterar la experiencia del usuario y mantenerse fiel a sus principios originales.
Sin embargo, la evolución de Flat into 2.0 era inevitable: a medida que los diseñadores se sentían más cómodos con Flat, podían ver que, a pesar de su popularidad, algunos problemas no fueron abordados adecuadamente . Y ahora tenemos 2.0 para abordar algunas de estas deficiencias.
Orígenes del diseño plano
Mire el diseño plano como una especie de rebelión contra el estilo de diseño entonces popular de skeuomorphism . Se basó en los efectos 3D para copiar las propiedades reales de los objetos 3D como una forma de utilizar la familiaridad para ayudar a la experiencia del usuario. Por ejemplo, en las iteraciones iniciales de Kindle Fire de Amazon, había una estantería en 3D en el fondo para reforzar el propósito de la tableta para leer.
Cuando Apple, un gran defensor del diseño skeuomorphic, decidió, en 2012, abandonar el skeuomorphism, que anunció un swing completo a plano, que se ha mantenido muy popular en los últimos años. Su énfasis en el minimalismo también ha ayudado a propulsarlo a su ubicuidad actual.
Flat se caracteriza por su ausencia de:
- elementos elevados que indican a los usuarios que pueden hacer clic en ellos;
- elementos vacíos o hundidos que significan que los usuarios pueden rellenarlos (piense en 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 defectos legítimos que no estaban siendo abordados en la comunidad de diseño. Mientras que el plano ganó mucho vapor 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 adversamente la experiencia del usuario.
Por lo tanto, era inevitable que ocurriera otro cambio. Ahí es donde estamos hoy con el inicio 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 suele intercambiar las necesidades de estética de moda de un usuario.
En otras palabras, los diseñadores que diseñan una interfaz para que sea "plana" pondrán mayor énfasis en mantener las cosas mínimas, no tridimensionales y vibrantes / audaces en lugar de anteponer la experiencia del usuario. Normalmente es donde comienzan todas las cosas malas en el mundo del diseño, y es por eso que Flat ha evolucionado a 2.0.
Aquí están los problemas de usabilidad comunes con el plano:
- ausencia de significantes importantes (degradados, sombras, subrayados, etc.);
- ausencia de patrones familiares (azul, texto subrayado para enlaces, etc.);
- ausencia de indicaciones contextuales (colocación 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 Metro UI. Ese diseño era el epítome de lo plano porque todo era plano hasta el extremo.
los la experiencia del usuario fue tan mala porque un diseño completamente plano significa que los usuarios no reciben las pistas necesarias para decirles en qué se puede hacer clic y qué no en una interfaz. Como resultado, los usuarios se ven naturalmente forzados a pasar más tiempo averiguando esto por medio de la experimentación o, peor aún, realizando 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 las personas digan en qué hacer clic y en qué no hacer clic. 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 indican a los usuarios que pueden interactuar con elementos de la página) y pistas de posibilidades (indicaciones de cómo los usuarios pueden interactuar con elementos de página).
Grandes ejemplos de Flat Design 2.0
2.0 es un cambio sutil o mejora sobre el plano, por lo que puede requerir más concentración para detectar true 2.0 en sitios web e interfaces. Es por eso que lo guiaremos a través de algunos ejemplos grandes y actuales de 2.0 que ya están en pleno funcionamiento.
La guía de Dropbox
La guía de Dropbox Al principio puede parecer muy plano, pero si observa más de cerca, verá sugerencias tridimensionales que comunicarán claramente a los usuarios que algunos elementos se plantean 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 la profundidad y la impresión de que están sentados en la parte superior del fondo en lugar de mezclarse con él.
Helado de tolia
El sitio de Tolia está lleno de sutiles efectos 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 CTA dentro del botón. Puede agradecer el uso sutil de sombras finas alrededor de los bordes de estos elementos para dar esta impresión elevada.
Google Santa Tracker
Como era de esperar, Google está en el tren de 2.0, y su Santa Tracker 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 las sombras en los distintos edificios y las burbujas emergentes (cuando los usuarios se ciernen 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 gradientes que bajan e irradian hacia afuera desde el círculo pálido y en la sección azul debajo de él. El austero minimalismo también indica que su estética de diseño aún está fuertemente arraigada en el plano puro.
Jumeirah
Este sitio para un hotel de lujo en los Emiratos Árabes Unidos está principalmente dominado por un video gigante en el fondo, pero no dejes que eso te distraiga de tomar en la sutileza de su contribución 2.0. El título "Jumeirah Inside" presenta un sombreado muy sutil que da la impresión de 3D con éxito manteniendo la apariencia general y plana.
Una evolución por demanda
En el mundo del diseño, las cosas generalmente cambian porque hay una demanda de eso. Alguien notará que falta algo y encontrará una manera de mejorar las cosas, o alguien más tomará un concepto y lo llevará a otro nivel que lógicamente se basa en cierto concepto.
En lo que respecta a 2.0, definitivamente es una combinación de ambos, ya que los defectos de usabilidad planos se fijan al extender el concepto original de una manera que aún respeta los principios de minimalismo definidos por flat.