I got this idea from Fuel Your Coding’s 10 Rules of Front End Coding. Someone had mentioned that they wished there was a similar article from the opposite perspective. These 10 tips assume you are a mostly-print designer and just beginning web design.

1. Talk to the developer before you begin designing, and be open to modifying your ideas.

Designs you have in mind may not translate to the web exactly the way you want. By talking to the developer before you have every page mocked up, you can establish what will be possible, what will be near impossible, and save time for you both.

2. Use the grid system, and think about your design in terms of content-blocks.

When designing for a non-Flash website, different sections, like navigation, body, and sidebar, can be grouped into subject-matter. This does not need to be obvious in the design, but it should be easy to block subject-matter together with imaginary rectangles. This is typically called wireframing.

Examples with content block overlays:

3. Assume your initial mockup is a template for the other pages.

Create a color palette and type treatments that can be used consistently from page to page. With cascading style sheets (css), each block of content will be defined much like Paragraph and Character Styles in InDesign. These styles can be repeated on various pages, like the main navigation, which will most likely be present on every page. Identify the colors and type treatment that you want for links, headlines, pull quotes, etc. in each block. Remember that colors should be consistent from level to level (e.g. heading 1 versus heading 2 text should vary from each other, but not change from page to page).

4. Create sample active links and mouse-over effects in your mockup pages.

Every mouse-over effect on every page doesn’t need to be mocked up, but general colors for active links, and basic mouse-over button effects, should be illustrated somewhere to keep the developer from guessing.

5. Design in Photoshop with layers kept intact.

Utilize Illustrator for effects, but import everything into your layered Photoshop mockup. Layers will need to be exported to jpg, png or gif format – all raster formats. Notice none of those formats are print formats like eps or pdf. This also means keeping your fonts intact (i.e. not flattening them to any other layers). Illustrator can be used in place of Photoshop if web design is line art heavy, but Photoshop is more typically used.

Edit: a great post on how to effectively organize your Photoshop layers was just posted.

6. Don’t expect your design to look consistent across all computers and browsers…

or exactly how it looks in your mockup. The type you are setting in Photoshop is not going to translate to the web the way that Photoshop displays it. The background you are creating may shift based on someone’s monitor resolution. The colors you pick may look slightly different on another computer.

Examples of a website in Internet Explorer 6.0 versus Mozilla Firefox 3.0:

7. Consider color blind visitors when creating your color palette.

As many as 1 in 12 visitors to your website may be color blind. There are four types of color blindness to consider, but the most common color deficit is red/green (Deuteranopia). “Although most people see red and green as contrasting, those with [Deuteranomaly Vision] will not be able to tell these colors apart. This also goes for combination with variations of green and red, including colors such as purple and orange.” (Source: How to Design Web Accessible Pages for the Color Blind)

Deuteranomaly Vision example:

8. Unless creating a headline that will be a graphic, use common fonts in your type treatments.

Verdana, Arial, Times, Palatino, Lucida Sans… Using cross-platform common fonts is standard for body copy in web design. Visit Common fonts to all versions of Windows & Mac equivalents for a complete list.

9. If you are using an image for a background, make sure it is tileable.

This may mean designing a separate background file that tiles correctly and tiling it in your mockups. Your background image may need to tile on all four sides, or tile on the left and right if it is a large image that is vertically stationary. This accounts for various large monitor resolutions.

Example of website with tiled background:

10. Realize that pdfs are usually available to site visitors only as a secondary source of information.

Pdfs can be used for printable versions of content already on a web page, but typically aren’t primary links or sources of information. First, site visitors don’t expect to open a pdf when clicking on a link. Second, search engines don’t typically rank pdfs very high, because pdfs aren’t usually optimized for indexing.

Doing it yourself

Many of these tips assume you will be having someone else do your web site development. If you are planning to script the website yourself and have never done it before, familiarize yourself with html and css, bare minimum. Use Dreamweaver (or similar WYSIWYG software) to help you with the scripting, but don’t design without looking at and familiarizing yourself with the source code, otherwise you will most likely end up with a website that is non-web compliant and will not look consistent across different browsers and platforms. Remember to test your site in multiple browsers and on both a Mac and a PC if possible.

Some final notes about doing the scripting yourself:

It is no longer the standard to design websites in html tables; the standard is css. This is important to keep in mind when you are using WYSIWYG software and also when learning the relationship between html and css.

You may also be tempted to use Flash to design your whole website, which has positives and negatives. The biggest positive is interactivity (check out thefwa.com for some great examples). The biggest negative is lack of search engine optimization. As a beginning web designer, I would not recommend an all Flash website.

Lastly, if you are just learning web design and are designing for a client, don’t over-promise! Outsource a web developer if the project looks too daunting.

Good luck!

Resources for designers shifting from print to web:

W3 Schools (web scripting tutorials and standards):
http://www.w3schools.com

Lynda.com (great tutorials on software and coding):
http://www.lynda.com

Web Monkey (web developer tutorials):
http://www.webmonkey.com/

Print Design versus Web Design