Despite the fact that so many tasks are being turned from "paper" based (messaging, banking, statements, GTD, etc...) I always find myself crawling back to paper when it comes to design. Maybe it is the low fidelity that makes it easier to quickly spew out ideas with out getting caught up in the details. It could also be the fact that it is significantly less intimidating than a blank photoshop document that eventually must represent a finalized concept. Regardless of the reason, paper just seems to work when it comes to brain storming design concepts and interactions.
While we have used everything from blank paper to grid paper at my design firm, I always felt there had to be a better way to do it. Something just didn't feel right, especially when it came to understanding how your concept was going to look in a browser window or on a monitor.
Our Concept, The Web Design Sketchbook
So at 3.7 DESIGNS we spent some time coming up with an affordable, flexible and easy to use sketchbook specifically for web designers. After using it for months to perfect it we found that not only did it help us brainstorm ideas for design layouts and concepts, but it also doubles as a great way to generate storyboards and plan workflows.
The book is equipped four five different types of pages ranging from thumbnails, mid-sized browser windows, detailed windows to note taking pages. 
We incorporated all of the details we found ourselves wanting as we planned and worked on several projects including:
- An area to rate each concept
- A description and date for each project
- Plenty of areas to take notes and write down ideas
Free Giveaway
To get feedback on the product (as we certainly will be evolving it over time) we are excited to be giving away 5 initial copies. To enter for the give away simply leave a comment letting us know one of the following:
- Your thoughts of the product (conceptually)
- How you usually go about designing your sites (paper, photoshop, etc...)
- Any suggestion or ideas
We will randomly select five people to get a free copy two weeks from today (December 3rd). Best of luck and you can learn more or order the product here.
Have some feedback? Leave a comment
Love the concept! I have always been a graph paper kind of person, but the idea of creating multiple thumbnail size layouts, and get a better idea of how it will render out in the browser is fantastic. Excited to use this product and see how it evolves.
I’m usually using Photoshop with 960px grid system template. Your sketchbook will be great. I would also like to see 16 columns version.
I love this idea!
It will be definitely helpful to any website designer or project manager!
I mostly use my regular sketchbook or Visio (but I prefer hand sketching on paper), but this would be a revolution in sketching … than I take a picture of the sketch and put it on the secondary monitor and on primary one is being Photoshop design being processed…
I would maybe add a “Project column” above the date for a better orientation in the sketchs. But no more suggestions, it looks perfect now!
Luke
I usually wireframe in Illustrator – with the individual components saved to a symbol library and the web browser (with dimensions) as part of the template.
But I like the sketch book idea because in meetings with clients it would be great to do a fast sketch of a layout I’m referring to or for those clients who ‘know’ what they want, they can sketch out their ideas too.
Would like to see a field for ‘Project/Client’ and maybe a way to indicate the screen resolution requirement of the project
I like the idea of this and might be more likely to use pencil/paper if I had something like this handy. I normally mock things up in Photoshop. I agree with Kristin’s suggestions regarding space for screen resolution requirements.
I do use plain sheets for wire framing and then go to Photoshop.
Yeah, it’s really a nice idea.
Youhooooo ! So long i was waiting for something like that…
This is a great idea I still start with pen and paper, before moving to photoshop.
This would be great combined this with the Web Designers IDEA book. Take some inspiration from the book, throw down your ideas on the sketchpad, then design it on Dreamweaver/Flash. Three step process to awesomeness!
http://www.twitter.com/brianvandeputte
It looks really nice!
a few things: the “[View with PicLens] ” doesn’t work for me, and maybe you could change the background “preview” images from the homepage into a standard image linked to the Pictures page.
Thanks for all the great feedback so far. I really like the concept of project / client and resolution. I will incorporate those into the product right away. Good luck everyone on winning a free copy!
Would be great for concept phase and sketching! Also helpful for quick layouts with clients.
I always start with some information gathering then initial concept phase on paper. Its quick and you don’t feel obligated to make things look perfect. Its quicker and easier to just let ideas flow on paper in my opinion.
Like Kristin said, this looks like a wonderful tool to work with clients. From my experience, it’s always hard to communicate on proposal and obtain constructive commentary from them. Building your sketch book with those inquiries embedded is a great way to improve these.
Maybe you could add a “Good points” list and a “Lacks of” list to describe the sketches along with the starring system.. ?
Hi my name is SUBBU
I am a web designer from India.
I will be coming soon for freelancing
I can say this is the real organization of the panders box (Designing project process), putting first dot on the paper for project to finishing it by getting end bugs is really cool idea.
Looks like a good product. I’m always looking for new sketch/design pads to try out.
I think the sketchbook idea is very fresh, and an approach I never would have thought of. But as I get more experience and tweak my creative skills, I’d be eager to give this a try. I used to design concepts in photoshop, then switched to Fireworks for rapid prototyping in 2008.
Wow ! that’s great …..hope to expect more.
Pingback: Win a Free Copy of the Web Design Sketchbook » - Web Design Marketing Podcast & Blog
I agree I almost always start a design on paper, it is fast and I can even start working on usability. It is also easier to draw subsections to demonstrate state changes.
Pingback: Podcast #76: Web Accessibility Disasters « AccessTech News
this concept seems to be very interesting. too many people just forget how powerful handcrafted art is, even if it´s just a pre-state.
it just FEELS different than these purely technical and clean looking polished product that u want to produce in the end. especially when showing wireframes and sketches to clients this sketchbook gives a wonderful opportunity to present it in an appealing way.
the sketchbook looks very professional and u can easily make annotations while getting feedback from clients if u have it with u while presenting.
i normally always start sketching a website on paper in very small size, then getting it bigger, mocking it up in PS and then go on.
good luck to you marketing this product – it has potential!
Hi everyone!
….it seems interesting, but do i really need that?
Difficult to answer if not tested =)
…unless, my target is to “show off”/ make good impression on my costumiers
Looks like a pretty cool way to create a website from sketch!
I rather prefer sketching than wacom+photoshop… it is more intuitive the oldschool way and even more creative imho.
Great idea und i would be glad to have a copy of that in my hands sometime.
greetings
It makes a good change to see things in hard copy format. I always do my first design layout with good old pen and paper, as I tend to think quickly graphically rather than sitting in front of a screen and hit programming/coding from the beginning. Maybe I’m just old school, but I believe that websites retain their first impression from their graphics first and foremost, and then their content and layout thereafter.
Looks like an awesome way to conceptualize ideas in a set format. Love the fact that there’s already a grid incorporated in it.
I usually scribble my designs on pieces of paper that sometimes go missing. A book would really be useful
Great for paper prototyping. I wonder if 52 pages is a bit on the slim side? At any rate. Looking forward to seeing this released.
Looks like a good idea to me. For my “prototype” websites, I might sketch it on a sheet of scrap paper that I will end up loosing or throwing out on accident. Sometimes I just jump into Photoshop and start. The notebook seems to be a good solution to my problem of loosing the sketches, I like that it has browser windows and grids in place.
Hi!
I’m new to all this and was doing some research for my class. Listened to your podcast and thanks so much!
I just started the process in learning, which has proven to me to be difficult. (like I said, I’m a newbie!)
I love art and hopefully one day will be able to produce my own site from my learnings!
The sketch book is a great idea! Artists use them all the time and considering what I’ve learned so far, you all are artists!
I will definitely be visiting your site often!
Looks like a useful tool when I am sitting in the coffee shop being all analog and trying to sketch up ideas.
very good idea. look forward to trying it out!
I love this concept. I usually do a rough sketch on a steno pad and then move to photoshop but would definitely use something like this.
I love the concept here. Would love to try it out!
This is a great idea! I always find myself going to my sketchbook and drawing the same “framework” for sketching. I thought about getting something done in Illustrator and print it, but then I’d get hung up in designing the “framework” and going to my sketchbook for it. I never got it done as work always has a higher calling.
This is a great idea, for any creative work I almost always start drawing and sketching on paper, it just feels natural
. I think this will simplify this process even more.
Thanks for the opportunity to win one of these!
I always start with my trusty Moleskine and sketch out the UI quite roughly, this is then taken into Photoshop – using Jason Santa Maria’s ‘Grey Box Method’. I’ve also recently starting using Mockflow – http://mockflow.com, which has been great for larger projects which require a more ‘formal’ approach.
The Web Design Sketchbook looks fab and I would love to win a copy, I can certainly see myself putting the Moleskine to one side if this were to arrive!
Hello, this guy is willing to try almost anything to take care of my backlog and really express my full potential. I am willing to give this old-school gadget a try!
I like the weird double grid there. That could be useful for maaany things…hmmmm ideas ideas….
The kid is feeling lucky!!! Man, did I just jinx myself?!
Really a wonderful concept… I am sure, it will save a lot of our precious time. I usually use blank papper or evolus pencil kinda firefox extensions to create base layout plans for discussions…
Anyway its a brilliant idea, thanks.
-Deepu
Thanks for that. Also, feel free to browse my new site http://koocha.com with lots of design stuff collected from Internet
I like to use Balsamiq http://www.balsamiq.com/products/mockups for wireframing, structure and functions. Then I move on to Fireworks for layouting. I prefer Fireworks over Photoshop since it is more vector based, it seems handier and much faster.
Your design sketchbook concepts are quite innovative and interesting, but the subject matter seems very deep to me and not much expored elsewhere. So your initial features may not be final, as I thinks you still need lot of feedbacks and iterations to achieve stable features base. This makes it all very exciting to me as I can’t wait know the final outcome of your design concepts exporation.
By-the-way, I suck with design. Can the product advance me in this area? Just curious.
Looks great, would love to win a copy!
I like the idea of the browser window on the pad… Like you said, much easier than staring at a blank .psd (or .png for that matter!) would love to check it out!
I like your concept, but whether the concept is suitable for a beginner in web design. I hope I can try.
Hello,
This is such a great product, looks amazing would love to get one copy of this
, this will come in handy for designers.
Great Giveaway keep up the good work
I think its pretty swell! Not sure if I have missed this but I would love to win a copy
I think the concept is cool.
I take a number of approaches to creating sites. I use anything from pen and paper to Photoshop. The approach really depends on the site and where it will end up.
An inspiration point would be awesome
Preeeeeeeeeeeeeeeeeeeeety awesome! Hope I can win this for my brother, he doesn’t do web design, that’s my area, but he draws pretty well.
I think its pretty swell! Not sure if I have missed this but I would love to win a copy…
Great Giveaway keep up the good work