La guía para principiantes del diseño plano

Cambio de marca de Burger King
(Crédito de la imagen: Burger King Corporation)

En el pasado, los diseñadores web ponían un enfoque particular en mostrar sus habilidades y portafolios empaquetando sitios con ilustraciones y animaciones llamativas que supuestamente cautivaron a sus visitantes. Luego vino un cambio hacia el diseño esqueuomórfico, que intentó darle vida real a la pantalla, con texturas de realismo falso, sombras paralelas y características de objetos reales.

Eso dio paso al diseño plano, que se opuso a todas estas técnicas de diseño 'artificiales' en favor de una estética digital clásica más simplificada. Y aunque este estilo de diseño web centrado en el usuario existe desde hace muchos años, sigue siendo tan relevante y popular como siempre, y está experimentando un resurgimiento en diseño de logo , también. Entonces, si aún no está seguro de qué se trata, esta guía podría ser justo lo que necesita ...

¿Qué es el diseño plano?

¿Qué es el diseño plano?



Windows 8 estuvo a la vanguardia de la tendencia del diseño plano

El diseño plano es un enfoque de diseño minimalista que enfatiza la usabilidad. Presenta espacios limpios y abiertos, bordes nítidos, colores brillantes e ilustraciones bidimensionales.

Microsoft fue uno de los primeros en aplicar este estilo de diseño a su interfaz, visto por algunos como una reacción violenta contra el popular diseño skeuomorphic que Apple inició con su interfaz iOS. En lugar de convertir un objeto de la vida real, como un calendario, en una pequeña ilustración realista, los defensores del diseño plano identifican las aplicaciones con imágenes simples parecidas a iconos.

En lugar de traer aspectos de la vida real a una interfaz, esto ilustra una clara separación entre tecnología y objetos táctiles.

Minimalista no significa aburrido

En el diseño plano, los elementos ornamentales se consideran un desorden innecesario. Si un aspecto no tiene un propósito funcional, es una distracción para el usuario. Esta es la razón de la naturaleza minimalista del diseño plano.

Sin embargo, solo porque carece de un diseño llamativo no significa que este estilo sea aburrido. Los colores brillantes y contrastantes hacen que las ilustraciones y los botones resalten del fondo, capten la atención fácilmente y guíen la mirada del usuario. El propósito de las imágenes minimalistas también contribuye al carácter funcional del diseño plano.

El diseño plano es simplista

iconos de aplicaciones

El diseño plano definitivamente está teniendo un momento, ¿ha ido demasiado lejos?(Crédito de la imagen: Tobias van Schneider)

Las imágenes simples transmiten mensajes más rápidamente que las ilustraciones detalladas. Las imágenes como iconos pueden indicar acciones o propósitos universales para que todos puedan entenderlos fácilmente.

Es fácil ver una diferencia inmediata entre un diseño esquemórfico y uno plano. Observe cómo los bloques de colores sólidos más grandes llaman más la atención y el significado de los iconos se puede percibir rápidamente.

Los íconos de arriba muestran solo algunos de los íconos en uso en 2021, incluido el controvertido cambio de marca del ícono de Google del año pasado. El peligro aquí es que debido a que todos siguen la tendencia del diseño plano y usan colores brillantes para realzar sus diseños, casi se están volviendo demasiado similares (como exploramos en esta pieza ). Esto solo demuestra que existe una delgada línea entre seguir tendencias como el diseño plano y destacar entre la multitud.

Qué puedes aprender del diseño plano

El diseño plano vuelve a los fundamentos del diseño como herramienta funcional. Un sitio web está diseñado y juzgado por lo bien que funciona, en contraposición a su apariencia.

Esta funcionalidad en bruto obliga a un sitio a centrarse en la experiencia del usuario, por lo que es probable que los sitios web que emplean este estilo de diseño con éxito reciban comentarios positivos por ser fáciles de usar.

Cómo crear un diseño plano

Para diseñar un sitio plano eficaz, todos los elementos de diseño deben centrarse en esta idea de simplicidad. Los colores sólidos y vivos dan a los aspectos el énfasis necesario para diferenciarlos en lugar de detalles ilustrativos; la tipografía sans-serif proporciona un complemento limpio y nítido a las ilustraciones; el texto es conciso y directo; Los elementos de la interfaz de usuario, como botones y enlaces, son claros y visibles.

Todo debe diseñarse con el mismo objetivo en mente para crear un diseño web coherente visual y funcional. A continuación se muestran algunos excelentes ejemplos de diseño plano ...

Ejemplos de diseño plano: Tripfinder

Ejemplos de diseño plano: Tripfinder

Los colores y los iconos ayudan a aclarar el significado con una copia mínima

Esta diseño de aplicaciones de planificación de viajes por el diseñador de interfaz de usuario de Indonesia Bady hace que sea extremadamente fácil reservar un vuelo basado en paquetes y presupuestos. Todo es claro y comprensible, y el diseño se basa principalmente en colores e iconos para dar significado. La copia es concisa y el aspecto de la interfaz de usuario de la búsqueda de un vuelo ideal es obvio.

Ejemplos de diseño plano: sitio web de Burger King

diseño plano sitio web de Burger King

El sitio web de Burger King está en línea con su reciente cambio de marca(Crédito de la imagen: Burger King)

Burger King renombrado a principios de 2021 con gran éxito, y su nuevo logotipo es una clase magistral de diseño plano. Su sitio web ha sido rediseñado para que coincida y utiliza ilustraciones e iconos simples para guiar a los usuarios por el sitio. La aplicación también adopta un enfoque igualmente optimizado.

Ejemplos de diseño plano: aplicación meteorológica

Ejemplos de diseño plano: aplicación meteorológica

El diseño plano no depende del color brillante

Esta diseño de interfaz de usuario de la aplicación meteorológica muestra que el diseño plano puede tener éxito incluso sin el uso de colores brillantes. La iconografía nítida y la gran tipografía llaman la atención sobre los aspectos más importantes del clima, que es lo que busca el usuario.

Cuando explore el diseño plano en su trabajo, asegúrese de diseñar cada aspecto con una perspectiva minimalista y centrada en el usuario para garantizar una interfaz unificada. Una vez que haya hecho esto con éxito, sus usuarios apreciarán la naturaleza funcional de su sitio web.

Artículos relacionados: