El documento describe diferentes etapas del proceso de diseño de sitios web, comenzando con sketches rápidos y conceptuales, luego wireframes para explorar la estructura y relación de páginas, y finalmente prototipos más detallados para probar e iterar sobre las ideas antes de implementar el diseño final. Recomienda encontrar el workflow personal que funcione mejor considerando el balance entre rapidez, comunicación y detalle en cada etapa.

1. SKETCHES, WI
REFRAMES Y
PROTOTIPOS
ABRIL 2012

2. DILEMA
Muchos diseñadores prefieren pasar de idea a prototipo, la
intención es llegar a probar la premisa más rápido. Sin
embargo en el camino se pierde mucha comunicación y el
proceso puede terminar siendo más tardado.
Cada diseñador encuentra el workflow más efectivo.
Encuentra el tuyo y trabaja en ese sentido.

3. SKETCHES
La intención del sketch es separar el diseño del proceso de
creación.
El ejercicio de sketching es flexible y permite ir formando
una idea de cómo queremos que sea nuestro sitio pero no
intenta establecer cómo será gráficamente al estar
terminado.

4. SKETCHES
Tus sketches deben ser:
• Rápidos
• Bajo demanda
• Baratos, con el material que tengas a la mano.
• Desechables
• Abundantes, que no existan aislados
• Claros y con vocabulario común
• Fluidos
• Con poco detalle, conceptuales
• Claros al comunicar su intención
• Exploraciones, más como un ejercicio de experimentación
• Ambiguos, no te preocupes por el detalle

5. WIREFRAMES
Un wireframe es una guía visual que sugiere cierta estructura
al sitio, así como la relación entre unas páginas y otras.
Su propósito es comunicar y explorar los conceptos que
salen del proceso de sketching. Aquí se establecen los
conceptos que queremos mantener durante el diseño de la
interfaz.
“For me, wireframes act as a form of thinking device for the
setting and exploration of a given problem space”
Will Evans, UXMAG

6. PROTOTIPOS
Los diseños no son finales, pero contienen el grupo de ideas
que queremos lograr. Al hacer prototipos comenzamos a
refinar y ejemplificar.
Con el refinamiento de los wirefames obtenemos más
claridad en los requerimientos y restricciones al proyecto. Al
generar un prototipo podemos comenzar a probar las ideas
que tenemos de manera abstracta en nuestros sketches y
wireframes.

7. PROTOTIPOS
Nuestros prototipos deben ser:
• Rápidos, que sólo requieran un esfuerzo mínimo de
desarrollo
• Baratos
• Claros y con un vocabulario común
• Detallados, deben incluir contenido e interactividad.
• Refinados lo apropiado, casi como la aplicación real
• Validados, aunque aún requiere ajustes, un prototipo debe
ser la presentación de la idea de manera práctica.

8. WORKFLOW