The author, Mudassir Azeemi, is the founder of Qurtaba, a company that helps you materialize your ideas into mobile applications and designs products through collaboration with their clients, seeing themselves as design and development facilitators. Learn more about Qurtaba here.
At first, sketching a new user interface from scratch in an agile environment looks pretty daunting. It’s like a blank sheet staring back screaming
I am about to suck your soul!
This is especially true when we are looking for some fresh, exciting user interface ideas for our apps, without a whole lot of time in which to accomplish it.
Assuming that you have already done your user research and at least a little bit of competitive analysis, in this post, I will share my Curate-Filter-Sketch approach that I use every day to sketch interfaces for new as well as existing apps.
In this context, a quote is in order.
No idea is original, what makes the difference is the way you did it
Step 1: Curate
The first step is to create a curated list of the best and worst apps. I recommend a minimum of 10 apps for each list because that is the ideal number to ignite the creative-brainy-bits in your head. So identify a small list of existing app interfaces that match about 40% to 60% of your app strategy.
Be harsh and curate them mercilessly, don’t be hoarder.
I say this because there are thousands of apps out there that may look similar to your app and you might get lost in the process. So try to categorize apps into 2 lists
a) Apps that rock i.e. apps that have got top ratings and great reviews.
b) Apps that suck i.e. apps that have low ratings with the worst reviews.
Sometime searching the Mobile App Store (The App Store / iTunes, Google Apps Marketplace, Windows Market Place) might be too time-consuming and ultimately overwhelming. To save time I use a few select websites to get an idea of the UIs.
Here is that list.
Step 2: Filter
Now that you have created a curated list of (at least) 10 of the best and 10 of the worst UIs, dissect the required UI elements from the interfaces and evaluate them using Dieter’s 10 Design Principles (pdf download).
After you’ve filtered the elements of UI using Dieter’s 10 Design principles, the next step is to actually apply your findings to your design.
In this context, I use a very simple formula. I don’t try to “match ALL the principles” because that would be a little too much for quick prototyping. Also remember that design is an interactive process, with gradual improvements applied during each iteration.
So I keep just the following 3 principles handy and make them a “required” principle for every UI element I design:
- “Good design makes product useful”
- “Good design makes a product understandable”
- “Good design is honest”
For starters, these 3 principals are good enough. You can always add or conform to more principals later.
So if I take an example of an action bar design, here is what I would have in terms of a curated “visual inventory”.
Step 3: Sketch (in Hi-Fi Mode)
The last part is the sketch part. Everyone has their own preferences w.r.t. sketching tools, so I won’t tell you how you are going to sketch. That said, I would like to give you recommendations on a few sketching tools that I always keep handy and use them according to what the situation demands:
A) Sketchbook and Pencil – An old-school way to sketch your findings from Step 1 (Curate) and Step 2 (Filter). If you don’t know how to sketch, then check out the book “Ed Emberley’s Drawing Book: Make a World”
B) If your paper and pencil sketching skills are horrible (like mine are) then software and online sketching tools like Balsamiq, Pencil, iMockup (itunes app, for iPad only), Blueprint (iTunes app) are your best bet.
C) If you are a Photoshop guru, then there are several templates available for you to work with.
D) Finally, if you really don’t feel comfortable sketching with pencil and paper, and also shy away from wireframing tools, PhotoShop there is still a hope for you. Tools like Wireframe Toolkit for Keynote and Keynotopia are two excellent add-ons that you can use inside PowerPoint or Keynote (Mac only) to quickly get your app interface ideas from your brainy bit to the visual form.
I presented you with the three simple steps – using my Curate-Filter-Sketch approach – to help you quickly “grab” your thoughts and put them in a visual form. These steps are very flexible and can be adjusted according to the agility needs of your project.
Although Dieter Ram’s 10 Design Principles were for originally made for Industrial Design, they are applied everywhere, including in software application design and mobile apps design. Evidence of these principles in action can be seen in Target’s Store Design, in Ikea products, and now in the iPhone and iPad too.
I hope this will continue to inspire the app designers everywhere.