soy Kseso y esto EsCSS

Flat design: qué es. Su razón de ser, origen y principios o bases

El flat design: qué es, sus aspectos característicos, orígenes y razones de su expansión.

Flat design: qué es. Su razón de ser, origen y principios o bases

·Por Kseso ✎ 9

Flat design interfaceDe un tiempo a esta parte es más que seguro que te habrás encontrado la expresión "flat" aplicada a todo lo relacionado con el diseño web: desde componentes o partes del UI (user interface) como menús flat, botones flat, colores flat... o incluso todo el diseño de una web es flat.

Ante tanta avalancha con la nueva "tendencia" "flat" la cuestión pertinente es: ¿Qué es el diseño flat, cuales son sus bases o principios y de dónde y por qué ha surgido?

Flat= Plano, aplanado, liso.
Flat, o flatness, describe un objeto o una condición que es muy suave o sencillo.

Qué es el diseño flat en el entorno RWD

De entrada y de forma simple: flat es el traje lógico para el RWD. O dicho de otra forma: flat es la respuesta para la representación de la web creada bajo las premisas del RWD.

Si el RWD es toda una "filosofía" de creación y acceso a las páginas web (su tramoya o urdimbre y generación), el diseño flat es la tendencia predominante actual en cómo mostrarlas: diseño.

Flat design is a method that does not use any extra effects to create a scheme that does not include any three-dimensional attributes. There are no drop shadows, bevels, embossing, gradients or other tools used that help lift elements off the screen or create added depth. Icons and UI elements are crisp and without feathered edges and shadows.
Autoría

Un poco de historia

Durante un tiempo y hasta no hace tanto, el diseño de las páginas webs podría decirse que era un tanto barroco, en el sentido de recargado, complejo. Incidiendo principalmente en el resultado visual final, priorizando la representación en pantalla incluso a costa de otros aspectos actualmente esenciales como la semántica y los recursos empleados para su creación: cantidad de imágenes, etiquetado, scripts necesarios,peticiones y respuestas del servidor...

diseño skeuomorphic
Diseño skeuomorphic

El mayor representante de esto es el "diseño skeuomorphic": la simulación, cuanto más real mejor,en la interfaz de cualquier elemento de la vida real. Desde una web que imitaba un papiro a elementos "realizados" en cualquier material como madera, metal... hasta escenas completas.

Y como ocurre en cualquier otra manifestación la reacción ha sido bascular al extremo opuesto. De una web barroca, recargada o abigarrada hemos pasado a una minimalista, zen o sencilla y limpia en su representación.

Su origen

Si no su creador, en estas cuestiones nunca está claro "quién fue el primero", posíblemente el iniciador y potenciador del flat design haya sido Microsoft. Sí, has leído bien. La respuesta de los chicos de las ventanas a la estética "apple" con su Metro y los últimos Windows nos han traído hasta aquí.

metro vs IOS
Metro: respuesta a IOS

Así que si te gusta el flat design, por una vez puedes lanzar tu sombrero al aire y gritar un ¡Hurra! por Redmond.

Los porqués: la muerte del píxel

Al inicio comentaba de pasada que el flat design es el complemento lógico al RWD. Me explico y explayo.

El píxel ha muerto. 1px ya no es un píxel en según qué dispositivos 2x o más. Su uso como unidad ha quedado relegado a contados usos, como algún borde o sombras muy pequeñas en cajas y textos. Debido a la disparidad tanto de aparatos como de condiciones en los que se puede acceder hoy a una web, es prácticamente imposible seguir haciendo diseño "pixel perfect" y que no sean mayoritarias las situaciones en que se rompa.

Además de lo anterior (estética y visual), el RWD preconiza el uso racional de los recursos y capacidades. Minimizar el esfuerzo y coste necesarios para acceder a la información es requisito irrenunciable.

En esta economía aplicada a la construcción de la interfaz el uso de imágenes ha quedado desterrado. Los sprites css se cuestionan, se sopesan y se evitan y hasta los "pequeños" iconos son sustituidos por tipografías.

Principios y bases del flat design

Como no podría ser de otra forma sin caer en una autocontradicción, las bases y principios del flat design son muy pocos pero extremadamente permisibles. Esto es, cada uno de los requisitos da mucho juego a la imaginación de cada cual. Puedes llevarlo al extremo que quieras y seguirá siendo flat design. Otra cosa muy distinto es el buen gusto y resultado final.

Estos serían los aspectos diferenciales e identitarios del flat design:

Colores

flat icons
Iconos flat

Cualquier color es válido y susceptible de ser utilizado. Sólo dos premisas: baja saturación y escasa intensidad. Sus tonalidades recuerdan a los colores utilizados en los años 40 y 50 del siglo pasado: paletas de colores retro.

Y la paleta base puede ser en base a un solo tono o múltiples y dispares.

Para obtener estos colores flat olvídate de intentar conseguirlos trabajando con notación hexadecimal o rgb(a). Como estamos trabajando con poca saturación y menor intensidad o brillo el esquema que mejor se adapta es el modelo de color hsl: Matiz, Saturación, Luminosidad. Cualquier matiz vale, solo se necesitan valores bajos de los dos últimos.

Y lo que vale para los colores es válido para los gradientes Css. Eso sí, más que de gradientes de colores dispares son degradados entre dos matices próximos.

Tipografías

Tipografías flat
Crédito y origen de la imagen

La tipografía o fuentes tiene un peso elevado y es un distintivo en el flat design. Por lo general sans-serif, o serif muy discretas y sobrias, con poco peso visual. Poco grosor (font-weight < 400), escaso sesgo o distorsión en sus trazos y tonalidades apagadas según el esquema de color visto anteriormente.

Pero recuerda que en el uso y combinación de las tipografías nunca está de más un toque de locura o mezclar opuestos.

Auguro que una familia que va a estar muy presente y servir como referente será la Roboto. Es la elegida por google, en sus diferentes variaciones, para G+.

Tamaños y espacios vacíos

Tamaños en el diseño flat
Crédito y origen de la imagen

Como respuesta a los dispositivos táctiles, y su diversidad de tamaños, carentes de "puntero" u otro dispositivo señalizador que no sean los dedos, los tamaños de los distintos elementos suelen ser más que generosos. Así como el espacio asignado a cada uno.

Volvemos a la muerte del pixel. Con un ratón y su puntero en pantalla es muy fácil apuntar y acertar en 1 píxel. Pero con el dedo no.

Así que los tamaños son más que generosos. Desde la altura de línea, el tamaño de las fuentes pasando por cualquier elemento gráfico. Sus anchuras y el espacio que los separa garantiza que no haya pulsaciones no deseadas.

Por lo general estas separaciones más que encomendarlas al margen entre ellos, que también, se asignan al padding. Eso aumenta la superficie sensible y activa.

Elementos simples y efectos discretos

Pasó la novedad y el tiempo de los grandes efectos "css". Sombras discretas, transiciones y traslaciones suaves, esquinas redondeadas apenas perceptibles... son la marca del diseño flat.

Y todo lo anterior aplicado a elementos de factura minimalista, zen, de trazos esquemáticos y monocolores. Lo más representativos quizás sean los iconos tipográficos de líneas "simples" con un alto contraste entre su color y el fondo que los acoge.

Expansión y hábitat del flat design

Como en cualquier otro aspecto, en esta tendencia o moda del flat design no hay autoridad que certifique qué es y que no es. Tampoco es obligado el cumplimiento estricto de todas y cada una de sus particularidades. Puedes encontrártelas más o menos cumplidas con más o menos buen gusto y acierto.

Tampoco es un movimiento que se limite a la web y su diseño. Últimamente cada día es más habitual encontrártelo en otros campos como la televisión [y no me refiero a la profundidad de ella ;-) ] y los medios impresos.

Además de los puntos recogidos en el artículos hay otros aspectos y tendencias dentro del flat design. Esto no pretende ser un tratado exhaustivo del mismo. Sólo unas pinceladas más o menos acertadas.

Ejemplos y lecturas del flat design

Añadido post publicación: Y en español, que no soy el primero en hablar del tema:

Lo principal al final

He dejado para el cierre los aspectos y cuestiones más importantes:

  1. ¿Qué opinas tú del flat design y sus manifestaciones?
  2. ¿Qué encuentras acertado y qué errado en su aplicación práctica?.
  3. ¿Eres de los que ya ha sucumbido a sus encantos o te resistes a él?.
  4. Y lo más interesante, si has realizado algún diseño flat comparte la experiencia y déjasnoslo ver. Siéntete libre para dejar el enlace a tu trabajo en un comentario.

N.B.

He procurado adjudicar autoría y origen a las imágenes utilizadas en el artículo. Con alguna no me ha sido posible. Si la conoces házmelo saber para otorgarlo. Gracias.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso