Tiempo estimado de lectura:

A grandes rasgos, el flat design es un estilo de diseño minimalista, que prescinde de texturas, relieves y todo aquello que pueda aportar volumen (profundidad) a la apariencia final del producto (llamémoslo así), en aras de una mayor simplicidad, claridad y limpieza.

No soy diseñador ni experto en usabilidad, aunque es un tema en el que me gusta pensar, ya que en el fondo mi trabajo me obliga a tener cuidado con cómo utilizarán los usuarios mis aplicaciones. Por tanto, mis explicaciones adolecerán de cierta falta de rigor académico. Haré lo que pueda por que se entienda.

Los contenidos en la web tienen una jerarquía visual a dos niveles (primera afirmación atrevida).

El primer nivel consiste en la distribución del contenido: los menús de navegación a través de las distintas páginas, el contenido principal y el contenido secundario. El contenido secundario suele ser lo que aparece en una columna en un lateral, en el pie de página como noticias menos destacadas o información adicional.

El usuario ha de ser capaz de distinguir, al menos, el contenido principal, y ser capaz de encontrar los menús que le permitan desplazarse en la página con comodidad.

El segundo nivel, para mi, es el volumen, la forma, que permite asociar los elementos a un comportamiento. Por ejemplo, un menú de navegación, un formulario de introducción de información, un enlace de hipertexto (un link), un carrusel de imágenes que permite ver diferentes imágenes en un espacio fijo común dentro de la página, un elemento de listado que, junto con el resto de elementos similares, forma un grupo fácilmente identificable.

Cada uno de esos elementos de la página tiene una apariencia y un comportamiento fácilmente reconocibles por el usuario medio, que los ha aprendido mediante un uso repetitivo.

Por ejemplo, los botones en una página web se han representado siempre mediante figuras con volumen, imitando los botones que encontramos en las interfaces de usuario en la realidad (por ejemplo, las teclas de un teclado o los botones de la calculadora).

buttons

El estilo de diseño plano prescinde del volumen y utiliza grandes masas de color con amplios márgenes internos, así como contrastes de color, para representar los botones y otros elementos de la interfaz.

canopy

El diseño plano tiene ciertas ventajas. Por ejemplo, permite jugar más con la tipografía, aumentando los tamaños de los textos y mejorando la accesibilidad del texto. Como se eliminan artefactos del diseño disponemos de más espacio para centrarnos única y exclusivamente en el contenido. También es algo diferente, bueno, hasta que todo el mundo, como está sucediendo ya, lo utilice.

Pero personalmente le encuentro más inconvenientes que beneficios.

Esos artefactos que eliminamos son los que nos permiten distinguir las diferentes secciones de contenido, los botones de los carteles, los textos imporantes de los que no lo son, el contenido especial como tal. El volumen en las páginas aporta significado adicional al contenido, forma parte intrínseca de ese segundo nivel del que os hablo.

Al eliminar el volumen dependemos únicamente del color. En diseño web normalmente se dice que hay que limitarse a una paleta de tres o cuatro colores a lo sumo. El volumen se consigue normalmente mediante variaciones en esa paleta de color hacia el blanco o el negro para aportar luz o sombra.

Si eliminamos el volumen, nuestra paleta de color se limita. La mayoría de las páginas con diseño plano que me encuentro por ahí utiliza paletas de color parecidas: grandes masas de color, como he dicho, con colores pastel que acaban creando diseños poco contrastados, que son más difíciles de leer, en el sentido amplio del diseño (identificar patrones). De pronto navegando por una web de compras como la de la segunda imagen, te encuentras con una masa verde brillante con un texto blanco en su interior. Nada indica que esa masa sea un botón hasta que pasas el puntero del ratón por encima y ves que éste cambia para representar una mano y, si tienes suerte, el botón cambia para representar un nuevo estado. Aunque el botón sea muy grande, al carecer de volumen es más difícil de leer que una versión clásica de ese elemento.

Este problema lo podemos trasladar al resto de las interfaces con un diseño plano. Hay que hilar muy fino a la hora de diseñar para que una página con este estilo plano se lea bien, que su texto sea legible y los componentes de la interfaz con los que el usuario debe interactuar sean fácilmente identificables.

En definitiva, menos es más, si, pero toda simplificación tiene un límite. No se pueden eliminar de un plumazo los patrones que el usuario ya conoce. No hay que roer hasta el hueso.

Aunque no totalmente, me gustan algunos patrones que adopta la última versión del panel de administración de Wordpress, que ha adquirido un aspecto plano y minimalista (aunque la versión móvil, directamente, me horripila). Como ejemplo, un botón (nunca mejor dicho):

wordpress-flat

Esta versión es más plana que la original, pero tiene una tipografía mucho más legible y siempre sabemos dónde pulsar, ya sea por el uso de enlaces de estilo clásico o porque el resto de elementos pulsables son un botón y un enlace ubicado en una sección (inferior) claramente separada del resto. Además, el botón ha perdido relieve, pero no ha perdido el relieve, de modo que es fácilmente identificable como la acción principal del control.

Ya lo decía Aristóteles. Para alcanzar la virtud (hábito de actuar según el justo término medio entre dos actitudes extremas - vicios) se necesita una cierta sabiduría práctica o prudencia, y eso es lo que hay que conseguir con el flat design. Eliminar solamente lo innecesario.

Blog Logo

Carlos Escribano

Desarrollador Web desde hace 10 años. Me gusta resolver problemas de forma ingeniosa. Saber más.

Vida y milagros de un desarrollador web

carlosescribano.com

Volver al Inicio