After nearly 6 months of effort which has seen us produce a solid plan, create a design doc, produce wireframes and workflow, create initial artwork and a moodboard, develop the App, and complete a full beta testing process; Coffee Cellar is finally ready for submission to the App store!
But the story, and my guide, is not quite over. My App still won’t see the light of day for another 2-4 weeks. My next focus is on marketing. In my next post I’ll discuss what my marketing efforts entail. After that we really will be “done” (for now) and will get to see how successful the App is in the App store – this will culminate in a numbers post, a postmortem, and a project wrap-up.
For now though, lets bask in the satisfaction of completing a project. This post will focus on the final artwork.
Tools
The tools you choose should normally be driven by what you are trying to produce (although experimenting with tools outside their normal use can produce interesting results).
For my coffee App, I had two main focuses. First, I wanted the App to have a semi realistic look, and secondly I wanted resolution independence (to easily scale my art assets for different screen sizes).
I have a number of go-to art packages, from raster software such as Pixelmator and Photoshop Elements, to vector software such as Inkscape and Opacity. I also have some more interesting tools such as Alchemy and Sculptris (both really fun).
For my App, Inkscape seemed like an ideal fit. I’m becoming increasingly more proficient with it and now find its interface easy to navigate. I may look into Adobe Illustrator at some point soon but once you learn an interface, switching can be rather painful.
Iteration
In the image above you can see how the cupboard screen evolved. There were many more iterations than shown here but these are some of the more interesting ones. From the early placeholder graphics through something with a little more form, onto the cobweb stage (hmmm not quite hitting the right note) and at last the final version.
My approach to producing the assets for my App was to iterate each piece of artwork throughout the development period. As I introduced functionality I created basic assets for it and then iterated on this as I tested the App. The workflow was something like this…
1) Produce a first pass at an asset in inkscape
2) Export to Xcode and test in the simulator
3) Tweak artwork
4) Test on hardware device
5) Tweak artwork
There are essentially 3 testing processes here. I had a single inkscape file for each of my screens and built each screen visually in inkscape so the first test was often in context. The second test was in the simulator itself and this would often result in changes because what feels right in the art package doesn’t always work well in the App (when interaction is added). The final test was on the hardware itself. Obviously, depending on your computer screen resolution, seeing art assets on the device itself results in significant changes (usually in scale, colours, and font sizes).
The Cupboard
The cupboard is the first screen you see when opening the App. Its here, that you’ll collect all of your coffees. This screenshot also shows each of the five icons that you can choose from to represent a coffee in your cupboard (I plan on adding to, and improving, these icons). What isn’t obvious from the screenshot is that the cupboard can be scrolled vertically by dragging your finger, thus you can have as many coffees as you want.
Adding a Coffee
You’ll use this screen when adding a coffee to your cupboard. It utilises a slightly modified version of the panels that I created for the cupboard in addition to introducing a paper-styled background for presenting text (this theme runs throughout the App).
Viewing a Coffee
This screen is one of the more visually interesting screens since it incorporates stars for rating the coffee as well as a polaroid styled image. The image used for the polaroid is set in the edit screen (either via your built-in-camera or photo library). Tapping the polaroid expands it (as shown below).
Editing a Coffee
Editing a Coffee takes you to a scrollable view that allows you to update the coffee’s details, along with setting an image, modifying its icon, and deleting the coffee (further down the page).
Tasting Notes
The tasting notes screen is something that I will be improving in subsequent updates. It certainly achieves what I set out to do but I feel it could be improved further (especially from a visual point of view). Tapping a word will bring up an action sheet that allows you to delete it.
Preparation Notes
Preparation notes offer you nothing more than a blank sheet of paper to write your notes. Visually, this is the weakest screen of the App and again, something I’m likely to improve in future updates.
Sharing a Coffee
Sharing a coffee triggers an actionsheet popup (I’ll likely expand on these sharing options in future). The screenshot below shows what happens when you tap email (You can see all of the coffee info along with links for importing and buying the coffee). If a user clicks a link to import and owns the App, the coffee appears in their cupboard with a “shared” icon.
Searching for Coffees
I’ve customise the UITableView to fit with the aesthetics of my App. You are first presented with a list of search criteria and can drill into each of these to select values. The values are then show beneath the criteria titles. Tapping search will bring up a cupboard with the results of your search (presented as Icons in the same way as the cupboard screen works).
The More Screen
The more screen is simply a list of miscellaneous actions. A screen containing information about the App, an option to send me a support email, and a link to my website.
About the App
This screen is an attempt to add a personal touch to the App. I’m still a little unsure about it but I wanted to share a brief explanation with the user. It also contains an option to review the App or Gift it to someone else.
The App Icon
Creating the App Icon was fun. I went through about 5 iterations and had lots of feedback from fellow developers. In the end, Lazrhog, pointed me in the right direction by suggesting a cup that fills the icon space. You can see the final design (along with the iterations below).
I Hope you enjoyed this look at the artwork for Coffee Cellar. My next post will be about marketing so be sure to check back soon. As always, comments welcome below.
Part 1 – Doing it properly
Part 2 – The Design Document
Part 3 – The Wireframes
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 (You are here)
Part 8 – The Marketing
Part 9 – The Launch
Part 10 – The Numbers
Part 11 – The Postmortem
(Bonus) Part 12 – A review of the process