Flat Design, la tendencia web en este 2013.

flatdesign

Todo el mundo sabe que en diseño las modas son cíclicas y cuando hablamos de diseño aplicado a Internet, de diseño web, estos ciclos suelen mucho más cortos. Comento 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 es sencillamente 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.

Ejemplo de Diseño Web PlanoEsta moda no es nueva, pocas lo son, y es un reciclaje de una vertiente que ya surgió hará unos años y que tuvo gran auge. Ahora bien, con la entrada en juego de HTML5 y CSS3, los diseñadores en general nos volvimos locos con todos los efectos que podíamos crear y digamos que se dejó de lado este tipo de diseño minimalista por otros mucho más elaborados, con el regreso de las texturas y las sombras como motivos a destacar.

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.

A nosotros la verdad es que es un tipo de diseño web que nos gusta, y que cuando podemos aplicamos. Pero, ¿os gusta a vosotros?

Seguro que te interesa
Showing 28 comments
  • Raul Vega Muñoz
    Responder

    Antes que nada, quiero aclara que no soy diseñador gráfico ni webmaster “profesional” o especialista, pero tengo varios sitios web que yo mismo diseño y creo, con base en el CMS WordPress. Digamos que soy un amateur en lo que a diseño y en programación se refiere. Mucho tiempo quedaba boquiabierto con las texturas, los gradientes, la diversidad de efectos visuales complejos de diversas web y quise copiarlos. Pero con la experiencia he aprendido que a mayor complejidad de diseño más tarda en cargar un web, ahora más aun con los dispositivos móviles. Como veo que la tendencia es clara, los dispositivos móviles se COMERÁN el mercado, entonces debemos dar prioridad a lo minimalista a la hora de crear sitios web, pensar en que no en todos los paises hay conexiones rápidas a internet y las redes móviles hacen que las páginas tarden en desplegarse si están sobrecargadas de texturas. Como consumidor, me parece divertido e interesante ver esta tendencia, pero creo que el autor de este post tiene toda la razón, las modas son cíclicas y eventualmente los diseñadores querrán diferenciarse del resto y hacer más complejos sus diseños. Saludos!

    • Ricardo Trigueros
      Responder

      Te agradezco el comentario, la verdad. La tendencia clara es el minimalismo, impuesto sobretodo por los puntos que comentas: la carga en dispositivos móviles, la adaptabilidad, las conexiones en países en vías de desarrollo, etc.

      De todas formas, como todo en diseño, las modas cambian cuanto menos te lo esperas.

  • Manuel de Castro
    Responder

    Si ya hace tiempo tenía claro que mi web necesitaba un lavado de cara, con estos consejos ya se por donde tirar! gracias!

    • Ricardo Trigueros
      Responder

      De nada Manuel.
      Si necesitas cualquier tipo de servicio web o si quieres consejo, estamos por aquí para lo que puedas necesitar.

      Un saludo y gracias por el comentario!

  • Cristina D
    Responder

    A mi personalmente me encanta el Flat Design, soy estudiante de diseño gráfico y suelo aplicarlo en mis trabajos. El problema es que para mis profesores los colores planos y formas simples lo identifican como infantil…

    • Ricardo Trigueros
      Responder

      Hola Cristina, antes de nada, gracias por tu comentario. La verdad es que es muy cierto lo que dices. Las tendencias llegan sin que uno se lo espere y en ocasiones los formadores, profesores, etc no se renuevan o reciclan con estas tendencias, aplicando siempre los mismos parámetros a lo largo de años y años, sin importarles demasiado la evolución que el diseño gráfico en muchas ocasiones, vive. Y en cuanto a que el Flat Design pueda parecer infantil, ahí está la habilidad de cada cual para conseguir no dar esa sensación. Yo te animo a seguir con el Flat Design, porque creo que se quedará con nosotros más de lo que muchos piensan.

  • David Seeg
    Responder

    Para mi Microsoft impuso modas o talvez las revivio pero fue el quien al lanzar Windows 8 o mejor dicho antes cuando lanzaron Windows Phone 7 poco a poco empezaron a desaparecer los diseños complejos y a transformase en planos y minimalistas, lo mismo sucedió en la época de Windows 7 , todos empezaron a usar Vidrio o Glass Style. Ahora con Windows 9 no sé que pasará pero creo que los diseños cada vez mas seran planos, TALVEZ LAS PÁGINAS LLEGUEN AL PUNTO EN QUE LLEGO SAMSUNG GALAXY GEAR; solo iconos blancos sin color, o sino iconos de color y con poco grosor y con un fondo negro. QUIEN SABE todo cambia en la vida para mejor 😉

    • Ricardo Trigueros
      Responder

      Hola David,
      efectivamente, Microsoft pasó del esqueuomorfismo al flat design en un salto, anticipándose al estilo que iba a prevalecer y que prevalece estos años, caracterizado por la simplicidad en el diseño.

      No creo que se llegue a un punto tan radical como el que comentas de que las webs sean tan simples, pero lo cierto es que si que hay algunos ejemplos en diseño web, de páginas donde solo hay texto, tres líneas, y todo en blanco y negro. Y asún así, están hechas con estilo y son atractivas. En cualquier caso, el color es parte fundamental para muchos diseñadores a la hora de crear y no creo que vaya a pasar de moda 😉

      Muchas gracias por tu comentario!

  • PC-Users
    Responder

    Excelente, nos inspiró también a escribir otro artículo sobre diseño Flat. Saludos

  • david reyes
    Responder

    hola don Ricardo, soy estudiante de ultimo año en diseño gráfico y la verdad es que me veo totalmente atraído por esta tendencia, observo detenidamente las ventajas que tiene
    en el hecho comunicacional, su facilidad de lectura y comprensión en los distintos escenarios, no solo en el diseño web, logrando un ancho camino de lineas de versatilidad.
    últimamente e querido aplicarlo a mis diseños, pero no me deja conforme el hecho inevitable de copiar algunas cosas que visto por ahí, lo que me ha llevado a buscar si existe alguna manera o estructura de diseño con normas y tips que deban respetarse para realizar el estilo flat. por otro lado soy muy consciente de que es mas valorable que cada diseñador interponga su creatividad e ingenio en cada pieza gráfica, pero me gustaría obtener mas información, sus orígenes y hacia donde va.
    espero pudiera ayudarme,saludos

    • Ricardo Trigueros
      Responder

      Buenas tardes David,
      antes de nada, agradecerte tu comentario.
      En respuesta a las dudas que me planteas, voy a ayudarte en la medida de lo posible.
      El primer punto que planteas es sobre una normativa. La verdad es que desconozco la existencia de una posible normativa. El flat design es más una tendencia amplia y abierta. Hay incluso variantes como el LongShadow del que también hablé en otra entrada, pero no hay unos límites establecidos ni unos patrones a seguir.
      El segundo punto, sobre el origen del Flat Design, es bastante confuso. Lo de que “menos es más” es una teoría aplicada en numerosas ocasiones y momentos. Ahora bien, la primera aplicación notoria del Flat Design, vino de mano de Microsoft y su Windows 8, a pesar de que ya tuvo un acercamiento con la interfaz de su dispositivo de reproducción Zune.
      En cuanto al tercer punto, lo cierto es que es una incógnita. Ya te he comentado por arriba que el Long Shadow es una de las variantes más notorias, que intenta dar profundidad sin perder la esencia del Flat Design. Particularmente creo que todavía hay mucho recorrido con esta tendencia y que probablemente la siguiente tendencia sea todavía más minimalista si cabe.

      No creo que te haya resuelto demasiadas dudas, pero espero haberte dado algunas ideas sobre los puntos que me comentabas.

      En cualquier caso y como ya te dije al principio, gracias por tu comentario.

  • maribel
    Responder

    hola me podrias ayudar y decirme cuales son los tipos de flat design que existen ?

    • Ricardo Trigueros
      Responder

      Buenos días Maribel,
      pues no podría decirte que tipos de Flat Design hay, porque no hay estipulación ni reglaje oficial sobre ello. Hay variantes y vertientes, pero casi siempre depende de cada diseñador o de cada estudio.

      Eso si, una variantes destacada es el Long Shadow, del que ya escribí por aquí.

      Un saludo!

  • Leticia AP
    Responder

    Hola! en lo personal el flat design me parece un diseño bastante limpio y muy simple que lo hace ver atractivo y moderno. Es un estilo muy parecido al minimalismo que también me encanta… actualmente estoy realizando mi portafolio digital pero quisiera saber su opinión acerca de la diferencias entre el minimalismo y el flat design ya que ambos estilos son muy parecidos a lo que utilizo en mi diseño, utilizando también tipografía pero no sé a qué estilo es al que me estoy inclinando? Por eso quisiera saber si podría aclararme algo de las diferencias entre estos dos estilos. Saludos! 😀

    • Ricardo Trigueros
      Responder

      Buenos días Leticia,
      la gran diferencia a mi modo de ver es que en el minimalismo se intentan utilizar el menor número de elementos posibles. Eso en Flat Design no tiene porque ser así. El Flat Design es una tendencia que elimina detalles innecesarios como sombras, volúmenes, etc, pero no elimina elementos. Además, el minimalismo suele utilizar una paleta de colores muy limitada, mientras que en el Flat Design, no tiene porque ser así. En cuanto a las tipografías, en el minimalismo se intentan obviar tipografías demasiado originales y centrarse en tipos de corte sans serif como la Helvética.

      Un saludo!

  • Neo
    Responder

    Hay mil y una forma de hacer una web menos pesada, que el diseño sea bonito, tenga interactividad, etc. No debería ser mayor problema hoy en día.

    Contamos con CloudFlare, pre-procesadores, minificadores, optimización de imagenes, svg, etc… para que el tiempo que tarda en cargar una pagina se reduzca inmensamente.

    Por otro lado en diseño móvil, debido a funcionalidad y usabilidad, de igual forma deben quitarse muchos de los elementos que en desktop nos encontramos al entrar a la una web, por lo que si no se cargan, no tienen porque afectar al rendimiento en móviles.

    PS: En el CMS WordPress tienes unas opciones ocultas en las que puedes activar, además, la compresión Gzip, que reduce en carga un porcentaje impresionante el peso de la web.

    Respecto al artículo, lo cierto es que el “Flat Design” ha sido y aún es muy usado, vistoso y eficiente, aún con algunas de las evoluciones que ya ha tenido.

    Saludos 😉

pingbacks / trackbacks

Escribe un comentario