Tendencias y diseño web: flat web design

Todas las empresas y compañías (por muy pequeñas, medianas o grandes que sean) poseen una página web corporativa que sirve como tarjeta de visita online. Pero si uno se fija en el diseño web de las páginas, cada vez es más cuidado y sigue ciertas tendencias que han sido estudiadas, dentro del marketing online, para conseguir que el usuario que las visita reciba la percepción deseada por parte de la marca o compañía. En esta ocasión, vale la pena destacar el flat web design, muy extendido para la web temática.

¿Qué significa flat web design?

Este tipo de diseño web surgió hace un par de años y se caracteriza por la utilización de colores planos y formas geométricas a la hora de construir la interfaz de la plataforma. Este diseño ha generado una tendencia, dentro de las webs temáticas y corporativas, en su uso e, incluso, ya se está viendo en numerosas aplicaciones para dispositivos móviles.

A pesar de ser un diseño que lleva varios años en el mercado, comienza a marcar tendencia, dentro del diseño web, gracias a la aparición de la interfaz Metro de Microsoft, en la cual se presenta un diseño minimalista y plano, es decir, sin motivos que puedan simular relieve, como las sombras, los degradados o las texturas...

De hecho, si uno se para un momento a leer el nombre del diseño, verá las palabras flat web design o, lo que es lo mismo, diseño web plano. Este diseño se caracteriza por cajas de colores sólidas con tipografías muy nítidas y sin bordes, con degradado o sombras paralelas.

Respecto al tema de las aplicaciones para móviles, hay que destacar que algunas grandes compañías, como Google o Apple, están realizando apps móviles en las que utilizan el diseño web del flat web design.

¿Cuáles son los elementos básicos que definen el flat web design?

Es un estilo que sencillo y plano, que no requiere grandes elementos de diseño. Es más, su diseño es tan sencillo que solo hay que tener en cuenta tres elementos que lo definen:

1.- Gama de colores: como el diseño web será plano y no llevará otro elemento que aporte mayor visibilidad, se debe jugar con una correcta combinación de colores que funcione visualmente. Es más, se recomienda no utilizar toda la gama de colores, sino, más bien, centrarse en una combinación de varios colores que dé un juego visual atractivo para el usuario y que. a su vez, combine con los colores del logotipo de la compañía.

2.- Tipos de letra: escoger correctamente la tipografía ayudará al flat web design para conseguir identificar la marca con una compañía seria y segura o, si se prefieres, es posible conseguir una percepción de marca joven y fresca, simplemente, eligiendo una tipografía legible, pero fresca. Además, hoy en día, cabe la posibilidad de elegir multitud de fuentes de distintos tipos: ya sean modernas, rellenas, serias, elegantes, juveniles o, incluso, para eventos temáticos, como las categorizadas como 'terror'. En la Red, es viable encontrar multitud de páginas web que reúnen fuentes gratuitas fácilmente descargables para poder realizar un buen flat web design para la web corporativa.

3.- Elementos con movimiento: a pesar de parecer unos elementos más complejos para un diseño plano, se suelen utilizar con bastante frecuencia. Las animaciones suelen ser suaves y poco llamativas. Además, su configuración no es excesivamente pesada y sigue la línea del flat web design. Suelen componerlo pequeños fragmentos de videos corporativos, animaciones de preloading e, incluso, el efecto parallax que, últimamente, está muy de moda.

Una vez analizados los elementos esenciales de este estilo de diseño web, hay que ver cómo se aplican en tres ejemplos que están vigentes:

1.- Olympic Story: nada más cargar la web corporativa, uno se da cuenta de que su diseño es simple y atractivo, ya que contiene una capa de fondo que es un pequeño vídeo y, en la capa delantera, están las letras de acceso al menú. Otra de las características a analizar es la tipografía. En este caso, se puede observar cómo se ha utilizado una tipografía seria y cuadrada, las cual es muy útil para dar una percepción de seriedad y oficialidad, ya que trata temas olímpicos, como campeonatos y medallas.

2.- Página web de la Agencia Digital Fillet: combina una programación en Jquery y HTML5 y hace un juego con el scroll del ratón, que combina los colores según sube o baja el ratón. Aunque parezca una tonteria, este pequeño juego es el que proporciona vida a este diseño plano. Si uno se fija, es una página muy sencilla en cuanto a diseño y contenido; pero, por el contrario, es capaz de generar una percepción mejor que otras páginas con elementos más elaborados y que, sin embargo, no llaman tanto la atención a los usuarios en cuanto a diseño web se refiere.

3.- Página Dream on: es el ejemplo perfecto de página web con un diseo flat web design y, a la vez, con una gran capacidad visual y de animación que facilita la interacción del usuario con la marca y su gráfica visual. Utiliza elementos como el efecto parallax, combinado con sencilas animaciones, y una combinación de colores planos que dan vida a una web sencilla y dinámica.

Como conclusión, tal y como se puede ver tras haber analizados los elementos básicos del flat web design que, a pesar de ser un diseño web sencillo y minimalista, lo que percibe el usuario es un diseño web atractivo y visual. Nada tiene que envidiar este tipo de diseño web a los predecesores, como el diseño realista o skeuomorphism. También se observa que este tipo de diseño web es característico y propio de las webs temáticas y corporativas que utilizan una combinación de figuras geométricas, unos colores planos y unas tipografías del tipo necesario para el caracter que se le vaya a impregnar al diseño de la web y de la marca. En este diseño, predomina la intención de imitar la realidad, pero sin intentar decorar el diseño con elementos de relieve, como son los degradados, las sombras o cualquier elemento que provoque este tipo de sensación de relieve en el diseño web.