Tipos de Diseño: Skeuomorphism, Flat Design y Material Design.

Sheyla María Vilca Neira
5 min readMay 9, 2017

--

Flat Design y Material Design: ¿En qué se diferencian?

Dos estilos de diseño similares, uno basado en el otro. Uno la “lo último en tendencia”, y el otro camino hacia convertirse en una moda pasajera. Pero ¿Cuáles son las diferencias entre los dos, en realidad? ¿Es uno intrínsecamente mejor que otro? ¿Mejor para ciertos usos? De hecho, algunas personas se preguntan la diferencia que existe entre ellos en primer lugar. Vamos a empezar con lo básico: que radica en la cantidad de skeuomorphism presente en cada uno.

Skeuomorphism

En este contexto, este tipo de diseño se basa en imitar el mundo físico. Por lo general, convierte el contendido (botones, imágenes, fondo de pantalla, etc.) para que se vean similares en el mundo real.

Con el tiempo, el mundo del diseño llegó a la conclusión de que se necesitaba algo más, algo que quitaría todos los elementos decorativos retro y dejarlos con algo que pondría a la facilidad de uso en primer lugar, la velocidad de la carga y poniendo el foco en conseguir visitantes a través del contenido eficientemente. Entonces quitaron todos los rastros de skeuomorphism desde la interfaz digital para crear el diseño plano.

Flat Design

Es el tipo de diseño que contiene lo básico. Se elimina cualquier opción de estilo que le dan la ilusión de tridimensionalidad, como sombras, degradados y texturas. Se centra exclusivamente en la interacción de los iconos, la tipografía y el color.

Flat Design

Es uno de los primeros estilos coherentes desarrollados específicamente para los medios digitales, aprovecha las propiedades únicas de la Internet y las necesidades de sus usuarios con botones simples orientados hacia la búsqueda eficiente, combinaciones de colores simples hechas para la identificación rápida de los elementos e iconos simples.

La apariencia es secundaria en diseño plano. La sencillez de su iconografía puede incluso eliminar la necesidad de algunos elementos ya que los espectadores están intuitivamente guiados a través del proceso de uso con base en los colores e imágenes por sí solas. Además, para acelerar el tiempo de carga y verse igual de bien en las pantallas de alta o baja resolución, lo que resulta una experiencia de usuario más fiable. Como tal, las cosas se ponen mucho más fácil tanto para diseñadores como para los usuarios.

Ventajas

  • Se agiliza diseños y se deshace de elementos gráficos y animaciones innecesarias, disminuyendo el tiempo de carga.
  • La falta de elementos skeuomorphic también puede acelerar la progresión de los lectores a través de su contenido.
  • Elimina todas las opciones de diseño innecesarias, ya que facilitan el diseño del sitio más rápido.
  • Son infinitamente adaptables y muy fácil de hacerlo sensible o responsive.

Desventajas

  • El diseño plano puede ser limitante, ya que se limita a simples colores, formas, y una sencilla iconografía.
  • Esta tendencia hace que todos los sitios tengan cierto parecido lo que podría generar en el usuario que la página o aplicación tenga un sentido muy monótono y con aspecto genérico.
  • Algunos sitios o aplicaciones, requieren señales visuales complejas para guiar al usuario a través del proceso, que es uno de los principales puntos que fallan de diseño plano. Una queja común es que su falta de sombras y bordes elevados puede hacer que sea difícil saber cuáles son botones de selección aparte de gráficos vectoriales estáticos.
  • Su ubicuidad puede hacer que sea difícil crear un sitio o aplicación Flat de aspecto original.

Diseño de materiales

Material Design

Los críticos de diseño plano argumentan que se ha ido demasiado lejos; que fue demasiado radical la eliminación de todas las skeuomorphism, incluso los más útiles. Toman prestado el concepto de capas de un sinnúmero de editores de imagen y los separan por sombras, biseles y animaciones que se nutre de nuestra capacidad natural para correlacionar con la profundidad importancia.

El diseño de materiales, para algunos, es un conjunto de normas de diseño desarrollados por Google. Tiene un sinnúmero de características únicas e interesantes, pero quizás el más definitorio es su uso del eje Z (profundidad). Básicamente, se añade un poco de skeuomorphism de nuevo, en diseño plano, creando la impresión de un montón de planos bidimensionales que flotan sobre uno sobre otro en elevaciones designadas.

Imagina un pedazo de papel, pero que puede expandirse y contraerse a voluntad, reformarse, fusible y se dividen. Ahora apilar unos pocos de estos en la parte superior de uno al otro (que pueden levitar, también), y dibujar un elemento de sitio en cada uno. Ese es el concepto en pocas palabras.

Es el estándar para el diseño de aplicaciones para Android. Si se debe o no utilizar en IOS es la fuente de un debate en curso, y algunos sostienen que es necesario para preservar el aspecto de Google, y otros argumentando que choca con el resto del sistema operativo. Queda a decisión propia.

Ventajas

  • La disposición tridimensional hace a los programas más fácil para interactuar con el usuario, por ejemplo: las sombras que se utilizan para indicar disposición de una capa.
  • A diferencia de diseño plano, el material viene con un conjunto muy detallado y específico de directrices, sin dejar nada a la conjetura.
  • Si tú estás planeando desarrollar para múltiples plataformas, como un sitio web o una aplicación para Android, Material Design proporcionará una experiencia unificada a través de todos los dispositivos, que ayudarán la facilidad de uso y sutilmente ayudará a tu marca.
  • Si tú estás interesada en tener animaciones, Material Design es el camino a seguir, ya que viene con trabajo incorporado que tendría que hacerse manualmente lo contrario.

Desventajas

  • Nos guste o no, Material Design está ligado a Google. Si deseas distanciarte de eso, y crear una identidad única para su sitio o aplicación, será mucho más difícil si utilizas las pautas de Google para hacerlo.
  • Las animaciones desgastan las baterías de los móviles de los usuarios.
  • Obliga a los desarrolladores a que se adhieran a las pautas de Google, lo que puede apagar aún más la creatividad individual y retardar el desarrollo de más animaciones y elementos decorativos.

Conclusión

Si tu estás diseñando un sitio que tiene que ser simple, que está dirigido a una amplia variedad de usuarios en todos los dispositivos y con todos los niveles de experiencia técnica, o simplemente quieres poner mucho más énfasis en la facilidad de uso sobre la forma, el diseño podría ser Flat Design. Sin embargo, si tu quieres construir un sitio súper cool, con animaciones, sin duda deberías optar por el Material Design.

Recursos

Flat Design vs Material Design.

Principios del Flat Design.

Principios del Material Design.

--

--