Share
En los últimos años, Microsoft ha adoptado su lenguaje de diseño tradicional en gran medida. Metro es la base estética de Windows 8; El próximo sistema operativo de Microsoft será este octubre. Echemos un vistazo a lo que es Metro, cómo podemos emular algunos de sus principios deseables y echar un vistazo a dónde ya se está utilizando..
Metro es el nombre que se le da al lenguaje de diseño utilizado en los sistemas operativos actuales y de próxima generación de Microsoft, incluido el próximo Windows 8, el actual panel de control de Xbox 360 y en algunos de sus sitios web. Los aspectos ya han sido evidentes en algunos de los trabajos anteriores de la compañía, en Windows XP y Zune..
El equipo de diseño de Microsoft ha revelado que el lenguaje está parcialmente influenciado por las señales de transporte público, lo que pone un énfasis significativo en la tipografía y en una jerarquía visual que consiste en texto con diferentes propiedades. En el diseño de software, Microsoft describió a Metro como una "actualización" de las interfaces de Windows (pre-8), Android y iOS, que presentan principalmente interfaces basadas en iconos.
Aunque la fuerte transición observada en Windows 8 ha sido objeto de controversia, la recepción de Metro ha sido principalmente positiva, y no es difícil ver por qué.
Para crédito de Microsoft, la estética de [la interfaz de usuario de Metro] es un poco más atrevida e informal que las cuadrículas de íconos estrechos y estériles y los menús de Rolodex del iPhone y el iPod Touch.. - CNET
Microsoft destaca cuatro principios como fundamentales para la interfaz de usuario de Metro; Tipografía, movimiento, "contenido no cromo" y honestidad. Echemos un vistazo a cómo estos se traducen a la web..
La tipografía es un principio muy importante en Metro. Como interfaz de usuario, Metro intercambia el diseño tradicional basado en iconos para la navegación que se compone únicamente de texto. Cuando dicho texto debe ajustarse a una cuadrícula definida, se coloca en cuadriláteros de color sólido.
Metro se describe como moderno y eso es evidente a través del uso del tipo sans-serif, específicamente, en el caso de Windows, la familia de fuentes Segoe. En el diseño influenciado por Metro, el texto se diferencia en gran medida por nada más que tamaño, manteniendo la tipografía, el peso y otras propiedades iguales o similares, diferenciándose en otras propiedades solo cuando actúa como un enlace o en un color de fondo alternativo.
Con la reducción de gráficos en favor del texto, Metro influye en el uso del texto en todos los niveles. Por lo tanto, nace una jerarquía y en un diseño de sitio minimalista, el tamaño del tipo puede actuar como la única distinción entre las secciones (por ejemplo, el título de una publicación de blog y el texto que lo acompaña). Combinar algunas disparidades entre los estilos de texto con un uso bueno y consistente del espacio en blanco es una parte fundamental de los principios tipográficos en Metro.
Los propios Microsoft tienen un artículo sobre las pautas de tipografía de Metro. Si bien es obvio que no tiene que cumplir con ellos (es principalmente una guía para los desarrolladores de software nativos), la guía demuestra una forma de usar el espíritu tipográfico de Metro en varios niveles..
Junto con las características tipográficas de Metro, "contenido, no cromo" juega un papel importante en la distinción visual de Metro a otras formas de diseño..
Las características de la interfaz gráfica visible de una aplicación a veces se denominan "chrome" - Wikipedia
El enfoque minimalista de Metro se cumple en última instancia al evitar las interfaces con Chrome. En su lugar, encontrará diseños centrados en el contenido que consisten principalmente de texto que observa las cualidades tipográficas mencionadas anteriormente. Al eliminar Chrome, los diseños impulsan el contenido como el enfoque principal, particularmente ventajoso en blogs y otros sitios basados en texto.
Al evitar el cromo en el diseño, un sitio puede beneficiarse de una escala más transparente y trabajar de manera efectiva en tamaños de pantalla más pequeños, como parte de un diseño responsivo. Puede observar un ejemplo de esto observando las aplicaciones de Metro en Windows 8, yuxtapuestas con otras comparables en Windows Phone 7. La filosofía de "contenido, no cromo" se adapta a un diseño sensible que, obviamente, es importante cuando se diseña para consumirlo en múltiples tamaños..
En Google Chrome, nos esforzamos por eliminar [Chrome], no solo porque lleva a un diseño más simple y más limpio, sino porque consideramos que sus aplicaciones web no deberían verse limitadas dentro del abultado navegador de un navegador, deberían sentirse como Aplicaciones de primera clase en tu escritorio.. - Google.
La principal creencia de Microsoft en "contenido, no en cromo" es deleitarse con el contenido, no con la decoración, que se logra al reducir cualquier elemento de la página que no sea contenido. Al hacerlo, puede lograr una experiencia de usuario placenteramente simple, una filosofía que ya se ha evidenciado en muchos diseños en la web, incluso si no se parecen mucho a Metro de Microsoft. Incluso los navegadores están implementando software para ofrecer a los usuarios una opción de visualización que se adhiere al principio.
El aspecto de movimiento de Metro como lenguaje de diseño es algo que se enfoca en las aplicaciones, y su influencia en su diseño depende de la cantidad de interacción que tenga un usuario y del nivel de transición que la interacción invoca..
Microsoft cree, a través de Metro, que la estética de un diseño concuerda con la fluidez y el rendimiento del diseño, y que los principios de movimiento proporcionan profundidad y capacidad de respuesta a un sitio..
Windows 8 y Windows Phone 7 también tienen una gran afición por el desplazamiento horizontal, con contenido dispuesto en una dirección que prácticamente no existe en un paradigma de diseño más tradicional. Realmente no se ha traducido al escritorio web, incluso en los sitios propios de Microsoft, pero es bastante popular en el diseño móvil. Por lo tanto, los diseños sensibles o centrados en el tacto pueden utilizar esto de manera bastante efectiva. (Aunque, aunque esto se usa en interfaces de usuario basadas en Metro, no es un principio oficial y ya es evidente en todos los sistemas operativos).
Metro es "auténticamente digital", en contraste con algunos de los principios de diseño skeuomorphic de compañías como Apple. Por ejemplo, Apple diseñó sus aplicaciones Contactos, Calendario, Notas y Recordatorios para parecerse a sus contrapartes más físicas, algo que ha resultado bastante controvertido..
Microsoft cree en algo muy diferente. El lenguaje de Metro está diseñado para que sus principios no traten de parecerse a algo que no es, y en su lugar adoptan su naturaleza digital a través del diseño. Por lo tanto, en lugar de hacer que una lista de contactos se vea como la libreta de direcciones que puede comprar en una tienda, debe verse como una lista de contactos en un teléfono o computadora para cumplir con los principios de Metro.
El logotipo de Windows 8 se encontró con una controversia propia, pero juega con los principios de Microsoft de ser auténticamente digital. Claro, todavía se ve como una ventana, pero no como la ventana que forma parte de un edificio; en lugar de eso, simplemente es la ventana del nombre, por lo que no hay ningún vidrio falso ni madera. Incluso el diseño de un botón no debe influir en el diseño de un botón que encuentre en la vida real..
La elección de no emular una lista de tareas tradicional ha permitido a los diseñadores [de Clear, para iPhone] pensar de forma diferente y aprovechar al máximo la tecnología disponible para ellos. La aplicación se ha creado alrededor de gestos multitáctiles y, junto con una animación suave, lo convierte en una experiencia única y elegante.. - Shaun Cronin
Este concepto juega su parte en la idea de "contenido, no de cromo" al eliminar los detalles superfluos que no hacen nada para apoyar el contenido..
Es importante destacar que Metro no es un diseño. Si bien definitivamente hay sitios creados para parecerse directamente a Windows 8 o Windows Phone 7, esa es solo una interpretación del idioma. Su diseño no necesita verse idéntico a una aplicación de Metro de Windows para ajustarse al idioma.
Los diseños pueden inspirarse en Metro en diferentes niveles, pero obviamente no necesariamente tienen que parecer que fueron fabricados por Microsoft. Puede implementar los principios tipográficos de Metro sin necesidad de usar Segoe como su familia de tipos de letra, de la misma manera que puede implementar "contenido, no chrome".
En realidad, con la tipografía como una parte tan integral de Metro, su diseño puede terminar pareciéndose a lo de Microsoft sin dejar de aprovechar sus prácticas..
Metro fue diseñado principalmente para el diseño de software, pero sus características también han comenzado a influir en la web, comenzando con las propiedades de Microsoft..
La vista previa de Microsoft.com es una actualización muy agradable de la página de inicio de la compañía para realmente alinearse con Metro y darle una actualización receptiva.
My Kind of Phone es el blog del Reino Unido de Windows Phone, por lo que es bastante natural que siga el lenguaje de diseño de la plataforma que cubre. También puede ver los principios de "Movimiento" de Metro en juego aquí, con algunos contenidos en transición mientras se desplaza sobre los elementos.
El sitio Zune de Microsoft está muy influenciado por Metro, sobre todo porque el Zune fue el primer dispositivo que realmente adoptó una interfaz de Metro completa. Puedes ver en el diseño una perfecta encarnación de Metro en la web..
La página de inicio actual de la BBC se adhiere en gran medida a los principios de Metro con un uso audaz de tipografía y cuadrículas.
Incluso los sitios web de Google tienen una chispa de Metro, con el rediseño más reciente de la suite de aplicaciones que ofrece un uso generoso del espacio en blanco y el uso de tipografía. Al igual que en las directrices de Microsoft para la tipografía, Google utiliza un solo color de acento en medio de su tipografía simple.
Accentsconagua