Dejaban hace unos días en Designer News [en] el enlace hasta Atomic, una nueva herramienta de prototipado que viene a sumarse a otras ya existentes como por ejemplo Invision, Marvel (de la que hablo en el curso de fundamentos sobre UX que ahora tiene un 40% de descuento con el código V2BM40) o Pixate. Quise apuntarme a la beta para echarle un vistazo rápido a ver qué podría encontrarme y aproveché la madrugada para hincarle el diente.
Atomic promete ser un entorno de trabajo amistoso, con características tales como la posibilidad de crear flujos de navegación a través de zonas interactivas, un control de versiones en formato línea de tiempo que nos permite deshacer cambios o modificaciones, incluir propiedades CSS directamente sobre los elementos de nuestro prototipo, comentarios de usuarios, etc.
La verdad es que al no tratarse de una herramienta que requiera instalación (corre directamente en el navegador) ni de ser excesivamente compleja (más bien al contrario) os animaría a probarla directamente si os gusta cacharrear con «juguetes nuevos». En unos 10 minutos como mucho ya habréis entendido cómo funciona.
Sabiendo que Atomic aún está en fase beta, se le notan importantes carencias siendo la falta de importación de contenidos desde Sketch o Photoshop la que considero más importante. No vendría nada mal poder incluir archivos .psd o .sketch.
Lo que sí que podemos hacer actualmente es importar imágenes (he probado a importar archivos SVG sin problema aparente) y añadir elementos extra con las diferentes herramientas de trazado y texto que tenemos a nuestra disposición para, a continuación, ponernos manos a la obra e incorporar efectos adicionales gracias a la posibilidad de incluir propiedades CSS.
En cuanto a capacidades de interacción, Atomic se limita a ofrecernos el poder crear zonas interactivas que hagan las veces de puente entre las diferentes páginas que tengamos incluidas en nuestro prototipo. Una vez creada una zona interactiva, tendremos todo un surtido de diferentes efectos de transición para poder jugar con la apariencia del cambio entre páginas.
Dicho esto y si finalmente os animáis a probar la herramienta, os preguntaréis entonces cómo han conseguido los efectos de transición y desplazamiento de elementos tan chulos en los ejemplos ofrecidos. La respuesta es bien sencilla.
La ubicación y presencia de los elementos es determinante para el efecto de transición. Por ejemplo si colocamos una barra de navegación en la página de origen y aparece exactamente en la misma posición en la página destino, no pasará absolutamente nada con este elemento en concreto. Sin embargo si la colocamos fuera del área de trabajo (las páginas tienen unas dimensiones fijas), al realizar la interacción la barra de navegación no desaparecerá sino que se desplazará hasta la posición deseada. ¿Qué quiere decir esto? Que podemos jugar con la colocación de elementos fuera del «área de trabajo» para hacer aparecer y desaparecer elementos.
Este detalle hace que sea realmente fácil conseguir efectos animados sin mucha dificultad pero personalmente no creo que sea algo muy intuitivo.
Si os ha picado el gusanillo, podéis registraros para pedir acceso a la beta o simplemente dejad un comentario por aquí porque tengo 3 invitaciones disponibles 🙂
Pues le acabo de dar un vistazo a esta nueva herramienta de prototipado y la verdad que no pinta mal. Me gusta el interfaz al estilo sketch, las animaciones de los elementos con bastante aire fresco y el feedback modo slack. Vamos que me he apuntado a la beta, pero si aun te quedan invitaciones estaré agradecido de poder «jugar». Un saludo y gracias por compartir.
Benja, invitación enviada 🙂 Ya me contarás qué te parece.
Muchisimas gracias 😉 veamos que tal funciona la beta 😉
A mi me encanta Atomic, creo que es la mas minimalista y divertida app de prototipado allá afuera.
El tiempo que la probé me estimulo al juego y a probar cosas constantemente. Sin estres y con poco tiempo, creo que se pueden conseguir transiciones bastante jueguetonas 😀
https://beta.atomic.io/d/1qMrwCYhOhK
https://beta.atomic.io/d/18QW6hjh9hw
Eso es precisamente lo que me gusta, la facilidad que tiene para añadir ese toque extra de animación sin necesidad de tener añadir una capa extra de dificultad.
Lo cierto es que sin duda Framer.js debe ser lo mejor para estas cosas pero para prototipos super rápidos yo creo que Atomic está bien bueno. Sin duda si Marvel tuviera estas transiciones y animaciones sería de lo mejorcito disponible.
De hecho, es realmente util y reutilizable Framerjs en producción?
Porque agregar una capa de abstracción (codigo) a las animaciones/interacciones, para luego tener que volver a recrearlas en producción como que es un cosa de locos 😀
No me hagas mucho caso pero juraría que el código de Framer es reutilizable… Sin embargo estoy echando un vistazo y en la web no lo destacan como una feature por lo que si no lo hacen es que me temo que nada de nada. Debo estar confundiéndolo con Pixate que sí que anunciaban que lo sería.
Pues revisando bien, Pixate a lo sumo promete una «experiencia» nativa en iOS y Android OS, pero no menciona nada del código, de hecho no trabaja con código XD.
Seria genial que estas apps puedan trabajar con el respectivo «core animation» de la plataforma a la que nuestra app apunte, sobre todo para mantene consistencia y ahorrarles unos años de vida a los developers.
Y qué tal Origami? Pone que puede exportar código…pero este sí que no lo he probado la verdad: https://facebook.github.io/origami/
Me encantaría poder crear prototipos que permitieran reaprovechar el código pero creo que conseguir eso en un entorno user friendly como el de Atomic o Marvel que no complican demasiado la manera de trabajar, es pedir demasiado :S