Artículo original en inglés por Vincent Xia
Traducción por Catalina Vásquez
A menudo son términos utilizados como sinónimos, y de hecho son bastante confusos. En este artículo explicamos cual es la diferencia entre wireframe, maquetas y prototipos, y lo que está oculto detrás de cada término y entregamos información acerca de algunas herramientas de prototipado.
En una entrada de blog de Designmodo, Marcin Treder escribe: "confundir wireframes con prototipos es como asumir que un plano arquitectónico y una casa piloto son lo mismo".
Wireframes, maquetas y prototipos en realidad representan diferentes etapas de un flujo de diseño.
Un wireframe es una manera de representar un producto a baja resolución, puede eficientemente definir estructuras y esquemas de un diseño. Un wireframe es una representación básica. El diseño de un wireframe no necesita ser minucioso, pero debe expresar las ideas de diseño y no debe olvidar las partes importantes que lo componen. Un wireframe es el canal que ayuda a los miembros del equipo a entender sus proyectos de mejor manera.
Las maquetas, un tipo de diagrama de diseño de alta fidelidad, debe mostrar de manera estética marcos de información, contenido y funciones. A diferencia que un wireframe, una maqueta se ve más como el producto terminado, pero no es interactiva o clickeable. Es más buen una representación gráfica. Esto puede ser útil, por ejemplo, para proveer una imagen a los invesionistas de cómo puede verse un producto terminado, y ayuda a los miembros de un equipo a revisar el producto visualmente.
Un prototipo está muy cerca de ser un producto terminado. Es aquí donde los procesos pueden ser simulados y se puede testear la interacción con usuarios. El prototipado temprano puede ahorrar gran cantidad de costos de desarrollo y tiempo para que el trabajo de arquitectura back-end del producto no sea en vano debido a una interfaz de usuario poco razonable. Un prototipo es una excelente herramienta para obtener feedback (retroalimentación) de los usuarios y probar el producto.
¿Cómo elegir una herramienta?
Cuando pruebas nuevas herramientas, siempre te ves confrontado a estas tres preguntas:
- ¿Vale la pena gastar mi tiempo aprendiendo esto?
- ¿Cuánto tiempo necesito para adaptarme a la nueva herramienta?
- ¿Qué tan rápido puedo desarrollar un prototipo usando esta herramienta?
Antes de decidirte por una nueva herramienta, es mejor considerar las siguientes preguntas:
- ¿La herramienta se usa para crear prototipos de sitios web, aplicaciones de escritorio o móviles?
- ¿Quiero desarrollar wireframes, maquetas o prototipos y cuáles son mis requerimientos para una herramienta?
- ¿Qué funciones necesito cuando trabajo con desarrolladores y otros diseñadores?
- ¿Que tan cara es la herramienta? ¿Vale la pena?
A continuación, me gustaría presentarte algunas herramientas de prototipado.
¿Qué herramientas están disponibles para wireframes, maquetas y prototipos?
Mockplus y Balsamiq Mockup para wireframes y prototipos.
Con Mockplus puedes crear maquetas para aplicaciones móviles y de escritorio fácilmente. Sin ningún tipo de conocimiento de programación, puedes dominar esta herramienta. Con simplemente drop & drag (soltar y arrastrar) puedes crear interacciones.
Sus elementos pre-diseñados, como menús emergentes, cajones deslizantes y carruseles de imagen, también son dignos de destacar aquí. Además, Mockplus apoya la colaboración de equipos.
Mockplus permite crear maquetas de forma rápida y sencilla.
Si sólo necesitas hacer un wireframe, puedes usar Balsamiq Mockup. Su funcionamiento de la interfaz es simple, y los wireframes hechos por él tienen un estilo pintado a mano único y líneas simples. Esta herramienta proporciona varios componentes de uso común, lo que permite a los diseñadores centrarse más en el diseño, en lugar de en los efectos visuales. Sin embargo, cuando se trata de diseño de interacción, Balasmiq es totalmente inútil.
If you just need to make a wireframe, you can use Balsamiq Mockup. Its interface operation is simple, and wireframes made by it have a unique hand-painted style and simple lines. This tool provides various commonly used components, which allows designers to focus more on design, rather than on visual effects. However, when it comes to interaction design, Balasmiq is utterly useless.
Sketch, Photoshop e Illustrator para maquetas.
Sketch es una herramienta de diseño vectorial ligera y fácil de usar que es muy efectiva para diseñar maquetas. Sus desventajas son: no tiene funciones dinámicas o interactivas, lo que no es propicio para realizar las características del producto y la lógica asociada; sólo está para plataformas Mac. Sus características son que la estructura jerárquica está en línea con el archivo del prototipo; Las funciones de uso común están completas, las teclas de atajo son razonables y convenientes; Una variedad de bibliotecas de componentes y plantillas que son muy generosas; el Plug-in es fácil de instalar y la biblioteca se desarrolla rápidamente.
Algunos diseñadores que se especializan en diseño visual pueden usar Photoshop e Illustrator para diseñar prototipos o wireframes, debido a que los utilizan habitualmente. Sin embargo, operar los dos es relativamente difícil, ya que son fáciles para dibujar maquetas y diagramas de flujo, pero no para hacer diseños interactivos, así como tampoco son buenos con los textos de comentarios y anotaciones.
Conclusión
Estas herramientas tienen sus propios pros y contras. Qué herramienta es mejor depende de si desea diseñar wireframes, mockups o prototipos. Utilizo principalmente Mockplus para diseñar prototipos, ya que es fácil de usar y asequible. Espero que este post y las herramientas de creación de prototipos presentadas aquí te puedan ayudar.