Flat v/s Material

  • por Josefina Balmaceda

Dentro del diseño web hoy podemos encontrarnos con diferentes tendencias donde destacan el Flat Design y Material Design quienes nacieron como respuesta a la necesidad del usuario de navegar más fluida y rápidamente a través de diferentes plataformas.

 

Skeumorfismo

En un inicio los diseños de interfaz móvil y web seguían los conceptos del skeumorfismo donde texturas, degradados, sombras y brillos buscaban imitar las superficies y objetos de la vida real con el fin enseñar al usuario cómo relacionarse con las nuevas interfaces.

Apple fue el precursor de este estilo de diseño como podemos ver en sus sistemas operativos desde el Iphone 3 hasta el IOS 7 donde se unió a la tendencia del Flat design.

Mientras Apple seguía desarrollando con base en el diseño skeu, Microsoft apostó por una nueva tendencia en diseño el Metro design. Enfocado en la combinación de tipografías y formas geométricas que dio paso al flat design.

 

Flat design

El flat design eliminó todos los elementos multidimensionales como sombras, texturas y gradientes y potenció el uso de tipografías, icono y colores planos.

Uno de los beneficios del flat design es que al eliminar las texturas disminuyó notablemente el tiempo de carga y resultó ser más versátil a la hora de verlos en diferentes pantallas, ya que es igual de atractivo en pantallas de alta y de baja resolución.

El contenido de las imágenes hace mas fácil para el usuario captar el mensaje que se quiere transmitir y ayudan a que éste se enfoque en el mensaje principal.

Microsoft ,quien dio paso al Flat design con la introducción de Windows 8, fue criticado duramente por Jakob Nielsen, padre de la usabilidad, quien resaltó la dificultad del usuario para encontrar botones útiles dentro de la interfaz entre otros.

 

Material Design

Material design intenta re integrar algunos de los conceptos del skeuomorphism como la multidimensionalidad gracias al eje z.

Matías Duarte, el diseñador que gestionó todo el proceso creativo lo define así: “Exactamente como el papel, nuestro material digital se puede expandir o restringir, adaptándose de manera inteligente. Los materiales tienen superficies físicas y bordes. Cosas como sombras y costuras dan un significado a lo que tocas”.

A diferencias del Flat design donde los elementos clickeables pueden ser fácilmente confundidos con los no clickeables, iconos y textos, lo cual, resulta en una pobre experiencia de usuario, el Material design agrega sombras y animaciones para lograr una interfaz más intuitiva sin perder la simplicidad.