8 enero, 2016

SKEU, Flat Design y Material Design: historia del diseño

En los últimos años las “modas” del diseño han cambiado muy rápidamente, ¿la razón? Grandes marcas como Apple, Google y Windows decidieron arriesgarse aceptando o creando diseños innovadores para sus clientes con el objetivo principal de aumentar las ventas.

Ejemplo de adaptabilidad en Material Design

Para entender bien las últimas tendencias hay volver la vista atrás, precisamente al 29 de junio de 2007. Este día supuso un hito en el mundo del diseño: el primer iPhone vió la luz, presentando una interfaz innovadora y muy distinta a todo lo conocido hasta el momento. ¿Lo recordáis?

mobile desing

SKEU

Se introdujo así el Esqueumorfismo (SKEU), un estilo de diseño (casi extinto actualmente) donde texturas refinadas, de muy fácil comprensión y uso, imitaban superficies reales. Apple decidió enriquecerlo y usarlo, ya que nadie estaba a acostumbrado a tal detalle visual en un móvil y porque el diseño realista es la mejor forma de enseñar al usuario a utilizar una interfaz (que nos se nos olvide que fue el primer teléfono con pantalla táctil y sin teclado comercializado a gran escala).

Steve Jobs, padre de Apple

El resto de compañías siguieron sus pasos y el SKEU proliferó incontrolado e imparable hasta 2012.

 

Flat Design

Hemos dicho que se le puede atribuir a Apple el éxito del SKEU, pero mientras este se expandía como una mancha de aceite, otra compañía estaba creado el próximo viral design.

Microsoft plantea un rediseño de la marca en 2010, y, no sabemos si para diferenciarse de Apple o porque consideraba este diseño como el más adaptado a las necesidades de los usuarios, creó el Metro Design, la base del concepto Flat Design, como probablemente notaste con Windows 8 o en los nuevos Windows Phone.

Microsoft implanta el Flat Design en Windows 8

Esta actualización captaría toda la esencia del Metro Design, páginas donde cada uno de los elementos encaja en una cuadrícula respetando proporciones y espacios. Se eliminan las texturas realistas del SKEU, adoptando colores planos y brillantes.

El estilo en cuadrícula de Windows permitió adaptar la interfaz tanto a una pantalla de 30” como a un teléfono móvil de 4”, creando un sistema operativo capaz de ajustarse a todos los dispositivos que la empresa produjese.

En términos técnicos: se optimizó la interfaz de cara al surgir de las web y aplicaciones responsive. ¿Casualidad? No lo creo.

De hecho se hablaba del responsive desde 2008, aunque fue en 2010 cuando los internautas se dieron cuenta de que una gran novedad estaba por venir.

Volviendo al tema del Flat Design, ¿qué es?

A grandes rasgos, el concepto se resume en formas geométricas planas, espacios bien definidos, colores brillantes, ilustraciones e interfaces bidimensionales y minimalistas, resultado de una modernización tecnológica de lo que en los años 50 era el diseño suizo y el De Stijl holandés.

La diferencia sustancial entre el SKEU y el Flat Design no es puramente visual sino conceptual. El primero quiere representar el mundo real con sus matices (las texturas, los reflejos, etc..) mientras el segundo lo interpreta de forma más sintética, a través de signos gráficos elementales.

Llega el 2013 y el Flat Design se extiende por toda las gráficas, desde el diseño web pasando por las cartas de muchos restaurantes, a todas las interfaces de dispositivos móviles.

Durante el WWDC Apple presentó el iPhone 5s y su nuevo sistema operativo. ¿Adivinad? Por primera vez en 5 años, los de la manzana decidieron revolucionar el producto pasando al Flat Design. Y por lo visto hicieron bien, porque este cambio sin duda contribuyó a que batiesen el récord de ventas en tan solo 2 semanas, aunque este modelo era casi igual al iPhone 5 (la pequeña gran revolución: la nueva interfaz del sistema operativo y algunas mejoras a nivel hardware).

Pero como pasa con todas las modas cuando se explotan, este diseño resultó pronto “cansino” y a mitad de 2014, Google presentó, durante su conferencia anual sobre sus productos dirigida a los programadores y desarrolladores, el Material Design.

 

Material Design

Su objetivo es mostrar interfaces que se comporten como materiales reales (de aquí el nombre Material), no como hace el SKEU imitando la textura, sino más bien con la capacidad de ajustarse a diferentes situaciones.

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”.

Es la evolución (salvando las distancias) del Flat Design: de hecho comparten algunas “normas fundamentales” como los colores fuertes y planos, además de las formas geométricas básicas (cuadrado y círculo).
Los principios del Material Design se pueden resumir en:

 

  1. Superficies táctiles (Quantum Paper)

Hacen de este estilo de diseño el más práctico a nivel de usabilidad y también de captación en Marketing.

Por primera vez la interfaz gráfica bidimensional del flat design se transforma en una superficie tridimensional, controlada mediante una unidad de medida fija (1 dpi). Los elementos adquieren así sombras muy realistas que determinan la importancia jerárquica (algo imposible en el Flat Design).

Los niveles mejoran la experiencia del usuario y nos permiten dirigir su atención sobre los elementos más importantes de la página, como el menú y los varios botones.

quantum-paper-material-design

  1. Animaciones inteligentes

 

Una animación tiene razón de ser si es coherente y si ayuda a la experiencia de usuario; no debemos quedarnos con una página aburrida, pero tampoco excedernos con una interfaz llena de animaciones que impiden concentrarse al usuario.

Por ello, cada animación debe ser la consecuencia de un gesto del usuario, es decir, un reflejo de una intención del mismo. La novedad es que ahora las animaciones empiezan exactamente en el punto donde el usuario ha apoyado el dedo y la pantalla se transforma para mostrar la nueva información.

ejemplo de animaciones inteligentes del material design ejemplo de animaciones inteligentes del material design

 

 

  1. Adaptabilidad

 

Al igual que en el Flat Design, las interfaces gráficas deben ser responsive, es decir,  adaptarse a cualquier tamaño de pantalla de forma automática.

El funcionamiento es simple: debemos reducir la cantidad de   ( textos y imágenes, vídeos galerías de fotos..) cuando el tamaño de la pantalla sea más pequeño. A nivel práctico, mejora de manera increíble la experiencia de usuario permitiendo una lectura rápida y clara incluso con un dispositivo móvil (el 90% de los usuarios de internet en el mundo, 2.900 millones, acceden a la red a través de dispositivos móviles).

Ejemplo de adaptabilidad en Material Design

 

  1. Tinta digital

 

La tipografía toma un nuevo significado. Así como en el diseño “impreso”, el texto vuelve a tomar importancia en la composición pero la forma de emplearlo cambia, usando como norma una sola familia tipográfica por documento y marcando los elementos que tienen más importancia con las variaciones de la misma (bold, black, book, thin ect..).

Por otro lado, para no desviar la atención, se aconseja  usar 3 colores como máximo por archivo, escoger imágenes que tengan buena calidad (dependiendo del empleo que le vayamos a dar, pero por norma que no se vean pixeles ni que estén borrosos los elementos en los cuales queremos que el usuario se fije) y se excluyen las que no representen bien lo que queremos vender.

Ahora ya conoces un poco más de la historia del diseño más reciente 🙂