Cuando comenzamos un side-project es muy tentador abrir XCode y comenzar a picar el código de esa app que tanto nos apetece ver funcionando en nuestro terminal.
Es un error.
El primer paso debería ser la creación de unos wireframes, esto es, una representación más o menos esquemática de cada una de las pantallas de nuestra aplicación. Esta representación podrá acompañar referencias a cómo se habrá de comportar la app en algunos puntos clave (referencias de navegación, de visualización por estados, etc.)
Tener esta referencia visual nos sirve para:
- Validar la idea de producto frente a nosotros mismos: en este momento, gracias a esa panorámica, podemos detectar tempranamente errores de planteamiento o de usabilidad (flujos duplicados, acciones que no son evidentes…).
- Compartir con terceros nuestra idea de forma que podamos obtener feedback temprano de “gente que no está en nuestra cabeza”.
- Cerrar el alcance de la aplicación con nuestro cliente (en el caso de un trabajo para terceros) más allá de un montón de palabras en un contrato. El apoyo visual es clave en la gestión de expectativas.
- Además, nos ayuda a ir definiendo tanto los componentes como la lógica de nuestra aplicación, sus interrelaciones y los requisitos técnicos de la misma, mucho antes de abrir nuestro IDE.
Existen multitud de herramientas que podemos usar en la creación de estos wireframes y dependerá de cómo queramos integrarlo en nuestro flujo de trabajo y de comunicación con cliente.
A continuación os dejamos unos pantallazos de los wireframes originales de Resvolutions, estos elaborados de manera sencilla en Miro.
