I’m really busy at the moment with a big freelance project so I’ve been finding it hard to update D79, but I thought I could share a set of illustrator symbols I’ve been using to mock up forms.

Click here to download the illustrator form elements symbol library

Fill in your profile

Yeah this one is obvious but important, if you have lots of experience then fill it in, did you know that nearly 73% of companies use social networking to aide them in recruitment ? by filling out your profile you will increase you visibility in searches, list all of your skills in your summary, You could create a email just for Linkedin and add it in the copy of your profile so you an measure your responses.

Add a photograph of yourself

Studies have show that by adding images to either product or services offerings increase conversion rates, so why not add a photograph of yourself on your profile. people are much more responsive when they can see who they are dealing with.

Join and be active in groups

By joining group and being active you achieve two goals.

1. By actively contributing to groups, by answering peoples questions and helping people with problems you increase your visibility and establish yourself as an authority in your chosen field.
2. When you join a group you will be emailed a daily digest of what has been happening in the group, if anyone post a job request you will know about it and you can react, this can be tedious as you will get a lot of emails, ( Which is another good reason to have a email address just for Linkedin ) but it is worth it.

Did you know that Linkedin will not allow you add someone to your network if you don’t know then? It can seen a bit rude to try and link up with people you don’t know, A good way to add people you haven’t met or done business with is by using group membership. If you are both from the same group linkedin allows you hook up by adding a new option ‘groups’ option. But do try to have some sort of dialog before you start adding to your network.

Add applications

Did you can add applications to your profile? WordPress or Bloglink both allow you to link your blog to your Linkedin profile, they will display your latest blog posts on your profile helping you to establish yourself as an authority on your chosen subject and driving traffic to your website.

Network

Well it is social networking! you have to be active, trawl through your address book and your email inbox, get active in groups and add as many people as possible, you never know where the next job offer will come from.

Events

Old school networking! Meeting people face to face is still as valuable today as it was 10 or 20 years ago. You can search Linkedin in for networking events in your local area, some cost and some don’t. Make sure you have plenty of business cards and get yourself signed up !

Final thoughts

Try to remember that networking it about building relationships, don’t expect the work to start flowing in overnight, It will take time and you will get out if what you put in.

I’m always looking to make new connections, why not say hi

Open Photoshop and create a new document and copy these dimensions.

Make sure your foreground and background colours are set to black and white, create a new layer and name it “digital background” then run the Clouds filter ( Filter > Render > Clouds )

Next run the Gaussian blur (Filter > Blur > Gaussian blur ) over the clouds your just created. Set the radius to 35. Try to get a nice smooth look.

Run the Halftone Pattern filter ( Filter > Sketch > Halftone Pattern ) set size to 5, contrast to 4 and pattern type to dot

Now run a Motion blur filter ( Filter > Blur > Motion blur ) set the angle to 57 and the distance to 30.

We’ve got the basic background effect with a couple of filters, now to add some colour, light and shadow.

To add some shadow were going to add a gradient layer ( layer > new fill layer > gradient ) when the dialog box comes up name the layer “Shadow” and set the layer mode to normal.

Set the gradiant going from black to transparent, the angle to 62 and the scale to 100%

Now to add a bit of colour, add another gradient layer ( layer > new fill layer > gradient ) when the dialog box comes up name the layer “Colour” and set the layer mode to overlay.

You can pick any colours you like, I set my gradient going from red to green, the angle to 35 and the scale to 100%.

To give the effect a bit more edge were going to add some TV lines by adding a pattern overlay, but first we need to create the pattern.

Open a new document and copy the settings below.

Use the pencil tool to colour the top pixel black so you have something like below.

Select all ( Select > All ) now with the document selected define a pattern ( Edit > Define Pattern ) and when the dialog box comes up name it ‘TV lines’, once your done you can close the document, there is no need to save it.

Now to apply the TV Lines pattern, with the digital effect document selected apply a pattern fill ( layer > new fill layer > pattern ) when the dialog box comes up name the layer “TV Lines” and set the layer mode to overlay.

Pick the pattern you just created and hit ok.

That’s basically it.. you can play with it a bit more, apply some lighting filters, add some text, etc… get creative

Google docs

www.docs.google.com

First entry has to be google docs. Google docs is a powerful online set of office tools featuring a word processor, spreadsheet and presentation software. They are stored online so are easy to access and share. A good alternative with a bit more power would be openoffice

Google Analytics

http://www.google.com/analytics/

Google Analytics is a must for any website owner and developer, it gives you the ability to track monitor and measure nearly all aspects of you website stats and best of all its free and relatively easy to set up.

Freshbooks

http://www.freshbooks.com/

Freshbooks is an online invoicing, time tracking and expense services, its alows you to send and mange invoves online, track you time and manage your business finances. You can start on a free account which gives you unlimited invoices and 3 clients and once your business grows you can upgrade your account as you see fit. I thought this was a great way to get started with managing my books online, and much less of a headache when it comes to the tax return.

Teamwork Project Management

http://www.teamworkpm.net/

On the bigger projects I work on I like to use project management tools to keep everything organised, Teamwork Project Manager lets you track and monitor projects, tasks, risks, time and project milestones. You can start on a free account of two active projects and 5 MB of space and upgrade when you need to. an alternative to Teamwork Project Manager would be Basecamp, but with no free account offered I opted to test the water with Teamwork PM.

Mailchimp

http://www.mailchimp.com/

Mailchimp is an email marketing tool with a powerful set of tools for setting up email lists, designing email mail outs and track performace. Mail chimp offer and good range of extras such as an iphone app so you can work on the go and a easy installed wordpress plugin. Again you can start on a free account with allows you up to 500 email address and upgrade when you need too.

Do you have any tools that you use to help manage your freelance business?

This week the free texture downloads are various styles of bricks and cobbles.

I was lucky enough to grab an interview with, in my opinion one of the best Avanaut, a professional illustrator and designer from Finland.

Thank you for taking the time to talk to us, so for all the people out there could you tell us what motivated you to work with toys such as Action man, Starwars and Lego ?

I want to document my kid’s toys with photography, to save them in a way while they’re still around. With the forementioned toys I got a little carried away and wanted to take things a bit further. I guess it’s has a lot to do with curiosity.

I also have to admit I was a kid when the Star wars first came out in ’77 and it had a profound effect on me. I kinda found it again thru the kid’s toys.

Avanaut – Rebel Trooper Portrait

Your work shows that you have a very stark bold style with a strong use of light, can you tell us who and what your influences are and how they effect your work ?

I am a professional designer and an illustrator and I like stories. I like if a story is told with visual elements, lighting is a big part of it. A little piece of text doesn’t hurt, however. In the past I have had the privilege to have worked with some of the best photographers over here, I have learned a lot from them. What they do with a camera and Photoshop is close to wizardry to me. I’m not even in the same ballpark, but hopefully I’m learning things as I go.

The use of light, I guess, comes from a realization that a toy doesn’t have to be a toy, it can be many things, a character, an abstract form, whatever I want. With lighting I have often simply tried to lose the toy in the toy and push them closer towards being a character with a personality. If a toy is lit like a portrait it looks weird. I like that.

My influences are probably a mix of a lot of movies, photographs, books, magazines and comics. I do not recognize any specific influence in my work other than that, I’m blind in that sense.

Avanaut – Breaking In the Tauntaun

How would you describe your style?

have a style? I honestly don’t know. I like strong contrasts, but that’s partly because I do not know how to create delicate soft images. I try to look at the little Lego minifigs not as toys but as characters in a one photo play I can write, stage and act. Not all of my shots work like that, of course, but in general I hope my photos can deliver entertaining little stories.

Avanaut – Chewie Misses His Mark

Some of your work has very elaborate set ups, snow shots with blizzards and frost covered faces, cave scenes with rays of light piercing down from the ceiling, can you give us an idea of how you achieve some of the photos and what equipment you use to do it?

I actually think my setups are quite simple. Yes, there is baking powder, milky water and slideprojector moons, but there is nothing extraordinary about that. I have tried to do my photos with whatever comes in handy. The ideas for the setups come from a lifelong affection to movie special effects, and of those I have always liked the simpler ones. As a kid the simple, analogical special effects were the only ones I could dream of and think possible to do, they are the ones I am revisiting now.

I have explained some of my shots in the comments sections, but they may be hard to find among the comments.

I guess the biggest thing was the use of water for miniature air.

Avanaut – Laser Blasting LEGO Stormtrooper

For a beam of light to show there has to be something in the air that makes it visible. Smoke, mist and dust is good in real life, but for a miniature that doesn’t work. I figured I have to miniaturize the density of air itself to be able to create a carrier for the beam of light. Water is dense, milk mixes with water and is perfect substitute for smoke. The beam of light has to be sharp, so I use a strong focused beam of light, my slideprojector, and a black cardboard mask with holes pierced in it. For straight beams of light the sun would be the best lightsource, but in Finland during the winter that is not an easy thing to have.

Avanaut – The Inconvenient Flaw of the Y-Wing

I also used water with plaster powder to create blizzards. That was fun.

Avanaut – The Big Freeze

The frosty face of the Action Man was an accident. The Man fell face down in snow while shooting, the fresh snow had a really small grain because of the freezing temperature and looked really good on the fur of the hood. I ditched my original idea of capturing the Man walking on a snow field and chose to go really close to have the tiny snow particles show. A lot of my shots emerge from something like this, if something looks interesting, I go for that regardless what the original plan was. Nobody will ever know

In January of this year (2010) you mentioned that you had found a love for what you had initially thought of as bit of fun and that you would now like to pursue another idea you had few years ago. Could you tell us a bit about your idea ?

It’s an old story I have cherished for years, but haven’t really been able to start working on it. Mostly excuses, but it’s a big thing and to commit to something like that is a bit unnerving. I have now worked on it for about two months, I’t been difficult but there is slow progress and I’m optimistic about it. I’m in no rush, though, this will take some time.

I was planning to create a sort of “in-progress” type of blog around it, but I became a bit protective about the basic idea and decided to postpone that. I think there has to be more than an idea to start the blog, a publisher would be good…

So, for now, I’m keeping it to myself, but later on some of that material will show up on my flickr photostream, I’m sure.

I would like to say thanks for answering our questions and allowing us to post up some of your work, but one final question before we wrap this up, what can we expect to see form you in the future?

My pleasure! Your questions were excellent.

I have not had a plan so far, I just go with the flow, I see no change in that. But I have been thinking of uploading some non-toy related photographs of personal projects later on. Expand a little. It’s not far from toys, though, but I’d say a bit more serious and ambitious. We’ll see.

You can follow Avanaut on Flickr

I decided to go for a spaced theme idea, don’t ask me why, I must of been playing too much Mass Effect 2.

Step 1: The background

Stars

Create a new layer in the background layer group of your layers palette and name it Stars.

Fill the layer with black then run the add noise filter ( Filter > Noise > Add Noise ) and copy the settings below.

Now open the Brightness and contrast panel ( Image > Adjustments > Brightness and Contrast ) You want to decrease the brightness and increase the contrast until the noise defuses to look like stars.

Repeat the process of adding noise and adjusting the brightness and contrast over the same layer, varying the brightness and contrast levels sightly to give a sense of depth. The more you repeat the process the better it will look.

To add some more depth you can use the colour dodge and colour burn tools.

Adding Galaxies

Create another layer above the Stars layer and name it Galaxies. We’re going to use some brushes to add that extra bit of depth. psbrushes.net is a good place to download some quality brushes, I used these brushes by Sunira. When your finished drop the layers opacity down to 50%.

Nebulars

Create another layer on top of the galaxies layer and name it green nebular. Set the background color to black and the foreground color to a bright green, run the Clouds filter, (Filter > Render > Clouds)

Run Difference clouds filter, (Filter > Render > Difference Clouds) Run the filter a few times to (Cmd+F) to intensify the look.

Set the blending of the Green nebular layer to Screen.

Bring up the layer style dialog box by double clicking on the Green Nebular layer. Hold Alt then click and drag the black marker for This Layer to split it into two markers.

Drag the markers until you get a blending that looks like something below.

Create another layer on top of the green nebular layer and name it Blue nebular. Set the background color to black and the foreground color to a bright blue, run the Clouds filter, (Filter > Render > Clouds )

Run Difference Clouds, (Filter > Render > Difference Clouds) Run the filter a few times to (Cmd+F) to intensify the look.

Set the blending of the Blue nebular layer to Screen.

Bring up the layer style dialog box by double clicking on the Blue Nebular layer. Hold Alt then click and drag the black marker for This Layer to split it into two markers.

Then drag the markers until you get a blending that looks like something below.

Lighting

Create a new gradient fill adjustment layer above the Blue nebular layer.

Double click the gradient fill colour box to bring up gradient fill colour editor

Copy the settings below, make sure the gradient end colour is set to 0% opacity.

Click ok to go back to the Gradient Fill box and copy the settings below.

Click ok, now set the Gradient Fills layer blending to colour and its opacity to 50% you should have something like below.

Were going to repeat the Lighting process to add a bit of extra detail. Create a new gradient fill adjustment layer above the yellow gradient layer.

Double click the gradient fill colour box to bring up gradient fill colour editor

Copy the settings below, make sure the gradient end colour is set to 0% opacity.

Click ok to go back to the Gradient Fill box and copy the settings below.

Click ok, now set the Gradient Fills layer blending to colour and its opacity to 50% you should have something like below.

Planet

Create a new layer above the red gradient layer and name it planet. Download this texture from Stock.XCHNG and paste it into the planet layer.

Now select the Elliptical Marquee tool and while holding shift, click above the top left corner of the document and drag to the centre. Once your happy with the selection click the add vector mask button on the bottom of the layer pallet.

Which should leave you with something looking like below.

Using the Burn tool paint the edges of the planet to give it depth.

Open Image > Hue & Saturation and copy the following settings.

Using the Burn tool paint the center of the planet till you have a look that is similar to below.

Bring up the layer style dialog box by double clicking on the planet layer and copy the following settings:

When your done you should have something looking like this.

Step 2: Wrapper

Select the Wrapper Layer Group, Now select the Rounded Rectangle tool and using the guides draw the shapes illustrated below on two layers. Name the top shape Contact Background and the bottom shape Footer background. Use the following as a guide.

Set both layers Fill to 75%, and apply the following layer styles.

When your done you should be looking at something like this.

Step 3: Navigation

Select the Navigation Layer Group, Now select the Rounded Rectangle tool and draw a rectangle for the background for the button.

Note: keep the rectangle inside the guides or it will look cramped when we add more detail later.

Now bring up the layer dialog box and copy the following settings.

Gradient Colour values are

Click ok and the button background layer should look like below

Now create a text layer above button background layer.

Font details are: 12px Helvetica Normal

Group the text layer and button background layer into a layer group. This will make it easier to duplicate buttons.

Now duplicate the Nav Item layer group twice and name the buttons “Home”, “About” and “Contact” move the Nav items so you have the following

Select the Line tool with a weight of 5px and draw a line along the bottom of the navigation area. Use the illustration below as a guide

Name the layer Nav Bar, double click the Nav Bar layer to bring up the layer dialog box and copy the following settings.

Gradient values below

Click ok and you should be looking at this.

Step 3: Header

With the Header layer group selected use the Horizontal type tool to draw a text box in the header area, use the illustration below as a guide.

Note: I’ve let a bit of space at the top and bottom of the header, this is because you can’t add top margin to the first paragrpah in photoshop, Its easier to just drop the text box down to simulate the margin of the HTML. There are two bits of text in the header area, H1 and H2.

H1 font and paragraph details:

H2 font and paragraph details:

Step 4: Content

We’re going to add the large image which is the featured portfolio item.

Download this image from stock.chng, crop it to 700px by 400px and paste it into the content layer group, name the layer featured portfolio item. Use the guides to place the image.

Double click the featured portfolio item layer to bring up the layer dialog box and copy the settings below.

Click ok

Using the Horizontal type tool to draw a text box next to the featured portfolio item, use the illustration below as a guide.

The three font values are H3, H4 and P.

H3 font and paragraph details:

H4 font and paragraph details:

P font and paragraph details:

Using the Horizontal type tool to draw a text box under the featured portfolio item, use the illustration below as a guide. Use <H2> for the font size.

H2 font and paragraph details:

Download the following images from stock.chng (Image1, image 2, image 3 and image 4). crop them to 220px by 200px and paste them into the content layer group, use the illustration below as a guide.

Name the image layers portfolio item 1, portfolio item 2, portfolio item 3 and portfolio item 4.

Apply the layer settings below to portfolio item 1, portfolio item 2, portfolio item 3 and portfolio item 4 layers.

Click ok

Note: I moved the “More Examples of Work” title down to balance the space.

Using the Horizontal type tool to draw two text boxes under the four more example images, use the illustration below as a guide. The two fonts used are H2 and P.

H2 font and paragraph details:

P font and paragraph details:

Step 5: Footer

With the Footer layer group selected use the Horizontal type tool to draw four text boxes in the footer area, use the illustration below as a guide.

The three fonts used are H2, P and A.

H2 font and paragraph details:

P font and paragraph details:

A font and paragraph details:

When your done you should have something like this.

Step 6: Icons

The final stage is to add the Icons, Icon finder is a great way to find Icons. I used the Space Odyssey by Mischa McLachl

Select the More Examples of Work text layer in the Content layer group and change its left margin value to 55 px.

Place the Icon ( File > Place ) I used Dave Bowmans Discovery Helmet.png. Before you hit ok you’ll need to reduce the size by 40% so it will fit.

Use the guides to align the Icon.

Hit the Enter key and you should be looking at this.

Finally repeat the process of placing the Icons next to the rest of the titles until you have something like below. You will have to change the values slightly of the size of the icons and the margins to compensate for the different sizes of icons and to balance the space.

Most of them are down to personal preference, but hopefully you might get some ideas of your own. Do you have any online tools you like to use? Why not share your ideas?

ColourLovers

www.colourlovers.com

Colourlovers is a creative community that shares colours, palettes and patterns. I use this site very early on in my design process, Colourlovers is a great site to get a colour palettes based either on your ideas or your clients preferences, you can search thousands of different combinations and once you have found two or three you would like to try out you can download a very handy zip file with all the relevant CSS colour values, Photoshop, Illustrator colour palette files.

Lorem Ipsum

www.lorem-ipsum.info/generator3

Lorem Ipsum is a designers best friend, it’s used as place holder copy to demonstrate the visual presentation of typography layout and font in designs. There are many online tools that generate Lorem Ispum copy and it doesn’t really matter which one you use, but I like to use this one because you can tick the radio button “Don’t start with”Lorem Ipsum” which I feel gives the copy generated natural flow when you are working back and forth cutting and pasting the copy.

Stock.XCHNG

www.sxc.hu

Stock.XCHNG is a free stock image library, which in July 2009 was taken over by Getty images. This is a great site to find temporary images to use in designs, you can usually find an image which can match what your looking and some cases can even be used in your final design, just make sure to check the images licensing.

Em Calculator

http://riddle.pl/emcalc/

I’ll be honest, in my head I still work in pixels, I know its better to work in relative measurements values,  scaleable etc. But when I’m thinking about fonts I’m still think of things in pixels, I use this Em Calculator to get the em values I need to use in my CSS.

Icon Finder

www.iconfinder.com

Icon finder does exactly what is says on the tin, finds icons. It’s a great tool and a must for any designers bookmarks. You can search for icons that can be used for commercial use, convert fav Icons and they even offer a custom service.

To get the HTML prototype into photoshop, we will need to take some screen grabs of the HTML prototype and load them into photoshop. First make sure you have the prototype loaded in a web browser, I’m using safari.

If you are using a Mac the open Grab and hit capture – window (Shift – Cmd – W) and follow the onscreen instructions. You will have to take to grabs, top and bottom, once you have done that save them and open photoshop.

(If your using a PC then you can use the print screen button and paste them direct into photoshop, don’t worry about the dimensions when you open a new document as photoshop will automatically create a new document the size of your clipboard contents).

Step 1.

Opened your top screen shot in Photoshop you should be looking at something like this.

We need to increase the height of the canvas to make room to paste in the bottom screen grab so open Image – Canvas size and copy the following settings.

Hit ok and you should be looking at something like this.

Now open up the bottom screen grab and paste it in as a new layer. Set the layer opacity to 75% so you can see the layer below.

Now zoom in so you can align the images by matching the pixels.

Before

After

Now we need to trim the image, set the top layer Opacity back to 100% and select the marquee tool from the tool bar. Select the browsers header in my case Safari and hit delete.

Open Image -> Canvas size and copy the following settings.

Merge visible layers.

Select the marquee tool and select around the wireframe like so.

Now select Image – Crop

Step 2: Adding the guides.

Now its time to add the guides, turn on your rulers (View – Rulers) now take your mouse and click on the horizontal ruler and drag it down to the top of the navigation.

Repeat this process until you have guides that run along all the horizontal and vertical lines of your prototype image like so.

Step 3: Setup

Before we move to the design stage lets organise our layers. My personal preference is to organise them into the base elements of a website page. Background, wrapper, footer, content, header and navigation.

We are now ready to start designing, as you can see you have your thought out and tested prototype in photoshop with guides setup so you can snap elements into place accurately.

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.