Krypton Solid

La última tecnología en raciones de 5 minutos

Tendencias de diseño: Flat Design 2.0

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.

001

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.

002

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.

003

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.

004

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.

005

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.

006

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.

007

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.

Deja un comentario

También te puede interesar...

Turk redux mecánico | Krypton Solid

Amazon.com se lanzó recientemente Mecánico turco, un servicio que lleva el nombre de «Automático» del siglo XVIII. Turk resuelve un problema perenne: las computadoras no son adecuadas para muchas tareas, tareas para las que los

Eche un vistazo más de cerca a los fondos de cobertura

Fondos de cobertura: una visión general Los fondos de cobertura son sociedades de inversión privada que utilizan una variedad de estrategias no tradicionales, muchas de las cuales son consideradas demasiado arriesgadas por los administradores de

Cierre de Disney Infinity detallado por Disney

La moda de los juguetes que cobran vida prácticamente ha terminado, al menos a los ojos de Disney, que está cerrando toda su gama de juegos de plataformas de acción aceptables respaldados por montones de

Billar en línea | Krypton Solid

El sonido de la pelota golpeando la pelota, los momentos de suspenso que se pasan esperando el movimiento de un oponente, la atmósfera que se crea alrededor de la mesa de juego: nada de esto

Definición de lote estándar

¿Qué es un lote estándar? Un lote estándar es el equivalente a 100.000 unidades de la moneda base en una transacción de divisas. Es uno de los tres tamaños de lote comúnmente conocidos; los otros

Cómo jugar Burraco | Krypton Solid

Hace unas semanas aprendiste como jugar al buraco y este último se ha convertido rápidamente en uno de tus juegos de cartas favoritos. Desde entonces, no has perdido la oportunidad de organizar partidos con tus

Personal de Salesforce aprendido por phishers

Salesforce.com ha revelado algunos detalles sobre una brecha de seguridad causada por un ataque de phishing contra un empleado que entregó los detalles internos de la base de datos de clientes. Los datos del cliente

Definición de explotaciones

¿Qué son las participaciones? Las participaciones son el contenido de una cartera de inversiones en poder de una persona o entidad, como un fondo mutuo o un fondo de pensiones. Las tenencias de la cartera

Revisión de seguros de vida para colonos 2022

Settlers Life no es una de nuestras principales compañías de seguros de vida. Puede consultar nuestra lista de las mejores compañías de seguros de vida para conocer las que creemos que son las mejores opciones.

Cómo usar Bumble en la web: guía completa

Bumble es una aplicación de citas en línea popular, pero ¿sabías que también puedes usarla en la web? Sí, es cierto, Bumble tiene una versión web que puedes utilizar desde tu computadora. Esto es genial