Home App Crear un prototipo de app m贸vil: c贸mo definir tu aplicaci贸n
Crear un prototipo de app m贸vil: c贸mo definir tu aplicaci贸n

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

 

mujer dibujando mockups en una pizarra
Imagen de聽Sarah Pflug聽a trav茅s de聽Burst

 

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

Ebook 5 Checklist 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.

 

wireframes desarrollo de aplicaciones m贸viles

 

  • 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 鈥榲ida鈥 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.

 

prototype desarrollo de aplicaciones m贸viles

 

驴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: Dise帽o de apps y la importancia del color

 

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.

Prototipo de app movil

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.

 

dise帽o de prototipos online con Fluid

 

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.

Ninjamock

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.

crear prototipo de app online con Invision

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

app proto.io

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.

disen虄ar app online con Antetype

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.

mockups de una aplicacion

隆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!

Proyecto App

ACTUALIZACI脫N: Este art铆culo fue publicado originalmente el 18 de septiembre de 2014 聽y ha sido actualizado para mejorar su calidad.

Escrito por

Yeeply
Yeeply

Yeeply es una plataforma premium especializada en el desarrollo de apps m贸viles y sitios webs a medida. Desde 2012 nuestros clientes nos conf铆an el desarrollo de sus proyectos, y nos apoyamos a nivel t茅cnico en los mejores profesionales certificados: desarrolladores de aplicaciones m贸viles o web freelance, empresas de software top, y agencias mobile m谩s punteras. 隆Crear una app o crear una web nunca ha sido tan r谩pido, confidencial y seguro como con Yeeply! Publica tu proyecto de software en Yeeply y deja que nuestro equipo te ayude durante todo el proceso.

Etiquetas

AppPrototipo