If you are a print designer, this guide is for you. Think of it as a Cole's Notes in web design -- a quick synopsis of what you should know and where to start with designing a website.

From Inches to Pixels

A Pixel (px) is a tiny dot that makes up the picture you see on your monitor. It is often used to measure the size of a computer's display (or resolution), which can range in size from 800x600 px to a whopping 3840×2400 px.

Because the resolutions vary so much in size, it is important to design a website using pixels as your measurement. By deciding from the start that you want your website to be 800px wide, you can easily determine how much room your website will take up on the average users monitor.

If you design a website using inches, picas or centimeters they will all be converted to pixels with undesirable results -- making websites too wide or too small for the average user. Don't think that bringing your ruler to the screen will help determine how wide it's going to be.

Red, Green and Blue

Forget everything you know about Pantone and CMYK colours. Like measurements, colours work differently online too. While traditional print jobs are all done using a spot or four colour process, electronic displays show colour through the RGB colour model.

Since RGB mixes colours differently than CMYK, you will notice vast amounts of colour difference after the site is exported to the web. Because of this, it's important that you always design any web-based graphics in RGB colour mode.

Photoshop Has Layers

A common mistake made by print designers is creating the website in Illustrator or InDesign. These programs create vector graphics (often without usable layers) and are completely unusable by the person who has to convert your design into HTML.

To help your code-monkey cohert, you should always use Photoshop to design the website. Begin with a new document. Set the width and height to the pixel dimension you want your site to be, make sure RGB is selected as the colour mode, and always work at a 72 pixels/inch resolution.

While designing, be sure to add and name layers whenever a new element (such as text, a button or a picture) is added to the website. Layers will allow your programmer to turn the different elements on or off during the coding process, giving them the knowledge of what the final product should look like.

Fancy Fonts

Fonts and typography are great. They can make a boring article "pop", and can make a magazine spread look amazing. Unfortunately the web does not allow as much flexibility with type than print-based mediums do.

In order for a font to be show on a website, it needs to be installed on the users computer. Arial, Verdana, Times New Roman, Georgia, Trebuchet MS, and Tahoma are all safe fonts that are available on both PC and Mac computers by default, and are guaranteed to show up the way you want them.

Other "fancier" fonts can only be used in flash pieces (which embeds fonts) or in graphics, and can not be edited easily. Because of this its important to watch where you use these fonts, and to use them carefully. Stick to the defaults for any body copy, and leave the fancy stuff for headings, buttons and logos.

Kerning, leading and other type manipulation is possible -- but again be careful where you use these functions, as they may not appear the same in the final product.

Working With the Programmer

Finally it is important that you build a strong, working relationship with your programmer/developer. By being able to communicate easily with them, you can help them develop your vision quickly and easily.

Consult the programmer before the final design is produced. Ask them questions about what's possible, accept their advice whe it's offered, and be ready to make compromises when something doesn't work.