Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curate, filter & sketch

1,604 views

Published on

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.

On the slide where I pasted and highlighted Steve Jobs quote, please ponder on the word experience, how many time it appears and how much it was emphasized in his speech.

Assuming that you have already done your user research and at least a little bit of competitive analysis, in this presentation, I will share my Curate-Filter-Sketch approach that I use every day to sketch interfaces for new as well as existing apps.

It is based on my article published at Oobly in August 2011.

Published in: Design, Business, Technology
  • Be the first to comment

  • Be the first to like this

Curate, filter & sketch

  1. 1. Curate, Filter & Sketch Sketching App Interfaces @mmudassir http://www.qurtaba.net mmudassir@qurtaba.net ht Mudassir Azeemi
  2. 2. Blank SheetYou have an idea, time is short, now where to start from?A kid gave his teacher a blank piece of paper. Teacher: What is this? Kid: Its a drawing of a cow eating grass.Teacher: (looked at the paper) Wheres the grass? Kid: The cow ate all of it. ...Teacher: (looked at the paperagain)Then, wheres the cow? Kid: It left because there was no more grass.
  3. 3. Draw Grass & Cow● Lets draw by following the Universal Rule of Design - "Good artists copy, great artists steal" Curate Filter Sketch
  4. 4. Creativity is just connecting things. When you ask creativepeople how they did something, they feel a little guiltybecause they didnt really do it, they just saw something. Itseemed obvious to them after a while. Thats because theywere able to connect experiences theyve had andsynthesize new things. And the reason they were able to dothat was that theyve had more experiences or they havethought more about their experiences than other people.Unfortunately, thats too rare a commodity. A lot of peoplein our industry havent had very diverse experiences. Sothey dont have enough dots to connect, and they end upwith very linear solutions without a broad perspective onthe problem. The broader ones understanding of thehuman experience, the better design we will have. -Steve Jobs
  5. 5. Step 1: Curate● Create two list: Best Apps & Worst Apps● 10 apps per list - can be less (depend on app type you are building/drawing)● Identify list of apps that matches from 40% to 60% of your app strategy● Be curator, do not be a hoarder● Best place to start: ○ It is not App Store ○ dig them: ■ pttrns.com ■ mobile-patterns.com ■ lovelyui..com
  6. 6. Step 2: Filter● Dissect the required UI elements from the list of apps you created - Simply do not try to reinvent the wheel.● Evaluate the UI element by Dieter Rams Design Principles ○ For starters, these 3 principles are good enough. ■ “Good design makes product useful” ■ “Good design makes a product understandable” ■ “Good design is honest”
  7. 7. Step 3: Sketch● Start your initial sketching according to the visual inventory that curated in previous steps● Paper & Pencil should be your first choice - Lo-Fidelity● For games, model it using Styrofoam, Paper, Glue and Markers!● Photoshop, Illustrator, Maya etc should come after your lo-fi paper prototyping - Hi- fidelity
  8. 8. In the end● Curate, Filter and Sketch is the quickest approach to grab the idea and turning into a complete visual form.● Design is an iterative process - So dont settle for the first-cut● Thrive for the gradual improvement● But remember.... "Real artist ship"
  9. 9. Thank You Mudassir Azeemi @mmudassir http://www.qurtaba.netmmudassir@qurtaba.net
  10. 10. Resources● (read) Curate-Filter-Sketch: The Way I Design App Interfaces - http://oobly.com/2011/08/23/curate-filter-sketch-the-way-i- design-app-interfaces_409/● (read) Steal Like an Artist - http://www.austinkleon.com/2011/03/30/how-to- steal-like-an-artist-and-9-other-things-nobody-told-me/● (read) First Principles of Interaction Design - http://www.asktog. com/basics/firstPrinciples.html● (read) Dieter Rams 10 Design Principles - http://www.bongeek.com/wp- content/uploads/2011/08/Dieter-Rams.pdf● (watch) Everything is a remix - http://www.everythingisaremix.info/watch- the-series/● (watch) Cupcakes: the secret to product planning - http://adaptivepath. com/ideas/cupcakes-the-secret-to-product-planning

×