Spanish (Español) translation by Javier Salesi (you can also view the original English article)
Veamos algunas herramientas de prototipado disponibles para los diseñadores web hoy en día, en ningún orden particular:
- Framer
- Adobe XD
- Adobe After Effects
- Adobe Animate CC
- Craft Prototype
- Principle
- Atomic
- Proto
- JustinMind
- Origami
- Flinto
- Webflow
- Marvel App
Expresar ideas a accionistas y clientes puede parecer algo sin esfuerzo al principio, pero cuando las cosas se ponen difíciles necesitamos herramientas para ayudar a agilizar el proceso de retroalimentación. La web se está volviendo más complicada para diseñadores front-end, con constantes peticiones de interactividad. Las acciones como desplazamento y arrastrar son solo la punta del iceberg, y averiguar cómo encaja todo el rompecabezas es donde yace el verdadero arte del prototipado.
Donde Encaja el Prototipado
Por definición, un "prototipo" es una muestra temprana creada para probar conceptos específicos. Un prototipo es usado para evaluar y realzar un sistema para ganar mejor percepción en el proyecto como un todo. Todos trabajamos en proyectos diariamente y algunos son mucho más intrincados que otros, pero ¿cuando es tiempo de solicitar una herramienta para brindar ayuda en la cadena alimenticia?
Algunos argumentarían que el código es mucho más rápido para comenzar, pero hay momentos cuando el tiempo es mejor consumido usando un prototipo en lugar de pasar tiempo diseñando algo que puede rápidamente quedar en el camino. Prototipar invita a la retroalimentación sobre la interacción y la colocación. Es un esquema interactivo, dando a los clientes una mejor comprensión sobre cómo el proyecto encaja mejor para sus usuarios.
Otras veces, prototipar antes de codificar puede ayudar a beneficiar al proyecto al identificar cualquier detalle que pudiera haber sido omitido.
Prototipado y el Paisaje del Diseño Web
Cuando nos preguntamos donde encaja ésto en el paisaje hoy, podemos definitivamente atribuir la siempre creciente demanda para trabajo en movimiento. Las interfaces se están convirtiendo en organismos vivos con contenido interactivo. Simples interacciones pueden ser decididas de manera definitiva para explicarse verbalmente, pero en otros contextos ayuda a ganar perspectiva de cómo una interacción puede ser desencadenada-y más clientes están exigiendo ver prueba de conceptos antes de cerrar sesión. Es importante, ahora mas que nunca, tener una idea sobre a donde dirigirse cuando surge la necesidad de prototipar.
Con tantas herramientas disponibles en el mercado, ¿cuál deberías usar? Veamos.
1. Framer
- Más Licencia: $15/mes (Únicamente Mac)
- Licencia de Empresa: Contacto
Framer otorga la familiaridad de edición visual con la flexibilidad de código, dando un impecable flujo de trabajo complementado por previsualización de dispositivos, control de versiones y compartido simplista. Una aplicación que ayuda a dar origen a nuevos patrones de interacción para crear sorprendentes aplicaciones. Extrae datos de tu API favorita, captura real interacción del usuario para probar, y trabaja con usuarios reales y retroalimentación. Importa gráficos directamente desde Sketch, Photoshop o Figma
Aunque Framer puede parecer como difícil es usada estrictamente para aplicaciones móviles, también puede ser aprovechada para proyectos que no son de aplicaciones, o usada como una librería independiente. Cuando usas nada más la librería Framer JS, evitas el IDE completamente. Esencialmente es un framework JavaScript de código abierto para rápido prototipado. Define animaciones e interacciones, completa con filtros, físicas de resorte, efectos 3D y más. Aunque CoffeScript no es requerido, la documentación usa CoffeScript así como el IDE.
Debería saberse que Framer no está destinado para ser usado para crear animaciones listas para la producción.
@UXDesignDad @framer Hey Andre! Framer es una herramienta de prototipado para la Mac. No para aplicaciones de producción
-Krijin Rijshouwer (@krinjnrijshouwer) Febrero 2, 2017
Debido a que Framer tiene su propio concepto de capas y contiene mucho código, no puedes usarlo en material DOM plano (existente) como lo podrías hacer en GreenSock. De hecho, pone su propio lienzo en el DOM y todas las animaciones son ejecutadas dentro de ese lienzo.
- https://framer.com/features/handoff
- https://framer.com/inicio/guía
- https://framer.com/precio/2017
- https://framer.com/inicio/importar
2. Adobe XD
- Precio: Requiere Cuenta Creative Cloud de Adobe
Dibuja, reutiliza y vuelve a mezclar ilustración en formato vector y raster para crear prototipos, maquetados de pantalla, prototipos interactivos y recursos listos para producción todo desde la misma aplicación. Trabaja con herramientas poderosas como Repeat Grid construída específicamente para XD, y con herramientas de capas, símbolos y pluma para diseño UX. Añade interacciones que usan una variedad de animaciones para crear transiciones entre mesas de trabajo para simular el flujo de tu apliación/sitio web.
Los clientes pueden hacer comentarios directamente en tus prototipos cuando compartes directamente, y ves diseños en tiempo real en dispositivos reales. Los diseños pueden ajustare y automáticamente actualizarse en diversas plataformas.
Mientras que XD es todavía un producto en beta queda por ver si seguirá en el previsible futuro. Puedes leer más sobre las prestaciones liberadas aquí para seguir informado sobre los próximos cambios y mejoras. Incluso publicamos una serie de 15 partes cubriendo todas las herramientas esenciales que necesitarás para comenzar a diseñar y prototipar con Adobe XD:
3. Adobe AfterEffects
- Precio: Requiere Cuenta Creative Cloud de Adobe
After Effects no es específicamente una herramienta de prototipado para sitios web y aplicaciones (aunque aún puedes salirte con la tuya), pero si ayuda a prototipar movimiento para los que buscan una manera de compilar/bosquejar animaciones para clientes. Crea gráficas que se mueven para video o crea efectos de animación para la Web. Aquí está un sensacional artículo en Tuts+ de Charles Yeager:
También consulta ésta serie de diez partes en Tuts+ llamada Bienvenido a After Effects.
4. Adobe Animate CC
- Precio: Requiere una Cuenta Creative Cloud de Adobe
Adobe Animate es una evoución de Flash Professional. Es una herramienta que incluye prestaciones como líneas de tiempo, keyframes, abundantes opciones de exportar, soporte para librerías JavaScript de terceros, ajustes de posición de cámara y mucho más. Mientras que está enfocada más hacia los animadores, no te engañes que no puedes usarla para otras necesidades. Recuerda que herramientas hacen tanto como deseas y están únicamente limitadas por tu imaginación. Úsala para esquematizar sitios web, probar animaciones para aplicaciones y más. Puedes leer sobre los trabajos internos de Adobe Animate en éste artículo:
5. Craft Prototype
- Precio: Gratis. Requiere Sketch $99.00
Construye prototipos con tus archivos reales de diseño. Craft es parte de la familia Invision; una compañía que adquiere muchas herramientas (tales como Macaw y Easee) éstos días de entidades externas.
Craft Prototype es un poderoso conjunto de herramientas que te permiten diseñar con dato reales, creando guías de estilo en un click. Con prototype puedes hacer el trabajo justo desde Sketch; todo en un espacio. Con proyección en tiempo real en tu teléfono puedes probar inmediatamente prototipos de diseño. Cuando estás listo para compartir, puedes publicar tu trabajo directamente en Invision para ganar retroalimentación instantánea de clientes y accionistas. Incluso te permite prototipar en una alta fidelidad con movimiento, dándote una línea de tiempo para ajustar visualmente usando keyframes. Genera HTML y CSS, código swift nativo, y documentación para tu desarrollador. Mira éste breve video explicando Craft 2.0 Preview - Prototipar en Sketch en Vimeo.
6. Principle
- Precio: $129.00 (Únicamente Mac)
Principle facilita diseñar interfaces de usuario animadas e interacativas. Si estás diseñando el flujo de una aplicación multi-pantalla, o nuevas interacciones y animaciones,Principle te permite crear diseños que se ven y se sienten fabulosos. La aplicación se parece mucho a la IU de Sketch incluyendo otros aspectos familiares para alineación, creación de mesa de trabajo y conexiones de pantalla, además de previsualización en tiempo real. Haz click en las capas de animación para sumergirte más profundo en keyframes y personalizar los ajustes de modificación de las curvas igual que lo harías en otras herramientas de animación. Principle te da la libertad de experimentar sin limitarte a transiciones pre-definidas, además también puedes importar mesas de trabajo desde Sketch.
La aplicación Principle Mirror para iOS permite a otros ver tus diseños en su dispositivo. Mientras diseñas, puedes interactuar instantáneamente al conectar tu dispositivo en la computadora o exportar una aplicación para Mac independiente para que otros puedan ver.
7. Atomic
- Nivel Inicial: $15/mes
- Pro: $25/mes
- Ilimitado: $25/mes
Atomic es una aplicación basada en la web que se integra con Sketch, permitiéndote importar diseños de ahí o cualquier lugar de tu elección. Llevar diseños hacia Atomic es sencillo; usa el poderoso plugin de Sketch o suelta elementos desde tu herramienta favorita de diseño.
Atomic tiene integradas herramientas de dibujo y maquetado para diseñar dede cero o continuar desde diseños importados. Rápidamente enlaza tus diseños usando un rango de gestos y transiciones para dispositivos móviles o de escritorio. Usa CSS personalizado para aplicar estilos adicionales y también exportar tu CSS para compartir con otros desarrolladores. Lee más sobre las prestaciones de Atomic en su sitio web.
8. Proto
- Trabajador Independiente $24/mes
- Startup $40/mes
- Agencia $80/mes
- Corporación $160/mes
Construye animaciones sofisticadas para cualquier interacción de patrón de diseño con la línea de tiempo fácil de usar con Proto. La aplicación viene con un completo conjunto de librerías IU como iOS 9, Material Design, Windows 10 y más. Los diseños pueden importarse usando Sketch o el plugin de Photoshop; importarlos en capas y sincronizarlos con Dropbox. Exportar recursos IU directamente. Previsualiza prototipos en el navegador o dispositivos usando la aplicación proto para iOs o Android. Comparte con clientes o miembros de equipo para colaborar y generar retroalimentación. Proto se integra con herramientas líderes de prueba para el usuario para obtener poderosa retroalimentación y percepción.
Aprende más sobre sus prestaciones en el sitio web de Proto.
9. JustinMInda
- Pro $19/mes
- Empresa: Contactar
JusinMind es un producto basado en la aplicación para transformar simples bosquejos en prototipos interactivos para iOS y Android, y crear prototipos para la web y dispositivos móviles. Aprovecha las librerías IU pre-elaboradas, incrusta HTML y documentos en cualquier cosa que tu corazón desee. Cuentas de paga permiten a múltiples usuarios interactuar simultáneamente con el mismo prototipo haciendo que la retroalimentación se gane sin ningún esfuerzo. Incluso tiene una extensa librería de widgets pre-existentes ajustados a la plantilla de dispositivo seleccionada para tu proyecto. Elementos como botones interactivos, casillas de verificación, listas e incluso maquetados con efectos de paralaje están a tu disposición.
Si eres nuevo en ésta herramienta viene llena de magníficos tutoriales y videos guiados para todos desde principiantes hasta expertos. Mientras que ofrece un plan gratuito para capacidades de compartir en el navegador debes modernizarte a una cuenta de paga para colaboración entre los miembros de tu equipo. Con JustinMind Prototyper puedes importar imágenes de cualquier herramienta de diseño o directamente desde tu navegador web y convertirlos en fascinantes y cautivantes prototipos web con la herramienta "foco de imagen". Exporta tu prototipo a un documento HTML completamente funcional y hazlo disponible para ver en cualquier navegador web.
10. Origami
- Precio: Gratis únicamente para Mac
Origami está construída y usada por diseñadores en Facebook y ha sido utilizada para crear aplicaciones como Instagram, Messenger y Paper. Copia cualquier cosa desde Sketch y pega capas nativas en Origami Studio. Rápidamente ajusta, agrega comportamiento, y anima cualquier propiedad de la capa sin que regrese a su posición original. La herramienta ofrece a los diseñadores una serie de gestos y transición de animaciones que son comunes para patrones IU.
Origami ofrece prestaciones útiles para prototipado interactivo junto con plugins para Sketch y Photoshop así como una completa biblioteca de documentación con foros.
Hay una prestación "Exportar a Código" que te permite convertir tu diseño virtual en muestras de código escrito para iOS, Android o la web. No puedes directamente compartir prototipos con individuos que operan en dispositivos que no sea el tuyo, aunque puedes previsualizar tus prototipos con Origami Live, disponible para Android y iOS. Consulta los tutoriales para una idea más clara en el sitio web de Origami.
11. Flinto
- Prueba gratuita de 14 días
- Flinto Lite; suscripción basada en la web $20/mes
- Aplicación para Mac:$99
Flinto para Mac es una herramienta basada en aplicación que te permite crear cualquier cosa desde simples prototipos mediante presión de botones, hasta completos prototipos con interacciones. No hay programación o líneas de tiempo; es una herramienta de prototipado para diseñadores en su máxima expresión. Coloca objetos y componentes donde desees. Las transiciones puedenser sencillas o complejas, y las transiciones son reutilizables. Tienes control preciso sobre cada capa, incluyendo regresar a su estado original o con curva de velocidad cubic-bezier.
Usa el "comportamiento de diseñador" para crear micro-interacciones que existen dentro de una pantalla. Ésto es perfecto para cosas como efectos de botón, habilitar o deshabilitar switches, hacer animaciones en bucle y animaciones basadas en el scroll.
Agregar áreas de scrolling a tus pantallas es fácil también; selecciona capas, y haz click en el botón "scroll group". Puedes modificar una variedad de opciones, crear grupos de scroll de páginas, anidar grupos de scroll e incluso crear animaciones basadas en el scroll.
Todos los cambios que haces en Flinto for Mac pueden ser probados inmediatamente en la ventana de previsualización, o en tu iPhone o iPad conectado a tu red WiFi usando la aplicación gratuita de visor iOS.
La aplicación de visor de iOS de Flinto es gratuita en la App Store para descargar, para que puedas enviar tus archivos Flinto a cualquier persona con la que quisieras compartir.
12. Webflow
- Nivel inicial: Gratis
- Lite: $16/mes
- Pro: $35/mes
Webflow es otra aplicación basada en la web que se ejecuta directamente en las versiones más recientes de Chrome y Safari. Ésto significa que está actualmente optimizada en esos navegadores, sin embargo el código producido tiene soporte para múltiples navegadores.
"Construye sitios web dinámicos responsivos sin escribir código. Lanza con un click, y disfruta el hosting más rápido y confiable en la web. Exporta código limpio y semántico para entregar a los desarrolladores.
Weflow está principalmente enfocado en animaciones web, interacciones y diseño web responsivo. Las interacciones 2.0 se aproximan y ofrecerán más control para animaciones e interacciones a través de puntos de quiebre (a menudo un dolor de cabeza para diseñadores express), y claro la facilidad de construir visualmente vs un poder de código.
Para darte una muestra de las posibilidades de Webflow consulta éste demo instantáneo que también puede ser visto en Weflow o consulta el código producido en éste demo de CodePen. También es bueno obtener una muestra de la IU en éste video.
La calidad del código que es producido es semántico, legible y es fácil de trabajar con él si lo exportas y lo usas externamente o lo entregas a un desarrolldaor. Aquí están algunos demos que muestran el código producido.
Actualmente Interactions V1 están disponibles e Interactions 2.0 incluirá más personalizaciones con animaciones tipo paralaje e interactividad intregrada visualmente; animaciones basadas en la posición del cursor/live-scroll. Weflow está esperando lanzar la beta muy pronto así que Interactions 2.0 será una parte importante de la interfaz y una gran razón para que muchos diseñadores y desarrolladores utilicen Webflow.
- https://wishlist.webflow.com/ideas/WEBFLOW-I-17
- http://3d-tranforms.webflow.com
- https://webflow.com/prototipar
- https_//webflow.com/prestaciones/interacciones-v2
- https://interactiones.webflow.com
- https://flexbox.webflow.com
Graias a Waldo Broodryk de Webflow quien se tomó el tiempo para responder muchas de mis preguntas y compartir sus demos y conocimiento.
13. Marvel App
- Gratis (1 usuario, 2 proyectos)
- Pro $12/mes
- Compañía $48/mes
Marvel, el editor basado en el navegador te permite enlazar todos tus diseños, añadir gestos y transiciones para hacer que tu prototipo se sienta igual que una aplicación real o sitio web. Crea prototipos para e iPhone, iPad, Computadoras de Escritorio, Apple TV, Apple Watch y Android.
Marvel viene con prestaciones como colaboración, comentar, junto con diseñar en tu navegador con "Canvas", además puedes añadir imágenes usando Photoshop, Sketch o pluma y papel. Los usuarios pueden hacer click y arrastrar para crear puntos de acceso interactivos en diseños que reaccionan cuando son clickeados o tocados. Marvel viene con otras geniales prestaciones como un plugin de Sketch e incluso una herramienta iOS. La aplicación iOS ahora incluye Canvas (mencionado previamente), la herramienta de diseño rápido de Marvel que te permite crear bocetos de aplicaciones desde cero. Ésta aplicación también incluye Iconfinder y Unsplash que te proporcionan una épica base de datos de más de un millón de fotos de stock e íconos para incorporar en tus diseños.
Marvel también presenta roles de usuario, organización del proyecto que usan carpetas, sincronización de diseños desde Google Drive, opciones para incrustar video y audio desde YouTube, Spotify, Vimeo y SoundCloud.
Conclusión
No importa la herramienta que decidas usar, elige la que te vaya mejor y con la que te sientas más cómodo. Deja un comentario abajo si has tenido experiencia como cualquiera de las herramientas mencionadas para ayudar a otros a tratar de decidir qué herramienta utilizar. Espero que éste artículo te ayude a tener una mejor idea y te haya hecho tomar una decisión meditada cuando llegue el tiempo de elegir.
Especia agradecimiento a éstas personas por su información, compartir conocimiento y opiniones durante mi investigación:
