Sketching tools for iPhone applications

Sketching is not necessarily done on paper, but most of the tools I found are for paper sketching purposes. I must say most of them work well, for me there’s not much reason to buy sketchbooks and stencils since the free printable stuff is just as good or even better. Go see for yourself which suits you best.

iPhone Application Sketch Template by Oliver Waters

My favourite iPhone sketching paper, because of it’s simplicity. Grid squares are equivalent to 10px, and tick marks indicate the heights of the status bar, nav bar, keyboard, tab bar and toolbar. Oliver put it on Flickr, it’s a downloadable jpg and it’s totally free.

NotePod iPhone sketchbook by Jacky Winter and Inventive Labs

A sketchbook which is the size of a real iPhone. While sketching I don’t find these really useful because of it’s size. It’s really hard to get a nice grip on this paper and there’s hardly any space for annotations. It’s size could come in handy when you’re performing a paper prototyping user test since you don’t have to slice all the different screens out of a bigger paper. But for sketching ideas I don’t think it’s really practical. Costs: $17.95 (3 sketchbooks).

iPhone UI Stencil kit stencil by Design Commission

This stainless steel stencil and mechanical pencil do come in handy when you want to draw an iPhone shape on blank paper. The stencil is made of stainless steel and is thick enough to draw pretty accurate. I’m sure you won’t use most of the icons and symbols and you’ll be missing quite a lot which you DO want to use. Most of the sketching I do myself is freehand anyway, using the template for icons and symbols slows you down in many occasions. Only when you need to draw something really accurately this tool will help you out. Costs: $17.95 (stainless steel stencil, zebra mechanical pencil and free downloadable templates.

iPhone Sketch Pad sketchbook by Design Commission

This SketchPad goes really well with Design Comission’s iPhone UI Stencil kit. But the templates are downloadable on their website as well, which allows you to print them by yourself. $7.95 (50 sheets, 70 lb paper).

App SketchBook sketchbook by Stephen Martin

These sketchbooks are pretty simple, and that’s what I like about them. Every page has 3 real-size templates on it, they’re printed double-sided and the book contains 50 pages. Costs: $9,95.

iPhone Mockup online sketching tool by Lukas Mathis

This is quite a nice tool, you can choose to use a sketchy or a solid template to design your iPhone mockups. The engine contains most standard iPhone widgets and you can upload your own. This sounds pretty cool, but uploading is quite a job because you will have to sketch or design your widget in another tool. This tool is only usable when you use standard iPhone widgets and share them online. There is no way (yet, they’re still in Alpha) to export or print images unless you draft your own screenshot. It’s free and it works smoothly. Thanks to Timothy van Sas for spotting this one.

Wireframing tools for iPhone apps

There’s some really neat wireframing tools around for iPhone. Honestly I don’t use these very much since I prefer using digital prototyping tools in which I can create my annotations on-the-fly. I found that a digital prototype is great tool to both test a tool, but also communicate my intentions with it to developers and stakeholders.

Ultimate iPhone Stencil for Omnigraffle by Patrick Crowley

A rather high-fidelity stencil for OmniGraffle to wireframe your iPhone applications. Great stuff when you need to present a new app to your client. It’s easy to make the application look visually appealing with only a bit of effort. In Omnigraffle it’s easy to import or create your custom widgets.

iPhone 3G Stencil for Omnigraffle by Theresa Neil

Also a high-fidelity stencil for Omnigraffle. It’s updated up-to iPhone 3GS and iPhone OS 3.0. I’ve used these stencils for a while but I feel I have to start over when I want to make a decent prototype out of it.

Visual design templates for iPhone apps

Apple’s iPhone SDK makes it really easy to play around with all standard iPhone widgets but in order to visualize your interactions and be able to quickly add or remove some custom stuff it really handy to work in Photoshop or Fireworks. Below you find the tools that I found during my short search a while ago.

iPhone GUI PSD 3.0 Photoshop Template by Geoff Teehan

This is an awesome PSD when you need to pitch for a client and you want to mockup something really quick which looks slick anyhow. Geoff did a great job on this one. The whole PSD has vectorbased elements which are neatly layered and organized. I’ve used this one for two projects now (including Usabiltyweb’s new iPhone app) and it helped me ot greatly.

iPhone interface PSD file Photoshop template by ThreeTwentyFourEighty

I came across this one while writing this post. I’m not sure about the quality of it. Perhaps when Geoff’s PSD isn’t sufficient for your needs you want to check this one out. Let me know what you thought of it.

Fireworks toolkit for creating iPhone mockups Fireworks template by MetaSpark

I usually design my apps in Photoshop but I decided to check this one out. It’s great tool when you are used to design in Fireworks. All elements are vector based. Later on I’ll talk about a great Fireworks plugin which allows you to create a clickable prototype out of this one.

Digital prototyping tools for iPhone applications

Now that you’ve sketched your ideas and described/visualized your intentions you may want to feel the application or test it with real-life people. The most effective way to this is to test the application with a digital prototype (preferrably on an iPhone). There’s several powerful tools that can help you out.

Prototyping for the iPhone using Fireworks Fireworks plugin by Unitid

This plugin by Unitid was developed for you to create clickable prototypes out of your Fireworks mockups. I don’t create web and mobile mockups in Fireworks but the demo they show on their website works really well on my iPhone. I’m not sure how much work it is to do the trick but it looks like a great tool to extend MetaSpark’s Fireworks toolkit.

Balsamiq online protoyping tool

Balsamiq is both available as a desktop or webbased version. The desktop version will cost you $79 dollars, which is great value-for-money when you are on the road a lot. When you work mostly in your own office and have a steady internet connection the webbased version is just fine. Balasamiq recently added simple interactions which makes it possible to test your mockups with real users. The only downside I can come up with is that you can’t draw custom widgets in the application itself.

iPlotz online protoyping tool

My colleague Wopke recently recommended me to use iPlotz as an online prototyping tool. I had never heard of this tool before but it works really well. When you got used to working with Balasamiq or Protoshare already, then there’s no reason to switch, but it’s just a fine app to design you iPhone mockups since it has a whole set of iPhone widgets.

I haven’t tried to be complete here, so you may very well have additions to this. Please don’t hesitate to post the tools you use as a comment below.

Technology frustrates

We started by explaining how technology frustrates. When we take a careful look-see around us we will find a lot of usability errors within no-time, both on the internet and in the real world. For Concept7 this is a reason to make stuff simpler for our clients’ client.

In order to do that properly we have to get to know these people. We need to know what they think and do, know what motivates and frustrated them. To make really good stuff we need to get inside their heads, learn to think as people do.

Idea generating inside a framework

Besides observations (practicing usability research) a framework (we mostly use an MBTI based framework) could really help us think from a another person’s point of view. We think this is absolutely necessary to create high quality digital product.

In order to find a good idea we think you need to generate at least 10 other ideas. The good thing about generating many ideas is that every single idea costs almost nothing, chances increas we find the best idea and by showing our ideas to others we may inspire others to find an even better idea.

We believe sketching (visualizing your ideas) can help you get your message across a lot. Our brains our way better in processing images than they are in processing written words. Visualized ideas are much stickier and can be found back much ieasier.

It’s hard to get started

After we’ve shown that everybody can sketch it’s still hard to come up with ideas when thinking outside the box. Imagine you have come up with a new business idea within the coming 20 minutes, just like that. That’s practically impossible…

What do Lego, Häagen-Dazs and Spiderman have in common?

They all thought of something wonderful for children and made a product for grown-ups out of it. Lego recently introduced Lego Mindstorm which is used by child-grown-ups to build real Lego robots.

By setting up a framework: ‘Create a product for grown-up’s by thinking of something that’s wonderful for children’. They managed to get a stream of ideas coming. They weren’t thinking outside the box but inside the box.

During our lecture, students were asked to redesign the search result page for a comparison website for home-delivered meals (ThuisBezorgd.nl).

Every we time do these kind of sessions we are amazed by the number of ideas people come up with. People who have never designed a website before come up with amazing solutions. The end-result of the lecture was really diverse and we think the students created a really good foundation to raise the conversion of ThuisBezorgd.nl.

Photos of the workshop for an impression of what happened during our lecture.

Slides of our presentation

You can describe a design challenge on every piece of sketching paper which represents the problem you want to solve. There’s also some space for annotations.

Design for all buying modalities

The sketching paper helps you think from all buying modalities’ point of view. The paper contains a matrix in which you find an axis with a line from quick decision making to slow decision making and an axis with a line from rational decision making to emotional decision making. Every corner of the matrix represents a buying modility (personality trait).

Competitive

The competitive type is a someone who is a quick decision maker and bases his decision on factual information.

Spontaneous

The spontaneous type is a someone who is a quick decision maker and bases his decision on feelings.

Methodical

The methodical type is a someone who is a slow decision maker and bases his decision on factual information.

Humanistic

The humanistic type is a someone who is a slow decision maker and bases his decision on feelings.

No stereotyping

Don’t see a personality trait as a single individual. You’re never only a competitive person, only some people are in some situations more competitive than others are. It could very well be that someone is at some moment a more methodical type, but when this person realizes he’s in a hurry he can turn more competitive because his situation pushes him in that direction.

The above doesn’t really matter here, because during ideation we DO want to solve problems for all of the personality traits.

Sources

Sceencast: Does your site appeal to all buying modes?

The framework distinguishes four types of people: competitive, spontaneous, humanistic and methodical. By solving design issues for all these types of website users we can be sure to cover a wide variety of perspectives while easily coming up with great sketches and ideas.

Imagine we’re challenging ourselves to design a solution for a person who has no idea which mp3 player to choose at an online store.

Competitive

According to MBTI this person would be the NT (iNtuitive/Thinking) type. These people prefer to decide quickly, their choice is mostly based on facts. If he would ask himself a question it would definately start with ‘what’.

Solution: A design solution for this type of person would be a lister page with short summaries (they don’t need more information to decide) and a quick buying button to get it over with.

Spontaneous

MBTI describes these persons as the SP (Sensing/Perceiving) type. They act quickly and their acts are based on feelings. If these people would ask themselves a question, it probably start with ‘why’.

Solution: A design solution for this person could be highlighting one product from the list as a special discount. This will definately appeal to them.

Humanistic

The MBTI would call this person an NF (iNtuitive/Feeling) type. These people follow their feelings and emotions, just like the spontaneous type. The humanistic type takes a lot more time to make a decision. In order to gain this person’s trust we need to do a little more effort. They’re very curious about what other people think of the product and about who sells it. If this person would ask himself a question it probably start with ‘who’.

Solution: An idea for the humanistic type could be a testimonial or a client quote. Also a reviews section would help this person decide.

Methodical

According the MBTI this is the SJ (Sensing/Judging) person, a slow decision maker who keeps looking for factual information. He wants to read and compare every detail before deciding which product he’ll choose. If he would ask himself a question it would probably start with ‘how’.

Solution: A solution for this type of person could be a comparison function. The comparison table would show all factual data of the product so our website visitor can take a comprehensive look before he decides. He probably wants to print all specs so he can take a look later on.

Brief history of MBTI

The base for this framework was originally invented by Carl Gustav Jung, he was a Swiss psychiatrist, an influential thinker and the founder of analytical psychology known as Jungian psychology.

In Jung’s book ‘Psychological types’ 1917 he describes four core types of human personality: thinking and feeling, perception and intuition. For each of the two sets, one type is dominant for every certain person. Besides these four types he distinguishes whether the person can be considered introvert or extravert.

Later Katharine Cook Briggs and here daughter Isabel Briggs Myers developed the Myers-Briggs Type Indicator (MBTI) which classifies sixteen types of personalities. Their system is mostly used to describe team member’s role during a teambuilding proces. We stick to the main four personality types.

Sources

Myers-Briggs Type Indicator on Wikipedia
Sceencast: Does your site appeal to all buying modes?

Storing and finding back these ideas can sometimes be a real hazard. Even though we as human beings are much better at recognizing visuals cues above written documents there’s not so many storage materials and furniture available to help us efficiently store and refind the paperwork.

At Concept7 we think we’ve found a solution for storing the most common forms of sketches and prototypes.

• Idea sketches
• Magnetic strips to carry sketchboards
• Sketchboard carrier to store old sketchboards
• Concept7 sketching paper
• Archive boxes to store idea and concept sketches

Idea sketches on flickr.com

We photograph every idea sketch that is made during a session right after the ideation session. On flickr.com we create a private group for every project we work on. We tag the sketches with a tagstructure based on the framework we used to generate the sketches in the first place. A good tagging structure helps us find back sketches very quickly.

Once the best ideas are picked we hang these sketches on our walls so we can easily see context between them. Some time ago Adaptive Path coined the word and technique sketchboard (movable sheets of paper containing idea sketches), a technique we’ve adapted and use almost daily during the ideation and prototyping phase.

Sketchboards attached by magnets

We use magnets and metal strips on the wall to attach sketchboards. Even though it’s good to hang these sketchboards on your office’s wall, it’s sometimes handy to put them away when working on more projects at the same time. Also when finishing up a project it can be handy to put them away but not too far so you can reach back to them. Magnets allow us to easily remove and attach these sketchboards.

Sketchboard carriers

We’ve designed sketchboard carriers which can contain approximately 20 sketchboards at a time. Only sketchboards we’ve stopped working with for a long period will be stored permanently. By rolling the sketchboard and writing the project title on the outside we can easily grab back to older sketchboards.

Concept sketches in archive boxes

When we present concept sketches (or paper prototypes) to our clients we use our A3 concept7 sketching paper. We keep the originals at our office. A paperclip is used to wrap them together and a post-it serves as a label, concept sketches are labeled with a project title, and a date stamp. The idea sketches we’ve created (and photographed) earlier in the process also fit very well in these boxes.

These days our offices look a bit cleaner than they used to…

It was in the beginning of november last year when I was asked to lead three dream team design sessions for a large Dutch company. The problem we had to deal with was an information architectural problem on their website.

During the weeks before my design sessions they had four other dream team sessions. Target groups, company targets and user tasks had been defined already.

Our aim for the first design session was to generate ideas on how to lead visitors to their desired chunk of information.

Who attended?

Other people attending the dream team sessions were Mark (communication expert), Ronald, Jill, Monica (content writers), Brian, James (web designers) Rose and John (website users) and our very own Wout (UI Designer).

Errhm, Henk, there’s something else…

A few days before the meeting Mark called me to talk over the last details before the sessions. He also mentioned the rather negative spiral in which some of the team members had gotten during the last couple of months. Doing a redesign every year doesn’t work well on everybody’s temper.

That’s swell, now we not only needed to solve an interaction design problem but also had to deal with motivational issues.

We are smarter than me

Before these kind of sessions I make sure there are enough pencils and sketching paper for the whole team to let everybody draw up their ideas once something pops in their mind.

I’m not yet sure which amount of session members is most effective, but for now I’d say 5-9 persons gives best results. The reason why I like to do these sketching sessions with so many people is that I believe the influence on one another is so positive that it definitely affects the outcome of our session.

My colleague Stefan received a mail from Hans Appel the other day who stated: ‘We are smarter than me’. Although he mentioned them in a totally different context I think these words, especially during this occasion are worth a fortune.

During the beginning of a session there’s always a few people jumping up and sketching everything that pops up in their minds. Recently I’ve read Dan Roam’s book ‘The back of the Napkin’ who divides ideation teams into three groups (black pens, yellow pens and red pens). People jumping up and confiscating the pen are ‘black pens’. Let’s say Ronald and James are black pens, definitely…

While Ronald and James were painting our whiteboard I watched Jill, Rose and John scribbling on their own sketching paper. Other’s were discussing Ronald’s sketches and started drawing improvements on his ideas.

After 2 hours of sketching I found the team had been working together really well and the output was great. We had generated an enormous amount of great ideas in a really short period of time.

The day after our session Mark called me to say how amazed he was about the output and the way people went along.

The more the merrier?

The more team members we have working on the ideas and sketches, the more issues get mentioned. This is something we rarely find during other methods. We can say it’s one of the best tools to promote team collaboration.

Sketching creates friendships

Well, friendships… There’s something about co-creating that stimulates teamwork. Most probably the effectiveness of a sketching session makes that people really work well together. It’s not that we have to get really into detail, and not really anything is wrong. It creates a relaxed but still productive atmosphere.

Jared Spool says in one of his recent articles on his UIE website: “A development vice president once told me he was astonished at how quickly we got his developers to “play nicely” with each other once they started building and testing paper prototypes. He said he’d been trying unsuccessfully for months to get them to work together.”.

The re-interpretive cycle of our thinking process works like this. We look, we see, we imagine and we show.

I believe that by showing our ideas, we support a re-interpretation of each other’s ideas. Something we could never achieve this effectively by only using words.

Sources

van der Lugt, R. 2002. Functions of sketching in design idea generation meetings. In Proc. C&C ‘02, ACM Press, 72­79.
Looking Back on 16 Years of Paper Prototyping
Paper Prototypes: Still Our Favorite
Paper Prototyping

Sketches enhance accessibility of earlier ideas

Easier access to earlier ideas stimulates the use of those ideas. Besides that it’s easier to use other people’s ideas which were generated during earlier sketching sessions. Storing sketched ideas stimulates team collaboration.

Transition from words to visuals

Interaction designers usually have a variety of backgrounds. Many only express themselves by written documents. Most think it’s about making beautiful stuff. Sketching in this phase has a much more rationale purpose. It’s not about making eye-candy.

The trick is to make the transition from words to images, that’s a mind-set. Instead of opening you laptop and tracking ideas in your text editor make sure there’s enough pencils and paper around for all group members to draw their ideas.

Sources
Potter, M. C. & Faulconer, B. A. (1975). Time to understand pictures and words. Nature, 253, 437-438. 21.
van der Lugt, R. 2002. Functions of sketching in design idea generation meetings. In Proc. C&C ‘02, ACM Press, 72­79.
Image by Mike Rohde

I decided to base the grid on a 4 pixel interval, every 4th gridline (every 16th pixel) is a fatter line. This makes it easy to create 3 column (320px), 4 column (240px), 5 column (192px), 6 column (160px) grids on one type of paper. The screen is 960px wide.

I hope you’ll all enjoy this sketching paper, I will create an A4 version in the coming weeks.

Concept7 A3 sketching grid paper (290Kb, PDF)

The sketching paper still goes well with 960.gs’ other templates.