Está en boca de todos. Ha sido la tendencia más buscada sobre diseño web en en año anterior y seguramente le quede un recorrido largo. Sinceramente está aquí para quedarse.
Sin entrar en definiciones muy analíticas y concretas, el flat design supone un cambio en la conceptualización de las formas y objetos en el diseño en general (y más particularmente en la web). Pasamos de lo que podemos llamar “skeuomorphism” o el arte de imitar la realidad, a la representación más abstracta de dichos objetos y formas. Pero ¿cómo afecta a cada uno de los agentes implicados?
Este es el cuarto artículo de la serie “Tendencias de Diseño Web con WordPress”. Puedes leer el resto de los artículos y ver la conferencia aquí.
Ventajas e inconvenientes del Flat Design
Para el diseñador: en cuanto a trabajo para el diseñador, suponen menos horas de trabajo frente a la herramienta (photoshop, illustrator, etc…), pero supone un esfuerzo mayor en cuanto a diseño y abstracción. Menos horas de producción pero más horas de creatividad.
Para el usuario: corremos el riesgo de que no sepa interpretar los niveles de abstracción que se proponen. Requiere por tanto de un esfuerzo algo mayor de interpretar lo que estamos mostrando, frente a la realidad o imitación de la realidad. Es como ver la televisión y escuchar la radio. Cada uno requiere de distinto nivel de atención e interpretación.
Para el navegador: Victoria!. No hay rival, el flat design ( o diseño plano) gana por goleada a todo lo anterior. Las razones son varias:
– Primero, menos reglas en nuestro CSS, lo que implica un menor número de caracteres, por lo tanto, nuestra hoja de estilos pesará menos.
– En segundo lugar, el navegador no tiene que renderizar los degradados y demás elementos complejos. Ahorramos recursos del móvil, tablet u ordenador.
– Y por último, mayor compatibilidad con navegadores antiguos. La mayoría de estilos para trabajar con Flat Design no requiere elementos complejos ni reglas CSS3, por lo tanto mayor compatibilidad con Internet Explorer en sus versiones anteriores (como sucede con las tipografías web)
Flat design y la Experiencia de Usuario
Metámonos en faena y hagamos un ejemplo práctico. Vamos a definir dos botones imaginarios. El primero de ellos con degradados, gradientes, bordes redondeados, filtros, transparencias y sombras. Parece que fuésemos a pulsar directamente en la pantalla y fuese a funcionar. Es casi 3d.
Por otro lado un botón con diseño plano. Bordes rectactugalres. Fondo verde plano. Cuando hacemos hover (pasamos el ratón por encima) el verde se vuelve más claro. Simplemente eso. (puedes hacer clic en los botones, no te redirigirán a ningún sitio)
See the Pen Flat Design vs Skeuomorphism Bottons by Ricardo Prieto (@ricardpriet) on CodePen.
La diferencia entre un botón y otra a nivel de tamaño en el archivo CSS puede suponer 1kb (si, un botón muy pesado 😉 ) 1kb no parece mucho. Pero si multiplicamos ese tamaño por el número de visitas que recibe nuestra web al día (1000) ya tenemos 1000kb al día. Es decir 30mb al mes y 360mb al año. Eso que ahorramos a los usuarios y de transferencia de nuestro servidor…¿Ya no es tan poco verdad?
Si cambias la pestaña y vas a la vista de HTLM, ambos elementos tienen el mismo marcado (no hay nada nuevo ni HTML5 por aquí). No hay cambios y en principio tampoco optimización posible, pues la diferencia radica en la pestaña de CSS, donde se aplican los estilos.
Comprueba los tres selectores utilizados para cada botón: tenemos el primero para su diseño estático, y dos elementos a continuación para el :hover (pasamos el ratón por encima) y el :active (pulsamos sobre el elemento). Haciendo un poco de scroll verás la gran diferencia de caracteres y reglas entre uno y otro.
/* ------ Flat Botton ------ */
.flat {
color: #ffffff;
background-color: #1abc9c;
}
.flat:hover {
color: #ffffff;
background-color: #48c9b0;
}
.flat:active {
background: #16a085;
}
Además, como hemos comentado antes, muchas de estas reglas requieren del uso de prefijos (-o- , -webkit- , -moz- ,…) para tener una mayor compatibilidad entre todos los navegadores. Esto hace que una misma regla, ya de por sí extensa, se repite hasta tres veces.
Aún así, si tienes Internet Explorer 8 comprobarás que el botón realista o “skeuomorphism” no se muestra correctamente. El efecto 3d a la hora de pulsar no funciona correctamente, y algún degradado tampoco. (llámame hipster, pero sí, tengo una instalación de IE 8…pero solo para testear diseños 🙂 )
Por contra, no todo va a ser flat design. Si el botón creado no convierte igual, si las ventas con flat disminuyen, ojo, al que paga la fiesta (o cliente) no le va a gustar, y con razón. Cada diseño es distinto, y según qué público y contexto va a funcionar un diseño web mejor o peor.
Se trata en este punto de definir aquellos elementos o decisiones que se toman en la fase de diseño según el comportamiento o experiencia de los usuarios, al igual que hacemos con los colores o las tipografías. La elección entre una u otra tendencia no es aleatoria. No es una guerra entre flat y realismo (como en este genial ejemplo). Será adecuada la opción que más facilite a los usuarios llegar al contenido que hay detrás de ese botón. Eso es realmente lo importante.
Aquí solo toca medir y testear cada caso concreto para tener datos sobre las que apoyar las decisiones del diseño. Lo demás es una discusión estéril (aunque con la reducción de tamaño de CSS parte con ventaja el flat 😉 )
WordPress y flat design
Para implementar elementos de flat design en nuestro WordPress nos toca bucear en el archivo que define las reglas de estilo que se aplican a nuestro diseño: el style.css. Buscad todos los gradientes, degradados, imágenes como fondo imitando a iconos etc…Las sombras y elementos 3d son algunas de las líneas que también se tambalean si no se usan con cabeza.
Recordad que el objetivo aquí es la experiencia de usuario, y con WordPress siempre vamos a tener una serie de elementos comunes a los que podemos dar estilo: el sidebar, la paginación de las páginas de archivos (archive.php, index.php, category.php…) e incluso la gestión de comentarios, donde siempre vamos a tener unos input y textarea, junto a un botón para publicar el comentario.
Para que sirvan de inspiración, puedes ver algunos temas WordPress que llevan el flat design como filosofía de diseño:
10 Plantillas para Blog WordPress Flat y HTLM5
Recuerda, menos es más.
Flat design sí, flat design no. Es un debate que da para mucho. Podríamos estar horas vertiendo tinta sobre el tema, y no llegaríamos a ninguna conclusión concreta, pues en términos absolutos, no la hay. Dependerá del proyecto, de los usuarios y los test que se hagan a posteriori.
De igual forma que sucede con el uso de las tipografías web, el flat design es algo positivo, trae elementos y atributos nuevos al diseño web, lo que abre el abanico. Pero de base siempre debe existir una lógica en su utilización. Así que no pienses en hacer cosas bonitas, y si en hacer diseño que realmente resuelvan problemas. Ya sea con Flat o no. ¿No te parece?
Excelente publicación!
Muchas gracias Miguel! Un saludo
Soy estudiante de Diseño Multimedial, he descubierto este sitio Web por casualidad (Leyendo un articulo de otra página) y realmente ya no puedo parar de leerlos. Tienen temas a tratar bastantes interesantes. ¡Sigan así!
Muchas gracias Jaime!
Un saludo 😉
Excelente publicación. Me está gustando mucho el Flat Design, hay casos en el que el diseño debe ser mas completo, pero hay algunos en los que se puede manejar esta tendencia. Sencilla, fresca, agradable.
Saludos Santiago, me alegro muchísimo.
Genial encontre lo que queria..!
Excelente