El diseño de la interfaz de usuario de Windows 8 trata de mantener un aspecto consistente a través de todas sus aplicaciones. Sus características principales son su amplio margen en la parte superior, inferior y en el lado izquierdo. Esto se hace fundamentalmente para hacer entender al usuario la dirección del movimiento panomárico horizontal del contenido.

El ‘grid’ de Metro

La rejilla se compone de unidades y sub-unidades. La unidad básica de medición es la unidad. Una unidad equivale a 20 × 20 píxeles. Cada unidad se divide en sub-unidades de 5 × 5 píxeles. Hay 16 sub-unidades por unidad de superficie. La imagen siguiente muestra la red en la esquina superior izquierda de la pantalla. La imagen se amplía para mostrar píxeles, sub-unidades, y las unidades.

Encabezado de página

La línea de base de la cabecera de la página debe ser de 5 unidades, o 100 píxeles desde la parte superior. El margen izquierdo de la cabecera de la página es de 6 unidades, o 120 píxeles.

Área de contenido

El área de contenido tiene un margen superior de 7 unidades, o 140 píxeles. El margen izquierdo es de 6 unidades, o 120 píxeles. El margen inferior es flexible. Para paneo horizontal de contenido, debe ser no más de 6,5 unidades (130 píxeles), y no menos de 2,5 unidades (50 píxeles). Para el alineamiento vertical de contenidos, los márgenes superior e izquierdo son los mismos. No hay margen inferior especificado por el desplazamiento del contenido de la pantalla.

  ESPACIADO horizontal

El espaciado horizontal entre los elementos de contenido varía en función de los bloques. Bloques de información como imágenes tienen 2 subunidades, o 10 píxeles, de relleno entre el ’tile’ y el texto que lo acompaña. Las listas tienen 2 unidades o 40 píxeles de relleno entre las columnas. 

Espaciado vertical

El espaciado vertical entre los bloques de contenido depende del tipo de contenido como en el caso del espaciado horizontal. Así bloques de color y listas de texto tienen 1 unidad, o 20 píxeles de espaciado vertical entre ellos. Cuando se trate de elementos similares de alto peso, como dos bloques de color tendrán 2 subunidades, o 10 píxeles, de espaciado entre fila y fila.

Espaciado horizontal entre grupos

El espaciado entre grupos será de 4 unidades, o 80 píxeles. Este espaciado debe ser lo suficientemente significativo para diferenciar fácilmente un grupo del siguiente.

Diseño web al estilo Metro

Actualmente existen un par de plantillas con bastante tirón para llevar el estilo Metro a nuestras web, a saber Metro UI CSS y BootMetro. Por el momento developando ha probado la primera en su diseño del backoffice para el mantenimiento de la aplicación móvil que estamos desarrollando para Café &  Té Las Rozas.

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.

En Developando seguiremos profundizando en los conocimientos de ambas plantillas para traeros nueva información.

Fuente: Grid Windows 8

Sobre Santiago Gonzalez

Santy es uno de los creadores y desarrolladores que componen Developando. Además es profesor en el Master Business Entrepreneurship de la Universidad Complutense de Madrid.

Si quieres conocer más sobre Santiago González Courel visita su perfil.

Find more about me on:
•