Crear un prototipo de app móvil: cómo definir tu aplicación

Hacer un prototipo de app móvil es una de las técnicas más sencillas para previsualizar cómo va a quedar la aplicación a desarrollar, en cuestión de diseño, y sin tener que empezar a programar ni una línea de código.

Hacer un prototipo de app te ahorrará mucho tiempo y trabajo. Además, te va a permitir ver de manera muy fiel cómo va a quedar la app y si es necesario optimizar el diseño, apariencia y usabilidad de la misma.

Si vas a subcontratar el desarrollo de la app este proceso te ayudará a obtener un presupuesto ajustado a lo que realmente necesitas; si, por el contrario, estás en el lado de los desarrolladores, el prototipo será la primera entrega que muestres a tu cliente para validación.

En caso de que quisiera cambios en el diseño será mucho más fácil hacerlos desde la herramienta de prototipado de apps. Incluso puedes realizar varios prototipos para que el cliente escoja el que más se ajusta a lo que quiere.

La variedad de herramientas para hacer prototipos que hay disponibles en el mercado es amplia, aunque el panorama ha cambiado bastante en los últimos años. En este artículo os vamos a hacer un resumen con las opciones que tienen más sentido hoy, tanto online como de escritorio. También os damos algunos consejos. ¡Sigue leyendo!

 

Índice – Cómo crear un prototipo de app móvil

• ¿Por qué es importante un buen prototipo?
• Diferencias entre prototipos, mockups y wireframes
• ¿Cómo se hace un prototipo? Puntos clave
• Herramientas para hacer un prototipo de app
  • Figma
  • Justinmind
  • Fluid UI
  • NinjaMock
  • Proto.io
  • Framer
• Errores comunes al crear un prototipo
• ¡Pasamos a la fase de desarrollo!

 

 

¿Por qué es importante un buen prototipo?

¡No empieces la casa por el tejado! Debes tener un boceto bien definido antes de ponerte a programar una sola línea de código. Este es precisamente uno de los mantras de los profesionales en Yeeply. Tenemos dos buenas razones por las que debes hacer esto.

• No tires horas de trabajo a la basura. Si empiezas con el desarrollo del código antes de tener claras las pantallas y la funcionalidad de la app es muy posible que luego te toque refactorizar y rehacer un montón de pantallas de la app. Cuando además has subcontratado servicios, como el desarrollo o el diseño, este gasto de horas puede suponer además un importante gasto de dinero.
• Pon a prueba tu idea desde el principio. Prototipar es importante desde el punto de vista de la concepción de la idea. Es perfecto para hacerte una idea del resultado final con muy poco esfuerzo y para comprobar qué funciona y qué no en el conjunto de la app.

Guía gratuita: Checklist del creador de apps ideal

Diferencias entre prototipos, mockups y wireframes

¿Cuál es la diferencia entre una maqueta y un prototipo? ¿Son sinónimos prototipos, mockups o wireframes? Realmente son tres cosas distintas, todas ellas fundamentales en el diseño de interfaces móviles.

Aunque en este artículo nos hemos enfocado al prototipo, este es solo la evolución de los wireframes y los mockups anteriormente trabajados. Veamos en qué consiste exactamente cada uno.

• Wireframe. Se trata de una especie de boceto de la aplicación móvil en el que definimos, sin nada de estilo o diseño, qué cosas deben aparecer y dónde van a estar en nuestra app. También añadiremos una explicación visual de cómo va a ser la interacción. Es importante trabajarlo desde la base ya que estos wireframes son el esqueleto de la app móvil. La idea es que se hagan de forma muy sencilla: incluso un boceto a mano puede servir como punto de partida.

 

 

• Mockup. Los mockups tienen como objetivo mostrar la parte más visual del proyecto. Presentan la estructura de la información, los contenidos y las funcionalidades de forma estática. Representan muy bien cómo va a ser la app, pero con una inversión mucho menor de lo que supondría un prototipo propiamente dicho.
• Prototipo. Avanzamos un poco más hacia el desarrollo de aplicaciones móviles en sí mismo cuando nos ponemos a hacer un prototipo. Llegados a este punto, utilizarás alguna herramienta para darle ‘vida’ a tu wireframe. La idea es que un prototipo muestre cómo va a ser la interacción de la app y que te permita hacerte una idea de cómo será finalmente. Son extremadamente útiles para testear la usabilidad de un proyecto.

 

 

¿Cómo se hace un prototipo? Puntos clave

¿Listo para ponerte manos a la obra con tu propuesta de app? Tenemos algunos consejos que queremos resaltar desde nuestra experiencia. ¿Vemos los puntos clave al prototipar apps?

• Empieza por definir el menú de la app. Céntrate después en la arquitectura móvil para organizar todo el contenido que quieres incluir y decidir cuál irá en el menú y cuál no.
• Explica las acciones que vas a realizar en cada una de las partes del diseño cuando crees tu mockup. Por ejemplo, indica con qué zonas se puede interactuar. Si, por ejemplo, hay un botón especifica además que sucede cuando se pulsa sobre el mismo. Indica también el tipo de acción (tap, slide o swipe, por ejemplo).
• Trabaja la usabilidad desde el principio. Si tu app no es usable ya puedes olvidarte de que tenga éxito. Los usuarios la abandonarán en estampida.
• Define qué colores vas a utilizar. Te facilitará la tarea de hacer un mockup en condiciones. Escoge por lo menos una gama de colores para tu diseño de apps, siempre en consonancia con el branding de la empresa, si esta ya existe.

 

Quizás te interesa: Todo lo que Necesitas Saber Antes de Contratar a un Desarrollador Full-Stack

 

 

Herramientas para hacer un prototipo de app

Antes de entrar al detalle, un aviso: dos de las herramientas que solíamos recomendar aquí, Adobe XD e InVision, prácticamente han desaparecido del mapa. Adobe XD lleva tiempo sin recibir actualizaciones relevantes, e InVision fue perdiendo cuota de mercado hasta el punto de que su propia web redirige hoy a Miro. En su lugar, el mercado se ha concentrado en torno a una herramienta.

1. Figma

Figma se ha convertido en el estándar de facto para diseñar y prototipar interfaces, tanto de apps como de web. Funciona íntegramente en el navegador, lo que permite que varias personas trabajen a la vez sobre el mismo archivo sin instalar nada ni preocuparse por versiones.

Su sistema de componentes, variantes y auto-layout se ha convertido en el estándar para montar sistemas de diseño escalables, y en los últimos años ha ido incorporando funciones de IA para generar layouts o convertir un wireframe en un mockup con un clic.

Tiene un plan gratuito bastante generoso para proyectos personales o de un solo editor, con planes de pago para equipos que necesiten más archivos o funciones de colaboración avanzada.

2. Justinmind

Este creador de prototipos sin código sigue siendo una de las herramientas más completas en su ámbito. Tiene un plan gratuito para un proyecto, y planes de pago desde 19 $ al mes por editor que añaden colaboración avanzada e interacciones. Puedes descargarla de forma gratuita en Mac y Windows.

La herramienta cuenta con una galería de elementos nativos de iOS y Android que te permiten crear un prototipo muy fiel al resultado final en el móvil. Puedes cargar los diseños directamente desde Photoshop o Sketch, entre otras herramientas.

Puedes dotar a los diseños de prácticamente cualquier transición (rotar, tap, voltear, scroll…). Una vez tengas listo tu prototipo, Justinmind te permite ponerlo a prueba en cualquier dispositivo Android, iPhone o iPad a partir de un simulador.

3. Fluid UI

Simple pero con lo necesario para crear desde wireframes hasta prototipos muy interactivos, tanto web como app. FluidUI te permite trabajar de forma muy rápida: puedes utilizar los más de 2.000 componentes ya existentes en la herramienta; o cargar tus propios diseños. Con pocos clics puedes después animar y dar vida a tus prototipos.

Tiene una versión de escritorio y una versión que te permite trabajar el diseño de prototipos online sin necesidad de instalar ningún programa.

Ofrece un plan gratuito de por vida, con planes de pago superiores si necesitas más pantallas o funciones de colaboración; consulta el detalle de precios en su web, porque los tramos han cambiado varias veces en los últimos años.

Otra de sus cualidades es que puedes descargar la app para probar tu prototipo en dispositivos Android e iOS, y testear el diseño que hemos creado con la herramienta. Además, es una herramienta colaborativa y permite trabajar en equipo sobre un mismo prototipo.

 

 

4. NinjaMock

NinjaMock es una herramienta que te permite crear un prototipo de app online, sin necesidad de instalar ningún programa. Los elementos que incorporamos ofrecen un acabado de dibujo a mano alzada. No es lo más idóneo para diseñar una app móvil, pero sirve como programa para hacer bocetos de tus aplicaciones.

La principal ventaja de NinjaMock es que es completamente gratuita. Uno de los mayores inconvenientes que podemos encontrar es, por ejemplo, que la interacción de sus prototipos no va más allá de enlaces entre pantallas. Como herramienta para realizar un primer esbozo NinjaMock es más que suficiente.

5. Proto.io

Creación de prototipos sin necesidad de saber de código. Crea tus diseños y dales vida con interacciones y animaciones para comprobar cómo sería tu aplicación. Como sucede con otras herramientas de esta lista, Proto.io te permite visualizar el prototipo en varios dispositivos y compartir esta previsualización.

Puedes probarlo de forma gratuita durante un tiempo limitado y, si te convence, contratar alguno de sus planes de pago; consulta el precio actualizado en su web antes de decidirte.

6. Framer

Framer se ha ganado un hueco entre los equipos que quieren ir un paso más allá del prototipo estático: sus componentes están basados en código React de verdad, así que el prototipo se acerca mucho más al producto final que en el resto de herramientas de esta lista.

Es especialmente útil cuando el prototipo tiene que convencer a un cliente o a un inversor de que la app ya «funciona», aunque por debajo siga sin tener backend real. Tiene un plan gratuito para empezar y planes de pago para equipos y proyectos con dominio propio.

Errores comunes al crear un prototipo

Queremos poner sobre la palestra cuatro errores que ocurren muy a menudo y que dificultan el proceso de desarrollo de aplicaciones móviles.

• Poner demasiado hincapié en el diseño en las primeras fases de prototipado. Los pequeños detalles del diseño se irán puliendo cuando todo lo demás ya esté listo, aunque siempre vendrá bien tener una idea del diseño a grandes rasgos, pero con posibilidad de hacer cambios.
• Olvidar las funcionalidades que queremos incluir. Sobre todo si hablamos de proyectos externalizados en los que el cliente no sabe al cien por cien el desarrollo de aplicaciones móviles que quiere.
• Dejar demasiados frentes abiertos. Intenta trabajar una propuesta sólida, aunque más adelante se vaya a modificar.
• No des por supuesto que el cliente es técnico. En casos de subcontratación como los que manejamos en Yeeply casi nunca es así. Siempre habrá que explicar muy bien cómo funciona la app. Si piensas en tu cliente como el tester más exigente y menos experimentado que va a probar tu app, harás un buen mockup o prototipo.

¡Pasamos a la fase de desarrollo!

Una vez tengas el prototipo o mockup validado… ¡empieza el trabajo duro! Por fin puedes ponerte manos a la obra con el desarrollo de la app móvil. Este mockup o bien el prototipo que has diseñado será el punto de referencia para el desarrollador. Siempre será el modelo en el que basarse, agilizando el trabajo y resolviendo dudas sencillas que de otra forma te robarían tiempo.

¿Todavía no tienes a alguien que se encargue de darle vida a un prototipo?

En Yeeply buscamos entre nuestros profesionales certificados para encontrar el desarrollador adecuado para tu proyecto. Solo necesitamos que nos cuentes un poco más sobre tu proyecto. ¡Hazlo a través de este enlace!

Quizás te interese : Desarrollo de Aplicaciones Móviles con los mejores profesionales

Guía gratuita: La importancia de crear el prototipo de una app