Tutorial Sketchflow - expression Studio

[cbug]

Una aproximación al "prototipado" y sketchflow

Por qué bosquejar?

El cerebro humano constantemente se guía a través de imágenes en el espacio. Tenemos como ejemplo una fotografía; en ella se pueden apreciar colores, objetos, dimensiones, profundidades, superposiciones,etc. Llevando el concepto a un diseño, generalmente uno comienza diseñando un dibujo a "mano alsada", el cual se compone de líneas, curvas, rectas y figuras geométricas básicas.
Si miramos el siguiente dibujo, podremos enfocarnos en la idea del prototipo real, estableciendo mediante nuestro cerebro una relación entre las líneas, colores, dimensiones, figuras, etc.

PROTOTIPO



REALIDAD

Algunas ideas sobre prototipos:

*Sirven para representar ideas.
*Pueden probar y demostrar la viabilidad de una idea, siendo esta una estructura, producto, web, aplicación, etc.
*Son útiles para la colección de feedbacks y demostración de acciones o pasos basados en el fb recibido.
*Debe ser algo que podamos fácilmente poner de pie y luego comenzar con otro.

Los prototipos son de gran utilidad en el diseño para determinar qué construir frente a la manera de construirlo. A veces el acto de la creación de un prototipo en sí mismo puede conducir a avances o ideas que son más difíciles de encontrar.

Por qué sketchflow?

Porque es una herramienta reciente y muy potente desarrollada por microsoft. Se localiza en expression Blend, uno de los programas de expression Studio.
Utilizando el concepto anterior, en SketchFlow podemos mostrar un prototipo abstracto de como sería la realidad del proyecto a través de flujos de la aplicación,  diseñando los componentes ideales para llevar a cabo tal fin.
Sketchflow, es una herramienta utilizada por los clientes y/o usuarios, por lo cual
es importante mencionar la característica: Feedback. Dentro de SketchFlow cuando terminemos el primer prototipo y sea presentado ante otra persona(cliente), ésta podrá remarcar algunos aspectos que no se encuentran presentes en la idea del diseñador.

La interfaz de sketchflow
-Workspace
Siempre que inicias expression Blend, siempre verás un splash screen.

Para crear un projecto bajo sketchflow debes ir a Nuevo Proyecto->Aplicación sketchflow WPF/Silverlight.
Puedes optar por un lenguaje Visual Basic o C#. Optaremos por el default C# ya que es el más utilizado en los últimos momentos de desarrollo de aplicaciones a nivel web y escritorio.
Tendremos la siguiente pantalla:

En esencia, cuando se mira a esta interfaz, hay tres modos de controlar lo que sucede en SketchFlow. El primer modo incluye todas las opciones que tienes disponibles en una serie de menúes que aparecen en la parte superior de la pantalla. El segundo modo son todas las opciones e items que puedes seleccionar en los paneles que rodean el Artboard. Finalmente, en el panel de herramientas a la izquierda de la pantalla, podrás ver herramientas de la paleta para manipular las opciones del Artboard.
-Panel de herramientas

Este panel generalmente aparece a la izquierda de la pantalla en expression Blend. Este puede ser llevado a cualquier otro lado del espacio de trabajo.
Herramientas:
*Selección: Es para selecciones básicas de objetos. Dependiendo del objeto que selecciones deberías estar habilitado a mover y manipular objetos en el ArtBoard, incluidas las opciones de escalar y rotar.
*Selección directa: Manipula partes de un objeto o una colección de puntos.
*Mano: Con ella nos movemos a través del Artboard.
*Zoom: Nos permite agrandar o disminuir la vista en el Artboard.
*Cuenta gotas: Copia la apariencia de otro objeto hacia el objeto seleccionado actual.
*Tarro de pintura: Para usarlo, primero debes seleccionar el objeto del que deseas copiar los atributos y luego seleccionar el tarro de pinturas.
*Degradado: Te permite editar objetos que tienen degradado aplicado. Si mantienes apretado en la herramienta verás la opción de "Brush Transform", también. El degradado permite alterar las opciones de dirección del gradiente que debes setear en las propiedades del panel en la categoría de Brushes.
*Lápiz o pluma: Con el puedes crear objetos directamente en el ArtBoard. Si mantienes apretado, verás otras opciones más.
*Rectángulo: Podrás crear figuras geométricas.
*Grid: Contiene una variedad de contenedores. Estos son llamados Elementos u Objetos en expression Blend, y añaden funcionalidad y capacidades a las aplicaciones y prototipos que tu creas. Dependiendo de si creas un proyecto de Silverlight o WPF, verás distintos objetos.
*Edición de textos: Con el podemos crear labels, textboxes, etc.
*Botones: Están presentes los botones, checkboxes, listboxes, etc.
-Panel de projecto

Contiene todos los archivos que puedes usar en tus proyectos. Sketchflow es una colección de programas, archivos, librerías y referencias que se diseñan al compilar el proyecto. Generalmente estos tipos de proyectos poseen, "art vectors", fuentes, imágenes, etc.
-Assets Panel("Panel de activos")

Contiene todos los elementos, aunque no todos sean relevantes o cosas que uses tipicamente en SketchFlow.
-Panel de trabajo

Es el lugar donde las hojas de aplicaciones aparecen, y es donde puedes manipular directamente los items del proyecto. Por encima de todo, podrás ver una interfaz tabulada sobre cuantas pantallas tienes en tu proyecto. Justo por debajo podrás ver un indicador de algunos objetos dispuestos en este lugar. A la derecha verás algunos íconos, entre los cuales tienes la vista de diseño. XAML y Split views te permiten ver el código generado al crear el proyecto de SketchFlow.
En la parte de abajo verás:
• The Zoom icon: Te permite ajustar el tamaño de la pantalla.
• The Effects icon: Permite desplegar los efectos en tiempo real que tu puede añadir.
• The Grid icon: Muestra u oculta el grid visual de tu proyecto.
• The Grid Snapping icon: Permite el auto-align en tu grid.
• The Snapping to Snaplines icon : Permite ajustar las líneas de ajustes que existen en el documento.
• The Annotation icon: Muetra las anotaciones que haces en el proyecto.
-Panel del mapa de sketchflow:

Es donde tu creas y editas el mapa de flujo para tu aplicación de SketchFlow.

[[D4N93R]]

Buen tuto,! esperamos otros más!

Saludos!