I spend a lot of time sketching interface ideas on paper. Typically I sketch wireframes and storyboards on graph paper, then redo the final documents in OmniGraffle. But lately, I've been using paper for more than just sketching. Now, after spending time sketching ideas and working out design issues, I start to do higher fidelity drawings on paper, scan them, post them to our system. We discuss and iterate, and the process repeats until we're happy, and I spend less time pushing pixels around.

As a result of this method of working, I've been wanting my graph paper to be more suitable to the way I work and the kinds of drawings I do. So I've come up with the different types of graph paper. You see here. You'll find styles for wireframing user interfaces, story boarding interaction, and plotting values based on simple criteria using a two by two grid. We throw in a basic grid got anything else that might come up.

These pages are great for sketching, but also work well when producing high fidelity drawings. The title bar and grid lines are photo-safe, so they won't show up when you scan them into your computer. The thick black lines for boxes will show in scans and are 2px wide to match the weight of Pentel Sign Pens.

So if you're interested, find out more about Konigi Graph Paper or download these for your self.

One of the things I enjoy most in life is spending time with my 7 year old son drawing. We draw everywhere and anywhere. For him, it's an extension of this fantasy world in stories that he creates with my wife and I, where each of us acts out different characters. Sometimes we do it with action figures, other times with character cards (Pokemon), with drawings we create, or just walking around telling stories out loud.

I love the story telling, but what I really enjoy most is when we create these characters on paper. One thing I've always done with him is to show him characters in different states of emotion, sometimes putting them in comic strips. The simple way is through the eyes and mouth. A drawing teacher I once had, who taught Manga cartooning illustrated this clearly to me, and I passed it to my son.

One day, he was telling stories with this Ugly Doll, named Chuckanucka, and through the story the character went through several emotions. He started showing them by doing the lines we use over the eyes using his fingers. I thought that was pretty cool.

Sometimes you gotta make wireframes look real. This is a graphic for positioning in a page about Soap Operas.

This is pretty cool. Tina pointed to Vector Magic so I ran an old notebook sketch through it and it produced this as a vectorized drawing in EPS, SVG and PNG formats.

All drawn in OmniGraffle. No bitmaps. I'll release a stencil for these soon, to accompany the Wireframe Shapes stencil.

I'm taking a class on the art of creating comic books. I'm focussing on Manga and will be creating an ashcan, a small self-printed comic book. What's interesting to me is that reading comics seems to be affecting the way I visualize and compose layouts.

The visual language of comic pages, much more than the creation of single scene compositions in fine art drawing and painting, are having much more of an effect on the way I see and feel objects in flat space. Strange. Yes, I've read Scott McCloud's books, but reading those books as an intellectual exercise are nothing like playing with layouts of your own comics.

Still struggling with a synopsis for the book I will create. The drawing above is of a recent brush with a rodent in a garbage can. Ah, the joys of city living. The size is a bit exaggerated, obviously. For years, I'd have these ideas about a character I'd like to write a novel for and am thinking of using him as my Manga character. More to come on that.

I spent a little time today watching Bill Buxton's Nov. 2006 Boston CHI presentation on sketching. Buxton talks about the distinctions between sketching and prototyping, in orderto discuss why sketches are valuable and need to be emphasized during the design process.

I was intrigued by what he calls the right process for ideation. When speaking about the sketching process for industrial designers, he says that designers need to come to the review table with 5 sketches, of which she cannot have decided in favor of any one. This practice contrasts with the method of doing 1 design and iterating over it with usability improvements, what he calls a spiral process in a single direction. The purpose of sketching is to find the right design, and the purpose of prototyping is to get the design right.

This doesn't say that usability testing and prototyping is wrong, but the approach to getting the right design is a process of sketching and critiquing, and it's an essential part of the process of generating ideas and is a bridge between ethnography and prototyping. By bringing out 5 sketches, you work on multiple directions in parallel until you find the direction that is best suited to the problem -- the one that is "right."

I've always used sketching to find the right design, but rarely showed the sketches, tending to simply discard the ideas that don't work and using finished wireframes and storyboards created in Visio or OmniGraffle for the team critique. But that goes against the purposes of exploring ideas as a team, I suppose, if the team never gets to see them. After hearing this presentation, I wonder what is being missed by not sharing more of the sketches. Often times, the ideas are generated in discussion while I sketch at a meeting or conference call and then I flesh the sketches out on my own, exploring different alternatives. But my team usually only sees what I deliver in the document created in the drawing tool.

This is one of the downsides of working in different locales and relying heaviliy on technology. I've become accustomed to deciding on and refining designs and quickly putting them in a drawing program, so the decision making process of sketching never gets seen. I've talked to a colleague about how to get my sketches to the group, and am considering the process of scanning and distributing sketches as PDFs, but this adds so much time and effort to the process.

When we talked about doing this, I though the value of scanning drawings would be for me to save time by skipping the wireframing part of the process when I could so we could work with agile methods. But I'm beginning to see that the problem is not the effort to do the wireframes. I think I'll always do them as part of the process. The problem is that the sketches aren't being seen enough and that people need to see the low fidelity creative part of the process in order to push the design direction in as many ways as possible and drive innovation a bit more. This, as I'm sure other designers know, is hard to do with finished looking documents.

I stumbled across the Pen-It device, which takes sketches and transfers them via Bluetooth to your Mac as vector drawings. I'm going see how I can make pencil sketches a more visible part of the design process with the larger team again. In any case, I expect to try to tweak my process a little to make more of the idea creation visible, so that sketches and annotations are seen more in their rough state, rather than editing out those details in the documents I deliver.