El estilo flat es una tendencia actual en el diseño web. Y debido a las otras tendencias que surgen, parece que se quedará un tiempo con nosotros. Después de todo, el flat web design tiene muchas ventajas, importantes para todo diseñador web como maximizar la legibilidad del sitio, por ejemplo.
Si es tu primera vez creando una página con estilo flat, tal vez requieras revisar ejemplos de sitios web. Por suerte, como es una tendencia actual, es probable que encuentre muchos ejemplos, pero debes ser cuidadoso al elegir tus referencias.
Hemos recopilado algunos sitios con flat web design que creemos que han sabido implementar este estilo en sus página. Esperamos que te sirvan como referencia en tus futuros proyectos.
PayPoint
El concepto muestra la página de inicio que tiene una imagen de fondo. Los colores aplicados al filtro son impactantes y llaman la atención. Usa una tipografía sans serif simple y legible para sus textos. Cuando quiere destacar alguna palabra en particular se hace de colores vibrantes. Los botones de llamada a la acción secundarios son botones fantasma y sólo se destaca el botón principal (que se encuentra en el centro de la página).
El logo de PayPoint también es bastante sencillo y usa una tipografía sans serif de bastones gruesos. Para que destaque se le ha aumentado el tamaño, aunque lo más resaltante sigue siendo el mensaje y el botón de llamada a la acción ubicado en el centro.
Web Concept
Este concepto se realizó para una aplicación. Es fácil reconocer el estilo flat pues las ilustraciones que decoran el sitio web también poseen este estilo. Se emplean colores pasteles, así como colores oscuros en algunas zonas. La tipografía es algo curva y se emplea en dos colores: blanca en la página de destino pues el fondo es oscuro. Esta relación se ve alterada en otras secciones pues al bajar vemos que el fondo es claro y el texto oscuro. El tono más oscuro se emplea para los subtítulos.
En este caso el logo destaca más pues se le agrega un símbolo y se usan dos colores.
Loudfund
Este sitio nos presenta una fotografía de fondo, tiene un filtro de color aplicado y una textura simple. Al parecer la fotografía pertenece al video que aparecería si pinchas sobre el botón de Play. La información se encuentra bastante organizada debido al uso de espacios en blanco. Además, usa iconos para explicar mejor los beneficios de y características de Loudfund.
Al final de la página podemos apreciar un botón de llamada a la acción también en estilo Flat. En la parte derecha podemos ver una captura de pantalla del sistema de Loudfund, el cual también ha sido montado en una versión Flat de una ventana del navegador Safari.
La tipografía usada es sans serif de color negro para los subtítulos y gris para el cuerpo de texto. Sólo en la parte inicial de la página vemos que se rompe este esquema pues se emplea una tipografía blanca.
Photo & Video Page
La página de esta aplicación presenta los archivos organizados en una cuadrícula y con abundantes espacios en blanco. El menú se localiza en la parte izquierda, se reconocen las diferentes secciones no sólo por el título, sino por el icono que los acompaña.
Se usan colores pastel como fondo y colores oscuros y vibrantes para resaltar algunos elementos como las secciones activas, por ejemplo.
Instagram Redesign
Este rediseño de Instagram emplea colores claros para el fondo. Las vista en miniatura se alinean en una cuadrícula y las secciones se mantienen separadas mediante recuadros.
La página tiene sólo las funciones necesarias, el menú de inicio y la opción para cambiar la vista de cuadrícula. El diseño flat del sitio maximiza la legibilidad y organización por lo que es una excelente para redes sociales donde el volumen de información es elevado.
Flat King
Este sitio emplea colore vibrantes y una tipografía de bastones delgados. El menú se mantiene siempre visible en la parte superior y cada sección se encuentra separada por colores (blanco y celeste).
Esta página se ha realizado teniendo en mente un portafolio online. Contiene todas las características necesarias para mostrar tus habilidades y exhibir tus mejores trabajos. También sirve para agencias de publicidad y diseño, así como servicios y plataformas ya que también contiene una tabla de precios.
Jan Cavan
Este portafolio en línea de un diseñador contiene ilustraciones simples de estilo flat. Se emplean colores vibrantes e incluso posee animaciones sencilla El fondo es totalmente blanco y la tipografía es redonda. Se usa la tipografía en un puntaje mayor al usual lo cual le da un toque especial a la página.
La selección de la tipografía y los colores hace que la página se vea amigable y definitivamente pone en énfasis la creatividad de la diseñadora.
Tru Music
Esta página para una tienda online de instrumentos musicales centra su contenido. El menú se encuentra en la parte superior y encima de la barra de menús existe un icono para acceder al carrito de compras.
Se emplea color blanco como fondo y celesta como colores de acento. El estilo minimalista y flat de esta página permite que los elementos se pueda organizar mejor, característica esencial de toda tienda online.
Landing Page E Payment
Este sitio contrasta colores claros y grises para resaltar las secciones más importantes. También, posee iconos para reforzar el mensaje de las características del producto.
Todo el contenido se encuentra centrado, dejando espacios en blanco en los lados que permiten entender la información de la página de manera más sencilla. Usa una tipografía sans serif de bastones delgados y juega con los colores para crear más atención sobre el texto en la sección de formulario.
Google Redesign
En este rediseño incluso se ha empleado una versión flat del conocido logo de Google, claro que se han mantenido los colores originales. La tipografía del cuerpo de texto es curva y legible. El campo de búsqueda también ha adquirido una apariencia redondeada.
Este rediseño presenta también un menú que se ubica en la parte lateral izquierda. El acceso a la cuenta de los productos de Google se localiza en el mismo lugar, la parte superior derecha.
Este concepto hace lucir la página de Google mucho más moderna que la actual y los elementos se han organizado de manera adecuada.
