Laboratorio temático I

Alambrado, maquetas y prototipos

Alambrado (wireframing)

• Los diagramas de alambre (wireframes) se usan para representar la estructura de un sitio web o una aplicación.
  • Esto es, se enfocan en la arquitectura de información de un sitio y/o en el diseño de interacción de una aplicación
• Suelen ser simples, especialmente en las etapas de prueba y antes del desarrollo
  • Normalmente se generan diagramas más completos como documentación del sitio o aplicación conforme se avance en su desarrollo
• Deben representar de la forma más completa posible al sitio o a la aplicación que detallan.
  • Esto incluye enlaces (IA) e interacciones (ID)

Alambrado (wireframing)

Ejemplo

• El alambrado de #Opinamesta fue hecho en Balsamiq
  • Sí, el nombre es un tanto anacrónico
• Las dos últimas páginas del PDF del alambrado no representan una página web de la aplicación, sino las descargas que ésta genera

Maquetas (Mockups)

• Son una versión de más alta fidelidad del sitio web o aplicación que los alambrados
• Incluyen elementos más refinados de:
  • Tipografía
  • Colores
  • Disposición de elementos (layout)
  • Iconografía
  • Navegación
• Se usan internamente para afinar detalles y externamente para transmitir conceptos finales a las partes interesadas
• Pueden usar algunas de las mismas herramientas de las que hablamos para el alambrado
  • Excepto Balsamiq
  • Y, por supuesto, su amigo Photoshop
    • Cualquier editor de imágenes, en realidad

Ejemplo

• La maqueta de #Opinamesta fue hecha en CorelDRAW

Prototipos

• El prototipo muestra la página o aplicación (en su estado actual o más refinado) e incluye enlaces entre páginas/pantallas/secciones y también interacciones
  • ...aunque no necesariamente incluye colores, imágenes, tipografía, etc.
• Es posible generar archivos PDF con enlaces o utilizar programas en línea para presentar un documento en vivo

Ejemplo

• El prototipo de #Opinamesta fue hecho en Marvel
• Noten que se incluyen las páginas que sirven como descargas de la aplicación