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 o 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. En este artículo os vamos a hacer un resumen con algunas que te permiten crear prototipos de app online y otras que deberéis descargar. 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
  • Justinmind
  • Fluid UI
  • NinjaMock
  • Invision
  • Proto.io
  • Antetype
• 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 es 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.

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

1. Justinmind

Este creador de prototipos sin código es una de las herramientas más potentes en su ámbito. Tiene una herramienta para hacer wireframes gratuita y la versión completa para hacer prototipos está disponible desde $ 19 al mes (con esta versión más económica tienes prototipos ilimitados). 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.

2. FluidUI

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.

La versión gratuita permite crear hasta diez pantallas para un único prototipo, lo cual puede quedarse corto si tienes una app compleja, aunque para un prototipo sencillo funciona bien. Para ir más allá, tendrás que contratar alguno de los planes mensuales, disponibles a partir de $ 8,25 al mes.

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.

 

 

3. 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.

4. Invision

Esta es sin duda una de las herramientas más potentes que podemos encontrar gratuitamente. La parte de prototipos de Invision te permite transformar un diseño estático en un prototipo interactivo con transiciones y animaciones.

Algo en lo que destaca Invision es la posibilidad de trabajar de forma colaborativa en equipo sobre un mismo prototipo.

El plan gratuito solo permite realizar un solo prototipo a la vez, aunque con las versiones de pago podemos tener 5, 10, 15 y hasta 100 proyectos activos y para un equipo de más personas. Los precios son relativamente asequibles, con un coste de entre $ 15 y $ 100 mensuales.

Es muy recomendable para pequeñas agencias y equipos de desarrollo formados por pocos miembros y que trabajan en pocos proyectos a la vez. Es un entorno idóneo para la colaboración a la hora de hacer un prototipo de app. Además existe la versión para Mac con la que puedes sincronizar los archivos que necesites.

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 15 días y, si te convence, contratar la versión de pago desde $ 24/mes (incluye un usuario y cinco proyectos activos).

6. Antetype

La herramienta de prototipos de apps Antetype busca un nivel más alto de diseño. Actualmente, debido a una actualización, puedes tener acceso gratuito a la versión existente.

Aunque las comparaciones son odiosas, tiene un estilo similar a Keynote. Muy sencilla e intuitiva, puedes encontrar esta herramienta exclusivamente para Mac y puedes comprarla en la propia web de la herramienta o en la Apple Store.

Esta herramienta no solamente permite crear apps sino que también puedes diseñar todo tipo de webs. Una herramienta muy completa, que si puedes, deberías probar. La posibilidad de descargar extras se convierte en una opción muy interesante para el desarrollador de aplicaciones iOS, Android, Windows Phone, pero también para webs. 

Errores comunes el 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 que nos cuentes un poco más sobre tu proyecto. ¡Hazlo a través de este enlace!

Quizas te interese : Desarrollo de Aplicaciones Móviles con los mejores profesionales