Que Es el Flat Design o Diseño Plano?

Que es el flat design o diseño plano?

flat design: 20 recursos gratis

by Janeth Kent Date: 29-07-2013 web design flat diseño plano recursos turoriales inspiracion


En diseño las modas son cíclicas y cuando hablamos de diseño web, estos ciclos suelen mucho más cortos. Comentamos esto, porque llevamos ya unos meses viendo que una de las grandes tendencias para este año es volver a hacer uso del “flat design” o diseño plano a la hora de desarrollar los estilos de una web.

¿Pero que es el flat design?

Flat Design literalmente quiere decir diseño plano. Así sin más, y cuando hablamos de flat web design, nos referimos al diseño de una página web que decide usar formas geométricas, colores planos y llamativos e iconos en vez de fotografías o imágenes complejas.

El flat web design elimina todo rastro de sombras, efectos de profundidad, biselados, gradientes, efectos tridimensionales y apuesta por lo minimalista y sencillo. Un ejemplo claro lo tenéis en el nuevo diseño de la interfaz de Windows 8, donde todo son cajas de colores grandes e iconos planos.

El flat design es un tipo de diseño muy limpio, claro y que conecta a la perfección con el diseño responsable (“responsive web design“) que tan de moda hemos puesto los diseñadores web para que toda página web sea flexible y se pueda ver en cualquier dispositivo dando igual el tamaño de la pantalla o la resolución.

Ante tanta avalancha con la nueva "tendencia" "flat" la cuestión pertinente es: ¿Qué es el diseño flat, cuales son sus bases o principios?

Estos serían los aspectos diferenciales e identitarios del flat design:

Colores: cualquier color es válido y sucectible de ser utilizado. Sólo dos premisas: baja saturación y escasa intensidad. Sus tonalidades recuerdan a los colores utilizados en los años 40 y 50 del siglo pasado.

Tipografías: la tipografía o fuentes tiene un peso elevado y es un distintivo en el flat design. Por lo general sans-serif, o serif muy discretas y sobrias, con poco peso visual. Poco grosor (font-weight < 400), escaso sesgo o distorsión en sus trazos y tonalidades apagadas.

Tamaños y espacios vacíos: volvemos a la muerte del pixel. Con un ratón y su puntero en pantalla es muy fácil apuntar y acertar en 1 píxel. Pero con el dedo no. Así que los tamaños son más que generosos. Desde la altura de línea, el tamaño de las fuentes pasando por cualquier elemento gráfico. Sus anchuras y el espacio que los separa garantiza que no haya pulsaciones no deseadas. Por lo general estas separaciones más que encomendarlas al margen entre ellos, que también, se asignan al padding. Eso aumenta la superficie sensible.

Elementos simples y efectos discretos: sombras discretas, transiciones y traslaciones suaves, esquinas redondeadas apenas perceptibles... son la marca del diseño flat.

Aquí os dejamos 20 recursos gratis para el flat design que os ayuderán a inspiraros.

1. Apple Devices Flat Icons PSD

 

2. Free Flat UI

 

3. Flat UI Kit

 

4. 24 Flat Icons

5. Freen Flat UI Kit PSD

6. Flat Radial Graph PSD

7. Flat UI

8. Free Colorful Icons

9. UI Kit Free Download

10. Flat Web Elements

11. Featherweight UI

12. Flatlyfe UI Kit Free PSD

13. Friends Iphone App UI

14. Minimal Apple Product Templates

15. 3600+ Free Flat Icons

16. Browsers Glyphs

17. Flat Blog UI Kit

18. Flat File Icons

19. iPhone5 Flat Design

20. Mac,Ipad & Iphone Flat Illustration

 

 
by Janeth Kent Date: 29-07-2013 web design flat diseño plano recursos turoriales inspiracion visitas : 9846  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Artículos relacionados

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

El concepto de Modelo-Vista-Controlador (MVC) explicado

En la ingeniería de software, usamos patrones de diseño como soluciones reutilizables para un problema común, un patrón es como una plantilla de cómo resolver un problema. El Modelo-Vista-Controlador (MVC) es…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Introducción a RegExp - Expresiones regulares

Hoy vamos a escribir sobre las Expresiones Regulares conocidas como regex o regexp abreviado, un concepto muy útil de uso de patrones de búsqueda. Seguramente usted estaba en una situación en…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Cómo escribir nuestra propia Política de Privacidad

En este artículo hablaremos de las declaraciones de la Política de Privacidad, de cómo puedes escribir una y ponerla en práctica en tu página. ¿Por qué apareció? Hoy en día, cuando navegamos…

El mejor software y aplicaciones gratuitos de streaming en directo para todas las plataformas

Estamos en una lenta transición hacia un mundo hecho de transmisiones en streaming. Ya sea que quieras transmitir en vivo o capturar contenido de la web, las opciones son ilimitadas.…

Guía sencilla para convertir imágenes a WebP en PHP

El 30 de septiembre de 2010, Google anunció la publicación de un nuevo estándar abierto para la compresión con pérdida de gráficos de 24 bits en la web. La base…

¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…

Las Mejores Alternativas al Navegador Tor para Navegar Anónimamente

La seguridad del Proyecto Tor, el servicio más popular para navegar por la web de forma anónima, está bajo sospecha. El Proyecto Tor ha sufrido un par de agujeros de…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración