top of page

Esqueumorfismo vs. Flat Design

Durante estos últimos años seguro que has escuchado hablar acerca de Flat Design, Material Design y (con suerte) Esqueumorfismo.


Aunque esta palabra extraña no te suene de nada, hoy haremos un repaso a todos estos conceptos de diseño y como se han aplicado en la conceptualización de las interfaces de usuario mobile.


Esqueumorfismo

El Esqueumorfismo, del griego skéuos (que significa vaso o herramienta) y morphê (que significa forma), es una técnica de diseño en que un elemento mantiene ciertos aspectos que nos recuerdan a los objetos originales presentes en la vida real. El objetivo de esta técnica es facilitar y mejorar la experiencia de los usuarios al utilizar la interfaz por primera vez.

Más adelante veremos ejemplos claros de qué significa esto.


Flat Design

Flat Design o diseño plano es un concepto de diseño minimalista que utiliza únicamente los elementos gráficos imprescindibles. 

En el diseño plano se eliminan las sombras, los degradados y las texturas para enfocarse en los iconos, la tipografía, el color y el contenido. Esta pensado para interfaces digitales. 

Las características del diseño plano son las siguientes:

  1. Los diseños son ágiles, sencillos y concretos.

  2. Los diseños, al ser más simples, cargan más rápido en páginas web o dispositivos móviles.

  3. Las tipografías ganan importancia.

  4. Se utilizan colores primarios y secundarios. 


Esqueumorfismo versus Flat Design

Ahora que ya hemos definido que son cada uno de estos conceptos de diseño gráfico, veremos una comparativa de estos y porqué son tan amados y odiados a la vez.

¿Quién no recuerda el cambio radical que sufrió iOS 7? Apple pasó de utilizar el esqueumorfismo en iOS para centrarse en un diseño más plano y funcional.

Apple hizo un buen movimiento introduciendo una interfaz 100% esqueumórfica en sus versiones previas a iOS 7, esto hizo que la gran mayoría de usuario se adaptaran a las nuevas pantallas móviles que estaban surgiendo de una forma muy natural y familiar. Fue una evolución lógica el dejar atrás el hiperrealismo de sus aplicaciones nativas (como iBooks) por una versión más minimalista y funcional.

Iconos

Hace unos años era muy común ver apps con iconos superrealistas y muy trabajados, actualmente la moda se rige por colores planos, elementos simples y contrastes basados en la tipografía o el color.

Icono Calculadora en Flat y Skeumorfista
Instagram flat design y diseño skeumorfista


Elementos interactivos

Así como los iconos han sufrido un cambio radical, también los elementos de interacción dentro de una app se han visto afectados. Vemos como se eliminan todos los elementos prescindibles para centrarnos en la funcionalidad.

Botón, elemento interactivo


Material Design

Otro concepto introducido por Google es Material Design. Esta técnica de diseño se basa en Flat Design pero introduce más dinamismo en diseños digitales.


En Flat Design no existe el concepto de profuncidad, en Material Design se añade una nueva perspectiva a los elementos gráficos.

En Flat Design no existe el concepto de profundidad, en Material Design se añade una nueva perspectiva a los elementos gráficos.


Uno de los principales elementos que Material utiliza en sus diseños es la profundidad. Un elemento puede estar por encima de otro para ganar importancia frente a los otros componentes gráficos del diseño.


Vemos la comparativa entre esqueumorfismo, el diseño plano y el material design en la imagen a continuación.

Comparación entre Material Design, Flat Design y Skeumorfismo

Trabajamos con tu proyecto en mente para ofrecer la mejor experiencia de usuario en nuestros productos, si necesitas más información acerca de cómo implementar una interfaz de usuario amigable y usable, contacta con nosotros.

bottom of page