Herramientas para prototipar productos digitales (parte 1)
Crear un prototipo te ahorra tiempo al probar nuevos features antes de mandar a desarrollo
Una de las habilidades más importantes como diseñadores es la facilidad de comunicar ideas, la cual se puede hacer de diferentes maneras, ya sea escrita o hablada y es esta bien cuando se trata de diseño tradicional como en el caso de un cartel o una ilustración, pero cuando diseñamos productos digitales como sitios web o aplicaciones móviles es algo limitante estas maneras de transmitir ideas, por lo que es mejor optar por realizar un prototipo interactivo que muestre lo que tratamos de comunicar.
Esté botón azul abrirá esta otra pantalla donde se podrá seleccionar varios artículos y al presionar este otro botón se agregan los artículos para pasar al método de pago y al terminar el proceso de compra te mostrara esta pantalla.
Un prototipo vale más que mil palabras by Christian
En los últimos años han surgido un gran número de herramientas para realizar prototipos de aplicaciones móviles (principalmente), las cuales tienen sus Pros y Contra cada una de ellas. Aquí te hablaré de algunas herramientas que he probado y/o que tienen mayor adopción por la comunidad.
Invision vs Marvel 👁
InVision es una de las herramientas más populares para crear prototipos (basadas en web), principalmente por el tiempo que lleva en el mercado, pero más por las características que ofrece, ya que la plataforma cuenta con características/aplicaciones como: crear y compartir prototipos, recibir comentarios (feedback), un manejador de proyectos, colaboración en tiempo real y de las aplicaciones más recientes que ha lanzado se encuentran: el Inspector que proporciona un flujo de trabajo y comunicación entre diseñadores y desarrolladores más eficiente (característica que sólo se encontraba disponible en Zeplin), también se encuentra Freehand (que es la más reciente al día de hoy) y otra es Craft que funciona como una colección de plugins para trabajar directamente en Sketch.
Marvel es el competidor principal de InVision, ya que su característica principal de crear y compartir prototipos es muy similar, pero en Marvel puedes crear diseños directamente en la plataforma, lo cual de cierta manera tiene ventajas, como crear el diseño y directamente pasar al prototipo, el tener un número menor de features que su competidor lo hace que este mucho mejor enfocado y que funcione adecuadamente.
Tanto InVision como Marvel cuentan con su propio plugin para conectar y sincronizar proyectos desde Sketch y ahorrarte tiempo al actualizar artboards editados.
En cuanto al precio ambas plataformas manejan el modelo de suscripción mensual y anual, de manera individual o para equipos e incluso planes para empresas con características extendidas de cada plataforma.
Pros InVision & Marvel
- Integración con Sketch (Plugin & Upload)
- Curva de aprendizaje corta
- Creación de prototipos tan extensos como se necesite
- Creación de prototipos web, mobile apps
- Trabajar en equipo dentro de los mismos proyectos
- Compartir prototipos fácilmente con miembros del equipo o clientes
- Precio modo suscripción*
- Trabajan sobre el navegador, es decir multiplataforma
- Modo “Free o Trial” trabajando con un sólo proyecto en InVision y dos proyectos para Marvel
Contras InVision & Marvel
- Animaciones de bajo nivel
- Las animaciones / interacciones creadas siempre serán bajo el uso de imágenes no editables directamente
- Precio modo suscripción*
- según el tipo de proyectos que manejes te funcionara el modelo por suscripción de ambas plataformas.
Principle vs Flinto 👑
Principle y Flinto estas dos herramientas tienen un gran parecido en su manera de trabajar y tratar los elementos, ya que ambas trabajan bajo el mismo esquema de capas creadas desde Sketch.
Estas dos herramientas son de las más usadas (con un porcentaje mayor para Principle) para crear prototipos con animaciones e interacciones más complejas, se podría decir que son aplicaciones para crear animaciones, principalmente esto es porque ambas funcionan con visual shapes y artboard.
Principle trabaja con timeline y keyframes sobre los elementos de nuestro diseño muy parecido a como trabaja After Effects y el ya fallecido Flash 💀 ⚡️, es decir, que no tienes que aprender ni tocar código para realizar las animaciones.
Flinto trabaja conectando shapes y artboards (conexiones parecidas a InVision y Marvel), donde puedes manipular la tensión, fricción, velocidad y duración de cada una de las animaciones (lo que en Principle es el timeline y keyframes).
Algo a destacar de la comunidad que trabaja con Sketch, es que se preocupan por hacer la interacción de las herramientas de la forma más natural entre ellas, así que Principle y Flinto también cuentan con su respectivo plugin para exportar/importar assets desde sketch, por otro lado ambas cuentan con una aplicación para los iOS para previsualizar los prototipos en tiempo real.
Pros Principle & Flinto
- Integración con Sketch (Plugin & Copy&Paste con algunas limitaciones)
- Precio único de USD $129 para Principle y $99 para Flinto (al menos hasta la fecha de publicación de este post, sino cambian a licencia anual)
- Ambas con Trial de +-15 días
- Creación de prototipos web, mobile apps
- Creación de micro-interacciones usando gestos en los dispositivos
- Son Apps nativas para Mac
- Vista previa del prototipo en el dispositivo
- Trabajan bajo líneas de tiempo o manejadores de animaciones de manera visual
Contras Principle & Flinto
- Curva de aprendizaje corta
- Si los elementos tienen diferentes estados, se tiene que crear una pantalla para cada uno
- Creación de prototipos pequeños
- Compartir prototipos solo como gif/video para clientes o enviar un .flinto / .principle sólo si se instala previamente el visor para iOS
- Las animaciones/interacciones creadas siempre serán bajo el uso de imágenes no editables directamente
¿Sólo existen estas herramienta para crear prototipos? 🤔
Claro que no, Balsamiq, Axure, Atomc, Adobe XD, Justinmind, Proto.io y UxPin son otras herramientas que se encuentran muy presentes en la comunidad de diseño (y hay muchas otras), pero las mencionadas arriba son de las que hasta el momento he tenido un mayor acercamiento y les comparto lo que ya conozco.
Seguro que usas una de todas estas herramientas o quizá algún otra para llevar tu diseño a otro nivel, cuéntame cual usas y porqué te decidiste por ella? Me gustaría saberlo.
Continuara… (Framer y Origami)
Migue @mishortcut
