¿Recuerdas cómo los fanáticos de Mac solían levantar la nariz y cualquier cosa y todo Microsoft? Bueno, están bajo mucho calor en este momento.
Justo cuando Apple finalmente se volvió más grande que Microsoft, Microsoft cambió las tornas y volvió con fuerza.
La web ha estado alborotada desde que se reveló la nueva ‘Metro UI’ como parte de:
- el teléfono con Windows 8,
- el tablero de Xbox 360,
- el sitio web de Microsoft rediseñado
- y el próximo lanzamiento público de Windows 8 este otoño
La interfaz de usuario de Metro tiene una organización elegante y optimizada, una estética magnífica y un enfoque ultramoderno de las interfaces digitales.
Ha tardado mucho en llegar, pero Microsoft finalmente entendió el poder del diseño en la era moderna y respondió con su mejor apariencia hasta el momento.
Para los diseñadores web, la buena noticia es que la interfaz de usuario de Metro se ve tan bien en los sitios web como en las aplicaciones, algo que Microsoft pretendía desde el principio, como lo demuestra su nuevo sitio web. Estas son las 5 cosas que nos encantan de la interfaz de usuario de Metro, junto con ejemplos de sitios web que la utilizan.
1. ¡Adiós al skeuomorfismo!
Skeuomorphism puede ser una palabra desconocida para usted, pero si alguna vez ha usado una interfaz gráfica de usuario, probablemente se haya encontrado cara a cara con ella.
Skeumorphism es la práctica de diseño común de hacer que las entidades digitales se vean como sus contrapartes de la vida real. Por ejemplo, una libreta digital usa una textura de cuero que parece real como fondo, la papelera de reciclaje en su escritorio se parece al bote de basura en su oficina y la mayoría de sus aplicaciones tienen instancias de puntadas y perillas que no tienen otro propósito que invocar el mirada del objeto ‘real’.
Aquí hay una definición un poco más elocuente de skeumorfismo de Wikipedia:
“un elemento de diseño o estructura que tiene poco o ningún propósito en el artefacto fabricado con el nuevo material pero que era esencial para el objeto hecho con el material original” – Wikipedia
Apple desempeñó un papel muy importante en el movimiento de diseño de skeuomorphism y es una parte vital de su liderazgo en diseño. Desde iCal hasta iBooks, el mundo Mac está repleto de funciones de vanguardia ocultas detrás de apariencias pintorescas.
Si bien Apple (y muchas otras empresas y diseñadores) a menudo han utilizado el skeuomorfismo con un efecto encantador, su efecto dominó en las aplicaciones y la web ha dado como resultado toneladas de creaciones cursis y torpes. Francamente, los diseñadores a menudo pierden el control con el Skeuomorphism, diseñando interfaces y elementos que pueden ser innecesariamente decorativos o francamente kitsch.
Por lo tanto, no es de extrañar que el rechazo total del skeuomorphism sea la estrategia de diseño más discutida en la interfaz de usuario de Metro.
La llegada de Metro tiene todo el potencial de hacer que el skueomorfismo sea cosa del pasado. La razón detrás del vehemente apoyo para eliminar las apariencias de la ‘vida real’ es simple: la nueva generación está creciendo en el mundo digital.
No es exagerado decir que ahora estamos más familiarizados con los archivos y carpetas digitales que con la inspiración de la vida real detrás de ellos. Y dado que establecer la familiaridad y facilitar la transición al mundo digital fue la principal razón detrás del diseño skeuomorphic, parece un poco obsoleto llevarlo a la nueva era del diseño cuando todos ya se sienten cómodos con una vida vivida digitalmente (por muy sombrío que pueda sonar). ).
los Sitio web creativo de enero utiliza una interfaz elegante y moderna que evita todos y cada uno de los adornos skeuomorphic cursis. ¿Una forma de hacerlo aún mejor? Convirtiendo la pieza central llena de cuadrados en un área interactiva. ¿Por qué desperdiciar la oportunidad de convertir esos mosaicos en puntos de acceso dinámicos al estilo Metro?
2. Hola Minimalismo
¿Con qué reemplaza la interfaz de usuario de Metro los elementos skeuomorphic? Bueno, sobre todo nada. Con mucho relleno blanco, líneas limpias, bloques simples y cero trucos, la interfaz de Metro tiene éxito debido a su minimalismo. Piense en ello como una limpieza o una dieta sin azúcar que elimina toda la flacidez del diseño. No necesita dibujar tornillos y pernos cuando no sirven para nada en la interfaz digital.
El sitio web de Windows Phone es impresionante en el uso de espacios en blanco, líneas limpias y una organización ordenada.
Cuando diseñe sitios web, combine el minimalismo con una paleta de colores brillantes y mosaicos para lograr el estilo Metro. Aunque diseñé la página de inicio de mi sitio web hace casi dos años, parece parte de la tendencia actual de Metro debido al minimalismo, los bloques y los colores vivos. Recuerda: la sencillez nunca pasa de moda.
3. La cuadrícula de mosaicos y los bloques
Expongámoslo, por poco sofisticado que parezca: los mosaicos y los bloques son la mejor manera de organizar el contenido en la web 2.0. Desde la línea de tiempo renovada de Facebook hasta la hermosa pantalla de Pinterest, el texto y las imágenes nunca han sido tan efectivos o tan fáciles de trabajar como cuando están agrupados dentro de bloques colocados muy cerca. La interfaz de usuario de Metro refuerza esta idea.
Anteriormente, el diseño de grillas suizas obligaba a los diseñadores a trabajar dentro de estructuras rígidas y tabulares. Pero con la llegada de los servicios de fuentes web como Typekit y la creciente capacidad de javascript, la web es ahora más inductiva que nunca para la creatividad. La interfaz de usuario de Metro aprovecha al máximo esta nueva libertad en el diseño de diseño.
Win Rumours coloca texto, imágenes y anuncios dentro de sus propios bloques para un diseño limpio y flexible.
4. Diseño receptivo
El lenguaje de diseño de metro funciona muy bien con estrategias de diseño receptivas.
Dado que no hay elementos skeuomorphic molestos para reproducir a través de una serie de medios, puede hacer que su sitio web escale, cambie el tamaño, estire, rote y reorganice todos los elementos de su sitio web sobre la marcha para adaptarse a diferentes plataformas. Para los dispositivos móviles, la funcionalidad, la eficiencia y la velocidad son la clave para una excelente experiencia de usuario, no ilusiones de instancias del mundo real y relleno decorativo.
El nuevo sitio web de Microsoft es un excelente ejemplo no solo de una interfaz tipo Metro sino también de la flexibilidad con la que el sitio web se adapta a diferentes pantallas.
(Imagen de Forbes)
5. Texto más grande y elementos en los que se puede hacer clic
Como prueba adicional de su enfoque de diseño centrado en dispositivos móviles, la interfaz de Metro utiliza texto y botones grandes para facilitar la navegación. Entonces, ya sea que se acceda al sitio web desde una computadora de escritorio o desde un dispositivo móvil/tableta, no tendrá que acercar los enlaces para acceder a ellos.
el borde utiliza fuentes más grandes dentro de mosaicos de estilo Metro totalmente en los que se puede hacer clic (y muy artísticos) que se ven tan bien en las computadoras de escritorio como en los dispositivos móviles. Y no tendrás que gastar demasiado tiempo en encontrar lo que buscas.
La interfaz de usuario Metro de Microsoft puede ser objeto de acalorados debates, pero una cosa es segura. Ha tenido un impacto en la comunidad de diseño que está aquí para quedarse.
¿Qué opinas sobre la interfaz de usuario de Metro y las formas en que afectará el diseño web? ¡Haznos saber!