Después de lanzar el Metro UI en Windows Phone 7, este estilo del diseño ha sido muy utilizado para aplicaciones de Windows, en diseño web y en plantillas de sitios de estilo moderno. Muchos desarrolladores web están siguiendo el diseño debido a la elegancia y el estilo que trae en la mejora de los contenidos web.
Uno de los principios claves del diseño Metro es mejor concentración en el contenido de las aplicaciones, confiando más en la tipografía y menos en los gráficos como podrás ver en los siguientes ejemplos de sitios web de estilo Metro.
¿Qué es el estilo Metro?
Metro es una interfaz de usuario, es decir, un diseño gráfico para que el usuario interactúe con el sistema operativo en pantalla.
Es usado en el sistema operativo Windows 8, así como en los sitios web de Microsoft y diversas aplicaciones compatibles con dispositivos portables.
Difiere del tradicional Desktop en su sencillez, al estar enfocado principalmente para su uso en pantallas táctiles, aunque funciona perfectamente en equipos de escritorio.
Ejemplo 1: Metrotwit
En Metro es más importante el contenido que las aplicaciones, se enfoca más en la tipografía que en los gráficos (contenido antes que el aspecto).
Utiliza fuentes fáciles de leer sin esforzar la vista y usa tiles (mosaicos o bloques) en los vínculos, más fáciles de acceder.
Se usan principalmente fuentes de la familia Segoe, Segoe UI es la que se utiliza en esta página. Está diseñado para que el sistema sea más rápido, sencillo y moderno, alejándose de la clásica interface de iconos de estilos anteriores.
Ejemplo 2: The Verge
Después de lanzar el Metro UI en Windows Phone 7, el estilo del diseño ha sido muy utilizado para aplicaciones de Windows, en varios diseños de sitios web y en plantillas de sitios de estilo moderno. Muchos desarrolladores web están siguiendo el diseño debido a la elegancia y el estilo que trae en la mejora de los contenidos web.
Uno de los principios claves del diseño Metro es mejor concentración en el contenido de las aplicaciones, confiando más en la tipografía y menos en los gráficos como podrás ver en los siguientes ejemplos de sitios web de estilo Metro.
Ventajas de usar el estilo Metro
- Una interface más sencilla y accesible, principalmente para los que tienen poca habilidad.
- Más facilidad para identificar las imágenes o fotos, en las carpetas que las contengan, debido a la animación de las miniaturas.
- Las imágenes se abren en la misma ventana, con las funcionalidades más comunes como el Zoom.
Ejemplo 3: Up Magazine
Se utiliza la aceleración por hardware para que las animaciones y transiciones fluyan más suavemente.
Ventajas del estilo Metro en las páginas web de internet
- Compatibilidad y accesibilidad con cualquier tipo de dispositivo con el que navegue el usuario.
- Más rapidez y rendimiento en la carga de las páginas.
Actualmente existen un par de plantillas para adaptarse al estilo Metro a nuestras web, a saber Metro UI CSS y BootMetro.
Ejemplo 4: Block Designs
Seguramente la comprensión del grid y de la estructuras de las pantallas nos permite adoptar el estilo Metro de una manera sencilla, ya que precisamente, la sencillez es una de las bazas de este estilo.
Ambas plantillas combinan elementos CSS y Javascript para ofrecer un aspecto muy similar al de las aplicaciones que podemos ver en Windows 8. No hay que dejar pasar por alto que este estilo está orientado a navegación táctil.
Fuente: Blog
Síguenos en Facebook y Twitter