agosto 14, 2018

3 Herramientas para crear los prototipos de tus proyectos web y móviles

La creación de prototipos es una parte integral del proceso de diseño, ya que te permite revisar conceptos y compartir comentarios con tu equipo en las primeras etapas de un proyecto. Al crear una maqueta interactiva de un sitio web o aplicación móvil, puedes identificar cualquier fallo en el flujo y la usabilidad de tu diseño antes de invertir demasiado tiempo o dinero en el desarrollo.

Si bien cada diseñador tiene un conjunto único de necesidades para sus maquetas, cada una de las siguientes herramientas ofrece la funcionalidad y flexibilidad necesarias para crear conceptos altamente interactivos. Seguramente, después de leer esta lista, encontrarás la herramienta perfecta para probar tus diseños web y móviles.

Herramientas para crear tus prototipos

1. Framer

Framer es una herramienta de diseño para macOS que requiere codificación y se usa mejor cuando se crean prototipos animados o interactivos. Usando Framer, puedes diseñar flujos elaborados de UX, insertar formas, agregar texto y reubicar imágenes. La herramienta tiene una amplia gama de funcionalidades que van desde diseño, colaboración y creación de prototipos, por lo que es ideal para equipos con diferentes habilidades y requisitos.

Framer ofrece un flujo de trabajo de diseño todo en uno, con un espacio de trabajo equipado con un kit de herramientas de edición vectorial que permite exportar fácilmente cada fotograma y forma como mapas de bits o vectores. Framer también tiene un espacio de trabajo de código para agregar animaciones, gestos y componentes. Puedes exportar el código listo para producción haciendo clic con el botón derecho en Copiar CSS o Copiar SVG.

Puedes crear diseños para todo tipo de dispositivos. Cuando programas dentro de Framer puedes acceder fácilmente a la documentación dentro de la aplicación. Esto incluye código y bloques de construcción para capas, animaciones, estados, eventos y más. La programación se realiza en el lenguaje CoffeeScript, una versión más accesible de Javascript descrita por los creadores como “un intento de exponer las partes buenas de JavaScript de una manera simple”.

Cuando estés listo para compartir tu trabajo con tu equipo o con las partes interesadas, puedes copiar y pegar activos o exportar todo tu lienzo. Dado que es una herramienta basada en el navegador, todo lo que se diseña está optimizado para la web. Si tu proyecto requiere colaboración puedes hacerlo intercambiando comentarios y cargando prototipos en Framer Cloud.

Si deseas probar Framer, hay una versión de prueba gratuita de 14 días que te brinda acceso completo a todas las funciones de la herramienta. Más allá de la versión de prueba gratuita, Framer ofrece diferentes planes de precios que se pueden adaptar a tus necesidades.

Opciones ideales de prototipos: iOS, Android y web
Capacidades de compartir: ver proyectos, cargar trabajos en Framer Cloud y probar prototipos como aplicaciones nativas para los clientes
Soporte: Guías, tutoriales, recursos, ejemplos y comunidades online y offline.
Precio: Desde 12€ al mes.

2. Origami Studio

Origami Studio es una herramienta de creación de prototipos propiedad de Facebook que se ha utilizado para crear maquetas para varias aplicaciones, incluidas Instagram, Messenger y Paper. Aunque Origami está reservado solo para usuarios de Mac, ofrece la posibilidad de previsualizar prototipos en vivo tanto en dispositivos Android como iOS. La herramienta también ofrece un conjunto de gestos y animaciones de transición comunes a los patrones de UI móviles, muchos de los cuales están disponibles a través de archivos de muestra descargables.

Origami ofrece incluye una extensa biblioteca de documentación completa con foros, videos tutoriales y guías. Esta herramienta es útil cuando se muestran muchas microinteracciones, ya que se pueden visualizar con gran detalle para mostrar exactamente cómo funcionará el proyecto.

Puedes probar rápidamente tus prototipos móviles interactivos directamente en un dispositivo iOS y Android con la aplicación complementaria, Origami Live. Todo lo que necesitas hacer es descargar la aplicación desde la tienda de aplicaciones de Apple y conectar su dispositivo iOS a tu escritorio, y ¡listo! Tienes un entorno de trabajo móvil interactivo. Las capacidades de colaboración de Origami son más limitadas que las otras herramientas que mencionamos, ya que solo puede compartir un prototipo con una persona que tenga Origami Live en su teléfono móvil.

Formatos de prototipos ideales: web y móvil (Android e iOS).
Capacidades para compartir: falta de capacidades de intercambio robustas con los compañeros de equipo.
Soporte: documentación que incluye tutoriales y archivos de muestra, así como una comunidad social muy activa de usuarios
Precio: Gratis.

3. InVision

InVision es una herramienta de prototipos basada en la web que permite a los diseñadores crear maquetas altamente interactivas para proyectos web y móviles. Si bien no puedes crear diseños directamente dentro de la aplicación InVision, puedes cargar tus diseños de página estáticos en la herramienta y luego agregar puntos de acceso para transformarlos en maquetas totalmente interactivas. Además, InVision tiene la capacidad de sincronizarse con tus documentos de Sketch o Photoshop, lo que te permite actualizar tu prototipo en tiempo real dentro del programa de diseño de tu elección.

En términos de características, InVision tiene una amplia gama de herramientas valiosas para facilitar el flujo de trabajo, incluyendo modo de vista previa, modo de creación de zonas interactivas, modo de inspección para transferir activos a los miembros del equipo, comentarios, control de versiones y sincronización de archivos. También ofrece una variedad de animaciones de transición y gestos móviles (deslizar, tocar, etc.) que pueden ayudarte a darle vida a tu diseño.

InVision también ha creado recursos que ofrecen a sus usuarios una funcionalidad mejorada al abordar proyectos de diseño. Más recientemente, InVision anunció que adquirió Wake, una herramienta de diseño centrada en respaldar la visibilidad del diseño en una organización en particular.

La capacidad de InVision para facilitar la colaboración es su mayor activo. Los compañeros de equipo, los clientes o cualquier persona con la que compartas la maqueta tienen la capacidad de dejar comentarios e hilos específicos de la ubicación. Esto elimina la confusión creada a través de hilos de correo electrónico de ida y vuelta, y ayuda a garantizar que los cambios se implementen exactamente donde deben estar. Además, con la herramienta Freehand de InVision, los equipos pueden dibujar conjuntamente para compartir bocetos e ideas aproximadas en tiempo real.

Formatos de prototipos ideales: web y móvil (Android e iOS)
Capacidades para compartir: Excelentes funciones que incluyen comentarios específicos de la ubicación y colaboración en tiempo real.
Recursos de soporte: documentación detallada.
Precio: los precios van desde pruebas gratuitas para un proyecto hasta 25€ por mes por tiempo ilimitado. Para planes de equipo, los precios de InVision comienzan en $ 99 por mes para 5 miembros. También ofrecen un plan Enterprise para equipos grandes.