Notebook

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.

Sarah Sampsel wrote about designing the Washington Post iPad app, in 2 entries describing a little bit about the process. The first entry describes the types of interaction, visual design, and brand issues she had to consider when designing for the device. The second shows a few wireframes of the evolution of the home screen design.

Would have been lovely to also see some of the sketches, but it's awesome that Sarah shared not just final wireframes, but a series of wireframes showing the iterations. I'm hopeful that she'll continue the series to discuss the visual design and some post-launch thoughts.

Chance favors the connected mind.

I just picked up Steven Berlin Johnson's Where Good Ideas Come From after watching this sketch-note summarization of the ideas in the book.

I became a fan of Steven's after reading the New Yorker article "Watching TV Makes you Smarter" and his book, Everything Bad is Good for You. This one looks like it will be an interesting read. I'm hoping it's full of stories of long drawn out infancy of ideas, and the collisions and connections that make ideas succeed.

Found via Caterino's Deli

This notepad table is the coolest little piece of furniture. Looks like it was made for kids. Furniture you can draw on would be great in any studio lounging and waiting areas.

Via @balsamiqVal

Love this post on /Film showing a few artifacts from J.K. Rowling's creative process. Rowling uses spreadsheets she draws by making grid lines on plain paper, creating columns to outline a book's plot along a timeline, with months progressing downward. The initial columns contains a title and blurb about the plot, and further columns contain info about sub-plots. The excerpt below describes this in detail:

Rowling outlines each chapter in detail including which month of the school year it takes place in, the title and the plot. All of that seems standard. But it’s the next few columns where things get really good.

She keeps track of all the book’s subplots in every chapter and how they are developing in the real world of the book, even if they aren’t mentioned on the page. So, there’s a full column on “The Prophecy” which is the main subplot Harry is worried about throughout the book. Then there’s a column for the romantic subplot, titled “Cho/Ginny” followed by “D.A.” which follows what’s going on with Harry, Ron and Hermione’s resistance group “Dumbledore’s Army,” one called “O of P,” a column about what’s the latest with the “Order of the Phoenix,” a.k.a, the people who believe Voldemort is still alive, then separate columns for Snape (and others, I can’t read Rowlings writing) and the Hagrid and Grawp story.

Read more on /Film.

Via +Subtraction