Dentro de las fases de proceso de diseño web se presentan diversos productos como wireframes, mockups y prototipos. Aunque no siempre todos ellos se encuentran dentro del proceso de diseño, todo depende del tipo de proyecto en el que estés trabajando, el tiempo de entrega y el presupuesto.
Los prototipos suelen ser los últimos productos que se entregan al cliente para recibir comentarios al respecto y que se pueden emplear también para realizar pruebas. Si tienes que entregarlos sí o sí y quieres minimizar el tiempo de desarrollo, entonces no queda duda que debes hacer uso de otras herramientas para poder entregar los prototipos a tiempo. En este artículo te mencionamos algunas de las herramientas que puedes usar para crear prototipos rápidamente.
Invision
Invision es una herramienta que te permite transformar tus diseños estáticos en prototipos interactivos con animaciones y transiciones propias en sólo cuestión de minutos. No es necesario que tengas conocimiento sobre código para poder lograrlo, así que es ideal para cualquier diseñador que tiene conocimiento básico o nulo sobre JavaScript y CSS. Asimismo, es ideal si simplemente no tienes tiempo y la fecha de entrega del prototipo se acerca.
Invision ha sido creada como una herramienta para colaborar en línea, de modo que puedes organizarte y hablar con otros miembros de tu equipo de forma efectiva.
Invision posee un plan gratuito con el que puedes trabajar en un solo proyecto. El plan básico tiene un costo de $15 y te permite trabajar en tres prototipos. Posee otros planes que se podrían ajustar mejor a las necesidades de tu proyecto.
Marvel
Marvel es otra herramienta para prototipado que te permite dar interactividad a tus diseños con un par de clicks. Puedes añadir transiciones y gestos táctiles, elemento que no puede ser olvidado di estás diseñando para dispositivos móviles.
Marvel posee también herramientas de diseño para crear mockups estáticos y opciones para colaborar en línea. Es perfecto para proyectos en donde deseas trabajar en equipo.
Marvel cuenta con un plan gratuito en el que puedes crear hasta dos proyectos. Si deseas tener las funciones de colaboración en línea deberás acceder al plan de pago exclusivo para compañías.
Proto.io
Proto.io es otra plataforma para prototipado. Posee dos plugins, uno para Photoshop y otro para Sketch que te permiten transferir de forma inmediata tus diseños creados en tu programa favorito a Proto.io. Una vez realizado este paso, estás listo para añadir interactividad a tus mockups y transiciones. Si lo deseas también puedes trabajar el diseño desde la propia plataforma, aunque es probable que estés más cómo utilizando alguna herramienta más familiar para ti como Photoshop o Sketch.
Proto.io te ofrece una prueba gratuita por 15 días. Tras finalizar ese periodo, tu cuenta pasa automática a ser gratuita, por supuesto, posee características limitadas. Su planes empiezan en $24.
Pidoco
Pidoco es una plataforma que sirve para desarrollar wireframes y prototipos. A diferencias de las otras herramientas mencionadas previamente, los prototipos se centran en la interacción y no tanto en el diseño. Una de sus principales ventajas es que puedes aprender a utilizar esta herramienta rápidamente.
Pidoco incluye características para colaborar en línea, de modo que no sólo puedes emplear en tus proyectos en solitario sino también en conjunto. Posee una interfaz gráfica en la que es sencillo crear wireframes y añadir características interactivas para convertirlos en prototipos.
Pidoco tiene planes que empiezan en $12. Puedes acceder a una prueba gratuita con cualquiera de los planes disponibles para que puedas comprobar todas las funciones que posee.
Webflow
Webflow es una completa plataforma en donde puedes diseñar y crear prototipos interactivos desde tu navegador. Todo es posible gracias a una interfaz gráfica y sin necesidad de escribir ni una sola línea de código. Pero Webflow es una herramienta flexible y también permite realizar cambios específicos a una página o todo un sitio mediante código. Esta es una característica de gran utilidad si acaso quieres aplicar alguna función que Webflow no incluye en su lista de componentes.
Webflow posee un plan gratuito con características limitadas. Sus planes de pago empiezan en $35 mensuales.
Justinmind
Justinmind es una herramienta que puedes usar desde la fase de creación de wireframes. Incluye diversos elementos de interfaz que puedes añadir en tus diseños, plantillas listas para su uso, integración con Google Fonts, compatibilidad con dispositivos móviles para diseño responsive, adición de gestos táctiles, animaciones y efectos, entre otros.
Justinmind es una plataforma de pago y su plan más barato tiene un costo de $19 al mes.
UXPin
UXPin es una plataforma para creación de wireframes y prototipos, como tal incluye componentes usuales de una interfaz de usuario para que agregues fácilmente botones, casillas de verificación, imágenes, etc. Una vez que tengas listo tu wireframe puedes pasar a la fase de prototipado y convertir tu wireframe en un diseño interactivo que hace uso de elementos como menús desplegables, transiciones y animaciones.
UXPin se puede integrar con otras herramientas de diseño como Photoshop y Sketch, de modo que puedes importar archivos que hayas diseñado en tu herramienta favorita y darle interactividad mediante UXPin.
UXPin tiene un plan básico cuyo costo es de $19, por supuesto, debido a su precio posee características y funciones limitadas.
Atomic
Atomic es una plataforma que se utiliza desde tu navegador, de modo que no tienes que instalar ningún programa en tu ordenador y puedes acceder desde cualquier dispositivo siempre y cuando estés conectado a internet. Atomic hace uso de una línea de tiempo para que puedas incluir animaciones en tus prototipos. Por supuesto, también puedes añadir transiciones simples, según sea necesario en tu aplicación.
Una vez que tengas listo tu diseño, puedes compartirlo con otras personas mediante una URL. Es de gran utilidad al verificar cómo luce tu diseño en distintas aplicaciones.
Atomic tiene un periodo de prueba de 30 días y tres planes de pago. El más barato tiene un costo de $15 mensuales.
Flinto
Flinto posee dos versiones: Lite, que puede ser empleada desde tu navegador y Flinto for Mac, aplicación que puedes descargar y que posee más características que Flinto Lite. Con Flinto puedes crear prototipos sencillos hasta completos con interacciones y animaciones. Puedes añadir también micro-interacciones y gestos táctiles, lo cual lo hace una plataforma ideal para crear prototipos de aplicaciones móviles.
Con Flinto puedes comenzar a crear prototipos a partir de diseños creados en Sketch o en cualquier otra aplicación que te permite convertir archivos de imágenes.
Tanto Flinto Lite como Flinto for Mac posee periodos de prueba de 14 y 30 días respectivamente. Flinto Lite tiene un costo de $20 al mes, mientras que la licencia simple de Flinto for Mac puede ser adquirida por $99.
Origami
Origami es una herramienta gratuita para crear prototipos rápidamente. Puedes añadir interacciones y gestos táctiles para dispositivos móviles. Puedes configurar los gestos aplicados en tu aplicación, realizar pruebas y presentar cómo se comportan tus interacciones en dispositivos móviles. También puedes exportar código para iOS, Android y para la web.
Origami es un programa que debes descargar e instalar en tu ordenador, a diferencia de la mayoría de herramientas presentadas previamente.
En conclusión…
Existen una variedad de herramientas que pueden ser usadas desde tu propio navegador. De esta forma tienes acceso a ella en cualquier momento y desde cualquier ordenador o portátil que esté conectado a internet. También son excelentes plataformas para trabajar en equipo y realizar pruebas. Todas ellas te permiten añadir interacciones de forma rápida, de modo que no es necesario que estés familiarizado con el lenguaje JavaScript y puedes crear prototipos rápidamente, mediante una interfaz gráfica.
