Tablet + Illustrator: the Case for Electronic Sketching

February 4th, 2010


It’s probably nothing new that the sketch has been gaining quite some attention lately as a powerful design tool. Some UI designers have began to precede wireframing and prototyping with free-form pen and paper approaches that afford exploration and support a wider diversity of ideas. For over a year now, in my design process I’ve started doing just the same right after I picked up a set of markers and sketch pads. Looking back, sketching has been wonderful at giving rise to design representations that naturally act as conversation starters and therefore make sketching more so compatible with agile philosophies. However, traditional pen and paper has a few limitations which over the last few months became noticeable. As a reaction to this, I grabbed an Intuos 3 from Wacom, installed Adobe Illustrator and began sketching electronically using a pen and tablet. Finding the new approach superior, I have doubts I’ll ever go back to paper and wanted to share some of the reasons why.

Scaling

Like it or not, design ideas need to scale over time and good tools provide room for such growth. One thing that I love about Illustrator (which paper lacks of course) is that the art board or workspace can be stretched as needed whenever concepts need the extra room. The flexibility to resize the canvas is a really great feature especially during early ideation when multiple screens need to be shown together to tell a meaningful story. On the same note, another way Illustrator excels is in terms of a scalable fidelity. Whereas early on in a project the amount of detail might be small, over time however, the fidelity of an electronic sketch has the potential to develop. In a vector environment it is super easy to take a small UI sketch, stretch it to a larger size, and inject more detail inside of it.

Ease of Editing

Yes, in the real world we have pencils, erasers and the ability to redraw or correct our sketches to some degree. We can however only correct our paper sketches somewhat before they becomes unreadable. This isn’t the case with anything electronic or digital where cutting, deleting, undoing, redoing, erasing is second nature. A very common scenario is to draw different screens and only learn eventually that it makes sense for the two or three screens to be placed together – something that is very easily done by reorganizing or repositioning on the computer. Another superb thing about Illustrator is the ability to select a line and just redraw it, causing it the take on the new form. This of course can be done an unlimited amount of times in an electronic tool.

Legibility

Although this might not be the case for everyone out there, I personally find that my hand writing is very hard to read. Unless I spent extra care and time to write legibly, I find that on the computer it is way easier and quicker to type out text that can be read by others.

Carelessness

When I am about to sketch on paper, knowingly that it will be harder to undo, I hold myself back and think twice before the ink or lead leaves a mark. This slow down or inefficiency can be easily overcome in the electronic world with a tablet pen. When I sketch electronically, this worry disappears as I know that I don’t have to generate the right ideas, but instead can easily correct myself if something needs adjusting. This careless quality of electronic sketching brings forth immense value by affording greater exploration to occur more freely.

Reuse

Illustrator allows to create symbols of artwork very easily which in turn speeds up exploration ever more. Let’s say you have the same screen or component which you want to use a number of times across your work. Dragging the selection into the symbols palette allows you to reuse or instantiate that artwork and still have the ability to edit it in one location with it updating throughout. This is simply a superiority that paper cannot compete with.

The above are the reasons why I moved in the direction of electronic sketching. Perhaps the use of paper can still be justified in collaborative sketching sessions when there are more than one designer at the table and the design activity happens simultaneously in real time. For the remaining times, I find that the electronic sketch offers advantages over paper that are just too good to pass.

Credits: Jakub Linowski

18 Responses to “Tablet + Illustrator: the Case for Electronic Sketching”

  1. David Vogel Says:

    All of these are reasons why I am so disappointed with the iPad…

  2. Vance Says:

    I also purchased a pen and table with hopes of improving the quality of my designs. What I've found challenging (as the dust on the tablet can attest) is the disconnect between pen and representation while drawing.

    When drawing on real paper, I can see where the pen is about to touch, whereas drawing on a tablet relies a lot more on an intuitive feel for positioning. My tablet is fairly small (I think 4×6" or so), so there's some mental translation between its size and the size of the monitor (22" widescreen).

    I'd expected the transition to be like moving to a mouse for the first time, where the disconnect between cursor and input device feels artificial, but then becomes familiar. I haven't yet gotten over that familiarity hump with the tablet.

    Have you (and your readers) found that it's improved over time, or did you not experience this disconnect at all?

  3. Jakub Linowski Says:

    Hey Vance,

    Good point. I also experienced that disconnect in the beginning, but I found that it no longer bothers me (as with your comment about the mouse becoming an extension of your mind).

    For those who have a bit more money lying around, there is also the Cintiq http://www.wacom.com/cintiq/ that allows you to draw on an LCD screen.

    I'd say also, that it is important to be sensitive to the size relationship of a tablet to the monitor. If you have a huge monitor and a tiny tablet, you drawings will be amplified on the screen (which could also feel like a disconnect). I have a 6×8 tablet and use a 1600×1200 resolution and it works pretty good.

    Cheers,
    Jakub

  4. Andrew Schechterman Says:

    Ditto for the getting used to the tablet, however, the better the tablet's underlying technology, and the pen's technology, and often the size of the tablet, can make a difference. Took me a few days (at most) and some tweaking, like Jakub mentioned (tweaking the tablet, monitor, pen, even keyboard and mouse locale) before it became natural; then it was hard to turn back (!). Kind of like getting a new-fangled mouse or getting into a rental car (LOL). As mentioned in prior posts, Autodesk Sketchbook Pro (software) is a -really- great option as well, very cheap, almost zero learning curve, very lightweight, and plain fun (sometimes comes free with tablets); good even for those who need to draw straight lines and move boxes and arrows and such. I still draw on paper too, but love the tablet so much that I wish I could use it for everything . . . maybe that's where the iPad circa 2010 will come in (!). – Andrew

  5. Andrew Schechterman Says:

    Hmm, meant to say iPad "2012" . . . LOL.

  6. Anthony Bosio Says:

    I'd like to hear more about your use inside of Illustrator. My sketches are usually looser, messier, at first. It doesn't seem like Illustrator "brush strokes" would work well. Any particular settings you use.

  7. Erik Loehfelm Says:

    In my personal experience, I prefer good ol' fashioned pen and paper. I've used a Wacom tablet in the past but couldn't afford the luxury of the Cintiq – played with it before though and boy is it sweet :)

    To solve the problem of fear of the paper sketch, we always sketch with a 30% grey marker for our initial concepts. After it dries, it's quite light and allows you to overlay a darker marker on the lines that are 'keepers'. Throw a 60% grey marker in for drop shadowing and depth, and you get something like this http://www.coroflot.com/public/individual_file.as

    I do like the fact that the product you are producing on the computer is ready to go for a higher fidelity transfer and build. That certainly is attractive! But, give me a set of markers and a stack of paper and the ideas just pour out. Battery life is pretty good as well ;)

    - e

  8. kasper kerkhoffs Says:

    Hi Jakub,
    Loved your article!As you know i'm not really active in the IA but i also love my tablet ( wacom bamboo) for creating visualizations, since me drawings arent that communicative (along with my handwriting). You can for exampe use scan early braindraws/stockphotos to be drawn over to create a homogenous style of images etc. but still you can loose alot of time by detailling etc. and when drawing in illustrator I always have the problem whenyo make a line after another very closeby he re-shapes the old line. But all this I am aware of now so I believe I have finally found my tools and way of visualizing my design proces. To comment on the disconnect feeling, I also found it weird but really fast you like it very much since you adapt to the more natural loaction based pointing instead of looking for your cursor, etc.
    ciao kasper

  9. kasandra Says:

    great topic thanks

  10. Jakub Linowski Says:

    Hi Anthony,

    I usually use the calligraphic settings and a pressure sensitive pen. Perhaps I'll release my brushes sooner than later. But you're right, I also often precede these cleaner looking sketches with messier "selfish" sketches such as: http://wireframes.linowski.ca/2009/08/selfishly-f

    Cheers,
    Jakub

  11. Anthony C. Says:

    I have the Intous 3 and love it, but it's really for digital illustration and anim. cleanup where it sees it's most use. I can never replace paper with it.

    I'm curious as to how you guys do it-it'd save me a lot of time with tight deadlines-but the smoothness of the tablet leads way to some problems with strokes.

  12. Jakub Linowski Says:

    Tablet smoothness, right. I know three work around. 1) There is a more resistant tip that you could put into the pen (it wears out quickly though). 2) I've also stuck a pieces of paper on top of my Intuos 3 for more resistance (ugly solution, but works) 3) Get a Intuos 4 (supposedly it's more resistant and feels more like paper).

    Cheers,

  13. Anthony C. Says:

    I have the Intous 3 and love it, but it's really for digital illustration and anim. cleanup where it sees it's most use. I can never replace paper with it.

    I'm curious as to how you guys do it-it'd save me a lot of time with tight deadlines-but the smoothness of the tablet leads way to some problems with strokes.

  14. Sam Antos Says:

    […] http://wireframes.linowski.ca/2010/02/tablet-illustrator-and-the-case-for-electronic-sketching – Wireframes Magazine » Tablet + Illustrator: the Case for Electronic Sketching… Decorated in Spanish mission-style with rich wood cabinetry and earth-toned fabrics, each suite features a full kitchen or kitchenette, spacious living & dining area, washer & dryer, spacious baths (some with in-room Jacuzzis), and either a balcony or patio overlooking lush tropical courtyards and the golf course. Bookmarked and Pinged by http://www.westweeks.com/ [...]