Diseño plano: orígenes, problemas y Flat 2.0
El diseño plano es un estilo de diseño popular en el que las páginas web no tienen elementos gráficos con efectos brillantes o tridimensionales. Muchos diseñadores consideran que esto es una rama del diseño minimalista.
El diseño plano a menudo se considera lo opuesto a los efectos 3D, las texturas y los estilos de diseño realistas. Una interfaz de usuario verdaderamente plana no tendría ningún efecto 3D, textura o elemento realista.
El efecto 3D aporta la ilusión de profundidad a la interfaz, ayudando a los usuarios a formar una jerarquía visual y saber qué elementos son interactivos.
Las primeras interfaces utilizaban efectos pseudo-3D (sombras, degradados, luces) para aclarar los elementos operables de un vistazo. Sin embargo, este efecto pseudo-3D es demasiado impactante y pesado, y distrae fácilmente la atención del usuario.
La textura hace referencia a aquellos diseños decorativos utilizados en el diseño de interfaces para imitar el mundo real. Lo que quiere hacer el diseño de texturas es utilizar la experiencia existente para permitir a los usuarios comprender rápidamente la interfaz del nuevo producto.
El realismo se refiere a un estilo de diseño que imita objetos reales o sus texturas estéticas.
El diseño de texturas a menudo se confunde con el realismo. A menudo vemos una combinación de los dos utilizados en el diseño web. La principal diferencia entre los dos es que el propósito del realismo es puramente satisfacer las necesidades estéticas, mientras que el diseño de texturas espera utilizar metáforas para ayudar a los usuarios a comprender la interfaz.
En 2011, el estilo de diseño de Microsoft Metro y el lanzamiento de Windows 8 promovieron en gran medida la popularidad del diseño plano. Los documentos de Microsoft describen el nuevo estilo de diseño como "verdaderamente digital", una descripción que realza sutilmente el atractivo del diseño plano para los diseñadores. A diferencia del diseño texturizado, el diseño gráfico se considera una exploración de los medios digitales más que una repetición del mundo físico real.
El aplanamiento de la página web oficial de Apple se ha convertido en un referente de esta tendencia. Apple siempre ha insistido en el diseño de texturas y el diseño realista. No fue hasta 2013 que el sitio web oficial de Apple cambió a un estilo plano.
Desde que se propuso el diseño plano en 2011, Nielsen Norman Group ha criticado públicamente sus problemas de usabilidad (ver enlace ¿Críticas vocales a sus problemas de usabilidad inherentes?). El punto principal es que el diseño plano sacrifica las necesidades de los usuarios por la moda estética.
Durante años, los usuarios se han acostumbrado a los logotipos de clic tradicionales, como fuentes azules, enlaces subrayados o botones con efectos 3D. A medida que las tendencias de diseño cambian y los usuarios están expuestos a nuevos prototipos de diseño, la capacidad de los usuarios para identificar elementos enlazables en los que se puede hacer clic evoluciona, pero eso no significa que podamos abandonar por completo estas señales en las que se puede hacer clic.
Cuando le preguntamos a una canadiense de 22 años cómo sabía acerca de los elementos en los que se puede hacer clic en su sitio web, respondió lo siguiente:
“El estilo original en el que se puede hacer clic, sin importar el texto u otros elementos, subrayados en azul significa que se puede hacer clic. Pero... es especialmente útil cuando está subrayado... O un botón... no diga haga clic aquí... solo diga comprar ahora, comprar o agregar al carrito. p>
Esta oración ilustra vívidamente cómo las personas usan pistas para juzgar la capacidad de hacer clic:
Si su sitio web quiere ser más plano, para evitar afectar la velocidad del usuario. Para encontrar elementos en los que se puede hacer clic, siga nuestras pautas de diseño de elementos en los que se puede hacer clic. .
1. El color más seguro es el azul, también se pueden elegir otros colores;
2 no es necesario subrayar, como en los menús de navegación.
3. Pruebe el color de su hipervínculo para asegurarse de que pueda ser utilizado normalmente por personas con daltonismo.
4. No lo utilice en ningún lugar excepto en hipervínculos (u otros); elementos en los que se puede hacer clic) No utilice fuentes azules ni subrayados en los colores de hipervínculo que defina;
5. Mantenga el estilo del hipervínculo consistente en todo el sitio web.
Asegúrate de que tu botón parezca un botón real. Debe haber las señales visuales adecuadas para ayudar a los usuarios a identificar rápidamente el botón. Si usa un efecto 3D, se recomienda que el botón sea rectangular; si usa un diseño plano, asegúrese de que se pueda hacer clic en él.
2. Para elementos en los que no se puede hacer clic, evite que parezcan botones. Por ejemplo, agregar un fondo negro al texto del título le dará a la gente la sensación de un botón.
3. Preste atención al nivel de contenido de la página y evite darle a los usuarios varios botones. Para que los usuarios no puedan notar la diferencia.
1. Deje que la imagen pequeña tenga retroalimentación visual al hacer clic, como que la imagen se haga más grande.
2. Aproveche al máximo las imágenes, los iconos, el texto y otros elementos para ampliar el área en la que se puede hacer clic y aumentar la disposición de los usuarios a hacer clic.
3. No establezca demasiados botones de llamada a la acción (CTA) para las imágenes a menos que la lista de hipervínculos (o botón) se presente claramente en la imagen.
1. Si desea utilizar un enlace de imagen de icono, asegúrese de que sea claramente legible.
2. Intente agregar pistas visuales en las que se pueda hacer clic, como texto, al ícono, a menos que el ícono que utilice sea muy reconocible o se haya convertido en una práctica de la industria.
Nota: Aquí solo se presentan los puntos clave. Para obtener explicaciones detalladas y ejemplos, visite el enlace al final del artículo: Pautas de diseño de capacidad de hacer clic.
Recientemente, los diseñadores se han dado cuenta de los problemas de usabilidad en el diseño gráfico. Como resultado, comenzó a gestarse un diseño gráfico más maduro y equilibrado. Los diseñadores están descubriendo que pueden explorar oportunidades únicas para lo "verdaderamente digital" sin comprometer la usabilidad.
Este tipo de diseño plano también se conoce como “semiplano” y “casi plano”.
Plano) o “Plano 2.0”. El diseño en este estilo es casi plano, pero se utilizan sombras sutiles, luces y diseño para crear profundidad en la interfaz de usuario.
El lenguaje de diseño de materiales de Google es un ejemplo de Flat 2.0: ayuda a los usuarios a comprender la interfaz y su jerarquía visual a través de metáforas y principios que siguen los principios de la física.
Evernote Android es un excelente ejemplo de Flat 2.0. Aunque la mayor parte de la interfaz de usuario no tiene vida, la aplicación agrega sombras sutiles a la barra de navegación y a los botones FAB (" "). En términos de visualización de contenidos, se proporciona un espacio tridimensional plano y jerárquico en forma de metáfora de tarjeta.
Las primeras GUI pseudo-3D y los diseños de texturas al estilo de Steve Jobs a menudo resultaban en interfaces pesadas. Eliminar estos elementos pesados mejora la usabilidad. Pero borrar las diferencias visuales y aplanarlas por completo irá a otro extremo negativo. Flat 2.0 nos permite diseñar una interfaz concisa y fácil de usar.