La historia del wireframing y la creación de prototipos

Recientemente hemos estado analizando un poco el mundo de los wireframes y prototipos y lo que pueden hacer por el proceso de diseño y desarrollo. Sin embargo, aún no hemos tocado la historia de esta disciplina, específicamente la historia de los wireframes. En este post vamos a hacer precisamente eso.

¿De dónde viene el término 'wireframe'?

El término wireframe en realidad es anterior a su uso en el diseño web. Originalmente, los wireframes se utilizaban para mostrar objetos 3D en el diseño asistido por ordenador (CAD). Probablemente reconocerías el estilo, utilizado en la fabricación para representar el diseño de los automóviles sin necesidad de detalles, dejando el dibujo como si estuviera hecho de cables, de ahí el término "estructura alámbrica".

En diseño web, los "wireframes" son guías visuales que representan el marco esquelético de la pantalla de una página o aplicación. Por lo general, representan un diseño funcional: incluidos los elementos de la interfaz y los sistemas de navegación. El wireframe suele carecer de estilo tipográfico, color o gráficos, ya que el enfoque principal está en la funcionalidad, el comportamiento y la prioridad del contenido. Esta es una consecuencia directa de su historia CAD. En otras palabras, se centra en lo que hace una pantalla, no en su aspecto.

La historia del humilde wireframe es compleja, y existe cierto debate sobre quién acuñó el término para su uso en la web y con aplicaciones. Como es común con este tipo de cosas, parece que varias partes acuñaron el mismo término casi al mismo tiempo.

Los wireframes suelen tomar la forma de bocetos fieles a lápiz y papel, aunque las versiones de mayor fidelidad tienen su lugar, al igual que las versiones animadas y en las que se puede hacer clic (que es donde los prototipos realmente entran en juego).

Los wireframes realmente funcionales son excelentes para los desarrolladores, pero ofrecen menos medios para realizar una evaluación visual. Herramientas como nuestra propia Indigo Studio admiten este tipo de wireframes, así como variedades mucho más "diseñadas", e incluso guiones gráficos completos de casos de uso.

Este cambio de diseños estáticos a wireframes con más gráficos (e incluso animaciones) ha sido impulsado por la necesidad de acomodar una UX madura, que se está volviendo cada vez más importante con la popularidad de las aplicaciones creciendo exponencialmente. La elección de los wireframes de una mayor consideración por la experiencia del usuario es similar a su hermano de armas: el prototipo.

The Prototype Timeline

En términos de plazos, el prototipo tiene uno relativamente corto. A continuación, una breve cronología de los avances de esta disciplina desde los años 70:

1970– Winston Royce presenta el modelo Waterfall

1980– Aparecen los primeros prototipos básicos, que se asemejan a diagramas de flujo

1985– Se integra la creación de prototipos en papel para las pruebas de usabilidad

1987- Microsoft PowerPoint: ahora una herramienta común para crear wireframes en bruto

1988 – Boehm founds The Spiral Model

1990- Adobe Photoshop: la herramienta favorita de muchos diseñadores de UX

1991 – IBM introduces RAD (Rapid Application Development) software development

2001 – Agile Manifesto released

2005– La creación de prototipos basados en la web (SaaS) se vuelve más influyente

2008 – Lean UX movement is born

2010– Los avances tecnológicos permiten la creación de prototipos SaaS de alta fidelidad sin codificación

 

Y eso nos pone al día. Es fácil ver los avances que ha hecho la creación de prototipos, y no muestra signos de desaceleración. Tanto los wireframes como los prototipos se adaptan y evolucionan constantemente para facilitar el trabajo de los desarrolladores.

¿Y el futuro?

Hoy en día, a medida que los wireframes se vuelven más interactivos y los prototipos se vuelven más útiles, los dos términos se están fusionando. Pregúntale a cualquier buen diseñador de UX o desarrollador de UI y los verá como uno y el mismo. Siempre habrá una necesidad de los diferentes tipos de wireframe y prototipo: lo-fi, hi-fi, animado, boceto, etc. Y cada uno, por supuesto, tiene pros y contras dependiendo de la necesidad del proyecto.

Las herramientas de diseño también deben reaccionar a medida que la disciplina madura y cambia. La última versión de Indigo Studio permite a los usuarios crear wireframes estáticos, prototipos en los que se puede hacer clic y todo lo demás. Indigo Studio incluso te permite crear prototipos sin escribir una sola línea de código.

Nuestra nueva función de storyboard es particularmente útil en el mundo de los prototipos más interactivos. Ayuda a unir y desarrollar la historia del usuario y la historia de la aplicación juntas. Realmente ayuda crear prototipos de la experiencia, y no solo de la aplicación.

Los guiones gráficos proporcionan una variedad de escenas que puede arrastrar y soltar, creando su propia historia que representa un escenario o caso de uso de la vida real. Indigo ayuda a desarrollar la forma en que se usará la aplicación de manera mucho más completa que si solo configura pantallas con cable.

Con Indigo, no tienes que simplemente decirle a la gente lo que puede hacer tu aplicación cuando les muestres un prototipo. Ahora, puede envolverlos en toda la experiencia, lo que lleva a una participación más rica y, en última instancia, a un mejor producto final.