Blog - Diseño Web

Tendencias SEO
Diseño Web
Redes Sociales
Actualidad

 

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

Diseño Web

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

Diseño Web 

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

Diseño Web 

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

Diseño Web

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

 

Relacionados

14 de Octubre del 2019
Diseño web emocional en el Ecommerce | Diseño web
El diseño web emocional en el Ecommerce consiste en hacer que las personas se sientan bien, hacerlas sentir como que forman parte de algo.
07 de Octubre del 2019
Analizando algunos sitios web de Hoteles Boutique
El diseño web de este tipo de sitios suele tener grandes fotografías en slider para destacar las comodidades y el entorno para mostrar por que son tan exclusivos.
09 de Septiembre del 2019
Tendencias en diseño web y UX
Parece estar claro que vamos a ver cambios en las tendencias en UX y diseño web, por eso debemos estar muy atentos.