greg-wood.co.uk
The homepage of web designer Gregory James Wood
The Blog
Why Even a Web Designer Needs Paper
Recently I completed some design mockups of an online gaming magazine (to start development soon) and if I must say so myself, I'm pretty proud of them. This article shows how useful pens and paper were during the initial stages of the design process.
Planning
Most designers design a whole site in their image editor of choice before even considering any coding. In a similar way that this method creates a more rounded design, planning certain design processes on paper helps to go that extra mile.
The Process
Usually I carry around a small notepad with me. Aside from the cartoons, doodles and general stuff that gets entered into it daily, I plan upcoming web site projects, often going into quite a bit of detail considering the site has yet to see a screen.
Typically, on a road trip to London a few weeks ago (a perfect chance to get some preliminary design work done), I forgot the notebook. I did manage to find some scrap bits of paper though, and scans of these are what you see below.
(basic) Information Architecture
Because this is a personal project, I had a idea of the content the site will include, but as yet no idea how to implement that content on the homepage. The first thing I did was to list all the sections and their importance to the reader. I then did a little boxy sketch based on what I’d just listed, plotting the sections around their respective level of importance. The horizontal sketch on the left was a initial venture into sizings and ratios.
Calculations
Now that I had my content placed roughly around a page, I needed a grid to place it on. I needed the main content space to be able to split into two and three in order to accommodate my home page layout and also the dedicated article pages. I chose the obvious six columns, because I felt anymore would have the potential to over complicate the design, which in my opinion is totally unnecessary.
My layout had determined that a sidebar would be present throughout the site, being used to house secondary content. However sketches showed that in order for the design to look ‘right’, the width of the sidebar needed to be greater than the width of one of the columns from the main content grid, yet less than the width of two. Which basically meant an non-uniform grid was needed.
The whole size was to cater for the 1024x768 resolution, so add that to the above constraints and you get these calculations.
Fingers Crossed
After I’d found a combination of numbers that seemed to work, I sketched it out using a ruler (1mm for each 10px) to make sure the ratios felt and looked right. They did.
To Photoshop!
Once I eventually got to the computer and started to create the grid and wireframes, everything progressed so easily. I found myself ‘writing up’ my findings on paper regarding layout and the basic IA for the homepage, and subsequently had more opportunity to start thinking about other design elements such as colour and typography. Solving some of the typical design problems on paper before even looking at a screen definitely benefited these other stages, and indeed the whole process. The finished homepage with the grid is pictured below, see what you think.
Post a comment
About this entry
- Posted on: 20/07/07
- Posted in: Design
Feed Me!
RSS feeds, for all your content-to-desktop needs!
Feed me what? I hear you ask. Well, RSS feeds are a fantastic way of getting content from your favourite websites delivered to your desktop. No need to trawl through your favourites checking for updates! Especially useful for arse-ugly websites.
Copyright © Greg Wood mail@greg-wood.co.uk http://www.greg-wood.co.uk 2007 | Everything here protected and licensed using a Creative commons license | Get some RSS
Comments (7)
Post a comment
Jeeremie // 20/08/07
Interesting what you say about the grid. I will try this next time I have to do a mockup for a client. But what do you do if you don’t know the content yet and your client ask you to do the design? I have this problem right now.
Ewan // 20/08/07
Nice article. I also use this method for preparation. I find if i hit photoshop without having some sort of idea on paper of what I want to do, I’m there for hours and hours messing with layouts, colours etc. before I finally get something I like.
Greg // 20/08/07
Thanks for your comments chaps.
Jeeremie: I always make a point of not starting a design unless I have a decent amount of content. After all, you’re designing the content are you not?
Ewan: I agree with you, the more planning I do off the computer, the quicker everything comes together when I get on it.
Osayame // 20/08/07
Hello, I’m a young improving web designer. I always found it helpful to draw out ideas and kudos on the information here.
Jeeremie // 21/08/07
Yes, you are right. What I actually meant was you don’t always have all the content. It is what happen with the client I talked about. She wants to sell handmade dolls so I know more or less what she needs but she is really busy and she can’t supply me with all the photos and text yet. So basically the website is done but the pages are still empties. Maybe I should have instisted from the beginning to get the all the content and then start the design as you suggest.
Anyway, thanks for your great post.
Lauchlin // 22/08/07
You may even want to go a little further. Carry around a sketchbook and some graph paper notepads. Work on a rough sketch and then transfer it to the graph paper. I’m sure this will help with your grid designs.
Deuce // 29/02/08
I totally understand you when you say the grid. Since I’m not a trained designer, I rather trust the grid before anything else. I also used to make the mistake of starting in photoshop first without putting something on paper.
I no longer do that. It takes me tons of time that I could be spending on refining what I’ve come up with.
Great Article.