Nueva tendencia y estilo de diseño web y algo de historia:

El recientemente popularizado estilo de interfaz “plano” no es simplemente una tendencia. Es la manifestación de un deseo de una mayor autenticidad en el diseño, el deseo de frenar el exceso visual, volúmenes, sombras…

diseño-plano-tendencia

En la creación de nuevas oportunidades, progresos tecnológicos, conduce a veces al exceso. En el siglo 19, la producción masiva mecanizada permitió adornos que erradicar de forma rápida y barata, lo que lleva a los bienes demasiada decoración con adornos. Algo similar ocurrió en los últimos años, cuando las tecnologías de visualización y diseño permitió a los diseñadores crear interfaces de gran riqueza visual, dando lugar a excesos skeuomorphic ( técnica de diseño que intenta imitar un elemento del diseño original, antes justificado por la funcionalidad, con el propósito de hacer más confortable y reconocible en su función o interactividad.) y estilísticos .

En su deseo de autenticidad, el movimiento moderno diseño frenó el exceso ornamental del siglo 19, por lo que el diseño encaja en la era de la producción en masa. Hoy en día, estamos viendo el mismo deseo de autenticidad se manifiesta en la tendencia “plana”, que rechaza el skeuomorphism y visuales excesivos para el diseño más simple, más limpio, con el contenido bien enfocado.

 

El nacimiento del diseño moderno:

Adolf-Loos-Ornamento

En 1908, Adolf Loos, arquitecto austriaco influyente, escribió un ensayo titulado provocativamente Ornamento y Delito. El ornamentalist moderna, según él, era o un “rezagado cultural o un caso patológico. Él mismo se ve obligado a renegar de su trabajo después de tres años. Sus producciones son insoportables para las personas cultas ahora, y se convertirá en lo que los demás dentro de un rato. “Incluso con más audacia, Loos afirmaba:” Cuanto menor sea el nivel de un pueblo, es más lujoso sus adornos. Para encontrar la belleza en la forma en vez de hacerlo depende de ornamento es la meta hacia la cual la humanidad es aspirante”.

Lo que desencadenó un ataque en el ornamento? Para entender la mentalidad de este pionero del diseño moderno, primero debemos formarnos una idea del estado del diseño en los finales del siglo 19.

El advenimiento de la máquina de vapor marcó el comienzo de una era de producción masiva mecanizada. Como escribe el crítico de arte Frank Whitford, “máquinas de vapor impulsados ​​podrían estampar, cortar y moda casi cualquier sustancia más rápido y con más regularidad que la mano humana. La producción mecanizada significa precios más bajos y mayores beneficios”.

Pero mientras que el método de producción pasó de mano en la máquina, el tipo de mercancías que no lo hizo. La mayoría de todos los productos, desde la construcción y los muebles de tela y cubiertos, fue adornado en una capa opulenta de ornamento, construida sobre el gran espíritu del Renacimiento.

Históricamente, la decoración artesanal ha sido costosa al producir, sirve como un símbolo de la riqueza y el lujo. Con la llegada de la mecanización, las imitaciones de los mismos adornos codiciados podrían erradicarse de forma barata y rápida. En lugar de parar y pensar en qué tipo de diseño sería el más adecuado para la producción en masa, los fabricantes aprovecharon la oportunidad de copiar estilos de siempre a bajo costo. El resultado fue la inundación de productos chillones y de baja calidad que Adolf Loos, junto con otros pioneros del diseño moderno, arremetió en contra.

 

Durante la década de 1920, un nuevo movimiento surgió en Alemania conocida como la palabra “Objetividad” , que tiene un sentido de “hechos”, “de hecho”, “práctico”, “objetivo”. La Nueva Objetividad movimiento en el campo del diseño buscado pura utilidad. El arquitecto alemán Hermann Muthesius explicó cómo esta idea de la utilidad se podría aplicar al estilo, para producir algo que llamó Maschinenstil , o “estilo de máquina.” En sus propias palabras, encontramos ejemplos de este estilo en “estaciones de ferrocarril, salas de exposiciones, puentes, buques de vapor, etc…  Aquí nos enfrentamos a una grave y casi científico Objetividad, con la abstinencia de toda la decoración exterior, y con formas totalmente dictadas por los propósitos que se ha creado para servir.”

En lugar de llenarlo de  ornamento, otros pioneros del diseño moderno centran en elevar la funcionalidad en un pedestal. En 1934, una exposición por el arquitecto modernista Philip Johnson se llevó a cabo en el Museo de Arte Moderno, titulado Art Machine de Nueva York. Se exhibieron varias piezas de equipos mecánicos, tales como hélices de los aviones y los aislantes industriales. La idea era poner de relieve la belleza de la forma de los objetos que eran puramente funcionales. Para el movimiento moderno diseño, la decoración no era necesario; Belleza y elegancia fueron a surgir desde el diseño de los contenidos propiamente dichos, y no de una capa superficial de la decoración.

B0168P 0015

Esta tetera fue diseñada por Naum Slutzky, orfebre, diseñador industrial y artesano principal de Weimar Bauhaus. El diseño es limpio y utilitario y no tiene ornamento – una solución casi matemática para el problema dado.

Tomó parte de la primera mitad del siglo 20 para el movimiento modernista de prevalecer, pero los estilos y técnicas tradicionales finalmente fueron superadas por los nuevos enfoques. En su libro de diseño del siglo XX , Jonathan Woodham señala que la estética moderna se caracteriza por “formas limpias y geométricas, el uso de materiales modernos como el acero cromado y vidrio y superficies lisas articuladas por la manipulación abstracta de la luz y la sombra . El uso del color a menudo restringido, con énfasis en el blanco, blanco roto, gris y negro. “El Diseño moderno había despojado de su capa opulenta de la ornamentación y la belleza en lugar buscado en una armoniosa fusión de forma y función.

Sería erróneo sugerir que el movimiento del diseño moderno en el conjunto puede ser caracterizado como anti-ornamental. Los nuevos estilos de vino y se fue, como los movimientos populares de Art Nouveau y Art Deco. Algunos estilos, como el futurismo, empujados por una estética tecnológica exagerada, mientras que otros, como De Stijl, buscaban la armonía en una paleta limitada de colores y formas. Pero detrás de los cambios externos en el estilo fue el movimiento constante lejos de ornamento innecesario, un movimiento hacia una forma más limpia, más comedido de diseño cuya belleza residía en el estilo y la forma del contenido en sí, en lugar de en la decoración exterior.

 

Ornamento Digital

Si comparamos la historia del diseño moderno con nuestra corta historia del software y diseño web, un paralelo se puede ver. De la misma manera que la producción masiva mecanizada dio lugar a un uso excesivo de la ornamentación, lo hicieron los avances en la pantalla y el estilo en el resultado de la tecnología de uso intensivo de la decoración en las interfaces de software y sitios web. Los Diseñadores en los primeros años de la Web fueron especialmente exploratorio en este frente, con animación y sonido junto con las imágenes para producir experiencias excesivamente ricas y a menudo estridente.

Los primeros sistemas operativos con interfaces gráficas de usuario son aún bastante simples en su apariencia. Por supuesto, las metáforas del mundo real se utilizaron en los que podrían ser, por ejemplo que con las imágenes de las carpetas para indicar los directorios de archivos y botones con biseles para que el usuario sepa que pudieran hacer clic sobre ellos. Pero la estética en general fue bastante plana y contenida. Independientemente de que el diseñador quería ofrecer una experiencia visual más rica, la baja resolución de las pantallas en blanco y negro les limitaba.

MAC INTERFACE

Con sólo dos colores para la primera interfaz gráfica de Mac OS, Apple logró transmitir la profundidad, texturas, botones e iconos que imitaban los objetos de la vida real. La apariencia de la interfaz estaba limitada por la tecnología, en lugar de por el diseñador.

Como la tecnología evolucionó, los diseñadores se les concedieron mayor libertad visual con sus interfaces. Con Windows XP, Microsoft introdujo un estilo de colores por todas partes, dándole un aspecto algo físico, con un montón de toques de luz, sombras y gradientes.

Apple fue más allá con el lanzamiento de Mac OS X, el estilo de la interfaz con burbujas de plástico brillante, aluminio cepillado y los iconos realistas. A medida que pasaba el tiempo, el estilo visual de los sistemas operativos creció en intensidad. Microsoft dio de Windows de forma transparente el tema brillante, como el cristal, mientras que Apple introdujo aún más materiales y señales skeuomorphic en su escritorio y sistemas móviles, como las texturas de cuero en su aplicación de calendario y realistas efectos de la vuelta de páginas de su lector de libros.

Windows-Vista-interface

La interfaz de Windows Vista aparece el tema Aero, con su brillo, como el cristal ventana de cromo.

Los estilos que imitan objetos de la vida real y las texturas se dice que son “skeuomorphs” – es decir, los elementos de diseño basados ​​en símbolos tomados del mundo real, con el único propósito de hacer una interfaz de aspecto familiar para el usuario. Recientemente, los diseñadores han empezado a cuestionar la lógica de labrar una aplicación de notas como un bloc de papel, o de la adición de cuero y los efectos de la vuelta de páginas a una aplicación de calendario. Estos efectos proporcionan interés visual, sino que también son reliquias de otra época, reliquias que atan una interfaz para los objetos de la vida real estáticas que son incompatibles con la fluidez y el dinamismo de las interfaces digitales.

calendar

La versión actual del calendario de OS X cuenta con una textura de cuero cosido y bordes rasgados del papel para dar la apariencia de un calendario físico.

Con la última versión de Windows 8, Microsoft dio un valiente paso de tales imágenes superfluas, tratando de dar a su sistema operativo un aspecto totalmente digital y, en sus palabras, “auténtico”. La última interfaz se basa en los principios que Microsoft desarrolló para su lanzamiento móvil anterior, presentando al usuario una estética que es casi totalmente desprovisto de texturas o imitaciones de objetos de la vida real.

En su lugar, Windows 8 se basa en la tipografía, el espacio y el color para poner orden y elegancia en el lienzo digital. Efectos de la vida real y estilos superfluos se descartan, y todo lo que queda no es más que el propio contenido. Por mucho que Muthesius estaciones de ferrocarril, una vez presentados como ejemplos de Maschinenstil , los diseñadores en el punto de Microsoft a ejemplos de señales de estaciones de ferrocarril como la inspiración para la nueva interfaz de Windows, anteriormente conocido como “Metro”.

windows-8-metro-home

La pantalla de inicio de Windows 8 rompe con el viejo diseño de escritorio, que se compone de planos coloridos azulejos, en vivo, en lugar de los iconos. Las placas no son meramente una elección estilística: Ellos permiten que la información útil que se mostrará en la pantalla de inicio en la forma de un tablero de instrumentos.

La Web se ha visto en una transformación similar a lo largo de los años. Diseños basados ​​en tablas y basado en Flash, Los primeros diseños que dieron los desarrolladores fue un control de píxeles perfecto sobre sus interfaces, por lo que los diseñadores no dudaron en crear contenedores de gran riqueza visual de su contenido. Cuando comenzamos a comprender la fluidez del nuevo medio y desconectar la presentación del contenido con CSS, el diseño Web se hizo más sobrio. Contenedores altamente decorados no podían cambiar su anchura y posiciones con facilidad, lo que los diseñadores utilizan menos imágenes y confiaban más en un estilo simple CSS para hacer sus diseños más adaptables y fáciles de mantener.

La última evolución del diseño de respuesta o responsive (que es la adaptación de una sola página para adaptarse a diferentes tamaños de pantalla y dispositivos), así como el paso entre los diseñadores para trabajar directamente en el código desde el principio, pasando por alto los editores visuales, como Photoshop, nos mueve aún más hacia una estética Web de contenido enfocado más simple, una que deriva su belleza de la tipografía, el espacio y el color en lugar de partir de un uso intensivo de texturas e imágenes decorativas.

Recientemente, Apple, el líder de skeuomorphism, ha dado su primer paso hacia la autenticidad digital con la última versión de su sistema operativo móvil, iOS 7. Atrás han quedado las texturas de cuero cosidas y los bordes de papel rotos, sustituido por una interfaz minimalista, casi plana, con colores, iconos simplificados y superficies semi-transparentes.

iOS-77

Apple iOS 7 hace un giro radical lejos de skeuomorphism. Las texturas granuladas, los botones biselados y el cristal brillante han desaparecido, sustituidos por una interfaz prácticamente llano y funcional.

Diseño Auténtico

Lo que enlaza los días pioneros del diseño moderno para el cambio actual en el diseño de software y la Web es el deseo de autenticidad. Este impulso hacia una mayor autenticidad es lo que mueve a los diseñadores a quitar ornamento de su trabajo a lo largo de cien años atrás, y esta fuerza es lo que se está moviendo el diseño digital de hoy hacia una estética más limpia y funcional. Pero, ¿qué hace que el diseño “auténtico”?

Diseño auténtico objetivo es atravesar la falsedad y acabar con la superfluidad. El diseño auténtico es sobre el uso de materiales sin ocultar en falsas texturas, mostrando sus fortalezas en lugar de tratar de ocultar sus debilidades. El diseño auténtico es acerca de la función de la forma más óptima que representa, por tener la convicción de la elegancia a través de la eficiencia. El diseño auténtico es dejar caer las muletas de la ornamentación externa y la búsqueda de la belleza en el contenido puro.

En el diseño auténtico, el estilo no es importante, pero no se persigue a través de la decoración. Más bien, la belleza de la forma depende del contenido, con el estilo que es el resultado natural de una solución creativa.

 

En el diseño digital, autenticidad significa un par de cosas, que más o menos se pueden resumir en lo siguiente:

  • Abrazo el aspecto digital.
    Nosotros no tenemos que imitar texturas como el metal, la madera y el cuero en una pantalla de ordenador. No son lo que una interfaz digital está hecha de, por lo que pretender que se tiene ningún sentido. Esto no quiere decir que un diseño debe tener fondos planos sólo simples colores – más bien, significa que no debemos tratar de imitar o ser restringido por las texturas del mundo real.
  • Acabar con skeuomorphism.
    Un libro digital no necesita imitar el papel físico como uno se vuelve a la página, ni una aplicación para tomar notas que mirar como un bloc de papel físico, con una cubierta de cuero, bordes rasgados y una fuente de escritura a mano de estilo. Skeuomorphism no siempre es malo, pero siempre presenta dificultades innecesarias en la interfaz. Por ejemplo, mientras que un bloc de papel es estático y uno, una interfaz digital dimensional no tiene que ser, pero siempre y cuando la interfaz está hecho para imitar a un bloc de papel, tiene que soportar las limitaciones de la metáfora física.
  • Hacer el estilo centrado en los contenidos.
    Centrarse en el contenido y no en su estilo y decoración. Se podría pensar que este punto es muy trillado, pero ¿cuántas veces has visto un tema off-the-shelf en un sitio web? Un tema siempre se basa en el contenido de prueba y así, por su propia naturaleza, nunca podría ser una representación óptima de los contenidos que finalmente llevará a cabo. Construir temas con el texto de relleno empuja el diseñador para centrarse en el estilo y la decoración, y no en el contenido, porque no hay todavía ningún contenido que trabajar. Sólo cuando se trabaja con contenido real puede empezar a transformar verdaderamente la función de la forma.

Aborde un problema de diseño totalmente dentro del contexto de la lona digital, en lugar de mediante la traducción de las soluciones del mundo real. La pantalla digital permite formas abstractas, la animación, los colores brillantes y tonos uniformes. No tiene por qué estar limitado a una paleta tenue o representación estática, ni debe obligarse a las formas skeuomorphic. Al averiguar la mejor manera de representar el contenido con la cuadrícula de píxeles, se puede llegar a mejores soluciones simples, interfaces innovadoras que se sienten como en casa en la pantalla, diseños que ofrecen una mejor experiencia de usuario y que se destacan entre la multitud.

El recientemente popularizado estilo de diseño “plano” puede ser una tendencia, pero también es la manifestación de un deseo de una mayor autenticidad en el diseño, el deseo de frenar la decoración superflua y para centrarse en el contenido en sí .

 

 

2 Comentarios


  1. ryder91
    Mar 11, AM

    pues en lo personal prefiero el skeuformismo,el diseño digital no me agrada en lo mas minimo,apple cometió el peor error de su vida al pasar a la tendencia flat,se rebajo al estilo windows,por lo que mencionas acerca de que la interfaz metro es mas innovadora,para mi es algo obsoleto,va hacia atrás en el tiempo,para ser mas preciso a los años 20´s,40´s cuando apenas empezaba el cine en blanco y negro,interfaces basada en tipografía aburrida y monótona,animaciones de origami,para dar a entender mejor mi punto de vista,usare esta metáfora:la interfaz UI de windows 8 es el equivalente a la película de king kong de 1933 o a la película japonesa de godzila de los años 50´s,la comparación mas moderna seria con la película de el increible hulk de los 80´s,si has visto cualquiera comprenderás “que se centran en el contenido”pero no ofrecen calidad visual,si las comparas con su respectivo “remeke”…En el caso del Skeuformismo la analogía seria con la película de tron,es la misma historia,pero con mejor contenido visual,ojo solo que ahora el detalle se centra en una tendencia skeuformista-futurista y no tanto en el contenido como dices…pero sin importar cuanto ha avanzado la tecnologia sigue siendo analógica,en el sentido practico,el diseño debería ser libre,personalizable no dictatoriable y programable por el usuario no de código cerrado.Aun le falto mucho por recorrer a la tecnología y esperemos sea una tendencia pasajera esta “interfaz metro”


  2. crackfive
    Mar 11, AM

    Esta claro que la interfaz de windows 8 funca mejor en las tablets que en el pc,y la interfaz skeuformista sienta mejor en el pc 😛

Deja una respuesta