---
title: Rapid iOS App Prototyping With Pixate
teaser: Prototyping with Pixate can help you validate ideas within the hour.
tags: design,ios,interaction,prototyping,user experience,animation
author:
- Connie Chan
- Ryan Coughlin
published_on: 2015-01-13
---
At thoughtbot, a small group of us are building Poppins, an iPhone app for
keeping your GIFs and memes in good order (obviously an important task). It's a
simple app. It consists of: a collection view, a detail view, and the ability to
share and manage items using iOS' `UIActivityViewController`. With
it being so straightforward, we were free to explore, get creative, and allow
the interactions to shine.
We started the design of Poppins by promptly getting lost in interaction and
animation fantasy land. The design team used pen and paper to sketch out some
unique solutions and came up with detailed animation concepts. It was a great
start, but when it came time to actually build the product, describing each
animation to the development team proved to be a foggy and confusing process.
The problem was that pen and paper only went so far. Our sketches didn't help
answer the utmost question: are these ideas feasible to implement within a fixed
timeline?
## How Pixate helped us
What is Pixate? Well, [Pixate](http://pixate.com/) helps designers build native
prototypes without code. It's a great product that allowed us to focus on
Poppins' interactions very quickly. We validated our ideas using working
prototypes within minutes (more complex interactions took around half an hour).
When presenting the concepts to the development team, we were able to share
usable samples. These lead to a smoother back-and-forth and easier
implementation.
## A quick case study
In many photo gallery apps, there is a clear distinction between the collection
view and the detail view. If you want to look through your photos, you scroll
through a grid of thumbnails and tap to expand one. Then you swipe left or right
to progress through your images one by one. With Poppins, we wanted to design a
faster, more intuitive, way for users to navigate their files.
Our solution was something that allowed users to view their image at full size
and in context, and to quickly flick-and-scroll through everything as a whole.
We came up with this: We combined the collection view with the detail view and
organized the collection view into two columns, one for GIFs and one for memes.
To get to the larger "detail" view, a user would swipe left or right to expand a
column to the full screen width. This way, they can focus on one image at a time
like they're used to in their Camera Roll, but never be separated from the rest
of their files.
### Straight to rapid prototyping
To test our thinking, we jumped into Pixate. By using shape layers rather than
prepared assets, we produced a prototype in no time. To start, we created two
tall rectangles (a blue "All Gifs" layer and an orange "All Memes" layer) and
grouped each with a bunch of smaller gray rectangles acting as image
placeholders.
Because Pixate doesn't have a pre-made "Swipe Right" option, we used a draggable
invisible layer (named "Draggable") to fake the swiping interaction. The layer
had a transparent appearance and a max offset of 100px from the left edge to
ensure that it didn't end up off the canvas. The "All Gifs" and "All Memes"
layers were then given animations (Move and Scale) that reacted depending on the
"Draggable" layer's position. For example, if "Draggable" was moved 100px from
the left edge, "All Gifs" would scale 2x and reposition accordingly, and "All
Memes" would move off the screen. The result was snappy and, with some tweaks to
the transition delay and duration, felt natural to use in hand.
(The "Draggable" layer has been made light blue to show its position)
Thanks to Pixate, we moved from initial sketching to playing with something on
an iPhone in half an hour's time. When we did have assets ready to try out, all
it took were a few more clicks to replace our rectangles with images, and the
result was fantastic. It looked and reacted like a real app.
### Our outcome
The process was quite efficient. In a short amount of time, we were able to test
various ideas and rapidly decide which ones to keep. It's reassuring to jump
into the visual design process with the knowledge that our interactions,
transitions, and animations were (or were not) validated and feasible. We found
that although not all of our proposed concepts may not make it into version 1.0
of Poppins, we have the start of something interesting. Pixate also enabled
developers to give feedback and work on implementation in tandem with designers,
as they had a prototype next to them that they could play with while building
out the app. No messy storyboards stitched together with arrows mimicking the
idea — the desired interactions were right on the device.
### Hiccups along the way
- Linking multiple actions together in a Pixate project is difficult. If one
layer was renamed, all dependent conditions needed to be updated manually. If
there were multiple ways to trigger an animation, that one animation would
need to be created multiple times. We settled on creating multiple small
prototypes, with each focusing on one specific interaction in the app.
- In Pixate, it's a bit tricky to scale and position layers. While you can
position a layer with pixel measurements at its base size, it does not
translate well when scaled up. For example, a 150×150 rectangle that's
initially positioned with its top left corner at (0, 0) needs to be placed at
(75, 75) if scaled up 2x to keep the same anchor point. In our prototype,
there was a good amount of guess work when it came to this.
- Depending on what device you're viewing Pixate projects with, you may have to
use a transparent appearance rather than 0% opacity; specifically for layers
that can be interacted with but should be invisible. On Android devices, our
"Draggable" layer worked fine when set to 0% opacity, but would not work in
iOS.
## Wrapping up
All in all, Pixate allowed us to mock up multiple concepts within minutes. We
covered user flow, design interactions, development feasibility, and UX flaws
within 3 days of starting the project. We were able to hammer out an array of
possibilities quickly, poke holes in them, and refine. If you design for iOS or
Android and haven’t tried Pixate, you should. Their [video tutorials](http://www.pixate.com/education/video-tutorials/)
are a great way to get started. Its easy-to-learn mechanics with flexible animations
make it a great addition to the design toolbox.