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.

image

Pixate Studio was on my forever expanding “Things I need to check out” after reading about it on DaringFireball and the mild controversy around it’s Kickstarter.

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

image

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.

image

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…).

image

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.

Unlocking interaction

image

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.

image

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.

image

Lastly, without any exporting of motions, anything created within Pixate must be recreated in whatever environment you’re working on. There’s simply no magic bullet that’ll spit out Swift or Java or Javascript for your iOS/Android/Web apps.

Final thoughts

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.

That said, Pixate is powerful and fast, and is the best game in town for quick interaction mockups. With only a few hours spanning across a week, I recreated the same interaction the client sent to me as a test flight. It took me all of 30 minutes, much less time than it took to code in Javascript, and this included me bumbling around. A vet could easily do it half the time.

Pros

  • 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
  • Quick

Cons

  • Limited set of interactions and effects
  • Doesn’t detect aspect ratio of images
  • Not designed for multiscreen or many interactions on a single screen
  • Somewhat pricey
  • Interactions are not represented in code (isn’t what a WYSIWYG application)
  • No keyframe animation options (would be useful for CSS animation modeling)

Pixate Studio

Version Reviewed: 1.10.14

Price: $149

pixate.com