The Web Designer’s Sketch Pad

Tweet

I’ve got a nasty habit of buying a new sketch pad and another click pencil every time I wander into the newsagent. As I’m always leaving them somewhere other than where I need them, the only way to guarantee there’s always one on hand is to have massive redundancy in my system.

So, looking at Webjillion’s Mockup Maker, I’m guessing I’ll need to order around 15 to 20 to get me started. Ouch.

The Mockup Maker is a hefty, 75 page, spiralbound sketchpad — unremarkable other than for the fact the each (one-sided) page has a diagram of 800×600, 1024×768 and 1280×1024 screen sizes with 5 pixel markers up the left side and across the top.

On of the problems I’ve found with presenting ‘onscreen mockups’, is clients believe they are finished art. Even if you tell them a dozen times ‘this is an early phase mockup’, they often still can’t seem to think beyond what’s onscreen.

The Mockup Maker looks like it could be good for presenting consistent, neat and (hopefully) impressive mockups that clients understand aren’t finalized.

I like it when someone follows through with a simple idea.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.321resources.com 321web

    Did you get paid to write the review of this product?

  • http://www.sitepoint.com AlexW

    Nope. I am always open to incentives, kickbacks and sundry bribes, of course ;)

  • http://www.321resources.com 321web

    At least you are honest. It’s hard to believe that anyone truely likes a product anymore. I wonder if that will be the downfall of blogs.

  • http://www.sitepoint.com Mark Harbottle

    Exactly, if the guys who created Mockup Maker are reading this feel free to send us a few ;)

  • http://www.sitepoint.com AlexW

    It’s hard to believe that anyone truely likes a product anymore.

    I know what you’re saying. We’ve had software vendors who’ve threatened not to send us the next version when we honestly pointed out bugs in an otherwise positive review.

    Conversely, if you give something a glowing review, people look at you suspiciously. Damned if you do..

    I can say that we’ve had no contact with Webjillion — I just see it as a useful web design product not widely available.

  • http://www.eleytech.com beley

    I really like it but the one that someone created afterwards (the centered layout w/ notes on the side) is much better IMHO. I’ve had something like this forever…

    I created a sketchpad using blank screenshots in 800×600 2-up on a page and printed them w/ a 10px grid in the background (really light). I just printed off a few dozen pages on my laser printer and use them to design mockups and sketches of websites. This is a lot nicer but I still think I can just do it myself.

    $15 for a notebook full of almost blank pages? Geez, that just sounds expensive to me. Get yourself some white glue (elmer’s will work) and make your own pads and then you can just tear off the sheets and drop them in a file or show them to your clients.

  • http://www.sitepoint.com AlexW

    There are certainly cheaper option, but I don’t think it’s too bad, although postage to Oz really knocks it around for us.

    The black ‘Strathmore Field Sketch Books’ that I prefer tend to be around $10 for the standard 7×10. I’ve always liked them because they have a stiff, water resistant cover and the spiral binding is easier to work on.

  • benjaminadam

    Thanks for the review guys! Glad you like the product.

    beley: $15.50 is just about as cheap as I can get it, since the business is just me. Sure, you could just make your own — but I can make my own coffee and bagels, too. Yet I still love going down to the local Dunkin Donuts every chance I get ;) The time and effort you spend making your own, I would bet you, would surpass the $15 — and it probably wouldn’t be as high-quality.

    But, anyway, thanks again!

  • Dr Livingston

    A good trick is to take with you instead a CD with all the designs you’ve did to date that reflect a professional image on your part.

    Then let the client take a gander through them all, and select one or two that would be most appropriate to their needs.

    As for sketchpads, I feel they’re not really upto the job of conveying what your putting across, mockups or otherwise.

    Anyone can sketch, but not everyone can design for a web page.

  • http://www.seomoz.org randfish

    Personally, I’m a big fan of designing the initial layouts in something like Macromedia Flash – you can put everything exactly where you want it, quickly publish it to the web and make changes to the design on the fly.

    You can even include bits of animation or additional “pages” in new frames to make it very easy for someone to see what their site will look like.

    Even better, the graphics can then be cut up easily and made into gifs or jpgs for use in the real version. It’s the way to go.

  • jrs-vbla

    Almost un-noticed was the comment, all too true, that clients latch onto any mockup on screen (a) they are mesmerised by what they see and often struggle to think about anything else (b) they don’t understand why, if they agree, the site is not available tomorrow, since all the work seems to them done. Maybe there is no solution to this other than using a different medium, as reviewed. But it only works for local clients!

  • Blue Monkey

    When a client struggles to understand my mockup is not the real thing, I relay it to them in their language – “you guys don’t create a finished steel fabriction without some initial blue prints do you?”

  • artemide

    Why is it 800×600 and so on? Nobody would start with this grid, because he would have to downsize the stuff afterwards to 760(720)x420. Or is the mockup thought to be much earlier (before getting in contact with a real screen)?

  • lightningsymphony

    I agree about the actual page sizes. It would be nice to include demarcations for average toolbars and other chrome on the windows.

    As for using Flash, I have given a few presentations on rapid prototyping and ‘sketching’ with Flash and Photoshop. The Slideshow feature in Flash MX2004 is excellent for layouts and multiple screens, but also leads to the client thinking the site is almost done…

  • http://www.sitepoint.com AlexW

    Almost un-noticed was the comment, all too true, that clients latch onto any mockup on screen (a) they are mesmerised by what they see and often struggle to think about anything else (b) they don’t understand why, if they agree, the site is not available tomorrow, since all the work seems to them done. Maybe there is no solution to this other than using a different medium, as reviewed. But it only works for local clients!

    Precisely. Most of these guys have experience with print designers bringing them preliminary sketches, and they understand implicitly that the finished design won’t have the wispy pencilmarks on it — they often aren’t as experienced viewing screen art.

    I would never present final ‘signoff’ art on a pad, but nicely rendered initial concept work can get the major elements locked down. And if you happen to be handy with pens and pencils, I think it actually impresses people.

  • http://www.satviz.com davestarr

    No designer I, but I’ve used this tool for my own prototyping and organizing .. since it makes what are clearly sketches, not graphics that will be confused with finished work it has the same benefits as the pad of paper .. since it makes a skeleton of the site, complete with navigation links, it does so much more than a static medium.

    And the price is most certainly right … and no Australian shipping charges ;-)

    http://dub.washington.edu/denim/

    Best regards,
    Dave

  • goobimama

    Can you show a better image of a page? In the second picture, I can see some lines drawn. Are those original pages or did you draw those lines?

    You see, out here in India I wont be able to get one of these. So I was thinking of designing it on my own and printing it out or something….

  • http://www.igeek.info asp_funda

    You see, out here in India I wont be able to get one of these.

    yeah, imagine having to spend Rs.650 on a blank notebook, it would be nuts Milind, eh!! ;)

  • goobimama

    Nice one Amit. Actually, I wouldn’t mind spending 650 bucks, but where would I get it in the first place. I think it would impress clients beyond words…. Anyway, I got the mockup files from the site mentioned and I think I’ll just print em’….

  • http://www.igeek.info asp_funda

    Actually, I wouldn’t mind spending 650 bucks, but where would I get it in the first place.

    Well, you’ve hit the nail on the head, you would be quite hard-pressed to find them as ususally no book-store would stock them, as just like I said, you’d have to be a bit above normal to spend Rs.650 on a blank notebook where you can get the best blank notebooks for Rs.50. So while there might be some guys like you who might go in for 1 or 2 of these, not many would do so & hence, no store would stock them as they won’t sell!!! ;)