Feature
Post

Category
Design


Web Design with Moleskine

I’m one of those designers that likes to sketch out new website layouts with pen and paper. Nothing fancy- I don’t haul out the acrylic paints or anything. My sketches are usually just a bunch of boxes and lines with arrows pointing out different sections of a layout. When I first started, I did these sketches on nearly anything that was handy- the back of a flyer, an empty space in a newspaper page, and yes, the ubiquitous paper napkin. After awhile, and too many lost sketches,I got wise and bought a tabbed notebook (okay, so it was a Five Subject Notebook). Several years later (I started web design in ’95, when I was very young), someone gave me my first Moleskine… and the rest- well, you know the rest. Au ‘voir, Mead- hello, Moleskine.

Now, the repurposing of non-techie tools this way is nothing new. Indeed, I know many completely geeky geeks who go gaga over vintage fountain pens and would rather send a thank you note on letterpressed paper than via email, who keep first editions of Dickens right next to Mastering PHP on their night tables. And, of course, there are the dozens of people who have completely replaced their PDAs with Moleskines.

For me, my Moleskine has become an integral part of my personal design process. If you’re interested in trying it out, here are a few tips that might come in handy:

  1. Choose your Moleskine. The hard-covered pocket-sized book is classic, but there are so many wonderful types available now. The “squared” series is particularly good for designers who use the grid, and the “storyboard” notebook features a sequence of frames (for storyboarding!)
  2. You don’t have to use Moleskine. Actually, any notebook or blank book will do- check out Derwent, Rhodia, or Field Notes. A recent discovery of mine is the very wonderful Vintage Engineer Field Book from Three Potato Four. Size is up to you, as well- I only suggest that it be easy to carry around with you. If you use a big backpack all the time, feel free to use a large sketchbook.
  3. Choose a pen (or pencil). Some people won’t use anything but Montblanc, but the affordable Pilot G2 gel pen has quite a following as well. I suggest trying out different pens to see what works for you and the paper of your notebook.
  4. Number your pages. I like to number each page in my Moleskine, for use in a table of contents I list at the front of my notebook. Granted, I’m a little bit OC like that- but when you’re searching for some notes several months from now, you’ll be grateful for that table of contents. With a notebook, unfortunately, you don’t have the “luxury” of a search engine.
  5. Don’t rip out pages. When I design on a computer, I invariably delete the rough, early versions of my designs- much to the horror of my husband, who is very good about saving his work at all stages of its design process. Because I don’t like to rip up my paper notebooks, however, I have the very roughest sketches of my designs in hard copy- which is great to look back on.
  6. Cut ‘n paste. There’s something else I bring almost everywhere with me: a glue stick. I like to cut out articles, photos, swatches of fabric, packaging labels- anything that inspires me, really. Some of these are pasted into the pages of my Moleskine, while others go into its nifty back pocket. For example: I’ve printed out several “cheatsheets” (For page layouts, CSS, and random design tips) and carry these around in that back pocket.
  7. Customize it. These days, you can skin nearly everything. Have your Moleskine Yes-We-Canned, buy a special cover for it, or hand-paint it yourself.

The pros of going the notebook route? Less chance of distraction. Less chance of accidental deletion. If you drop it, it doesn’t break. Oh, and no viruses. Ever.


  1. By Chung Bey Luen posted on January 29, 2009 at 12:20 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Same thing here. I’m also using some paper or moleskin to draft my page layout.

  2. By Will Ayers posted on January 29, 2009 at 1:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I have herd so much about Moleskin, I think this blog post has been the final push that I needed to get a Moleskin. Great article. I really like the “Oh, and no viruses. Ever”

  3. By dowdyism posted on January 29, 2009 at 1:47 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Excellent post! #3 is an idea I need to implement for sure. Do you just go ahead and skip a few pages in the front to handle the TOC?

  4. By Dan B. Lee posted on January 29, 2009 at 2:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Good stuff. I just picked up I second Moleskine as my first one is filled. I guess there are different reasons why people like different types, but instead of lined I’ve decided to go plain this time. I found myself using the lines far too much in design, which means all of my work is done on that particular scale which isn’t always what I’m looking for. I hope this plain one works for me.

    Great article.

  5. By John Wang posted on January 29, 2009 at 3:17 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice to see another web designer using the Moleskine notebooks. I did a little write-up on the incorporating a few web design concepts with a Moleskine over on my blog.

    I currently use 3 different Moleskine notebooks. Each with its own purpose. A Square Grid notebook for wireframing. A ruled notebook for text and notes. And a Sketch notebook for sketching logos and art.

  6. By Phillip posted on January 29, 2009 at 3:52 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I also enjoy sketching designs in a moleskine. I came across this yesterday and it looks like it could be very useful for website sketches.

    http://www.paranaiv.no/content/web-design-sketchbook-soon-released-sale

    Not sure it will replace my moleskine for quick sketches but it would def be cool for client meetings.

  7. By Ryan Stang posted on January 29, 2009 at 4:30 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I love my Moleskine, and what blows me away is how many designers don’t use one, or any type of note book. It doesn’t take long to realize the benefits of a small note book over a scraggly mess of papers,

  8. By Brendan Falkowski posted on January 29, 2009 at 5:28 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I picked up a Rhodia pad a month ago for this very purpose. Much better than loose scraps of paper.

  9. By Sérgio Santos posted on January 29, 2009 at 6:46 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    One of the thing I like in hard-covered moleskines is the folder at the end, great for storing anything that stops into your hands. I’m just not a great fan of carrying a glue stick with me.

    Thanks for sharing your experiences and discoveries.

  10. By Web Designers posted on February 1, 2009 at 4:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I also enjoy sketching designs in a moleskine. I came across this yesterday and it looks like it could be very useful for website sketches.

  11. By rikin posted on February 9, 2009 at 3:50 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    What great timing! I just bought my Nth moleskine today! I tried to go for something cheaper with the economy in the crapper and all but I’m addicted to them like a chain smoker and a pack of reds.

    Love the TOC idea… and since I have a nice new blank Moleskine this is perfect timing to put it in place.

  12. TrackbackWeb Design with Moleskine | Devlounge | web-web-guideLife.Stream for 2009-02-01 | Shawn's ThoughtsWeb Design with Moleskine | Devlounge5 Tools for Web Design Wireframing | iDESIGN