¿Qué es el diseño plano?

Prefiero decir que la interfaz de usuario plana es una tendencia de diseño.

El diseño plano de la interfaz de usuario contrasta con el diseño de eskeomorfismo.

Los diseñadores de skeuomorphism intentan hacer que las cosas parezcan lo más realistas posible, mientras que en el diseño plano, los diseñadores intentan representar su esencia y hacer que el diseño sea lo más simple y claro posible.

Tomemos la calculadora, por ejemplo: La batalla entre el diseño plano y el esqueuomorfismo.
Plano a la izquierda y Skeuomorphism a la derecha:

Pero la batalla entre flat y Skeuomorphism nunca llega a su fin.
Puede descubrir que al comienzo del diseño de la interfaz de usuario de la computadora (cuando tal vez no había ningún diseño), el diseño de la interfaz de usuario era bastante simple.
A medida que más y más diseñadores entran en el campo, la interfaz de usuario de la computadora se vuelve cada vez más elegante y el diseño de Skeuomorphism como el de Apple nunca falla (incluso hoy) para fascinar a los usuarios.
Y luego, a medida que Win8 de MS trae el estilo Metro, el mundo se da cuenta de que los sitios que usan diseño plano como http://github.com se ven muy bien.

En mi opinión, existe una tendencia de diseño en la preferencia del diseño plano y el diseño del esceomorfismo , pero los principios generales del diseño (por ejemplo: encoger-esconder-abrazar como se dice en el libro Las leyes de la simplicidad ) existen sin el cambio del diseño plano o del diseño del esqueleto preferencia.

Creo que la mejor manera de definir el diseño plano es compararlo con lo que no es diseño plano: el esceptomofismo.

La diferencia entre skeuomorphic y flat es más que una simple falta de gradientes y sombras. Un botón de edición que se parece a un lápiz es skeuomorphic. Mientras que un botón de edición que simplemente dice Editar (como en Windows Phone) es realmente plano.

Para un ejemplo poco común pero poderoso de lo que es el diseño plano, compare el logotipo de OS X antes y después de la tendencia del diseño plano:


“Las interfaces de usuario esuomórficas se confunden comúnmente con las interfaces de usuario” realistas “. Cualquier aplicación que se parezca a un calendario, ya sea que tenga costuras de cuero falsas o no, es un skeuomorfo. Un contenedor de basura es un skeuomorph. Un procesador de textos que emula una hoja de papel, con márgenes, es un skeuomorph. Cualquier aplicación que emule una libreta de direcciones es un skeuomorph, incluso si no parece un libro real. Su funcionalidad es Aún escéptico.

El diseño plano no cambia el escepticismo; simplemente reduce las texturas utilizadas para su esencia desnuda. Es imposible eliminar por completo el esceptomorfismo, porque muchas de las cosas que realmente hacemos en nuestras máquinas se correlacionan con las cosas que hacemos en realidad “.

kunai – Noticias Hacker

El logotipo de Windows se ha convertido en algo entre plano y esceptomorfo. Tenga en cuenta la similitud (y planitud) entre el primer logotipo de Windows y el de hoy.


Otro logotipo que ha tomado nota, pero no ha aceptado completamente la tendencia del diseño plano, es Firefox de Mozilla. Como escribe Sean Martell, “simplificar un estilo no siempre significa reducirlo a formas geométricas básicas y colores sólidos”. Esto es muy importante de notar. Aunque el diseño plano a menudo se reduce al extremo, no siempre es mejor.

Tenga en cuenta la clara falta de planitud en la cola del zorro.

Este es un tipo de diseño que se despoja de cualquier elemento multidimensional. Es decir, hace que parezca que todos los objetos están acostados en una sola superficie. El diseño plano acaba de deshacerse de cualquier elemento estilístico como sombras paralelas, texturas y degradados para que se parezca más al juego de fuentes, iconos y colores. Pero, ¿por qué necesitamos este movimiento? Eso es muy facil.

En primer lugar, el diseño plano reduce en gran medida el tiempo de carga de una página. La ausencia de detalles skeuomorphic pesados ​​(capas de pensamiento, gradientes, fuentes serif) hace que los elementos de diseño plano sean mucho más pequeños, lo que, en parte, acelera el tiempo de carga. Además, los elementos planos pueden parecer igualmente atractivos tanto en pantallas de alta resolución como de baja resolución (esto es exactamente lo que quise decir con una solución sólida compatible con dispositivos móviles).

En segundo lugar, las imágenes simples transmiten su mensaje más rápidamente que las ilustraciones detalladas. Son esquemáticos, son bastante ingenuos, por lo que todos pueden obtenerlos.

Finalmente, los iconos planos con fuentes igualmente simples que los acompañan pueden ayudarlo a dirigir la atención de los usuarios hacia un contenido realmente valioso. Por lo tanto, no es probable que las personas pasen mucho tiempo examinando su arte digital en lugar de leer texto en su sitio web o aplicación. Sin embargo, estas imágenes planas pueden verse bastante bien para decorar su página y ayudar a los usuarios a navegar por la aplicación web, móvil o de escritorio.

Por muy bueno que parezca un diseño plano ahora, causó algunos problemas desde el principio. El mejor y más obvio ejemplo que puedo darle hasta ahora es el lanzamiento de Windows 8 por parte de Microsoft, considerado el pionero del diseño plano, que respalda el concepto de diseño de Metro. El principal error de la compañía fue concentrarse más “en la tipografía que en los gráficos”.

Consulte más información aquí: https://www.cleveroad.com/blog/f

  • El diseño plano es ese tipo de diseño que utiliza minimalismo y actitud receptiva.
  • Esto ayuda a los usuarios a concentrarse en el contenido sin ninguna distracción.
  • El enfoque principal del diseño plano es la usabilidad.

Algunos de los beneficios son:

  • El diseño es limpio y sin ninguna complejidad.
  • Se utiliza principalmente para eliminar componentes o características innecesarias que no ayudan a cumplir el propósito.
  • La estructura básica del diseño se basa en un patrón de cuadrícula con elementos de bloque.
  • Se centran en imágenes en 2D. El uso subyacente de los objetos 2D que producen un efecto 3D es el concepto subyacente.
  • El uso liberal de iconos hace que el sitio sea interactivo, atractivo e interesante.

Sobre el diseño hay mucho más que aprender, para eso solo eche un vistazo al artículo: una guía completa de diseños planos en el diseño de sitios web

El diseño plano es solo la última tendencia de diseño y es muy adecuado para la plataforma móvil. Con pantallas más pequeñas y conexiones de datos generalmente más lentas que las computadoras de escritorio, se pueden lograr muchos elementos de diseño planos con CSS puro y sin el uso de imágenes. Puede ver en los ejemplos en el nuevo ios7 que no se han vuelto completamente planos, vea las burbujas de Game Center.

Personalmente, creo que también está más en línea con el lema de vejez del diseño digital. No me hagas pensar: el diseño plano es generalmente más simplista y puede requerir un mayor nivel de esfuerzo por parte del diseñador para lograr elementos comunicativos claros.

El diseño ‘Metro’ de Windows es muy similar y diría que fue uno de los primeros pioneros en la fase actual del diseño plano.

Se rumorea que iOS 7 presentará un diseño plano, posiblemente con este aspecto …
Este es un gran ejemplo de cómo se ve el piso. Puede leer más aquí: http://mashable.com/2013/05/24/a

El logotipo de OS X antes y después de la tendencia de diseño plano:

Las IU esquemomórficas se confunden comúnmente con las IU “realistas”. Cualquier aplicación que se parezca a un calendario, ya sea que tenga costuras de cuero falsas o no, es un skeuomorph. Cualquier software de presentación que cree diapositivas que se vean como viejas diapositivas de proyección de 35 mm, es un skeuomorph. Un basurero es un skeuomorph. Un procesador de textos que emula una hoja de papel, con márgenes, es un skeuomorph. Cualquier aplicación que emule una libreta de direcciones es una skeuomorph, incluso si no se ve como una libreta real. Su funcionalidad sigue siendo skeuomorphic.

El diseño plano no cambia el escepticismo; simplemente reduce las texturas utilizadas para su esencia desnuda. Es imposible eliminar por completo el esceptomorfismo, porque muchas de las cosas que realmente hacemos en nuestras máquinas se correlacionan con las cosas que hacemos en realidad.

kunai – Noticias Hacker

Puedo recomendar un artículo que incluya todos los detalles sobre el diseño plano: Principios de diseño plano.

Hay cinco características bastante distintas. Aquí hay un vistazo a cada uno, más una introducción al diseño plano “casi”.

El diseño plano es una abreviatura de una filosofía de diseño que defiende la simplicidad, claridad y honestidad de los materiales en las interfaces de usuario.

¿Qué es el diseño plano?

¡Aquí está todo lo que necesita saber sobre el diseño plano! ¿Qué es el diseño plano? ¿Es el futuro de la web y los dispositivos móviles? – ÜberMotif

Realmente lo que dice. Similar al estilo suizo de diseño gráfico. Funcionalidad sobre estética. Metro es el ejemplo obvio. Sin sombras ni otros efectos superfluos.