Diseño plano, iOS 7, skeuomorfismo y todo eso

Spanish (Español) translation by Esther (you can also view the original English article)

La noción de diseño plano, "digitalmente auténtico", ha sido un tema popular de conversación y controversia recientemente, especialmente con los esfuerzos de diseño de software de Apple, Microsoft, Google y sus respectivos sistemas operativos insignia. Los colores sutiles, la tipografía ligera y los demás elementos comunes del diseño plano moderno han encontrado un papel de trabajo en la construcción de las tendencias de diseño neotérico que todos estamos llegando a amar (o a odiar). En este artículo vamos a analizar estas tendencias para ver a qué se debe todo este alboroto.

Skeuomorphism: Unflat

Aunque son muchas las especificidades de las teorías constitutivas del concepto de diseño plano y digitalmente auténtico, una cosa es segura: ha evolucionado como parte de un alejamiento del diseño skeuomórfico y metafórico.

El skeuomorfismo es el término que aplicamos a una tendencia que consiste en diseñar algo nuevo conservando los temas de algo más antiguo y establecido. El skeuomorfismo existe en muchos sectores diferentes, la arquitectura es un ejemplo muy citado, pero en el contexto del diseño de la web y el software, conocemos el skeuomorfismo principalmente como la técnica de utilizar metáforas para inducir la familiaridad.

Moody PSD Interface on Tuts+ — Interfaz Moody PSD en Tuts+

Hace unos dos años escribí un artículo sobre las metáforas en el diseño web y el concepto central sigue siendo aplicable. Se emplean metáforas de diversa escala para equiparar las acciones e ideas digitales con las del mundo real. El skeuomorfismo ha sido evidente en el diseño digital desde que nació la interfaz gráfica de usuario para combatir la curva de aprendizaje que suponía la interfaz basada en la línea de comandos, desde la simple implementación de iconos que recuerdan a un disquete y una papelera de reciclaje hasta la ilustración completa de libros y una radio por la que es conocida Apple.

Cuando ves un botón en la web, sin siquiera haber hecho clic en él, sabes que es algo que hay que hacer por su diseño, del mismo modo que asumes instintivamente que un mensaje es malo cuando está rodeado de rojo.

From Pete Orme's Principles for Successful Button Design — De los Principios para el diseño exitoso de botones de Pete Orme

You know what to do.. — Ya sabes qué hacer...

El skeuomorfismo se ha utilizado para ayudar a los que son nuevos en una plataforma a aprender las cuerdas y desenvolverse con un mínimo de instrucción. El diseño plano es una tendencia hacia una filosofía libre de elementos superfluos y la aparición de un diseño más sutil y fiel a la propia plataforma.

The BBC's Global Experience Language — El lenguaje de la experiencia global de la BBC

Tanto si usas Windows como OS X, Android o iOS, probablemente estés usando algo diseñado con estas filosofías o esperando una actualización que las incorpore.

Los grandes

Hay muchos ejemplos de diseño plano por ahí, pero para ejemplificar los conceptos hoy nos vamos a centrar en los esfuerzos de Microsoft, Google y Apple debido a su amplio alcance colectivo. Debido a que cada una de estas empresas preside una serie de plataformas y activos, también son algunos de los candidatos más probables para haber establecido directrices de estilo significativas que podemos investigar para emular su interpretación del diseño plano.

Microsoft

Microsoft optó por uno de los rediseños más radicales y controvertidos de los últimos tiempos con Windows 8. Su creación del lenguaje de diseño antes conocido como Metro (ahora conocido como el Lenguaje de Diseño de Microsoft, pero con el término anterior todavía aplicado coloquialmente) se vio por primera vez de forma generalizada con Windows Phone (también estaba Zune, pero cuanto menos se hable de eso, mejor, pero al ser el diseño inaugural de la plataforma, no estaba tan mal. Tuvo que ser el lanzamiento de Windows 8 en 2012 el que levantara realmente la polémica.

Esa controversia no tenía que ver tanto con el diseño en sí mismo, sino más bien con la mera acción de cambiar radicalmente conceptos clave asociados a Windows como el menú de Inicio, que se había convertido en un skeuomorfo por derecho propio, pero con todo el mundo, desde la comunidad de diseño web hasta los medios de comunicación convencionales, cubriendo la reacción, el diseño, y por tanto Metro como lenguaje de diseño, fue puesto en cuestión.

Microsoft's efforts with the design of Windows 8 brought Flat Design into the mainstream spotlight.

Dado que Microsoft ha sido uno de los primeros defensores del diseño plano y auténtico, sus principios son probablemente los más desarrollados y establecidos. Microsoft define Metro como cuatro principios básicos: tipografía, movimiento, contenido no cromático y honestidad. Ya escribí sobre estos principios el año pasado, pero aquí tienes un resumen:

El establecimiento de una jerarquía visual a través de las características de la tipografía, utilizándola para formar la base de un diseño y su navegación sin el uso de características gráficas superfluas
Que el movimiento y la fluidez y el rendimiento de un diseño son igual de importantes que la estética de un diseño
Poner el contenido, no el chrome, en primer lugar para centrarse más en el cuerpo del contenido y permitir que los diseños se escalen adecuadamente
Ser "auténticamente digital" y mantener la honestidad en el hecho mismo de que el consumo del diseño es digital, dejando el diseño de los objetos fuera de línea, fuera de línea

Consulta Emulando el lenguaje de diseño Metro de Microsoft para ver con más detalle cada uno de estos principios.

The Microsoft homepage, designed by Paravel Inc. — La página de inicio de Microsoft, diseñada por Paravel Inc.

Google

Con el lanzamiento de Android 4.0 Ice Cream Sandwich, Google también comenzó a establecer su propio lenguaje de diseño interno, Holo. Holo tiene algunos principios definidos, pero como están vinculados muy específicamente al diseño de aplicaciones, no son tan universalmente aplicables como los de Microsoft. Sin embargo, Android 4.x recuerda visualmente a muchos de los mismos ideales que la familia Windows, con una tipografía ligera, iconos monocromos fuera de la pantalla de inicio y un esquema de colores apagado pero universal.

Apple

Mientras que Google y Microsoft estaban haciendo grandes cambios en sus lenguajes de diseño, Apple se mantuvo en sus principios skeuomórficos a través de múltiples generaciones de su sistema operativo. Eso cambió hace solo unos meses con el anuncio de iOS 7, dando un paso drástico en el diseño del sistema operativo. Los iconos son más planos, la tipografía es más ligera y las metáforas están fuera.

Esto es especialmente evidente en el caso de iOS cuando se compara la actual iteración de, por ejemplo, la aplicación de calculadora con su homóloga de iOS 7. Esa aplicación en concreto ha pasado de intentar parecerse a un dispositivo físico con botones señalados por fondos degradados a un diseño completamente plano e independiente de cualquier metáfora innecesaria.

Diseño plano y silencioso

El diseño plano no es una tendencia sobre la que escribamos en retrospectiva, sino una que evoluciona y se establece constantemente. Por estas razones, es difícil definir con exactitud las características del diseño plano, pero al menos podemos echar un vistazo a algunos de los temas comunes.

Minimalismo

El minimalismo es un principio clave en el diseño plano desde varias perspectivas. La filosofía Content, not Chrome de Microsoft es muy fiel a este hecho, ya que sugiere que el "chrome" superfluo, es decir, los elementos adicionales de la interfaz que no son el contenido principal de la página, deben ser mínimos y prácticamente inexistentes cuando no son necesarios. El uso de la tipografía y la jerarquía visual que se establece a partir de ella es clave para el éxito en la ejecución de este tipo de IU minimalista, que veremos más adelante.

Un uso saludable del espacio negativo, los márgenes y los rellenos también contribuye a la sensación general de diseño plano, espaciando los elementos en lugar de los detalles que antes los distinguían.

Safari's current icon on the left versus .app.icns's flat version. — El icono actual de Safari, a la izquierda, frente a la versión plana de .app.icns. Esta última renuncia a la iluminación falsa, a los biseles y a otros detalles para crear una atractiva alternativa plana sin perder la metáfora de la brújula.

Sin embargo, el minimalismo no solo es aplicable a los diseños en su totalidad. La clave para conseguir un diseño plano es aplicar el minimalismo a los elementos individuales del diseño, renunciando a los efectos sobrantes, como las sombras, la iluminación, los degradados innecesarios, etc. En su lugar, la regla general es que todos los elementos deben parecer, como su nombre indica, planos, sin una falsa profundidad creada a través de biselados y otros efectos, un enfoque muy diferente a la experiencia web a la que estamos acostumbrados a estar envueltos en adornos innecesarios.

Tipografía

La tipografía es un elemento clave en el diseño plano y las elecciones tipográficas acertadas pueden dar lugar a una ejecución satisfactoria de la teoría general del diseño. Dado que, como se ha comentado en la última sección, gran parte del diseño plano consiste en despojarse de adornos adicionales y detalles innecesarios, esto lleva a que la tipografía tenga generalmente un papel protagonista en la forma de toda la página.

Dado que la tipografía empieza a tener un papel fundamental en la jerarquía visual de una página, o al menos más que en los diseños tradicionales, la elección y el uso de la fuente adecuada es una decisión importante. En muchos diseños planos, se suelen utilizar principalmente las sans-serif, ya que las serifas son un adorno innecesario y un signo de formalidad más que de modernidad. De estos tipos de letra sin serifa, buscarás los que estén disponibles en una variedad de pesos para que solo se necesiten una o dos familias para poblar toda la jerarquía de tu diseño, con el fin de mantener la sensación minimalista y sencilla.

Una combinación de uso eficaz del espacio negativo y una familia de fuentes bien elegida puede hacer que tu texto sea una base eficaz para tu diseño, e interfaces como la de Windows 8 son una prueba de que esto funciona. Crea una tipografía plana y de corte limpio y tu diseño te seguirá.

Color

Los principios del diseño plano pueden aplicarse a la mayoría de los esquemas de color de su conjunción, pero hay una tendencia en evolución en la teoría del color que se está construyendo junto con la inducción del diseño plano.

En toda la literatura sobre el tema y en los ejemplos de diseño plano, hay una fuerte tendencia: los diseñadores están utilizando el movimiento de diseño plano para introducir colores más brillantes en una frecuencia mayor que la de utilizar uno o dos colores en un puñado de tonos.

Take Windows 8, for example, where during setup you'll choose a scheme for the OS themed around one of many vibrant colour choices, and where every stock app is backed against something similar.

Puedes seguir plasmando el diseño plano utilizando tonos grises con un color de acento, pero adoptar las nuevas tendencias de color y crear una paleta brillante y diversa puede ayudar a crear un contraste importante y ayudar a recrear efectos solo superados por los degradados, las sombras y otros adornos salientes. Los múltiples colores brillantes y atrevidos son la firma del diseño plano.

Agnóstico en cuanto a dispositivos

Ahora que la web se consume en más dispositivos que nunca, la creación de un diseño responsivo, ligero y móvil viene de la mano del diseño plano. No necesitas crear un diseño responsivo para crear un ejemplo sólido de diseño plano, pero aspectos como la tipografía limpia y escalable y la iconografía plana basada en vectores hacen que sea más fácil que nunca hacerlo.

Please accept marketing cookies to load this content.

Hemos tratado el diseño responsivo en profundidad y hay muchos otros recursos en la web listos para acomodar tu interés en el diseño a escala entre dispositivos. La creación de un diseño responsivo que encarna el minimalismo con una tipografía fuerte y la reducción de la dependencia de texturas y efectos superfluos es algo que tus usuarios te agradecerán y promoverán tu trabajo como independiente de la máquina.

Las tendencias son tendencias

El diseño plano es una tendencia, no un requisito para diseñar para la web. Aunque muchos de los principales actores del diseño y la tecnología web se están orientando hacia los diseños planos, eso no significa que todos los proyectos tengan que hacerlo, ni que la estética sea la adecuada para cada escenario. Las tendencias van y vienen; hay una historia llena de éticas de diseño que fueron populares y que ya no merecen la pena (¿recuerdas cuando las marquesinas estaban de moda?)

Las tendencias son efímeras y si las sigues como una biblia, te quedarás atrás con los tiempos.

Harrison Weber

Con cada vez más grandes nombres que se apuntan al uso del diseño plano, parece un movimiento natural subirse al carro de la tendencia actual. Pero es importante evitar que se limite el potencial de cualquiera de tus diseños por intentar estar a la última. Más bien, trata cada proyecto de forma diferente y adopta solo las características de esta tendencia en particular, si es que hay alguna, que consideres adecuada. El diseño plano puede ser popular, pero no es una ley y no debería ser un límite para producir un gran diseño.

Podríamos ver tendencias radicalmente diferentes el año que viene, pero si te aseguras de tomar las decisiones adecuadas y no utilizas la dirección de este año como una plantilla rígida, tu proyecto debería ser bueno durante muchos años.

Conclusión

Cuando el diseño plano se adapta a tu proyecto, tu creación puede ser magnífica. Combinar colores vivos, tipografía elegante y un aura de minimalismo, sin una tercera dimensión falsa ni otros adornos innecesarios, puede ser tan eficaz como eficiente.

No cabe duda de que el nacimiento del diseño plano es, en gran medida, una respuesta al skeuomorfismo; fíjate en el cambio de Apple de iOS 6 a iOS 7 para comprobarlo. El diseño plano es como el skeuomorfismo crecido, sabiendo que la mayoría de los usuarios de la web entienden ahora que un botón es para pulsar, sin necesidad de un bisel para que parezca un botón que podrías pulsar en la vida real. El diseño plano es un concepto independiente que puede ser sorprendentemente complejo, pero, cuando se ejecuta bien, puede dar lugar a hermosos diseños en todas las plataformas.

Más lecturas

Porque no has leído lo suficiente sobre el diseño plano..

La era del diseño plano de Layervault
El diseño plano es genial para los diseñadores mediocres como yo, por Jonathan Libov
Diseño plano y skeuomorfismo por Sven Lenaerts
Haciendo que funcione: Diseño plano y tendencias de color por Carrie Cousins
fltdsgn.com
El diseño plano proyecta una larga sombra por Ben Moss
flaticons.net
skeu.it Hasta la vista, y gracias por todos los peces de madera, con cinta scotch, cosidos en cuero y con respaldo de lino.
Diseño de iOS 7 en apple.com
Guías de iconos de iOS 7 en PSD por Alexander Obenauer
Presentar tus maquetas web con un toque 3D añadido por Taras Kravtchouk
La muerte del diseño plano por Danish Ali Mughal
Olvídate del diseño plano. Dedica tu tiempo a hacer algo bonito por Harrison Weber