Un prototipo te ayuda a desarrollar una aplicación o un sitio web. No requiere ningún conocimiento ni coste previo. Te mostraré cómo crear un prototipo de app o sitio web con la herramienta de diseño Figma.
Alexander Sprogis
¿Tienes una idea aproximada de cómo debería ser el resultado de tu concepto? ¡Bien! Céntrate en el núcleo de tu idea y luego inspírate en cómo mejorarla. Busca en la web 2 o 3 ejemplos de empresas que resuelvan un problema similar al de tu concepto. Para aumentar el potencial de innovación, intente deliberadamente centrarse en sectores distintos al suyo. Déjenme darles un ejemplo. Por ejemplo, si quieres vender productos personalizados, echa un vistazo al proceso de incorporación de Duolingo. Duolingo es una plataforma que te facilita el aprendizaje de nuevos idiomas. A primera vista, esto puede no parecer una buena combinación. Sin embargo, notará que Duolingo primero guía a los nuevos usuarios a través de un pequeño asistente claramente estructurado antes de pasar a los ejercicios. A continuación, se adaptan individualmente al usuario. Tal vez pueda adoptar algo de la claridad y sencillez del asistente para la configuración de sus productos personalizados.
Sinceramente. Aunque parezca sencillo, el lápiz y el papel es la mejor y más fácil manera de empezar a visualizar el prototipo de tu aplicación. Si eres un diseñador en movimiento, conocerás la sensación de querer empezar a elaborar tu idea directamente en tu herramienta gráfica favorita.
Pero antes de hacerlo, debemos pensar detenidamente en cómo debe estructurarse y construirse nuestro prototipo. "Pero no se me da bien dibujar", puede que pienses ahora. Pero eso no es relevante. No hace falta ser un artista para conjurar unos cuantos rectángulos y cajas en un papel. Lo feo está bien. Escriba breves palabras clave para describir la funcionalidad o la estructura con más detalle. Cree las pantallas individuales de su aplicación o sitio web y describa la estructura de navegación. Si está creando un prototipo para una prueba de usuario, piense en la historia que quiere contar con este concepto. En este caso, debes evitar mirar las pantallas de forma independiente. Integre su historia y asegúrese de que la transición tenga sentido. Si quieres saber más sobre este tema, consulta este artículo mío sobre "Cómo probar mi idea de negocio en pocos días".
Si ya sabes qué herramienta vas a utilizar para implementar el concepto de tu prototipo, entonces no dudes en utilizarla. Hay varias aplicaciones buenas en el mercado en este ámbito y muchas difieren sólo mínimamente en su gama de funciones. Por lo tanto, siempre es una cuestión de gusto personal la herramienta que se prefiera en este caso.
En este tutorial crearemos nuestro prototipo con la herramienta "Figma". Figma puede utilizarse gratuitamente para un máximo de 3 proyectos. Figma es conocido por su función de colaboración, que permite que varias personas trabajen en el mismo proyecto al mismo tiempo sin estorbar a los demás. La interfaz de usuario es sencilla y directa, y cabe destacar que la aplicación está basada en el navegador. No tienes que instalar nada en tu ordenador, sino que puedes acceder a la herramienta a través de cualquier navegador. Recomiendo el uso de Google Chrome. Figma también cuenta con una amplia gama de plug-ins y plantillas disponibles de forma gratuita, y continuamente se añaden otros nuevos.
Tómate tu tiempo y familiarízate con la interfaz. Aunque la aplicación, como ya se ha descrito, está diseñada para ser sencilla, todavía lleva un poco de tiempo acostumbrarse a ella.
Una vez que haya creado un nuevo proyecto, su estructura de capas se encuentra en el lado izquierdo, su "lienzo" en el centro y en el lado derecho encontrará las propiedades del elemento seleccionado. Crea una nueva mesa de trabajo con el atajo de teclado "A" (pulsa la tecla A). En la parte derecha, puede elegir un formato predefinido (por ejemplo, iPhone, iPad o escritorio para un sitio web) o arrastrar la ventana con el ratón hasta el tamaño deseado. Utilice el atajo de teclado "R" (pulse la tecla R) para crear un nuevo rectángulo, "T" para crear un nuevo elemento de texto y "O" para crear un óvalo. En realidad, eso es todo lo que necesitas para empezar.
Dejo deliberadamente fuera la parte de "wireframing", ya que no es necesariamente útil para probar rápidamente una idea. Por supuesto, puedes seguir haciéndolo si quieres. Figma proporciona una plantilla gratuita para este fin. El wireframing consiste en optimizar el diseño a nivel conceptual. Usted determina la disposición y la estructura de las distintas pantallas. Todo esto se hace sin imágenes ni texto. Se trata puramente de definir la secuencia de interacción con su aplicación. Ya lo hemos esbozado a grandes rasgos con lápiz y papel. Si quieres probar una idea con el prototipo, se trata sobre todo de saber si estás construyendo lo "correcto". Se trata de averiguar si tu concepto resuelve un problema real y añade valor. Después de las pruebas, se puede pasar a construir el concepto "correcto". Siguiendo la teoría de Alberto Savoia (ex empleado de Google): "Construye lo correcto antes de construirlo bien".
Antes de empezar a diseñar su prototipo en Figma, debería crear las cosas básicas como colores, fuentes, botones, etc. en Figma para tener una buena base con la que trabajar. Para las combinaciones de colores, recomiendo el sitio coolors.co. En él puedes reunir fácilmente conceptos de color adecuados. Para las fuentes, utilice fonts.google.com. Todos los tipos de letra que aparecen en la lista pueden utilizarse gratuitamente para proyectos privados y comerciales. Figma también ha integrado ya todas las fuentes de Google.
Cree un espacio de trabajo adicional para un tablero de ideas. Si aún no sabe qué dirección debe tomar su diseño, simplemente busque algunas imágenes para inspirarse y guárdelas allí. De este modo, siempre podrá echar un vistazo a su colección de imágenes de ambiente durante el proceso de diseño.
Sube tu dibujo a tu PC y luego a Figma. Es fácil a través del menú de la esquina superior izquierda. De este modo, lo tienes todo en un solo lugar y siempre puedes echar un vistazo a tu concepción. Pulsa la tecla "A" para crear una nueva mesa de trabajo en formato smartphone. Figma hará sugerencias en el lado derecho.
A continuación, empieza a reproducir digitalmente tu concepto paso a paso. En los próximos días publicaré un videotutorial gratuito sobre esto.
Una vez creadas todas las pantallas, es el momento de dar vida al prototipo. Vaya al menú "Prototipo" de la derecha y defina los ajustes básicos. A continuación, haga clic en su pantalla de inicio y conecte los activadores a las siguientes pantallas. En Figma, puedes conectar fácilmente los conectores arrastrando y soltando.
Una vez enlazadas todas las pantallas, es el momento de probar el prototipo. Haga clic en el botón "Reproducir" en la zona superior derecha. A continuación, se abrirá una nueva ventana con el prototipo y podrá empezar a probarlo.
Si todo encaja, puede compartir fácilmente el prototipo con sus usuarios de prueba. Basta con hacer clic en el botón "Compartir prototipo" y compartir el enlace con las personas correspondientes. Puedes saber exactamente cómo proceder en una prueba de usuario de este tipo en la entrada de mi blog "Cómo probar tu idea de negocio en pocos días". Buena suerte.
