> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-2-antes-de-comenzar.-el-terreno-de-juego/microsoft-design-style.md).

# Microsoft Design Style

Cuando creamos nuestras aplicaciones, queremos que todas ellas tengan un parecido similar de manera que sean entre sí lo más homogéneas posibles, que sean claras, y principalmente usables y responsivas.

A este respecto, Microsoft creó un nuevo lenguaje de diseño junto con la aparición de Windows 8. Aunque ya había sido utilizado previamente en: MSN 2.0, Encarta 95, Windows Media Center, Windows 7 e incluso Zune, fue con la aparición de Windows 8 cuando comenzó a tomar especial relevancia. Tanto es así, que este nuevo lenguaje ha derivado en una guía de estilos, ***Microsoft Design Style (o Microsoft Design Language)***, conocida inicialmente como Metro[⁴](/de0an/capitulo-2-antes-de-comenzar.-el-terreno-de-juego/que-hemos-aprendido.md#notas).

Tras su éxito, ha sido implantada por todos y cada uno de los productos y servicios de la compañía; Xbox, Outlook.com, Windows Phone, Windows Store, Windows 10, Windows 10 Mobile, etc.

Este nuevo diseño se centra principalmente en: una tipografía más clara y elegante, menos gráficos, y pone especialmente atención en el contenido. Se basa en cinco **principios** básicos:

1. Orgullo de la artesanía. Dedicar tiempo y esfuerzo a pequeños detalles que muchos verán con frecuencia.
2. Más con menos. Crear una experiencia limpia y con un propósito, dejando sólo los elementos más relevantes que aparecen en pantalla. Lo importante es el contenido.
3. Rápido y fluido. Escenarios simples y rápidos. Interactuar con el contenido y responder a acciones rápidamente. Crear sentido de continuidad a través del uso significativo del movimiento.
4. Auténticamente digital. Aprovechar al máximo el medio digital. Utilizar infografía en lugar de iconografía.
5. Ganar como uno. Usar un modelo e interfaz de usuario común para crear escenarios completos y homogéneos. No reinventar la rueda cada vez.

Junto a estos principios, proporciona un **proceso** basado en cinco etapas:

1. **Concepto**. Focalizar el esfuerzo a la experiencia de usuario. En esta etapa, hay que determinar no sólo lo que va a hacer la aplicación y para quién es, sino también, en lo que ésta va a destacar. Hay que centrarse en los escenarios de usuario. **Se trata de lo que los interesados serán capaces de hacer, no de lo que la aplicación va a ser capaz de hacer**.
2. **Estructura**. Una buena organización hace que todo sea más fácil. A partir de un buen concepto, la siguiente etapa, es la creación del modelo de aplicación. La arquitectura de la información (AI) le da al contenido la integridad estructural que necesita. Ayuda a definir el modelo de navegación de la aplicación e incluso la identidad de la misma. Mediante la planificación de cómo se organizará su contenido y cómo los usuarios van a descubrirlo, es posible obtener una mejor idea de lo que la aplicación va a ser capaz de hacer sentir.

   ![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-1efdc80187c61a9a5e7e6b7d9e443c75ae8848f2%2Fimage6.png?alt=media)

**Figura 06.- Ejemplo de una Arquitectura de Información (AI)**

3. **Interacción**. Contar la historia de la aplicación. Se trata de llevar a cabo la ejecución de la etapa de concepto. Esto se logrará en muchos aspectos, con el uso de *wireframes*[⁵](/de0an/capitulo-2-antes-de-comenzar.-el-terreno-de-juego/que-hemos-aprendido.md#notas) para esbozar los flujos entre páginas. Proporcionar exactamente lo que se quiere evitando toques de pantallas innecesarios. La interacción también está en el movimiento, lo que determinará la fluidez y la facilidad de uso entre una página y la siguiente. Una buena AI no sólo facilita los escenarios de uso, sino que ayuda a imaginar las pantallas clave desde las que se puede acceder a la aplicación.
4. **Elementos visuales**. Hablar sin decir una palabra. Los grandes efectos visuales definen no sólo el aspecto de la aplicación, sino cómo ésta se siente y se llena de vida a través de la animación y el movimiento. La elección de la paleta de colores, iconos e ilustraciones son sólo algunos ejemplos de este lenguaje visual. Es importante guiar el contenido de la apariencia, no que al aspecto dicte su contenido.
5. **Prototipo**. Refinar la aplicación. Esta es la etapa en que la aplicación cobra vida y todo el trabajo se pone a prueba. Se recomienda crear prototipos cuanto antes y a menudo, teniendo en mente, que un prototipo es un proceso de revisión constante de prueba y error.

El siguiente capítulo lo dedicaremos completamente a profundizar en este proceso e iremos diseñando la interfaz de nuestra aplicación.