Windows 8 Apps: Design Grid Layout Pattern

Ya he comenzado ha desarrollar algunas aplicaciones para el nuevo sistema operativo de Windows 8. Por supuesto, partiendo de toda la documentación de la que disponemos desde el MSDN Microsoft.

Uno de los primeros pasos que debemos seguir, pasa por construir nuestras aplicaciones siguiendo los consejos que nos ofrece. En concreto el diseño de la aplicación y el layout básico de cada elemento que vamos a incluir en nuestras páginas.

En este post, voy a tratar de resumir los conceptos básicos de distribución de elementos en el grid.

Y como a mi me gusta tener las cosas ordenaditas, he tratado de agrupar todas las dimensiones en un único documento. Para ello, he recogido todas las imágenes que MSDN pone a nuestra distribución y las he incluido en una sóla imágen. Así, podemos descargarla e imprimirla para tener toda la información de un sólo vistazo.

Estas son las directrices básicas:

TITULAR Y CONTENIDO
· Margen superior de 45 px para el titular de la aplicación (línea base del texto a 100 px).
· Margen superior del contenido de 140 px.
· Margen izquierdo de la aplicación a 120 px.

ELEMENTOS
· Espacio interno horizontal entre elementos de borde: 10 px.
· Espacio interno horizontal entre elementos de lista: 40 px.
· Espacio interno horizontal entre elementos de bloque/grupos: 80 px.

· Espacio interno vertical entre elementos de borde: 10 px.
· Espacio interno vertical entre elementos: 20 px.

FOOTER
· El margen del pie de la aplicación, puede variar en función de los contenidos, pero nunca debe ser mayor de 130 px ni menor de 50 px.

Aunque aquí están todos los márgenes establecidos en pixels, no está de más saber que se han obtenido a partir de la estructura básica que microsoft considera básica, en la cuadricula de trabajo. Para Windows8, la estructura básica es la unidad (20px), que contiene a su vez 16 subunidades (de 5 px cada una). Aquí os dejo la imágen gráfica que define todos estos conceptos.

Por supuesto, todas las imágenes pertenecen a Microsoft, y aquí lo único que he intentado es unificar y agrupar los conceptos.

Podéis encontrar toda la documentación e imágenes en la siguiente dirección http://msdn.microsoft.com/es-es/library/windows/apps/hh872191.aspx

REFERENCIAS:
MSDN Microsoft
Diseñar una página de aplicación
Tutorial para crear tu primera aplicación Windows 8