El término Diseño Plano o Flat Design describe un tipo especial de diseño web en el que la funcionalidad de la web es el centro de atención. Esto se hace sin los elementos de diseño habituales como texturas, adornos o sombras, con el fin de reducir el diseño a lo esencial.

Principio de diseño plano

El diseño plano contrasta con el skeuomorfismo, que en el pasado consistía en orientar las webs lo más cerca posible del “original”. Un ejemplo a menudo citado son las aplicaciones de notas que parecen un bloc de notas real, desde el “papel” forrado hasta la “funda de cuero”, que se han realizado con las texturas correspondientes. Un diseño plano prescinde deliberadamente de elementos 3D, efectos de iluminación o botones tridimensionales. En su lugar, lo que cuenta son las líneas claras, las letras fácilmente legibles con una progresión bastante elegante y el juego de colores. Las innovaciones que van de la mano con el diseño plano son, entre otras:

• Libre elección de fuentes (fuentes web).
• Diseñar iconos usando fuentes (vectores) que pueden ser escaladas por cualquier navegador sin pérdida de calidad.
• Sin uso de imágenes de fondo o texturas.
• Estructuración por superficies coloreadas y botones.
• Fuerte claridad de la página web.
• Navegación intuitiva.
• Alta usabilidad.
• Centrarse en el contenido en lugar de en el diseño.
• No hay necesidad de diseños pequeños con demasiadas fotos.

Los representantes típicos de los diseños planos son, por ejemplo, los de una página, en los que toda la información se encuentra en una sola subpágina, una variante frecuentemente elegida para las webs corporativas que sólo tendrían unas pocas subpáginas. Las webs de gran tamaño, en las que un único gráfico de gran tamaño y una única declaración se encuentran en el centro de la página de inicio, también forman parte del concepto de “diseño plano”.

Ejemplos

Incluso antes de que el diseño plano tuviera éxito, ya existían varios grandes fabricantes que aplicaban este principio. Por ejemplo, Microsoft con el diseño Metro de Windows 8, que difiere mucho de sus versiones anteriores. Este desarrollo también puede observarse en los sistemas operativos actuales de los smartphones, como Android o iOs, y las aplicaciones de los smartphones están diseñadas de esta manera.

Diferencia en el Responsive Design

El diseño responsive se menciona a menudo en el mismo tema que el diseño plano. Sin embargo, ambos términos no significan exactamente lo mismo. El Diseño Responsive es un diseño web que se adapta sin esfuerzo a una amplia variedad de modelos de navegadores y que, por lo tanto, puede verse sin restricciones en una pequeña pantalla de smartphone y en un monitor de 24 pulgadas. El diseño plano, por otro lado, existe independientemente del dispositivo seleccionado. El diseño responsive es a menudo también plano, pero el diseño plano no es automáticamente responsive. Sin embargo, un diseño plano juega reduce los tiempos de carga y es más flexible y adaptable a diferentes soluciones. Por lo tanto, puede ser parte de Responsive Design.

Ventajas del diseño plano

El diseño plano requiere muchos menos elementos de diseño, como imágenes o efectos complejos. Esto significa que se deben transportar muchos menos datos al cargar la web. Por un lado, tiene un efecto positivo en los tiempos de carga, pero también es sensato para los usuarios de teléfonos móviles, especialmente en lo que respecta a la utilización de su volumen de datos. El diseño plano evita que laos webs se sobrecarguen, lo que puede dificultar su uso por parte del usuario.

Desventajas del diseño plano

Una desventaja puede ser que la pérdida del carácter propio de una web también puede resultar del abandono de ciertos elementos de diseño. Muchas páginas con un diseño plano son muy similares en términos de estructura y diseño.

La navegación también puede ser problemática. Esto es particularmente importante para los dispositivos pequeños. El diseño plano hace más difícil guiar al usuario y mostrarle cómo navegar correctamente por el sitio web.

Los expertos incluso asumen que un diseño plano para una tienda online puede significar pérdidas de conversión si se implementa de forma demasiado extrema. Gracias a su diseño reducido, los elementos de conversión ya no se distinguen del resto y no pueden ser percibidos suficientemente por el usuario.