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 : 13973  
 
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 AND DEVELOPMENT.

 
 
 

Artículos relacionados

Alternativas de herramientas para diseño gráfico

Hay mucha gente que a día de hoy para diseñar únicamente utiliza Canva ya que es un software y web realmente muy popular y no hay que negar que tiene…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

8 beneficios de tener una página web para tu negocio

En este momento, Internet es un fenómeno que arrasa a nivel mundial. Ha podido interconectar millones de usuarios en todo el planeta. Las personas han vuelto a Internet una parte…

Herramientas alternativas de diseño web open source

Hay muchas herramientas de creación de prototipos, de diseño de interfaz de usuario o aplicaciones de gráficos vectoriales. Pero la mayoría son de pago o de código cerrado. Así que…

Ejecución de funciones PHP en AWS Lambda y API Gateway

¿Qué es AWS Lambda? AWS Lambda es un servicio de procesamiento sin servidor que puede ejecutar código en respuesta a eventos o condiciones predeterminados y administrar automáticamente todos los recursos de…

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Búsqueda en la Dark Web: instrucciones

Hoy en día, las ciberamenazas vienen de todas partes, tanto de la superficie como de la web oscura. Muchas empresas se basan en la información recogida en las comunidades de…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Guía: Como entrar en la DeepWeb y la Darknet

Queremos presentarte una guía que te permitirá entrar en las principales darknets que componen la Dark Web, conocida coloquialmente como la Deep Web, aunque este último término tiene otro significado.…

El diseño gráfico y su impacto en el desarrollo web

En el artículo de hoy explicaremos el concepto de diseño gráfico, sus fundamentos y lo que aporta al desarrollo web. El diseño gráfico se aplica a todo lo visual, lo…