Months ago I wrote a review on CodeKit 2, comprehensive and deep review and had been meaning to review more unreviewed professional applications in the same manner. Even though my business card reads “UX Developer” and my job title officially is “UX Engineer” the truth is, I’m a front-end developer. I’m usually handed a PSD, a list of requirements and go to work. I do user interaction development, but it's been something that I’ve always had an itch for.
Recently a client sent a video of UX interactions over to me to code out, and I was impressed with the quality, it was captured from the iOS simulator. I inquired what software they used: Pixate Studio. Day to day prototyping/wire-frames aren’t something I normally do in my company, and it's rare when a client has the chops to send over high fidelity mockups, let alone interaction design.
Internally, we’re always evolving, as we continue to grow and flush out internal processes, the further we keep stepping into the realm of interaction design for a product to close the gap between developers and designers.
After seeing the end results, I figured it was time to test it out.
Motion design as a function of design
Pixate Studio is a product for a very particular UX/interface design, specifically motion either trigger or based on user input. Motion design in the era of mobile apps has become an extension of the brand much akin to logos, icons, color schemes and fonts. Motions help define a brand and an experience. Google famously laid out its motion design manifesto, for Material Design. Motion is now a way to define and differentiate. For years, the big players, Apple, Google, Microsoft. Facebook has used motion as a way to express their brand identities, it has slowly become part of the design lexicon.
Previously, motion design has been relegated to edge cases, either with motion graphics editors using suites like After Effects mocking up user interfaces or Facebook’s approach to leveraging Quartz and rolling it into its motion design suite which evolved into Origami.
Each is time-consuming and do not lend themselves to quick turn arounds like campaigns or short projects. Motion design for some time has been relegated to higher tier projects, ones with budget and/or time to allocate resources to them.
Interaction Design for the Everyman
Pixate Studio is the middle ground, the tool for the every-man designed to deliver high end interactions without coding, so designers can spend time designing and only using the most superficial coding, so complex interactions can be defined then later developed.
Like most applications, layouts are handled in layers, akin to most graphics and motion graphics suites. Layers can be nested within layers within layers. The parent layer can be used to define the input behavior to chain to sublayers.
Interactions and animations are handled through drag and drop functions that are changed together to create effects (such as parallax, taps states, slides, hovers, etc…).
Pixate Studio’s friendly UI is enough to instill a false sense of security, or at least it did for me, after spending a half hour poking at icons and such, I discovered my time was much better spent watching the tutorials. Pixate gets special merit for creating a bunch of short, easy-to-follow, simple tutorials complete with video and step-by-step instructions.
Pixate Studio’s magic is in its ability to trigger animations based on inputs, such as a double tap vs tap, or object’s position during a user scroll using simple if logical operators which chained to a variety of properties: scales, position rotation, opacity, color, image, and order.
It’s enough of a toolset to recreate parallax, sliders, faux trigger states, buttons, and even (if awkwardly) multi-screen prototypes.
Pixate easily connects to an iOS / Android devices, and updates in real time, allow interactions to be tested and toyed with. iOS gets special treatment the simulator can be run directly from Pixate Studio. Running Pixate on Android requires downloading and installing the application, even with simulators like Genymotion.
Any changes to a project happen in real time, the device(s) connected to reflect the changes immediately after a quick screen refresh, making “feel” tweaks nearly instantaneous. It’s fast. It’s simple. It’s impressive.
Not quite perfection
Its easy to chain effects to create a multitude of behaviors, but where Pixate Studio starts to fall short is a concise way to manage multiple interactions on a screen.
Pixate starts to lose a bit of ground when it comes to defining more than the one screen, without a way to link between projects or screens, creating fully interactive mockups is cumbersome. It’s clear the ideal use of Pixate Studio is to define an interaction one at a time, for high fidelity mockups.
Also, Pixate doesn’t include any advanced effects that one may associate with motion design like gravities/object attraction/repulsion, particle generators, edge collisions or keyframe animation.
Pixate is spendy, its $149 for a single license or $20 a month for its premium service that includes a quick share cloud service.
There’s plenty of tools and libraries released daily ultimately it comes down to does this fit our workflows and how useful is this/does it save us any time? Pixate isn’t for every project in an agency model like ours, but with some bigger projects in the pipeline for some majors like a sportyshoe company and a buildlyhomesupply company, this looks like something our firm will invest in to test out. After demoing it for the other developers, everyone on our team was significantly impressed.
Real interaciton simulation
Painless wireless syncing to actual devices
Works with simulators and is cross platform
Cloud service lets you load demos without running app on a local computer
Drag and drop assets works great
Limited set of interactions and effects
Doesn’t detect aspect ratio of images
Not designed for multiscreen or many interactions on a single screen
Interactions are not represented in code (isn’t what a WYSIWYG application)
No keyframe animation options (would be useful for CSS animation modeling)