Wireframe workflow in action

Several wireframing techniques were employed on my design for the John Birdsall Picture Library iPhone App.

Usually, interactive projects begin as a traditional sketch using a marker and layout-pad. However, initial wireframes for this particular project were sketched on an Apple iPad using an application called iMockups.

This helped map-out all the main functions of the app and provided a basic storyboard for the client.

The user interface was then refined using Axure Pro software on a Mac. I use this software package for designing websites and mobile applications.

Axure allows pages to be uploaded to a webserver as hyperlinked HTML pages. This is extremely useful, providing a non-linear walk-through that can be used to explore various user-scenarios.

Graphic primitives created in Axure were then replaced with more stylised graphics created in Adobe Photoshop and the HTML pages on the web-server were subsequently updated.

You can access the Axure prototype I designed for the Photolibrary here; http://www.dreamtargets.com/Axure_prototype/

Prototyping helps communicate the customer-journey to the client and can be used to sign-off basic design elements. Axure also generates a site-plan of all of the pages in the design which is useful when discussing the project with the client and briefing the programming team.

As positioning of Axure graphics is ‘pixel perfect’ there is less room for error when translating the design for the web or mobile device. Most of the creative assets are web-ready too which speeds up the production process and allows the programming team to concentrate on writing code.

In this case, one programmer concentrated on the web content using the Cuttlefish cPortal Content Management System whilst another wrote the iPhone iOS code using Appcelerator; a software editing tool designed to simplify iPhone and Android development.

Download the John Birdsall Social Issues Photo Library App from the iPhone App Store.

An Android version is planned for 2012.