Con la aparición en septiembre de 2013 de iOS7, lo que hasta entonces era una tendencia más en diseño –ya utilizada por ejemplo por Microsoft en el sistema operativo Windows Phone– alcanzó la categoría de moda. Hablamos del diseño plano (en inglés, flat design), un movimiento estético que ha conseguido dejar tocado de muerte uno de los paradigmas en el diseño de interfaces: el skeumorfismo.
El diseño plano hace referencia a un estilo en el diseño de interfaces que elimina todos los elementos estilísticos que dan la sensación de tridimensionalidad y se centra en un uso minimalista de elementos sencillos, tipografías y colores planos. Los primeros ejemplos de diseño plano los podemos encontrar en las décadas de los cuarenta y cincuenta del siglo pasado en Suiza y Alemania. (Fuente: Wikipedia).
Disseny pla en la nova interfície de Windows (font: Microsoft.com)
El diseño plano se caracteriza por:
- Ausencia de texturas, sombras, gradientes, biseles o cualquier otro elemento que provoque sensación de profundidad.
- Diseño minimalista, donde los elementos “respiran” y no se amontonan uno encima del otro.
- Uso de formas geométricas simples (cuadrados, rectángulos, círculos, etc.) para estructurar la información o diseñar elementos de la interfaz (botones, iconos, etc.).
- Uso destacado de la tipografía: en ausencia de elementos decorativos, la tipografía adopta un papel protagonista en el diseño plano, con preferencia por familias sin serifa (de palo seco), usadas en diferentes tamaños y variantes.
- Uso de colores uniformes, vibrantes. La paleta de colores se amplía, pero en su formato más puro: colores primarios y secundarios.
Al margen de modas o tendencias estéticas, uno de los motivos por los que el diseño plano se ha popularizado es por su máxima compatibilidad con el diseño adaptativo. Despojado de elementos decorativos, el diseño plano permite mejorar los tiempos de carga de la web y reescalar fácilmente los elementos en pantalla.
Aun así, el diseño plano plantea ciertos problemas de usabilidad, ya que por ejemplo elimina las pistas visuales que permiten al usuario identificar rápidamente las zonas donde se puede hacer clic en una web. Por este motivo, muchos diseñadores están optando por un camino intermedio, esto es, “casi-plano”, en el que se toma lo mejor de los dos mundos.
Más información y enlaces relacionados:
– The history of flat design: how efficiency and minimalism turned the digital world flat
– Principles of flat design
– Flat design: an in-depth look
Herramientas y recursos
- The ultimate guide to flat design. Incluye una generosa lista de UI kits gratuitos y de pago, así como juegos de iconos y otros recursos planos para nuestros diseños web y móvil.
- Flatdsgn.com. Ejemplos de diseño plano y recursos gratuitos (UI kits para nuestros proyectos).
- Flat inspire. Amplia galería de proyectos de diseño plano, organizados por categorías. Útil para encontrar inspiración.
- Flat UI Design. Muro en Pinterest con ejemplos de aplicaciones móviles y páginas web creadas según criterios de diseño plano.
- Flat UI colors. Elegante paleta de colores planos para usar en nuestros diseños.