Skeumorfismo vs Flat Design

Nuevas tendencias en el diseño digital

Skeumorfismo vs Flat Design

Skeumorfismo vs Flat Design

 

Aunque en artículos anteriores ya hemos hecho referencia a nuevas tendencias del diseño digital, como el Responsive Design y la importancia del Mobile First y el efecto Parallax, hoy vamos a hablar sobre un nuevo cambio de tendencia que se está dando en la actualidad, tanto en diseño web como en el diseño de Apps: Skeumorfismo vs Flat Design. Aunque este último ya hace años que existe, hasta ahora no se ha convertido en una nueva tendencia. Pero vayamos por partes…

¿Qué es el Skeuformismo?

La palabra Skeufrmismo proviene de Skeuos – herramienta y Morph – forma. Consiste en la creación de interfaces lo más parecidas a la realidad. Se trata de conseguir un realismo visual digital a partir de la versión física de los objetos utilizando texturas y la misma distribución de los elementos del mundo real.  De esta forma se crea un vínculo con el pasado, familiarizando así las nuevas tecnologías y creando una usabilidad en las interfaces mucho más sencilla. Este tipo de diseños es muy utilizado por Apple. Veamos algunos ejemplos para acabar de entender este concepto.

Aplicación para iPad Making Paper: No deja de ser una libreta como las de toda la vida.

making paper ejemplo

Aplicación iBooks. Simula una biblioteca / estantería real.

ibooks aplicación libros

Los principios básicos del Flat Design, una nueva tendencia.

El cambio visual del que hablábamos viene dado por el auge que ha experimentado el Flat Design, sobre todo desde que Microsoft lanzó Windows 8. Consiste en una interfaz plana, limpia y fácil de usar.

Las características o elementos identificativos del Flat Design,  también llamado Diseño Plano, son los siguientes:

  1. Evita todos los elementos gráficos que no tengan un valor significativo para la estructura, es decir, evita sombreados, relieves, degradados, formas realistas y todos los elementos decorativos que se te puedan ocurrir. La estructura vendrá dada por la propia jerarquía de los elementos.
  2. Las tipografías ganan importancia debido a la simplicidad de los elementos. Por tanto,  gran parte del look & feel de tu sitio vendrá dado por ellas así que presta atención a la hora de escogerla. Normalmente se utilizan Sans Serif, que dispongan de gran diversidad de grosor para poder estructurar bien las diversas partes de tu sitio. También puedes utilizar alguna tipografía especial para destacar elementos en concreto, pero no abuses. La tipografía también ayudará a indicar al usuario como debe navegar.
  3. El color. Generalmente se utilizan colores primarios y secundarios, los que podemos apreciar en la rueda de colores. Hay sitios que optan por utilizar la paleta de un mismo color, otros combinan diversos colores. También está de moda utilizar colores retro/pasteles.
  4. Utiliza botones e iconos de formas básicas (cuadrados, rectangulares, triángulos y redondos), fáciles de hacer clic e intuitivos. Están pensados principalmente para la usabilidad móvil.
  5. Si deseas agregar más cuerpo a tu sitio pero mantenerte dentro del Flat Design, puedes optar por las fotografías sencillas. Estas añadirán un punto de profundidad pero encajarán perfectamente.

Algunos ejemplos de Flat Design:

Layervault

layervault ejemplo

 

Itsashapechristmas  

itsashapechristmas ejemplo

Designmodo

aplicaciones

En definitiva esta tendencia o moda tiene una cierta relación con el minimalismo aunque sin llegar a tal extremo.  Pero como no, toda nueva tendencia viene acompañada de una división de opiniones, en este caso, entre los que no quieren abandonar el Skeuformismo y los que apuestan por el Flat Design.

Ignasi Cavallé
icavalle@mediaclick.es