El prototipo del sitio web o la aplicación es una etapa crítica en el desarrollo de un producto. Pero, desafortunadamente, muchos empresarios se saltan esto y pasan directamente a la etapa de desarrollo. Como resultado, los errores en el diseño y las debilidades del producto se descubren solo después del lanzamiento. Como resultado, se gasta demasiado tiempo y dinero para resolver problemas que podrían haberse evitado mediante la creación de prototipos adecuada.
Puede pensar que un prototipo requiere la contratación de un profesional, pero en realidad, puede hacer todo el trabajo usted mismo en unas pocas horas. Todo lo que necesita es un lápiz y un bloc de notas, una computadora portátil y esta guía paso a paso.
Paso 1. Comience con un prototipo de papel
El primer paso es esbozar su idea en una hoja de papel. Si te consideras un mal artista, no dejes que eso te detenga. Un prototipo en papel no se trata de arte, se trata de presentar la idea de manera simplificada.
Tome un cuaderno de dibujo y un bolígrafo e intente poner su idea en papel. Para hacerlo más visual, puede usar un cuaderno de bocetos con plantillas de teléfonos en cada página, o descargar e imprimir dichas plantillas. Esto le permite obtener una visión clara de cómo se verá la aplicación en la pantalla del dispositivo.
Es importante dibujar todas las pantallas de la aplicación para obtener una estructura clara. Si su producto incluye muchas pantallas, preséntelas en una sola página y agregue las conexiones.
Un boceto a lápiz y papel es solo un borrador para un prototipo interactivo. Por lo tanto, en esta etapa, debe prestar más atención a los elementos clave y su ubicación y no al diseño detallado. La interfaz de usuario de la futura aplicación o sitio web nace en este momento.
Además de las imágenes, puede esbozar información adicional que será útil para el proyecto. Describa sus personajes compradores: los clientes potenciales que pagarán por usar su producto. Describa el posible viaje del usuario a través de la aplicación, sus pasos y sus impresiones. Y recuerda, no estás escribiendo una novela, así que no busques la perfección en tu escritura. Un prototipo en papel es solo una visualización en bruto de sus pensamientos.
Paso 2. Crea una estructura digital
Una vez que la estructura de la aplicación es más o menos clara, es hora de crear una estructura digital, que es un modelo que representa el esqueleto de la aplicación futura.
El término estructura metálica digital habla por sí mismo: se crea con la ayuda de herramientas de creación de prototipos digitales.
Si realmente le gusta su prototipo de papel y cree que incluye todos los elementos necesarios de la interfaz de usuario, puede ahorrar tiempo con POP (la abreviatura de Prototyping on Paper) de Marvel. Le ayudará a transformar un prototipo de lápiz y papel en uno digital. Simplemente tome fotos de sus bocetos, y la herramienta los cargará como pantallas de su aplicación futura. Incluso es posible agregar diferentes tipos de interacciones.
También hay docenas de aplicaciones para prototipos profesionales. Pero no dejes que la palabra “profesional” te asuste. Todos son fáciles de aprender, y la mayoría de ellos tienen pruebas o planes gratuitos.
Uno de nuestros favoritos es InVision, una herramienta de creación de prototipos para crear tramas digitales y prototipos interactivos. Usando una rica biblioteca de elementos de IU listos, puede construir el diseño de literalmente cualquier tipo de aplicación o sitio web.
InVision es la herramienta adecuada si se pregunta cómo hacer que un prototipo sea interactivo. Esto significa que puede agregar diferentes transiciones como deslizar, tocar, disolver, etc. El prototipo digital interactivo se parece a la aplicación lista.
InVision también permite compartir proyectos por correo electrónico, SMS y URL. Los usuarios autorizados también pueden dejar comentarios. Dichas aplicaciones son excelentes cuando se trabaja con un equipo remoto, ya que no está limitado a una ubicación.
Paso 3. Comparte tu prototipo con la gente
La ventaja de la estructura digital es la capacidad de compartirla con cualquier persona en cualquier rincón del planeta, lo que es imposible de hacer con el prototipo en papel. Las herramientas de creación de prototipos digitales le permiten compartir prototipos con quien quiera. InVision, por ejemplo, permite dejar comentarios y discutir el prototipo del sitio web en línea. Entonces, ¿cómo hacer que un prototipo funcione para usted?
Compartir con amigos. Pide su opinión. Las ideas desde otra perspectiva pueden ser inesperadas pero bastante valiosas.
Comparte con el diseñador . Al tener un esqueleto del producto, puede involucrar a un profesional para crear un diseño UI / UX atractivo y amigable.
Compartir con usuarios potenciales . Póngase en contacto con sus clientes potenciales para obtener sus comentarios sobre el producto y su lógica. Nadie puede entender el producto mejor que las personas que están destinadas a usarlo.
Compartir con inversores . Si desea recaudar dinero, debe mostrar a sus potenciales inversores algo convincente, un prototipo interactivo, por ejemplo. El wireframe es una presentación detallada y visual de la idea, lo que demuestra que usted se toma en serio la implementación. Por supuesto, no obtendrá millones de dólares de inmediato, pero puede atraer capital semilla que lo ayudará a desarrollar su producto y comenzar a avanzar.
Comparte con los desarrolladores. Un prototipo de aplicación es esencial al colocar su futuro producto en manos del equipo de desarrollo. Es una hoja de ruta clara para que sepan cómo debería verse la aplicación, qué funcionalidad debería incluir y cómo debería resolver los problemas de los usuarios. Con un prototipo, puede solicitar una estimación precisa del tiempo y los costos de desarrollo.
Paso 4. Prototipo HTML
Al usar HTML y CSS puede crear un prototipo digital, sin embargo, tendrá que involucrar a otro profesional, a menos que pueda codificarse. HTML y CSS son las tecnologías más utilizadas, y no será un problema encontrar un desarrollador que pueda crear un prototipo interactivo para usted.
El prototipo HTML tiene una gran ventaja: el código detrás de él es reutilizable. Esto significa que puede usar el mismo código (con ligeras mejoras) para construir el MVP (producto mínimo viable).
Puede leer más información sobre creación de prototipos aquí.
