> 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-3-no-comiences-todavia.-primero-el-prototipo/disenando-la-experiencia-de-usuario-con-visualstudio-y-blend.md). # Diseñando la experiencia de usuario con Visual Studio y Blend Antes de comenzar a escribir código, es conveniente disponer, al menos, de un *wireframe* y/o una maqueta *(mockup)*. A partir de ahí, los diseñadores podrán centrarse en escribir código XAML para ir dando forma al IU. Utilizarán Blend mientras que nosotros, como desarrolladores, utilizaremos Visual Studio. Para que ambas partes podamos trabajar en paralelo es primordial que nuestra aplicación implemente el patrón *MVVM,* en el que profundizaremos en el siguiente capítulo. Tanto en Visual Studio como en Blend, existen algunos aspectos comunes a ambas que es necesario conocer para el diseño de cada pantalla mientras estamos en la vista en modo de diseño XAML. Tanto en tiempo de diseño como en tiempo de compilación podremos cambiar algunos parámetros de nuestras páginas para revisar efectos en distintos tipos de dispositivo, distintas escalas, distintas orientaciones e incluso distintos temas. ![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-76ccb34202d3dbf632c836eeb6f4ad0df73aacd8%2Fimage53.png?alt=media) **Figura 43.- Distintos tipos de dispositivos y escalas y orientaciones** ![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-11676c778f56dc8f0b2dd356f2e3a617e3c95b65%2Fimage54.png?alt=media) **Figura 44.- Cambiando el tema con Device Preview Settings** Estos efectos nos facilitarán en numerosas ocasiones conocer por anticipado el comportamiento de nuestro diseño, lo que nos hará ganar tiempo de diseño. Seguiremos así, ganando en eficiencia. Para más detalle sobre cómo definir diseños con XAML visitar la página: .