Blog
Use the sidebar to search through our blog, it's really helpful.
Sketching First
by James Mathias in Design on Mar 09, 2009
Sketching is quick, dirty and beautifully eccentric. With a few quick pencil strokes and a few, um—hundred eraser swipes you can plan out an entire site structure and rough out a design idea within a few hours.
I have this magical box, from before the dawn of the computer age, filled to bursting with all manner of primitive and divine tools: rulers, triangles, templates, stencils, pencils, paper and erasers—oh my. I call this magical relic of days gone by “The Toolbox.” I use these manual tools to bring to life my first wisps of design cohesion.
Girl Scouts of Middle Tennessee
A great example of the sketch process can be found within the build from our latest website launch for the Girl Scouts of Middle Tennessee.
For Girl Scouts I had a rare, yet immediate vision of what the site could become.
I was able to lay this vision down in a notepad within minutes and shop it around the office to get a read on whether I was headed in the right direction. Diagnosis was good.
I set about creating a more refined sketch to show the Girl Scouts. They understood my idea and approved it to move forward.
Once approved, I put together the finalized comp for presentation. The transition from sketch to design was silky smooth. I was aware of where I was going, and I had a map. A map born from ideas and magic. I tried to solve the problems presented, whilst simultaneously providing what the Girl Scouts wanted visually and functionally.
Sketching is a key step in my process. It’s the most useful and time saving step I take. What’s in your process?
Stay tuned for my next post about key features of the Girl Scouts site.
Sorry! This entry is no longer accepting comments.
you are really talented, james
Nice article, James. I agree that reaching for “The Toolbox” is a necessary part of the design process. I always keep my toolbox within reach. I use sketching as an idea soundboard. Sometimes, though, clients have unrealistic time constraints, and sketching sometimes gets removed from the process. It sometimes shows when changes get made to main ideas during the final design. If these ideas would have been flushed out in the beginning, the end would go much smoother.
I agree with Todd. I think sketching is an awesome segment to add to your process. It’s saved me a few times on some of my projects. However, if the money is tight, usually it’s the first step to get cut. Great write-up!
I think this is an essential step that alot of web designers skip. I often forget to do it as well and go straight to the computer. Thanks for reminding me! Great post.
@peter, thanks man, I appreciate it.
@todd, yes sir, I can see that happening quite often. Although I would argue that the time you save doing sketches first, is worth the extra step, and in the long run can potentially shave big hours off a project.
@chris, thanks for the compliment sir.
@jason, thanks I appreciate it. I find myself utilizing this step more often than not. Because I can easily burn 15 hours in Photoshop producing something the client hates. A sketch can save you tons of time.
Big fan of sketching as well. From my experience, it really does save time and make the whole process easier.
My sketches look horrible though, compared to yours, James. Nice work!
So, you about have me convinced on the sketch. I guess I’ve been sketching for a while (for my eyes only)...that’s where a true artist shines.
Now I guess your going to tell me to quit using Fireworks. :)
Wonderful design!
Oh, absolutely! Sketching is always necessary! Every beautiful site out there started as a simple sketch on paper. I’m a web designer and I absolutely prefer to do it this way.
Also, flesh out numerous designs (5 or 6) in Photoshop before you start slicing it up for the web. Try to design each comp in a new way and have your peers/designers critique your best one. Don’t trust anyone either, trust people who are passionate designers who will give you honest, helpful feedback!
@Josue, thanks sir, I appreciate it. The best thing about sketching is that it doesn’t have to be anywhere near perfect, it just has to relate an idea.
@Joel, Yeah I really think that sketching is a huge time saving step and regardless of your artistic ability or skill level it can help both the client and yourself find something to move forward with.
@Rob, I agree 100%, obviously on the sketch necessity. But I’m going to have to disagree with you on the second part of your comment.
Fleshing out 5 or 6 designs in Photoshop and getting your friends to choose the best one is not only a huge waste of time, but it also shows a lack of confidence in your ideas. You should only focus on a single concept/idea at a time. A truly great design comes from an initial idea and then revising it to perfection.
In eight years of doing web design I have never presented or worked on more than one idea at a time for a client.
That’s not to say I’ve never had to start again, or scrap an idea entirely.
I also find that non-designers give the best most honest feedback, because they have little to no understanding of what your trying to accomplish. The non-designer will see all kinds of issues another designer can’t.
James, nice work man! I love seeing designers sketching to solve problems first. I know that often it’s difficult to do this, but so helpful for solving problems quickly when used properly.
I love the sketching process. It’s always refreshing to pick up the pen and paper and get the first few drafts out of my head and on to paper.
Also, I love your website. I just came across it today via Smashing Magazine and I’m overjoyed with what I see. Big props to the whole design/development team.
@Mike, thanks sir, I appreciate it and agree 100%, nothing beats sketching out an idea to get a feel for it, before taking it to the shop.
@Kyle, Agreed. And thanks we’re very proud of the site overall, glad you like it.
I’ve shown the Girl Scouts site to everyone in my office. It’s a really well done site.
@Joel, Fireworks is still the best compression tool out there. Perfect for Flash, and adds a higher production value than photoshop can provide. You should never stop using it…
Well I guess since you taught me how to use I’m kind of bias. But anyway…
This is a great design. I’m glad to see that you endorse sketching before building a site. I’ve done it that way for years (mainly because it’s just easier to fiddle with a look on paper) and I think it’s cool that you do the same thing. I have say, I’ve been a big fan of your work since back when Leihu was a forum. haha.
@Ian, Thanks Ian, I really appreciate it. We give Joel a hard time about Fireworks but it’s really all in jest.
@Andrew, Thanks! leihu as a forum, that’s mad old school! Glad to see you still keeping up with my works, makes a guy feel great.
I like to start with the finished design and work towards a rough sketch on paper.
Quite good Ben. :)
Great article and neat to see your flow from scratch to great-looking.
I’ve always told myself, every website, that I’d do sketches first but almost always opened Photoshop directly instead. Often, it gave results that if were planned before to get a general idea than just a brain scatter of ideas, I would’ve had much less design hastle. For an upcoming website, I told myself I’d do it this way, and reading your article and looking at your sketch, I’m now convinced it’s a better choice and time investment.
@neuroxik, awesome glad to hear my article helped sway you to the sketch side!