Notebook

The sketch is not the end goal. The end goal of the drawing process is what you learn while sketching.

I'm slowly getting back into the groove of reading blogs and updating this site after some time off to enjoy the first month with our new baby. I found 52 weeks' recent post about sketching, and loved the encouraging reminder for UX designers. I'll quote, because Joshua Brewer says it so well.

[D]on’t worry if you can’t sketch. In fact, if you’re too good you might just fool yourself into thinking your sketch is a deliverable. It’s not. The real value of sketching is that it allows you to explore and refine ideas in a quick, iterative and visual manner with little overhead or learning curve. Rapid ideation around flow and interaction, layout and hierarchy, can be quickly established, rearranged or discarded wholesale—all without ever touching a computer.

I like the reminder that sketching is thinking. For me, it is the thought process, decision making, and learning, not the quality of the product in this activity that makes sketching an important part of the design process. For me it even continues from sketch to wireframe. The lines blur when you can discard and start over easily and repeatedly in whatever medium.

the number of cats on Popular would be about the same.

(for @angelpixels and @joshuakaufman)

I just started reading What Makes Them Click, Susan Weinschenk's blog for people who want to learn how to apply psychology to understand how people think, work, and relate.

"The blog focuses especially on applying the latest research in psychology to make you more effective, be more successful at your work and in your career, and get to know better why you and the people around you do what you do."

Susan wrote the New Rider's book, Neuro Web Design: What makes them click, which applies the latest research on unconscious mental processing and persuasion principles to the design of web sites. Read more at the What Makes Them Click site.

Ryan Singer at 37signals explains code refactoring to designers so that they can use it correctly in a design context.

Designers sometimes use the word “refactor” in a loose way. I think they overhear the word from programmers without getting the precise meaning. This article will introduce the term to designers so they can gain the same advantages that programmers have from a clear understanding.

How do designers loosely understand refactoring? Many take it to mean “rearranging” a design or “adjusting without completely rethinking” it. Refactoring actually means something else. It means changing the way a design is built without changing the way it looks from the outside.

Read more at svn.

Peldi tipped me to this graphic deconstructing one of Apple's promotional emails.

[Update: This review was updated after getting the latest version of the Stylus Socks.]

My search for the perfect stylus for sketching on the iPad is over. I've tried ever stylus I could get my hands on. The three finalists that earned a space on my desk or pocket in the past year have been the iClooly, the Stylus Socks, and the Griffin Stylus for iPad.

Starting off on the wrong foot

I started out initially playing with a few rubber tipped styli and the Pogo Sketch. I had to hack the Pogo Sketch to make it glide, which I still think is an elegant hack. I even contacted the creator about my hack but he didn't seem to care much for the idea of having a plastic nib inserted in the conductive foam, so I gave up on that. All of the rubber tipped styli created too much friction to be useful, and I didn't see much promise in the hacks that involved scraping a metal snap across my glass screen. After those experiences I set out to find the perfect stick to take out with me to supplement sketching on paper.

I have 2 main criteria by which I judged the styli.


  1. The tip should glide smoothly with as little friction as possible on the screen so that sketching feels natural

  2. The stick should be long enough to fit comfortably in the hand

The finalists

iClooly ($14.95)
The iClooly uses a small, soft metallic brush tip that seemed to glide the smoothest on the screen, but the metal stick is too thin and short to use comfortably for more than the shortest sketching sessions. I used this consistently for at least 6 months and found it exceptional. I came up with an inelegant hack to extend the stick, and that served me well, but who wants to use an ugly hacked stick?

Stylus Socks II ($7)
The Stylus Socks II sold by Shapedad on Etsy are a clever solution that wraps the end of a plastic KOH-I-NOOR pen holder with a conductive fabric. My initial review of the Stylus Sock was based on my use of a prototype version, but I've since received the final version which includes a felt tip under the fabric. The best thing about this stylus is the long stick, which makes it the most usable of the bunch. At only $7 a stylus, this may be the best choice for the budget-conscious sketcher. It works very well and it feels good to support an independent maker. At this price I think this may be the perfect solution for most people. One thing I would like is a heavier version. I may try to purchase a metal pen holder and move the fabric over to that one.

Shapedad is also working on a prototype mouthstick for people who don't have use of their arms, prompted by a request to make a long stylus for a quadriplegic customer. You can watch his progress in his Flickr photostream.

Griffin iPad Stylus ($18.99)
Someone finally tipped me to the Griffin iPad Stylus in November and I started watching the videos of users on YouTube and was easily convinced that it could be smooth enough. I was skeptical at first, but the rubber tip is surprisingly untacky and glides smoothly with little friction. It's slightly less smooth than the iClooly, but the biggest positive is that the stick is thicker and resembles the thickness of a pen or marker. It feels great in the hand, and it's long enough to reach from my closed index finger and thumb to rest between the two fingers. The clip slides nicely onto the spine of my iPad cover.

And the winner is...

The Griffin was my initial winner among the three. Although it's the most expensive, it works well and I like the metal stick, which I found to be the right thickness. The clip also helps me keep it tethered to the iPad case. After I received the final version of the Stylus Socks II that included the felt tip under the fabric, I found this stylus to be equally as effective as the Griffin, and glides more smoothly. I think they're both good choices.

I still find sketching on paper superior to sketching on the iPad, but there are definite advantages to immediately having an image to share digitally. iPad sketching has a permanent place in my toolkit, and the Griffin is my weapon of choice. Hopefully this will be the last in this year-long series on finding the right tool for this task.

I stumbled on Paul Irish and Divya Manian's HTML5 Boilerplate after looking for a solution to fall back on a local jQuery library if Google's CDN ever went south, and reading about how to use this technique for WordPress. Ben Kutil also helped me undersand how the fallback technique works a little bit, and I tested and implemented on Balsamiq's site.

HTML5 Boilerplate is not a library, but a template and set of awesome examples for how to get started integrating HTML 5 into your sites. They provide techniques for future-proofing HTML/CSS/JS, with cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash in mind. They also give you a starter apache .htaccess config file with caching rules and prep your site to serve HTML5 video, use @font-face, and use gzip.

Check out HTML5 Boilerplate. You can also watch a screencast of Paul Irish demonstrating it on Nettuts.

This is one of the most practical uses of augmented reality I've seen. Word Lens translates text you capture from an iPhone's camera to another language. I think it's only Spanish-English/English-Spanish at the moment, and $4.99 per language.

If you're skeptical, as some YouTubers seem to be in the comments, you can see an example of the translation I did on my phone of an English magazine page to Spanish. Works best on big text, and probably most practical for signage. I need this for trips to Italy (my Italian is rough), so hopefully Italian will be available in the future.

We've release Mockups 2.0 at Balsamiq. The main feature in this release is the Symbols functionality. It allows you to reuse groups of controls in order to create templates, page masters, and libraries of re-usable components. This can be done globally for all of your projects, or locally within a single project. You can create symbols from the top down and the bottom up. There's some documentation for this somewhat advanced feature here: Working with Symbols. To try it out, download or update Mockups on your machine.

It's 11/30, Blue Beanie day.

It’s easy to show your support for web design done right. Beg, borrow, or buy a Blue Beanie and snap a photo of your mug wearing the blue. (Or get creative with Photoshop). Then on November 30, switch your profile picture in Facebook, Twitter, Flickr, (and any other social network) and post your photo to the Blue Beanie Day group.

Twitter - http://twitter.com/BlueBeanieDay or search #bbd4
PlanCast - http://plancast.com/p/2kuh
Flickr - http://www.flickr.com/groups/bluebeanieday2010/

You can have my 8 bit beanie PSD here/

The iClooly is the pen I've been using most for quick sketches on the iPad, but for longer sketches and for drawing the handwritten font I'm making in iFontMaker, the short stick kind of sucks.

Extending the iClooly stick is an easy hack that almost doesn't merit a post: rip off the back, take apart a mechanical pencil, and mash the two together.

Verbose version: Remove the clicky end and the spring inside, making sure the brush is pressed down and the bristles exposed. Find a cyclinder that the iClooly will slide into--I'm using the plastic housing of a Sanford mechanical pencil--and push the iClooly into the cylinder.

MOObileFrames is a collection of mobile sketches and wireframes curated by Hannah Milan.