SlideShare una empresa de Scribd logo
1 de 2
Descargar para leer sin conexión
Flat Design: Tendencia y Controversia
Seguramente has escuchado hablar sobre el término “Flat Design” pero si aún no tienes claro
realmente de qué se trata en este artículo te lo explicaremos para que puedas sacar tus propias
conclusiones sobre las ventajas que esta técnica ofrece en cuanto a estética y usabilidad.
¿Quién ha sido el pionero de este tipo de diseño?
Antes de comenzar a explicar cuales son las principales características del ​Flat Design​ quisiera
hacer una breve introducción sobre su origen y su crecimiento en el tiempo.
Mirando atrás en la historia del ​diseño web​ encontramos que en un comienzo existió un
minimalismo inicial obligado por las restricciones técnicas. Luego se produjo una avalancha de
webs llenas de efectos, de degradados, animaciones en flash, y sombras llegando a unos
extremos sobrecargados y confusos. Ahora se vuelve a apostar por el minimalismo estético
llamado “Flat design o diseño plano” y que supone una reacción opuesta al diseño sobrecargado
utilizado hasta el momento.
Microsoft ha sido el primero en incorporar este diseño en su interfaz de Windows Phone a fines
del año 2010. Luego en el año 2012 introdujo ​Metro​ para en ese entonces nuevo Windows 8. En
ambas ocasiones este diseño obtuvo ​excelentes resultados y alta aceptación tanto a nivel
funcional como estético. ​Luego tanto Google plus, calendar, Gmail así como también Android
4 fueron volcándose a esta estética.
Principales características del Flat Design
Se denomina “Flat Design” o “Diseño Plano” al diseño estéticamente simple siendo este una
variación del minimalismo.
Se basa en los principios de que “menos es más” y de que “la forma prosigue a la función”.
Este tipo de diseño suprime sombreados, biselados, degradados, texturas y todo aquello que no
aporte información o valor al usuario. Básicamente consiste en quitar o reducir todo elemento
decoración en un diseño de interfaz o bien web para facilitar la funcionalidad y la experiencia de
usuario.
Con respecto a los colores para esta clase de diseño son los colores vivos derivados de los
pasteles los que son más utilizados. Mediante los colores y tonos se busca que el usuario
comprenda de forma visual sus posibilidades de navegación e interacción.
Continuando la línea minimalista a nivel de tipografía se emplean fuentes sans serif para los
cuerpos de los textos mientras que para los títulos puede utilizarse cualquier fuente siempre y
cuando la misma sea de simple lectura. Para facilitar la lectura se acostumbra a disminuir la
longitud de los títulos al igual que de los subtítulos y el tamaño de la tipografía tiende a aumentar
de tamaño.
Lo que línea de diseño que guía al ​diseño plano o flat design​ es el ser conciso, claro y simple.
La información se refuerza mediante jerarquización y código de color para dar relevancia y
facilitar una experiencia de usuario intuitiva y fácil.
Principales Ventajas del Flat Design
Son muchas las ventajas que esta clase de diseño supone. En primer lugar hay que mencionar
que como actualmente cada vez son más los usuarios que navegan desde sus dispositivos
móviles eso demanda que las webs tengan un diseño adaptable llamado “Resposive Design”
que es justamente la capacidad que tiene una web para ajustar su formato al dispositivo desde
el cual se la mira.
Es aquí donde encontramos una de las principales ​ventajas de usar el Flat Design en el
diseño web, ya que es fácilmente ajustable a formatos reducidos,​ conservando la estética
de la página web e incluso dando un aspecto de “aplicación” considerablemente más familiar
para el usuario de estos dispositivos.
Este tipo de diseño resulta de mucha utilidad no solo para sitios webs y aplicaciones sino que
también para ​landing pages o páginas de aterrizaje​ en los que se suele buscar que el usuario
realice una conversión. Para ello, este tipo de diseño simple, claro y conciso beneficia a llevar al
usuario a comprender el mensaje fácil y claramente y por ejemplo clicar en un call to action.
Controversia en opiniones
Toda innovación suele acarrear opiniones contrapuestas y esta no es la excepción.
Esta nueva estética no ha logrado seducir a muchos diseñadores y especialistas en usabilidad
quienes defienden que los relieves, las sombras, o bien los degradados en un botón no son bien
meras decoraciones estéticas sin sentido sino que se utilizan como indicadores visuales del uso
que puede tener. Steve Jobs por ejemplo fue un firme defensor de este diseño de interfaces
llamado skeumorfismo que imita objetos físicos.
Jakob Nielsen, el “gurú” de la usabilidad, efectuó unas duras críticas a la interfaz de Windows 8
sosteniendo que el diseño exageradamente plano y minimalista de reduce enormemente las
posibilidades de que el usuario nuevo descubra por sí solo funcionalidades como por ejemplo un
botón útil.
Por otro lado, hay quienes pasan de estar a favor de un diseño u otro y consideran que lo
importante es simplemente que la jerarquía sea clara a simple vista y que los usuarios puedan
navegar e interactuar con naturalidad y sin esfuerzo. Teniendo esto en cuenta para algunos
caso servirá el Flat design o para otros casos no, lo importante es identificar cuándo vale la pena
implementarlo y cuando no.

Más contenido relacionado

Similar a Diseño web Flat Desing, tendencia y controversia

Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfSharonSmis
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfSharonSmis
 
02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.
02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.
02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.UX Nights
 
Tendencias en Diseño Web
Tendencias en Diseño WebTendencias en Diseño Web
Tendencias en Diseño WebAbel Alvarez
 
Ux ui, front-end y back-end
Ux ui, front-end y back-endUx ui, front-end y back-end
Ux ui, front-end y back-endScada Ucv
 
Patrones de diseño en Android
Patrones de diseño   en AndroidPatrones de diseño   en Android
Patrones de diseño en AndroidAlex Naupay
 
Retículas para pantalla.
Retículas para pantalla.Retículas para pantalla.
Retículas para pantalla.elmorenof
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaPlain Concepts
 

Similar a Diseño web Flat Desing, tendencia y controversia (20)

Wed
WedWed
Wed
 
Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdf
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
 
Lenguajes de Diseño Visual
Lenguajes de Diseño VisualLenguajes de Diseño Visual
Lenguajes de Diseño Visual
 
02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.
02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.
02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.
 
Tendencias en Diseño Web
Tendencias en Diseño WebTendencias en Diseño Web
Tendencias en Diseño Web
 
Flats desing
Flats desingFlats desing
Flats desing
 
Ux ui, front-end y back-end
Ux ui, front-end y back-endUx ui, front-end y back-end
Ux ui, front-end y back-end
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diana
DianaDiana
Diana
 
Diseño web semana 3
Diseño web semana 3Diseño web semana 3
Diseño web semana 3
 
Pixel Perfect Web Design.
Pixel Perfect Web Design.Pixel Perfect Web Design.
Pixel Perfect Web Design.
 
Patrones de diseño en Android
Patrones de diseño   en AndroidPatrones de diseño   en Android
Patrones de diseño en Android
 
Retículas para pantalla.
Retículas para pantalla.Retículas para pantalla.
Retículas para pantalla.
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataforma
 
Diseñ0 w3d
Diseñ0 w3dDiseñ0 w3d
Diseñ0 w3d
 
Presentacion final
Presentacion finalPresentacion final
Presentacion final
 
Presentacion final
Presentacion finalPresentacion final
Presentacion final
 

Último

CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfasnsdt
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasRiegosVeracruz
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOManuelBustamante49
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfAdrianaCarolinaMoral2
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxbarbaracantuflr
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddabuitragoi
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 

Último (20)

CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidad
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 

Diseño web Flat Desing, tendencia y controversia

  • 1. Flat Design: Tendencia y Controversia Seguramente has escuchado hablar sobre el término “Flat Design” pero si aún no tienes claro realmente de qué se trata en este artículo te lo explicaremos para que puedas sacar tus propias conclusiones sobre las ventajas que esta técnica ofrece en cuanto a estética y usabilidad. ¿Quién ha sido el pionero de este tipo de diseño? Antes de comenzar a explicar cuales son las principales características del ​Flat Design​ quisiera hacer una breve introducción sobre su origen y su crecimiento en el tiempo. Mirando atrás en la historia del ​diseño web​ encontramos que en un comienzo existió un minimalismo inicial obligado por las restricciones técnicas. Luego se produjo una avalancha de webs llenas de efectos, de degradados, animaciones en flash, y sombras llegando a unos extremos sobrecargados y confusos. Ahora se vuelve a apostar por el minimalismo estético llamado “Flat design o diseño plano” y que supone una reacción opuesta al diseño sobrecargado utilizado hasta el momento. Microsoft ha sido el primero en incorporar este diseño en su interfaz de Windows Phone a fines del año 2010. Luego en el año 2012 introdujo ​Metro​ para en ese entonces nuevo Windows 8. En ambas ocasiones este diseño obtuvo ​excelentes resultados y alta aceptación tanto a nivel funcional como estético. ​Luego tanto Google plus, calendar, Gmail así como también Android 4 fueron volcándose a esta estética. Principales características del Flat Design Se denomina “Flat Design” o “Diseño Plano” al diseño estéticamente simple siendo este una variación del minimalismo. Se basa en los principios de que “menos es más” y de que “la forma prosigue a la función”. Este tipo de diseño suprime sombreados, biselados, degradados, texturas y todo aquello que no aporte información o valor al usuario. Básicamente consiste en quitar o reducir todo elemento decoración en un diseño de interfaz o bien web para facilitar la funcionalidad y la experiencia de usuario. Con respecto a los colores para esta clase de diseño son los colores vivos derivados de los pasteles los que son más utilizados. Mediante los colores y tonos se busca que el usuario comprenda de forma visual sus posibilidades de navegación e interacción. Continuando la línea minimalista a nivel de tipografía se emplean fuentes sans serif para los cuerpos de los textos mientras que para los títulos puede utilizarse cualquier fuente siempre y cuando la misma sea de simple lectura. Para facilitar la lectura se acostumbra a disminuir la longitud de los títulos al igual que de los subtítulos y el tamaño de la tipografía tiende a aumentar de tamaño.
  • 2. Lo que línea de diseño que guía al ​diseño plano o flat design​ es el ser conciso, claro y simple. La información se refuerza mediante jerarquización y código de color para dar relevancia y facilitar una experiencia de usuario intuitiva y fácil. Principales Ventajas del Flat Design Son muchas las ventajas que esta clase de diseño supone. En primer lugar hay que mencionar que como actualmente cada vez son más los usuarios que navegan desde sus dispositivos móviles eso demanda que las webs tengan un diseño adaptable llamado “Resposive Design” que es justamente la capacidad que tiene una web para ajustar su formato al dispositivo desde el cual se la mira. Es aquí donde encontramos una de las principales ​ventajas de usar el Flat Design en el diseño web, ya que es fácilmente ajustable a formatos reducidos,​ conservando la estética de la página web e incluso dando un aspecto de “aplicación” considerablemente más familiar para el usuario de estos dispositivos. Este tipo de diseño resulta de mucha utilidad no solo para sitios webs y aplicaciones sino que también para ​landing pages o páginas de aterrizaje​ en los que se suele buscar que el usuario realice una conversión. Para ello, este tipo de diseño simple, claro y conciso beneficia a llevar al usuario a comprender el mensaje fácil y claramente y por ejemplo clicar en un call to action. Controversia en opiniones Toda innovación suele acarrear opiniones contrapuestas y esta no es la excepción. Esta nueva estética no ha logrado seducir a muchos diseñadores y especialistas en usabilidad quienes defienden que los relieves, las sombras, o bien los degradados en un botón no son bien meras decoraciones estéticas sin sentido sino que se utilizan como indicadores visuales del uso que puede tener. Steve Jobs por ejemplo fue un firme defensor de este diseño de interfaces llamado skeumorfismo que imita objetos físicos. Jakob Nielsen, el “gurú” de la usabilidad, efectuó unas duras críticas a la interfaz de Windows 8 sosteniendo que el diseño exageradamente plano y minimalista de reduce enormemente las posibilidades de que el usuario nuevo descubra por sí solo funcionalidades como por ejemplo un botón útil. Por otro lado, hay quienes pasan de estar a favor de un diseño u otro y consideran que lo importante es simplemente que la jerarquía sea clara a simple vista y que los usuarios puedan navegar e interactuar con naturalidad y sin esfuerzo. Teniendo esto en cuenta para algunos caso servirá el Flat design o para otros casos no, lo importante es identificar cuándo vale la pena implementarlo y cuando no.