Microsoft creó en 2009 «Metro», el primer sistema de diseño creado por ellos mismos, con el objetivo de revitalizar el diseño de apps para Windows Phone, abriendo camino a lo que hoy es Fluent Design System.
El Microsoft Design Language o Metro, fue un sistema de diseño creado como una nueva manera de visualizar información en dispositivos móviles. Pensado en principios de comunicación visual rápida, inspirada en las señales de tránsito, era muy minimalista, hacia un uso fuerte de tipografía, colores, animaciones y era un cambio radical hacia el diseño de apps en el ecosistema de Microsoft. En ese sentido, Metro fue pionero en muchos conceptos que hoy son centrales en Material Design o en las Human Interface Guidelines de Apple.
Aunque la recepción de Metro fue muy buena con Windows Phone y con xBox (llegó a ganar el «Interactive Gold Award» de la Industrial Designers Society of America en 2011), Metro se integró en Windows 8 para PCs y fue ahí donde encontró mucha resistencia: casi ninguna aplicación de Microsoft (como Internet Explorer o los programas de Office) adoptaron el sistema visual, lo que llenó al sistema operativo de inconsistencias, volviéndolo complejo y poco usable.
Metro fue descontinuado en 2015 junto con la plataforma de Windows Phone, aunque aún se encuentran rastros del sistema de diseño en la plataforma de xBox y en Windows 10.
Microsoft Fluent Design System
Microsoft anunció Design Fluent System en su evento Build en 2017 como un nuevo sistema de diseño que evolucionaría a partir de Metro pero que sería llevado en una nueva dirección: el diseño de Aplicaciones Universales para Realidad Mixta. Aquí hay dos conceptos nuevos que vale la pena explorar antes de entrar en detalle sobre el sistema de diseño.
UWP: Aplicaciones Universales para Windows
Microsoft presentó en 2016 su Universal Windows Platform o UWP, una plataforma para desarrollar aplicaciones que pueden correr en PCs, laptops, tablets, consolas de videojuegos, móviles, dispositivos de IoT o visores de realidad virtual o aumentada sin necesidad de tener que reescribirlas para cada dispositivo.
Una app UWP puede ser desarrollada en lenguajes como C++, C#, F#, VB.NET, XAML o JavaScript para que los programadores puedan trabajar con lo que ya conocen y reutilicen lo que ya han hecho antes.
La apps universales de Microsoft son por diseño responsivas y pueden adaptarse a cualquier formato de pantalla o estilo de interacción (teclado, táctil, natural, voz, controles, etc), y se distribuyen, sincronizan y actualizan a través de la tienda de apps de Windows.
Realidad Mixta
La Realidad Mixta (Mixed Reallity o MR), también llamada Realidad Híbrida (Hybrid Reality o HR) es la fusión de mundos virtuales con el mundo fìsico real para producir entornos virtuales y visualizaciones donde los objetos físicos y los digitales viven juntos e interactúan en tiempo real. La Realidad Mixta no es exclusiva del mundo físico o del virtual, sino que es una mezcla de Realidad Virtual (VR) y Realidad Aumentada (AR) por medio de tecnología inmersiva.
En 2016 Microsoft lanzó Hololens, su primer dispositivo para Realidad Mixta, un visor que muestra apps universales a su usuario (llamados «hologramas«) que son geolocalizadas.
A diferencia de otros visores de realidad virtual como Oculus Rift , Hololens es un dispositivo autónomo que es inalámbrico, corre Windows 10 e interactúa por medio de interfaces naturales de voz y gestuales.
Principios de diseño de Fluent Design System
«Fluent Design System es nuestro sistema para crear interfaces de usuario que son adaptables, empáticas y bellas»
– Microsoft Build, 2018
Fluent Design System está basado en 3 principios de diseño:
- Adaptatibilidad. Las experiencias en Fluent se sienten naturales en cada dispositivo y se adaptan al medio ambiente del usuario. Una experiencia fluida se siente cómoda en una tableta, en una PC de escritorio y en un Xbox; incluso funciona bien en un visor de realidad mixta. Cuando se le agrega más hardware, como un monitor adicional a la PC,
Fluent lo aprovecha como parte de la experiencia. - Empatía. Las experiencias en Fluent son intuitivas y se ajustan al comportamiento y la intención del usuario, comprenden y anticipan lo que se necesita. Estas experiencias unen personas e ideas, ya sea que estén en lados opuestos del mundo o parados uno al lado del otro.
- Estética. Las experiencias en Fluent son atractivas e inmersivas. Al incorporar elementos del mundo físico, una experiencia en Fluent aprovecha las cosas que son fundamental para el usuario: utiliza la luz, la sombra, el movimiento, la profundidad y la textura para organizar la información de una manera que se siente intuitiva e instintiva.
Los elementos de estética de Fluent Design System como luz, profundidad, movimiento, material y escala aplican tanto para pantallas de escritorio o móviles como para experiencias en realidad mixta:
Ejemplos de Fluent Design System
Estos son algunos ejemplos y pruebas de concepto de aplicaciones que utilizan Fluent Design System, tanto de las creadas por Microsoft como por terceros.
Recursos de Fluent Design System
Fluent Design System tiene su propio sitio en fluent.microsoft.com en el que se pueden encontrar las guías de estilo y la documentación de diseño, así como guías de implementación para apps en Universal Windows Platform, junto con guías de controles y patrones para Fluent, guías de accesibilidad y toolkits de prototipado para Figma, Sketch, Framer, Adobe XD, Illustrator y Photoshop.
