Organize Your Website Before Touching a Computer

Cynthia Bartz • December 1, 2015

Wireframes are one of many tools designers and developers use to build websites. At its most basic, a wireframe is just a sketch of a site. Wireframes can vary from simple sketches on napkins to complex & polished mock ups. Below you can see a few examples of wireframes from past projects.


No matter what level of polish, wireframes do not represent the final design of your website. You can think of wireframes as the blueprint of your website. Just like your house blueprints, the wireframes are plans for your website. When you look at an architectural blueprint they are often black and white sketches, but that does not mean that the final building will be black and white. In the same way, a black and white sketch of your website is not what the final product will look like.

Why Use Wireframes

There are lots of reasons to use wireframes. For me, the main reason to use wireframes is to create a plan for the content on your website. I always start my design process with wireframes because they are fast. When you are in the early stages of launching a website the first challenge is figuring out the specifics of what is going to go on the site. Do you want to have an introductory paragraph? A splashy image and headline? List of services? Icons? Do you need a photo gallery? What does your sales page look like? Quick wireframe sketches allow you to explore all of these options cheaply because you aren’t concerned at this stage with design details or code.

Block out content

A website can be a complex project. A final website is a combination of design, code, writing, photography, forms and more. Building a wireframe creates a plan so that the copywriter and designer can work at the same time. Starting with wireframes with blocks of lorem ipsum copy means that you aren’t writing content blind either. A good wireframe will outline what the copy should say and approximately how long that copy should be.

Speed up the design process

Wireframes also speed up the design process because the strategic thinking is already done in the wireframe. Creating a plan up front also means that you can concentrate on making the design super awesome.

The Wireframe Process

The CB.Graphics website development process starts with pen and paper. My goal is to deliver a strategic, organized and effective website. I have found that starting with pen and paper produces better results. Often when we dive right into themes and design and branding the final product will be driven by the structure that is already in place, rather than providing the best solution.

1. Draw a Site Map

All a site map is at this level is a list of all the pages that will be on the website and how they will be organized. You could have a nice pretty map like the one below or just a simple list. I also use this stage to determine what pages are going to appear in the main navigation and what will be going into the footer or drop down menus.


2. Sketch Wireframes

Paper wireframes are used to block out content with simple shapes, like boxes and lines. Often times the wireframes happen during meetings. These wireframes are fast, think less than 10 minutes. I will also create multiple sketches for each page as necessary. This is the time to play with ideas, brainstorm and try things. There is no risk in being wrong at this stage.


3. Refined Wireframes

After working through the rough wireframes, I move to the computer and clean them up. The clean wireframes is what is delivered to the client. They are easier to read, have lorem ipsum text, and explanations of each component of the page.


4. Design

Once the wireframes are done we go into design. The design represents what the final website will look like. This is the super fun part of pulling in brand assets, flowing in content, and making everything generally look awesome.


5. Development

When the design is perfected and everything is approved I go into development, which is to say I bury myself in code. At this point I often reference back to the wireframes in order to structure the code and theme efficiently.


You don’t need any special tools to build wireframes. If you know how to draw a box you can sketch a wireframe. That being said, I do have some favorite resources I use in my process.

UI Stencils

I super love the sketch pads and stencils from UI Stencils. I’ll be honest, it is almost like buying toys for me. Having purchased a few, I will say that the clear plastic ones are actually more useful. It is very difficult to line things up with the metal ones, even if they are delightful.

Everyday Carry Kit

Wireframes Magazine

Wireframes Maganize is an online magazine devoted to wireframes and sketching for the web. They are full of good resources and industry techniques. I especially like this article, Lean Sketching Tips: Flexible Fidelity & Cutting Corners which talks about places that you can approximate text, images, and other elements to build wireframes faster.

Printable Sketching Templates

Smashing Maganize has tons of resources on this topic, but I find myself coming back to this particular article over and over again. It is a list of more templates that you could ever use, including: website templates, mobile phone templates, basic grids, powerpoint templates, calendars, general note taking, and more.

Link: Free Printable Sketching Templates

© 2016 CB.Graphics. All Rights Reserved.