Using a Pen and Paper as a Web Designer

Since starting as a Freelance Designer over 3 years ago I’ve matured quite a bit in my designs, and how I manage to create the designs. From thoughts in my head to html/css code displayed in a browser as a finished product, each step along the way is crucial to a good design, and one of the areas that I often undervalued when designing before was wire framing phase.

Wire frames are gaining popularity very fast with designers and after trying it out, theres no question why. Wire frames help to organize all the information and sections of a site that you’re working on. With sites becoming more complex and looking to be better organized wire frames are used to make sure that the layout of the site, and the communication between pages works well. Every person will have their own method to wireframing, however the concept is usually the same.

Personally, I have a Moleskin Notebook that I begin quick wireframes in to get my thoughts from my head to the paper. From there I use larger graph paper to make a larger and more detailed frame of the site. Its important not to get caught up in design elements, colors, images, backgrounds, etc… at the stage because that isn’t what we want to use our wireframe for. I like to think of the wireframe as a puzzle, and to find the easiest and most useful way to organize the sections on a page into their own locations on the paper. Like I’ve mentioned before, there are no real rules to wire framing, just do what works for you and try new ways to do it. It’s the only way to tell if it helps you and your creative process.

Great Wireframe Resource:
http://wireframes.tumblr.com/ – I found this via twitter a few weeks ago and its regularly updated with new wire frames. Its a great way to see how many different ways you can work on your wire frames.