Sprite HD is a tool for prototyping user interfaces for iOS. The premise is straightforward: you create a new page for each screen display you want to mock up and then add elements to it in order to see how it will look.
Sprite HD has a full library of buttons, controls, icons, and dialogue boxes and allows you to add text and images manually. Start with a background - either black or grey linen for iOS - and then drag assets to it from the library, one at a time. It's a useful way of quickly visualising and sharing how an app will look in a given state.
Useability issues
We had a few issues with it, however; the first of which we encountered on launching the app for the first time. While there is a tutorial of sorts to help you get started, we found it difficult to get to grips with it, and even more difficult to dismiss. Instead, we found it far easier to start with a blank slate and to experiment with different styles until we got the hang of using it. And after exploring and experimenting, it was revealed that Sprite HD is both reasonably powerful but also rather frustrating in use.
If you drag a background onto the working space, for example, it occupies a huge chunk of the screen, extending beyond the workspace and 'under' the menus. That means you have to drag it around until the bottom-right corner - the only one from which you can re-size an object - is visible. You then have to drag that in and down until the object is the right size.
Limited options
There's no way to lock the aspect ratio, however, so you'll either have to trust your eyes or type pixel dimensions manually into the menu on the left of the screen. There is another option - to pinch from the centre of the object, as you would do to zoom out across the iOS in general. That, however, risks inadvertently grabbing an object below and moving or re-sizing it instead (which, we can assure you, lead to some angry fist-shaking).
The same applies when you drag buttons, icons, or controls onto the screen. There's no possibility, for example, to specify standard dimensions for objects in order for you to avoid having to manually re-size each one.
There are at least contextually aware guides that appear as you drag objects around on a layout, alerting you when they are lined up. Text controls are good, allowing you to specify the size, style, colour, and alignment of characters. Annoyingly, the box into which you must type them is simply too small.
Thankfully, by tapping the 'T' at the top of the text box, you can type directly into the box. But the question begs, if this option is available knowing that the box is small and fiddly to tap, why is this not the default?
Each object has a list of properties, including x and y co-ordinates, pixel dimensions, other data specific to the object type, and the object's name. Sadly that name is not editable, rendering it meaningless unless you’re prepared to memorise what 'item_30' corresponds to.
We like the ability to add images from your Photo Library, which also allows you to import mocked- up interfaces created elsewhere – though adding them causes them to be displayed at full-size, meaning you have to manually re-size them.
Also, there's no way to edit images. So photos taken in portrait orientation, for example, can't be rotated. The ability to duplicate mock-ups in order to make revisions while retaining the original, on the other hand, is an additionally handy feature.
Sprite HD has tons of potential. In its current state it's highly usable, if frustrating at times. With some more work, however, it could become indispensable to mobile app UI designers.
You'll find this review, and many more, in Tap! Magazine issue 29.
Key Info
- Works with: iPad
- Price: $6.99/£4.99
- Version: 1.0.0
- App size: 15.5MB
- Developer: FEI XU
- Age rating: 4+
Like this? Read these!
- How to create an app: try these great tutorials
- Our favourite web fonts - and they don't cost a penny
- Discover what's next for Augmented Reality
Have you found a great iPad app? Tell us about it in the comments!
