This is the third post in my App Development series. Last week I covered the design document, this week I’m moving on to wireframes and workflow.
Why Wireframes?
Wireframes provide you with the opportunity to plan functionality and layout without worrying about how the end product will look. They’re particularly useful because they force you to think about function over form.
How to create Wireframes
There are lots of tools available for creating wireframes. Everything from web-based tools such as Balsamiq, through templates available for your favourite design software, to pencil and paper. You can make the pencil and paper technique even easier by purchasing a template sketchbook or stencil.
I think pencil and paper is a very good solution since it allows you to make decisions without being influenced by the controls you have available. However, I’ve opted for a software solution and purchased the fantastic Blueprint for iPad. The iPad is an excellent fit for wireframing. Dragging around components and having the ability to rapidly change your mind is a great boon when its comes to wireframing. I also like that it can be a more relaxed process – sitting on my couch, drinking coffee, wireframing the screens on my iPad.
The Wireframes for my Coffee App
I’ve broken down my wireframes into eleven separate screens. I’ll give you a bit of an explanation for each one.
Coffee Cupboard
The Coffee cupboard shows a screen with multiple images. Each Image will represent a Coffee. Also from this screen you can “Add a Coffee” or “View a Coffee”.
Add Coffee
Adding a Coffee will involved entering the Coffee name, country, region, and farm. The user will also be presented with a choice of image (displayed in the cupboard).
My Coffees
The “My Coffees” screen will simply be a list of all of the Coffees the user has recorded.
View Coffee
Viewing a Coffee will show the details of that Coffee. It will also give the user the ability to edit the Coffee, create a new tasting note, edit preparation notes, or share the Coffee.
Edit Coffee
Editing the Coffee allows the user to rate the Coffee (although I may pull this back to the “View Coffee” screen), edit and save the details, delete the Coffee, and edit the tasting notes.
Edit Tasting Note
The purpose of editing the tasting note is to allow for the deletion of a word from a tasting note. This is simply a list of all of the words from the tasting note.
Add Tasting Note
Adding a tasting note allows the user to add words that represent the flavours they can taste. This is done by adding individual custom words or by selecting pre-determined words from a wheel. The pre-determined words will be populated with commonly used terms along with words that the user uses often.
Edit Preparation Notes
Editing preparation notes simply allows the user to edit a screen of text to record preparation details. I may expand this further to allow the user to record what they do each time rather than just editing a single set of notes.
Share Coffee
Sharing a Coffee gives the user access to the option to share by Twitter, Facebook, or Email. These are just preliminary ideas.
Search
The search screen lets the user search for a specific Coffee name, a rating, or by selecting words from existing tasting notes. I may also include country, region, and farm.
Search Results
This displays a list of all Coffees matching the search criteria.
Workflow
In addition to creating the wireframes, a workflow is also useful. The workflow helps to visualise how the screens are linked. It is essentially the users journey through the Application. This will be useful when it comes to developing the App.
Next Week
Next week, designing the screens. This is the fun part. I’ll be putting together some basic designs for some of the key Application screens. These won’t be the final art but will give me enough assets to begin developing the App.
This post is part of a series that will follow the design, development, and release of my Coffee App. You can view the previous posts here…
Part 1 – Doing it properly
Part 2 – The Design Document
Part 3 – The Wireframes (You are here)
Part 4 – The Artwork
Part 5a -The Code (Xcode, GIT, and Core Data)
Part 5b – The Code (Coffee sharing and Camera functionality)
Part 5c – The Code (A change in workflow)
Part 6 – The testing
Part 7 – The Final Artwork
Part 8 – The Marketing
Part 9 – The Launch
Part 10 – The Numbers
Part 11 – The Postmortem
(Bonus) Part 12 – A review of the process
(chicken wire image courtesy of nanimo)