Prototipado: wireframes, mockups y prototipos
https://docs.google.com/document/d/1GLQyEovkrDFSNFOAMTwFWiSkAKZUh03rVH12ANeDyIQ/edit
Una lista de productos, tanto gratuitos como comerciales, que sirven para hacer este tipo de prototipos y que te resultarán muy útiles:
· Axure RP: Es una herramienta de prototipado profesional que permite crear wireframes para hacer el pre-diseño de una página web. Disponible tanto para plataforma Windows como Mac. Puedes dibujar tanto wireframesestáticos como interactivos que simulan una experiencia de navegación del usuario real. Tiene una función de colaboración para compartir las maquetas Web con otras personas y poder recibir feedback en tiempo real.
· Balsamiq: Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un servicio web o bien descargarla en tu equipo (funciona con Windows, Mac y Linux). Su cuenta gratuita te permite crear un número ilimitado de wireframes que duran 7 días. También posee la función de colaboración.
· FlairBuilder: herramienta web que te permite hacer bocetos de tus webs y de tus Apps para iPhone. No tiene posibilidad de colaborar con otras personas ni tampoco es posible exportar características.
· gliffy: Basada en un servicio web, permite dibujar bocetos de tu página web y crear wireframes tanto estáticos como dinámicos. También puedes colaborar con otras personas y recibir su opinión en tiempo real. La cuenta gratuita te deja hacer hasta 5 croquis no cifrados pero llevan publicidad.
· iPlotz: Esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio vía web. Tiene una cuenta gratuita con la que puedes hacer prototipos que tengan hasta 5 páginas navegables.
· Jumpchart: es una aplicación de planificación de webs basadas en el navegador la cual posibilita esbozar el contenido de la página web. Es posible crear wireframes tanto estático como interactivos que simulan la navegación entre las páginas web de la maqueta.
· Justinmind: Herramienta profesional para prototipado de sitios web, aplicaciones de software y aplicaciones móviles. Puede trabajar con Windows o con Mac.
· MockFlow: Herramienta web muy sencilla de utilizar para diseñar SItios web y aplicaciones de software. Permite colaboración y navegar por la página web además de visualizar su estructura. La versión gratuita está limitada en relación al número de prototipos que podemos hacer.
· Mockingbird: Se trata de un servicio web gratuito con el que se pueden hacen prototipos de páginas web. Puedes diseñar tu sitio web en el propio navegador aprovechando que dispone de una gran biblioteca de objetos web para personalizar tus páginas.
· Napkin: Aunque es una herramienta basada en Java, también está disponible para Windows, Mac y Linux. Los bocetos realizados solo pueden ser estáticos, pero posee una extensa biblioteca de símbolos GUI para usar en tus maquetas. No ofrece posibilidad de colaboración ni de exportar a otros formatos. Lo positivo, es totalmente gratuita y la cuenta es ilimitada.
· Pencil project: Es un complemento open-source de Firefox que permite crear wireframes dentro de Firefox. No existe la posibilidad de colaboración.
· Smartdraw: totalmente integrada con Microsoft Office. Muy útil para hacer organigramas, cuadros de flujo,....Sin embargo, no dispone de wireframes interactivos ni diseños para móviles.
· Visio: Esta herramienta pertenece a la suite de Microsoft Office que se puede adquirir de forma independiente de otros componentes de Microsost Office. Sólo está disponible para equipos que trabajen con Windows. Puedes crear varios tipos de proyectos visuales como diagramas de flujo, diagramas de Venn, mapas y maquetas de sitios web (estándar y móvil), así como prototipos de aplicaciones de software.
· Si trabajas con el entorno de programación Eclipse, puedes usar también WireframeSketcher, que está muy bien y se integra dentro del entorno a la perfección.
InVision es una herramienta de prototipado basada en la web que permite a los diseñadores crear maquetas altamente interactivas para proyectos web y móviles. Si bien no se pueden crear diseños directamente en InVision, puedes cargar tus diseños de páginas estáticas en la herramienta y luego añadir puntos de acceso para transformarlos en maquetas totalmente interactivas. Además, InVision tiene la capacidad de sincronizarse con tus documentos de Photoshop o Sketch, lo que te permite actualizar tu prototipo en tiempo real dentro de tu programa de diseño de habitual.
En términos de características, InVision tiene una amplia gama de herramientas valiosas para facilitar el flujo de trabajo, incluyendo el modo de vista previa, los comentarios, el control de diferentes versiones, y la sincronización de archivos. También ofrece una alta variedad de transiciones animadas y gestos móviles, que pueden ayudarte a darle vida a tu diseño. Una de las mejores características de InVision es que se puede añadir interactividad avanzada, como menús desplegables y botones.
La capacidad de InVision para facilitar la colaboración es su mayor actractivo. Tus compañeros de equipo, clientes, o cualquier persona involucrada en la maqueta tiene la posibilidad de dejar comentarios y discusiones específicas en cada lugar. Esto elimina la confusión que pueden crear los emails y ayuda a asegurar que los cambios se apliquen exactamente donde tienen que estar. Además, con la función LiveShare de InVision, la colaboración puede ocurrir en tiempo real.
Perfecto para: proyectos altamente colaborativos.
Origami es una herramienta de creación de prototipos propiedad de Facebook que se ha utilizado para crear las maquetas de varias aplicaciones como Instagram, Messenger y Paper. Aunque se usa principalmente paraaplicaciones de iOS gracias a su integración con Apple Quartz Composer, Origami también apoya el desarrollo de prototipos interactivos en Android. La herramienta ofrece a los diseñadores un pack de gestos y de transiciones animadas disponibles a través de archivos de ejemplo descargables.
Origami ofrece un par de características útiles para la creación de prototipos interactivos, incluyendo plugins para Sketch y Photoshop, así como una extensa biblioteca completa con foros, tutoriales en vídeo y guías. Tiene una característica para exportar el proyecto a código que te permite convertir tu diseño visual en ejemplos de código escritos para iOS, Android, o la web.
Puedes probar rápidamente tus prototipos móviles interactivos directamente en un dispositivo iOS con la aplicación Origami Live. Todo lo que necesitas hacer es descargar la aplicación desde la App Store de Apple y conectar el dispositivo iOS a tu escritorio. El único pero de esta herramienta es que no cuenta con la funcionalidad de hacer un diseño colaborativo.
Perfecto para: Un diseñador de aplicación iOS que trabaje solo.
Parte I
Herramientas de prototipado
Una lista de productos, tanto gratuitos como comerciales, que sirven para hacer este tipo de prototipos y que te resultarán muy útiles:
· Axure RP: Es una herramienta de prototipado profesional que permite crear wireframes para hacer el pre-diseño de una página web. Disponible tanto para plataforma Windows como Mac. Puedes dibujar tanto wireframesestáticos como interactivos que simulan una experiencia de navegación del usuario real. Tiene una función de colaboración para compartir las maquetas Web con otras personas y poder recibir feedback en tiempo real.
· Balsamiq: Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un servicio web o bien descargarla en tu equipo (funciona con Windows, Mac y Linux). Su cuenta gratuita te permite crear un número ilimitado de wireframes que duran 7 días. También posee la función de colaboración.
· FlairBuilder: herramienta web que te permite hacer bocetos de tus webs y de tus Apps para iPhone. No tiene posibilidad de colaborar con otras personas ni tampoco es posible exportar características.
· gliffy: Basada en un servicio web, permite dibujar bocetos de tu página web y crear wireframes tanto estáticos como dinámicos. También puedes colaborar con otras personas y recibir su opinión en tiempo real. La cuenta gratuita te deja hacer hasta 5 croquis no cifrados pero llevan publicidad.
· iPlotz: Esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio vía web. Tiene una cuenta gratuita con la que puedes hacer prototipos que tengan hasta 5 páginas navegables.
· Jumpchart: es una aplicación de planificación de webs basadas en el navegador la cual posibilita esbozar el contenido de la página web. Es posible crear wireframes tanto estático como interactivos que simulan la navegación entre las páginas web de la maqueta.
· Justinmind: Herramienta profesional para prototipado de sitios web, aplicaciones de software y aplicaciones móviles. Puede trabajar con Windows o con Mac.
· MockFlow: Herramienta web muy sencilla de utilizar para diseñar SItios web y aplicaciones de software. Permite colaboración y navegar por la página web además de visualizar su estructura. La versión gratuita está limitada en relación al número de prototipos que podemos hacer.
· Mockingbird: Se trata de un servicio web gratuito con el que se pueden hacen prototipos de páginas web. Puedes diseñar tu sitio web en el propio navegador aprovechando que dispone de una gran biblioteca de objetos web para personalizar tus páginas.
· Napkin: Aunque es una herramienta basada en Java, también está disponible para Windows, Mac y Linux. Los bocetos realizados solo pueden ser estáticos, pero posee una extensa biblioteca de símbolos GUI para usar en tus maquetas. No ofrece posibilidad de colaboración ni de exportar a otros formatos. Lo positivo, es totalmente gratuita y la cuenta es ilimitada.
· Pencil project: Es un complemento open-source de Firefox que permite crear wireframes dentro de Firefox. No existe la posibilidad de colaboración.
· Smartdraw: totalmente integrada con Microsoft Office. Muy útil para hacer organigramas, cuadros de flujo,....Sin embargo, no dispone de wireframes interactivos ni diseños para móviles.
· Visio: Esta herramienta pertenece a la suite de Microsoft Office que se puede adquirir de forma independiente de otros componentes de Microsost Office. Sólo está disponible para equipos que trabajen con Windows. Puedes crear varios tipos de proyectos visuales como diagramas de flujo, diagramas de Venn, mapas y maquetas de sitios web (estándar y móvil), así como prototipos de aplicaciones de software.
· Si trabajas con el entorno de programación Eclipse, puedes usar también WireframeSketcher, que está muy bien y se integra dentro del entorno a la perfección.
InVision es una herramienta de prototipado basada en la web que permite a los diseñadores crear maquetas altamente interactivas para proyectos web y móviles. Si bien no se pueden crear diseños directamente en InVision, puedes cargar tus diseños de páginas estáticas en la herramienta y luego añadir puntos de acceso para transformarlos en maquetas totalmente interactivas. Además, InVision tiene la capacidad de sincronizarse con tus documentos de Photoshop o Sketch, lo que te permite actualizar tu prototipo en tiempo real dentro de tu programa de diseño de habitual.
En términos de características, InVision tiene una amplia gama de herramientas valiosas para facilitar el flujo de trabajo, incluyendo el modo de vista previa, los comentarios, el control de diferentes versiones, y la sincronización de archivos. También ofrece una alta variedad de transiciones animadas y gestos móviles, que pueden ayudarte a darle vida a tu diseño. Una de las mejores características de InVision es que se puede añadir interactividad avanzada, como menús desplegables y botones.
La capacidad de InVision para facilitar la colaboración es su mayor actractivo. Tus compañeros de equipo, clientes, o cualquier persona involucrada en la maqueta tiene la posibilidad de dejar comentarios y discusiones específicas en cada lugar. Esto elimina la confusión que pueden crear los emails y ayuda a asegurar que los cambios se apliquen exactamente donde tienen que estar. Además, con la función LiveShare de InVision, la colaboración puede ocurrir en tiempo real.
Perfecto para: proyectos altamente colaborativos.
Origami es una herramienta de creación de prototipos propiedad de Facebook que se ha utilizado para crear las maquetas de varias aplicaciones como Instagram, Messenger y Paper. Aunque se usa principalmente paraaplicaciones de iOS gracias a su integración con Apple Quartz Composer, Origami también apoya el desarrollo de prototipos interactivos en Android. La herramienta ofrece a los diseñadores un pack de gestos y de transiciones animadas disponibles a través de archivos de ejemplo descargables.
Origami ofrece un par de características útiles para la creación de prototipos interactivos, incluyendo plugins para Sketch y Photoshop, así como una extensa biblioteca completa con foros, tutoriales en vídeo y guías. Tiene una característica para exportar el proyecto a código que te permite convertir tu diseño visual en ejemplos de código escritos para iOS, Android, o la web.
Puedes probar rápidamente tus prototipos móviles interactivos directamente en un dispositivo iOS con la aplicación Origami Live. Todo lo que necesitas hacer es descargar la aplicación desde la App Store de Apple y conectar el dispositivo iOS a tu escritorio. El único pero de esta herramienta es que no cuenta con la funcionalidad de hacer un diseño colaborativo.
Perfecto para: Un diseñador de aplicación iOS que trabaje solo.
Pixate
Desarrollada por Google, Pixate es otra plataforma de prototipado que permite a los diseñadores probar diseños móviles interactivos, animaciones y wireframes para dispositivos Android o iOS.
En Pixate puedes crear diseños de interfaz en forma de capas y animaciones individuales de forma similar a la mayoría de los programas de diseño gráfico, a través de una simple función de arrastrar y soltar. Una vez que estés satisfecho con tu prototipo, puedes implementarlo y probarlo en un dispositivo Android o iOS.
Google también ha hecho un gran trabajo al reducir la curva de aprendizaje con Pixate. Una vez que pongas Pixate en marcha, echa un vistazo a la documentación y tutoriales ofrecidos online para aprender los fundamentos básicos de la creación de tu primer prototipo.
Perfecto para: diseñadores expertos de aplicaciones móviles freelancers que buscan crear prototipos detallados.
En Pixate puedes crear diseños de interfaz en forma de capas y animaciones individuales de forma similar a la mayoría de los programas de diseño gráfico, a través de una simple función de arrastrar y soltar. Una vez que estés satisfecho con tu prototipo, puedes implementarlo y probarlo en un dispositivo Android o iOS.
Google también ha hecho un gran trabajo al reducir la curva de aprendizaje con Pixate. Una vez que pongas Pixate en marcha, echa un vistazo a la documentación y tutoriales ofrecidos online para aprender los fundamentos básicos de la creación de tu primer prototipo.
Perfecto para: diseñadores expertos de aplicaciones móviles freelancers que buscan crear prototipos detallados.
Comentarios
Publicar un comentario