Its time for the fourth post in my App Development series. Last week I covered the wireframes, this week we move on to Artwork.
Why do we need Artwork at this stage?
I think its important to produce some art assets before launching into development. Creating some initial artwork helps to drive the overall look and feel of your App. In the case of my Coffee App I’ve just created a first pass of the Coffee cupboard screen. This is the landing screen for the user when they first open the App so it’s extremely important that this delivers the right message. Subsequent screens will need to fit with the aesthetics of the cupboard screen.
I’ll create the artwork for the other screens during development. This should be more efficient since I can react quickly to design changes as I’m developing the App. I think this is a good approach since investing too much time in artwork now could result in lots of scrapped work.
Mood board
Mood boards are a good first step before producing artwork. They help to define the look and feel of the App (particularly colour schemes). There are a number of ways you can produce a moodboard; if you want to keep it authentic then grab a large piece of paper and start pinning to it scraps of paper, notes, pictures, and anything else that you feel captures the mood of your App.
For this project I went slightly more high-tech and used an excellent iPad App called moodboard. It allows you to easily “cut out” images from around the web and stick them to a virtual cork board. It also has facilities for notes and colour palettes. Heres the mood board I created for my Coffee App…
The Coffee Cupboard Artwork
I’ve only produced the work-in-progress artwork for a single screen, the Coffee cupboard. As I mentioned above, this should be sufficient to get me started with development and I can then create the rest as I go. I created this screen from scratch in Inkscape (an excellent, free, vector drawing package) using my Wacom tablet. There are several advantages to using a vector drawing package (as apposed to raster images)…
1) They are resolution independent – that is, they scale without losing detail. This is a huge boon when developing an App for multiple resolutions (iPhone and iPhone 4 in this case)
2) They don’t require you to have amazing freehand drawing skills, since you’re composing images from a series of basic shapes.
You can see the general look and feel I’m going for with the Coffee cupboard screen below. The hessian sack is only partially complete but, in the final App, you’ll have a variety of Coffee receptacles to choose from. This screen is the central hub for adding new Coffees you’re tasting and beginning your tasting experience.
Next time
This is actually my last #iDevBlogADay post for a while so you won’t be able to access the rest of this series via that feed/site/hashtag. I’ll be continuing to develop my Coffee App and blogging about it here. If that’s something you’re interested in, please consider subscribing to my RSS feed.
The next step for this App is the most exciting… the code. I’m afraid I won’t be sharing all of the code with you, however I am going to aim to blog about interesting elements of the code as they pop-up. I’m thinking of things like Core Data and Interface building with the newly released Xcode 4.
I can’t guarantee weekly posts on the code but I’ll try to write regular updates on the project. After the code, we move on to polishing the final art, user testing, and then marketing. See you soon.
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
Part 4 – The Artwork (You are here)
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