Qué es?

Los wireframes son una práctica muy común en el desarrollo de producto ya que es una representación visual muy básica y sencilla de un producto solo considerando su estructura. Esto puede ser muy ventajoso al momento de poder plantear una idea con respecto a un producto ya que si bien podemos decirle al diseñador o explicarle las cosas que queremos en un producto, muchas veces también es importante tener conceptos claros en UX y UI además de posibles recomendaciones del equipo de desarrollo al realizar una funcionalidad y si se puede llegar al mismo resultado con otras prácticas más sencillas.

Aunque si bien enfatice el trabajo del equipo, esta herramienta tiene un valor invaluable para demostrar ideas de proyectos a los clientes o posibles inversionistas, ya que si bien se puede explicar un proyecto de forma adecuada, el poder ver o tener una proyección de cómo sería un producto terminado tiene un valor agregado y puede que ayude en más de una ocasión a evitar malentendidos. Esto ayuda a asegurar que todos tengamos una visión del producto.

Cómo se hace?

Una vez que el equipo de desarrollo analice los requisitos, se pueden plasmar en un wireframe muy fácilmente para que los stakeholders puedan dar feedback y el product owner pueda generar mejores historias de usuario, refinar épicas y priorizar el backlog. Una vez entendido esto, hay que tener en consideración lo siguiente:

• Los wireframes son simples, su enfoque más que lo estético es lo funcional.
• Colores e imágenes no se utilizan, se utilizan simbología referencial en donde debería haber una imagen.
• Hay que centrarse en funciones básicas y en las tareas del usuario final que deben admitirse.
• Es una referencia en donde se colocara botones, campos de texto e imágenes, no obstante esto no implica que pueda modificarse mas adelante.
• Debe presentarse de arriba hacia abajo, pensando en el flujo de como debería realizar el usuario de cada tarea.

De esta manera cuando estén en la fase de diseño e implementación del proyecto se podrá avanzar mucho mas rápido al tener claridad de la interfaz del usuario cuando este simulado o completamente implementado.

Buenas practicas

Si bien no eh encontrado algún estándar de como se debe representar un wireframe, navegando en distintos blogs y cursos eh podido sacar las siguientes conclusiones:

• No se escribe texto (Solo el lugar donde estaría)
  • Encabezados
  • Cajas de texto
• No hay imágenes (Solo el lugar donde estaría)
  • Imágenes
  • Videos
  • Logos
• Definir que es un interactuable y que no lo es
  • Botones
  • Listas desplegables
  • Funciones de búsqueda
  • Navegación
• Un wireframe no es un mockup o un prototipo
• Las imágenes se representan con una X

• Un cuadro sombreado para un texto genérico
• Los botones son representados con un cuadrado

Esto por decir unas cosas tantas aunque esto son recomendaciones y si se puede llegar a entendimientos y estándares con el equipo de desarrollo y los stackeholders esto no debería importar mucho el como se represente cada parte del proyecto.

Herramientas

• Figma: The Collaborative Interface Design Tool
• Miro | The Visual Workspace for Innovation
• Suite Visual de Canva para todo el mundo
• Flowchart Maker & Online Diagram Software
• Power point, excel y word

Si bien algunos de estos programas no son necesariamente especializados para poder hacer un wireframe son un buen sustituto, aunque en mi experiencia personal la versatilidad y las herramientas que se pueden llegara a utilizar lo mejor es utilizar figma y que da un mejor resultado sobre todo en crear unión en el flujo e interactividad.

Conclusiones

Una buena herramientas, esencial en etapas previas al desarrollo de un proyecto y sobre todo que es necesario para poder tener una buena perspectiva del alcance en etapas tempranas del desarrollo. Se puede hacer desde un programa muy avanzado o utilizar una servilleta para modelarlo. Lo importante es hacerlo y recibir feedback para poder implementarlo a la brevedad y mejorar las iteraciones del desarrollo.