Drafting on Graph Paper
When preparing to design anything, especially a website it is good to start with a good ol’ pen and pad of paper. It’s like snail mail compared to email, but you can really efficiently lay out your ideas this way. I like to use graph paper for doing this, because my personal style is very grid based and I liked things to look organized. This site for example you can really see the grid influence.
I have beside me a layout on graph paper for the plans I have for this site. Over the summer I hope to get these out, but here’s what I did. I’ve decided I want three columns, so the first thing I’m going to do is choose my widths. Because I’m staying with this design (a few tweaks maybe), I want to keep the main content column 500px. I use some images from time to time in posts that are meant to fill the whole width, so I’ll be on 500px for a long time. That column will remain on the very left.
The two sidebar columns will each be 250px wide. The actually content won’t be touching because it’ll be padded, but that’s my basic structure. So I take out my sheet of graph paper (whole pad actually, but just using one sheet here) and I need to think of the perfect number to use as my width. The actual width of my site will be 1000px, so I’m going to need an even number. Round numbers like 25 can be tempting sometimes, but for this, I will need an even number.
You can’t choose a number that’s too high, because the paper is only so wide and has only so many squares. I chose 24. This way, I can make my grid exactly the way I want to. My overall grid will be consisting of 250px x 250px squares, or 6 units squared on my graph paper. So my scale is 6 squares = 250px, or to get right down to it, every square is 42px*42px (rounding up).
It’s a simple grid, and by taking this simple step in preparation, when I go to actually design the real thing, it will be much quicker and easier. There are more advanced ways to design with grids, such as using gutters, and you can read about them here, in a five part series by Mark Boulton.
On to the upcoming design, it won’t be here too soon. Just to make sure you catch it right away, though, you’re going to want to subscribe to RSS to get all the updates. The design will stay virtually the same, maybe a little tweaks on the navigation tabs and stuff, but nothing too much. It’ll be more focused on features and cool stuff for the reader (you), as well as a little bit of an aesthetic lift on the sidebars.
Also, if you’re wondering how to cure writers block when guest blogging, you should check out this post I wrote at Andy’s blog.
Leave a comment
Andy
June 9th, 2007 at 3:02 PM
Nice posts. I like to draw designs up on paper sometimes first too. Although, sometimes I just use my graphics tablet. It’s nice to work on a rough and figure out where everything fits best
Andy
James Haigh
June 9th, 2007 at 4:04 PM
I design on paper to start off, but not as organised as you. I sketch it out very roughly and picture it in my head. I make an outline in photoshop and scribble some colours down.
The page look a complete mess by the end, but, hey, it’s how I work.
Connor Wilson
June 9th, 2007 at 4:13 PM
James, I know what you mean by the messy page. I try to write in what each part is and even some sidebar module features, so by the end the entire page is a big mashup of blue and black ink and maybe some pencil. Markers if need be as well
Nathan
June 9th, 2007 at 4:20 PM
Hey man. On here from your guest post over at A2-blog.com. Thought I’d drop in after liking what I read.
I am not much of a designer - but I know where you are coming from, because recently, whenever I’ve had a good idea, I’ve written it down and planned everything. So, in a way I’m designing it in words.
I expect I’ll be a regular visitor now, so keep the posts coming
Connor Wilson
June 9th, 2007 at 4:23 PM
I’ve got a ton of posts ready for launch, so don’t expect a shortage any time in the future!
Josh Buckley
June 9th, 2007 at 4:27 PM
Interesting, i’m much better with a pencil and paper than I am with photoshop. However, i’d probably use plain paper rather than grid.
Connor Wilson
June 9th, 2007 at 4:40 PM
That’s interesting Josh, especially the plain paper thing. I use graph paper and a ruler to keep everything relatively neat around the edges. On the inside it’s all freehand, but I’m a horrible drawer
I drew the maple leaf (Canadian symbol btw) thats in the header on my paper just to add that little touch, and it looks more like a stock Photoshop starbusrt shape! I guess I’m the opposite, much better at Photoshop than with a pencil.
Nathan
June 9th, 2007 at 4:52 PM
I’ve got a big notepad, with lined pages … well it’s A4 and it just has many pages … where I keep all my ramblings and ideas. I used to have some relatively simple things in mind and forgot about them, so now whenever i think of something (regardless of how likely it is that I’ll get round to doing it is) i jot it down.
I have some pretty good ideas, but they will appear on my blog when I get it running
Razor
June 10th, 2007 at 2:20 AM
the closest i come to drawing by hand is… wait a sec, i dont lol. i find it easiyer to think of a design, work on it then use / scrap it when i am finished
Adnan
June 10th, 2007 at 4:37 AM
Yeah I’m definitely like you Connor. I’m a crap free hand drawer but am OK if you give me a ruler and need straight lines doing
Art in general though, is a no-go.
Andy
June 10th, 2007 at 5:58 AM
Have to agree with Josh on the plain paper. I don’t like following lines in rough drafts
L3ggy
June 10th, 2007 at 1:31 PM
I really should use this method but i like to just get stuck in.
cherries
June 23rd, 2007 at 4:45 AM
I just usually start from scratch, like with my current template, I usually never use pen and paper.
jim
July 4th, 2008 at 4:54 AM
I like to scribble ideas that will be indecipherible to others on paper. Graph paper I won’t us initally as the waste paper bin quickly fills with crumpled mounds. I’ll use old jotters a4 sheets or anything to picture my ideas. The final rough draft I’ll transfer to graph paper cheaper option.Liked your article.
learn to draw
July 21st, 2008 at 3:56 PM
i do the same thing, i have to draw out any site i build before hand, i do the same with graphic design. i find that if i do not draw out the concept and go straight to the computer i have to redo all kinds of things. I even draw out the flow chart for how the site directs traffic.
Create a Website
August 17th, 2008 at 9:36 PM
I’m with you, but I like to use a whiteboard. Got this big ol whiteboard in my office and I can change and mod constantly. I find its the best way to get the creative juices flowing because you know that nothing is constant on a whiteboard.
Can’t wait to see the new site BTW
Login »