jueves, 5 de diciembre de 2013

Imaginando los prototipos y las vistas modelo

Continuando la construcción de nuestro proyecto de Congreso Visible, después de que conocemos el Modelo de Dominio de nuestro problema a resolver, y por tanto sabemos que información tenemos disponible, podemos empezar a imaginar nuestra app.

En este caso nos ahorramos el tema de colores puesto que la base esta en el sitio de Congreso Visible


Entonces podemos pasar de nuestros no tan lindos Sketchs a un diseño base un poco más apróximado. En este caso para empezar a construir nuestras Vistas Modelo vamos analizar el diseño del panorama de Windows Phone.


Este panorama por ejemplo nos muestra que en nuestro contenedor principal vamos a necesitar al menos 3 listas, una para las personas que seguimos, otra para presentar gente aleatoriamente y otra para la lista de partidos. El buscar más me llevará a otra vista donde usando filtros de búsqueda como en la web podré buscar en la lista total de personas.

Ya que todo los terminos como Vistas, Vistas Modelos y Models, pueden ser un poco confusos para varios de ustedes, pueden pasar por esta ppt antes, al menos para familiarizarse con varios de ellos. Pero no se preocupen, seguiremos haciendo el ejercicio paso a paso.


También les recomiendo revisar la sección de MSDN para Windows Phone, donde de forma muy concreta listan los temas que debes aprender para saber construir apps XAML en Windows Phone.

Pues bien, de acuerdo a lo que tengo en mente al menos inicialmente y según los datos que vi en las respuestas del API esta es la estructura base de mis Vistas Modelo.


Si observan bien no necesariamente tiene la misma estructura de los modelos, y está pensada más bien a cumplir con el proposito de ser el soporte de las vistas claro está. Le faltan algunos datos y seguro, saldrán más durante la construcción, o modificaciones de cosas con las que no me sienta cómoda, les prometo al final hacer ingeniería inversa y ver como quedó.

Mis herramientas recomendadas para hacer los diseños y prototipos estáticos como siempre son:
  1. Inkscape herramienta open source para vectores
  2. Kuler para paletas de colores
  3. The Noun Project para iconos en vectores editables en Inkscape (No olvide el copyleft)
  4. UI Stencils para prototipos en papel
Recuerden que hay más recursos para crear prototipos publicados en mi blog y que este tema de construcción de vistas modelos está explicado más ampliamente en este documento que construí alguna vez.


No hay comentarios: