The day that Thomas Edison invented the movie camera, nobody really knew how to make a good movie.
All the camera techniques and tools till then were designed specifically for still photography and didn't help with moving images.
Those first filmmakers needed to invent brand new tools and techniques that were much better suited to making movies -- methods such as storyboarding, editing and later sound recording.
I think web design has gone through a similar transition.
We spent the first 15 years building static designs on pages with fixed dimensions.
The explosion of mobile in the last five years has changed everything, and the idea of presenting static, fixed-size mock-ups to our clients and colleagues is making less sense every day. We can't pitch a movie with a poster - we need new tools.
Rise of the Prototyper
The last two years could be seen as the rise the prototype tool. While there has been prototyping software around since the mid-2000's, the field has boomed with the growth of mobile.
Today I'm going to walk you through one of these tools that takes a slightly different approach – it's called 'Appseed'.
What's Appseed?
Appseed is a prototyping tool aimed primarily at people designing for mobile. Perhaps the first thing you need to know about Appseed is that you can't install it on your computer. You can't even access it via your browser. Appseed runs entirely on your IOS phone or tablet.
The idea is that you're laying out the interface and the planning the interactions directly on the device you are targeting.
Pen and Paper
[caption id="attachment_106728" align="alignright" width="196"]
The Appseed template [/caption]
All Appseed prototypes start in paper and pen on specialized paper templates. You can either:
- Purchase a book of pre-printed templates or;
- Print your own from a PDF
The templates show a blank phone layout but you'll also notice the image registration marks in the corner. These will be used by the app, but we'll come back to them later.
As you might expect, you use these paper templates to sketch out your basic UI designs – this stage is entirely focussed on flow and positioning, rather than color and detail.
[caption id="attachment_106726" align="aligncenter" width="405"]
UI Sketches ready for Appseed[/caption]
When you've got a working set of sketches, things get fun.
Appseed Capture
Loading your UI mockups into Appseed is easy. Launching the app gives you a standard live camera interface, with one noticably difference. When you point the camera at your sketches, you'll see Appseed track those two registration marks we mentioned earlier. This gives the app two 'landmarks' to help orient itself.
When you've photographed your sketches you'll find them in the Page List view, which lets you name, preview, delete and edit your pages.
Editing a Page
Now the fun bit.
After it captures your sketches, Appseed processes each image and breaks your UI into separate manipulatable units. This means that when you press and hold a UI element, if 'pops up' and you can drag and reposition it anywhere you like. You can even make multiple copies of a repeating element.
It's worth mentioning that Appseed does a good job at separating different objects, but it certainly helps to keep them clearly separated in your sketches.
Tapping any UI element brings up a flyout menu that allows you to define what it does. At its most simple, this is a button that allows you to link through to another page in your Page List. However there are currently 12 other UI element types to cover most common UI patterns.
They include:
- input text
- map
- repeat
- button
- tableview
- login group
- video group
- audio group
- image carousel
- paragraph
- tab group
- nav bar
Continue reading %Appseed Review: How to Prototype Using Your iPhone%
by Alex Walker via SitePoint
Weekly
