Pixate is what you’d call an app prototyping tool and they are a dime a dozen. For the uninitiated, prototyping is how you generate mockups or prototypes of applications without the need to know programming languages such as Objective C or Java. So every other person can easily bring their ideas to life and learn more about UX at the same time. Instead of having to hire a consultant from the get go, you can work out a good amount of the mechanics and create a prototype that’s just short of being truly native to a platform.
What’s even better is that Pixate Studio is free and the company has been purchased by Google as part of their effort to develop new design and prototyping tools. This could very well mean that you might find Pixate becoming part of Android Studio.
There are plenty of prototyping tools but there’s always been a tradeoff between speed and quality. Pixate is quick and allows you to create prototypes rapidly without any tradeoff, as it will be apparent soon enough. Let’s get you started on some basic actions that can be performed using this nifty tool.
User Interface
If you’ve ever used an IDE before, you’ll quickly feel at home when you run Pixate for the first time. Take a look at the image below. This is the first thing you’ll see when you fire up Pixate. On the very left of the window are two tabs, of which the first tab opens up the ‘layers’ panel that you see here and the second tab opens up the ‘assets’ panel.
Assets are basically images of all the UI elements in different stages. For example, if you were to drag a menu bar around and wanted the bar to go out of focus then you’d create two images, one with the menu bar looking crisp and the other with the menu bar all faded out. You’d then transition between these two assets based on a trigger event. In this case, the dragging action would be the trigger.
A fairly simply and easy to navigate UI
The ‘layers’ panel is where you organise all the different layers of your interface. Almost everyone has used some sort of image editing software or apps such as Photoshop, Gimp, Pixlr etc., so the concept is quite clear.
Right beneath the ‘layers’ panel lies the ‘actions’ panel from where you can pick different animations to be applied to transitions. On the top right lies the properties pane that allows you to modify layer parameters like size, position, opacity etc. And right below the ‘properties’ panel lies the ‘animations’ panel, where you can define the animations for the selected layer. The centre houses the workspace where all the
magic happens.
A few pointers
Before you begin, you need to list out all the features you want from your app and generate assets for the device that you’ll be working on. Resolution and pixel density should be kept in mind while generating these assets. Both Android (https://developer.android.com/guide/
practices/screens_support.html) and iOS (https://developer.apple.com/ library/ios/documentation/UserExperience/Conceptual/MobileHIG/) have guidelines for designing apps which need to be followed to the letter. The Apple App Store is a lot more stringent when it comes to QC and it wouldn’t be a surprise if your app were to be rejected for flouting guidelines.
