Web Design Tips for Print Designers

I have 3 quick tips that will make designing for the web easier for everybody involved!

1. Make your canvas bigger than the area you are designing for.

How does making the canvas larger help with web design? It forces you to think of the design outside of the fixed widths of your canvas. Probably one of the most common problems I run into with a designer who has never had to code their own creations is dealing with the 'unknowns'. How are design elements like photos and background colours handled? Do they simply end, do they fade out or do they repeat ad infinitum to the end of the page? These are the types of questions you have to ask yourself when putting together a design.

2. Design with guides.

HTML is a boxy language that essentially works from left to right, top to bottom. In your design software, pull down some horizontal guide lines around your major foreground elements. For example, logo, navigation and text. If you find that you've got some lines going through other foreground elements then you may find yourself doing more work to pull off the effect. Background elements are less important because if they need to be cut into seperate images, there will be no meaning lost.

3. Use a "pixel precise" application for your design work

Use Adobe Photoshop or Macromedia Fireworks for your design work. A 1 pixel line will be a 1 pixel line. Don't do your final design in Adobe Illustrator. You'll end up just creating more work for yourself... or for those that have to work with your designs.

Published August 15, 2004 · Updated September 17, 2005
Categorized as Other
Short URL: https://snook.ca/s/208

Conversation

4 Comments · RSS feed
johnny lactose said on September 15, 2004

although illustrator files brought into fireworks are better than faking vector type lines and outlines with photoshop, since fireworks let you control precisely the line width.

Szymon said on October 18, 2004

is any tutorial how tu create
a good design for eg. book or tech.documentation [like macromedia or apple]

said on October 18, 2004

sorry for english
;)
to - [tu]

how to sorry

said on June 02, 2006

Photoshop CS2 is much better handling vector images brought in. While fireworks is more precise, photoshop is my personal choice as a whole. Thank god they finally created "Vector Smart Image" ability in photoshop. No quality loss no matter how much you downsize or upsize.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.