In this post I’m going to talk about the first stages of my design process, taking an idea from a sketchbook to a prototype. There are lots of designers on the internet and we all have different ways of working, I’m going to show you how I like to work and hopefully you’ll pick up some ideas along the way.

To help get my ideas across I thought it would be a good idea to illustrate my design process by showing you how I would design a small portfolio website.

What my design process looks like

Below are the stages I like to take a client through when I’m designing and developing a website.

For the purpose of this article I am going to go into points 1 – 4 in more detail, as this is my prototyping process.

1: Information planning

Before you start anything, you’re going to need to find out what information and elements are needed. Communication is key, so sit down with your client and ask some questions. Who are the target audience? What elements must be displayed at all times? etc. It’s a good idea to get yourself a set of questions you can ask

This part of the process writes the brief for you, if you ask all the right questions you should have everything you need to get started and this will make the design process much easier.

Lets look at my example project.

The purpose of a small portfolio website is to showcase the work of a designer, display his or her qualifications, experience and contact information. So the questions we might ask would look something like this:

• How many portfolio items will be displayed and how large should they be?
• What contact information should be displayed and how would you prefer to be contacted?
• Should links to social networks be displayed ?
• What services can you offer ?
• Do you use twitter ?

Below I have listed the information and elements I am going to use in my design.

• Large portfolio area
• Contact information
• Latest tweets
• Services offered
• Links
• Introduction
• Navigation
• Header
• Footer

2: Sketchbook

Once you have a good idea of all the elements that are going into the website it’s time to start sketching out ideas. I always start with pencil and a bit of paper, its much easier to rub something out and start again at this stage while your planning.

Lets look at my example project.

I have an idea of what elements and information are needed so its time to start sketching out some ideas, try not to think to much about design at this stage as it more important to get everything in the right place.

3: HTML Mock up.

Now that the sketches are signed off, the next stage is to code up a wireframe in HTML. I use a CSS and HTML template system which has all the basic elements set up so I can quickly start prototyping.

download HTML and CSS project template

CSS

/* Rest Styles */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* tables still need 'cellspacing="0"' in the markup */

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; }

/* Global Settings */

html, body { border:0; }

body { font:100.01%/1.75 verdana, arial, helvetica, sana-serif; text-align:center; background:#000;}

/* Left align text in wrapper */

#wrapper { text-align: left;  }

/* Typeography  */

p, li, td, cite, label { font:0.75em/1.75 helvetica, verdana, arial sans-serif;  }

small { font:0.70em/1.75 helvetica, verdana, arial sans-serif;  }

p { margin:10px 0;}

h1, h2, h3, h4, h5 { color:#000; }

p, li, td, cite, label, small { color:#333;  }

h1 { font:bold 1.53em/1.25 helvetica, verdana, arial sans-serif;  }
h2 { font:bold 1.31em/1.75 helvetica, verdana, arial sans-serif; }
h3 { font:1.00em/1.75 helvetica, verdana, arial sans-serif;  }
h4 { font:0.88em/1.75 helvetica, verdana, arial sans-serif;  }
h5 { font:bold 0.75em/1.75 helvetica, verdana, arial sans-serif;  }

/* lists */

ol, ul { list-style: none; }

li { margin:5px 0;}

/* Quotes */

blockquote { font:1.31em/1.75 helvetica, verdana, arial sans-serif; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }

/* Links */

a { color:blue; text-decoration:none; }

a:link { }
a:active { }
a:hover { }
a:visited { }

/* remember to define focus styles! */

:focus { outline: 0; }

/* Forms */
label { display: block; }

/* Wrapper */

#wrapper { width:960px; padding:10px;  margin:0 auto; background:#fff; }

/* Navigation */

#nav { width:940px; padding:10px; margin: 0 0 10px 0; overflow: auto;  background:#ccc; }

#nav ul { float: right; }

#nav ul li { display: inline; margin:0 0 0 10px; }

#nav ul li a { }

/* Header */

#header { width:940px; padding:10px; margin: 0 0 10px 0; background:#ccc; }

/* Footer  */

#footer { width:960px; padding:10px 0; margin: 10px 0 0 0; background:#999; overflow:auto; }

/* Column wapper*/

#column-wapper {  width:960px; padding:10px 0; background:#999; overflow:auto; }

/* Column */

.column-1 { float:left; display:inline; margin:0 10px; width:220px; background:#ccc; }

.column-2 { float:left; display:inline; margin:0 10px; width:460px; background:#ccc; }

.column-3 { float:left; display:inline; margin:0 10px; width:700px; background:#ccc; }

.column-4 { float:left; display:inline; margin:0 10px; width:940px; background:#ccc; }

/* Global Classes */

.clear { clear:both; }

As you can see I have my typography, links, basic elements already fleshed out, this allows me to quickly code up a layout and later on I can use the same code when I start to develop the signed off designs.

I use the following bit of CSS to quickly code layouts, its based on a four columns, but this could be easily modified to fit any column size needed.

/* Column wapper*/

#column-wapper {  width:960px; padding:10px 0; background:#999; overflow:auto; }

/* Column */

.column-1 { float:left; display:inline; margin:0 10px; width:220px; background:#ccc; }

.column-2 { float:left; display:inline; margin:0 10px; width:460px; background:#ccc; }

.column-3 { float:left; display:inline; margin:0 10px; width:700px; background:#ccc; }

.column-4 { float:left; display:inline; margin:0 10px; width:940px; background:#ccc; }

Here is an example of how the HTML would look

<!-- Column wapper -->
<div id="column-wapper">

	<!-- Column two -->
	<div class="column-2">
		<h3>Title</h3>
		<p>copy</p>
	</div><!-- Column two end -->

	<!-- Column one -->
	<div class="column-1">
		<h3>Title</h3>
		<p>copy</p>
	</div><!-- Column one end -->

	<!-- Column one -->
	<div class="column-1">
		<h3>Ttile</h3>
		<p> copy</p>
	</div><!-- Column one end -->

</div><!-- Column wapper end -->

Others use specific software to prototype a website but I use HTML and CSS for the following reasons:

• It gives me full control over the markup and styling
• Once the design stage has been signed off the basic layout of the markup is already done.
• It is both scaleable and flexible
• Lets look at my example project.

Lets look at my example project.

So now I can take the design idea I sketched out on paper and code it up into a working prototype, below is a image of the layout.

Click here to view a live demo

Click here to download the source files

5: Testing

Testing is key, it’s easy to change elements around at this stage. Put yourself in the users shoes. “I want to contact the owner of this website”, is it easy to get to that information? Is it clear ? If you find that something is not working then go back to the sketchbook and draw up some more ideas.

Keep going through this process until your happy.

What next ?

Once you’re happy, what’s next? Its time to take the prototype to the design stage. We’ll look into that in more detail in another post.