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 items de diseño habituales como texturas, adornos o sombras, con la finalidad de reducir el diseño a lo primordial.
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 viable del «original». Un ejemplo habitualmente citado son las apps 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 items 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 utilizando 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 vez de en el diseño.
- No existen 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 habitualmente seleccionada 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, además forman parte del concepto de «diseño plano».
Ejemplos
Inclusive 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 además puede observarse en los sistemas operativos actuales de los smartphones, como Android o iOs, y las apps de los smartphones están diseñadas de este modo.
Diferencia en el Responsive Design
El diseño responsive se menciona habitualmente en el mismo tema que el diseño plano. No obstante, ambos términos no significan precisamente 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, de este modo, puede verse sin restricciones en una pequeña pantalla de teléfono celular y en un monitor de 24 pulgadas. El diseño plano, por otro lado, existe independientemente del dispositivo escogido. El diseño responsive es habitualmente además plano, pero el diseño plano no es automáticamente responsive. No obstante, un diseño plano juega reduce los tiempos de carga y es más flexible y adaptable a distintos soluciones. Por ende, puede ser parte de Responsive Design.
Ventajas del diseño plano
El diseño plano requiere muchos menos items 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 además es sensato para los usuarios de teléfonos móviles, fundamentalmente 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 además puede resultar del abandono de ciertos items 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 además puede ser problemática. Esto es concretamente 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 portal web.
Los expertos inclusive 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 items de conversión ya no se distinguen del resto y no pueden ser percibidos suficientemente por el usuario.
