As a web development firm, we often team up with graphic design studios, enhancing their offerings by turning their concepts into web reality. They produce slick, polished Illustrator image files, which we convert into a standards compliant website. It is then complemented by our content management system (CMS) so they, or their client, can happily load text and images without having to consult with us every time.

Working with other creative entities is always a joy because they have a clear vision of what they’re after and challenge us to push the boundaries of web design. That being said, sometimes those challenges become impossibilities and that’s when we need to sit down and explain what can and can’t be done on the web.

So if you’re a graphic designer trying to make the transition to designing for the web, here’re a few tips we'd like to pass on to make the process of converting your designs into a working website a little smoother.

Screen Resolutions

Not everyone is lucky enough to have a 21inch cinematic monitor on their desk, so design your web comp (or concept) with the lowest common denominator in mind. To allow almost everyone to view your design without having to scroll from left to right, stick to 760 pixels wide, this accommodates people with a screen resolution of 800 x 600. Height is up to you, but if you don’t want them to scroll vertically keep it to around 480 pixels high. Don’t be too precious about making your web visitors scroll, it’s more the norm than the exception.

Think Outside The Square

For people with larger screens and higher screen resolutions (yes I’m talking about you) think about what these people are going to see outside of the design, i.e. what does the background look like?

If you would like to make your background more attractive, then use a small pattern that repeats left to right, top to bottom, doing this will keep the image size to a minimum.

We can make websites expand to fill the page horizontally (known as fluid in the trade) but if you want to be able to position your content and not have things moving all over the place, then stick to a static width site.

Standard Web Fonts

There are only a hand-full of standard web font that can be rendered predictably on most computers, these are as follows:

• Times New Roman
• Georgia
• Arial /Helvetica
• Verdana
• Trebuchet
• Tahoma

For your main website copy, stick with these. There are however some font replacement techniques we can use if you want to spruce up a heading. For your navigation items you can use other fonts but they will be converted to images and it will make adding pages to the site by you or your client trickier in future.

More images increases the wait

If your designs contain lots of images, your client’s web audience will be left waiting longer to see the site. Designing a website that’s aesthetically pleasing is important, but disseminating information quickly is more important (in the author’s opinion), so don’t just use images to get the message across. It also makes it easier for the client to update the site if there are fewer images.

Browser compatibility

It is inevitable that your design will look slightly different in different browsers so be a little flexible. Your web developer should be testing the website in all popular browsers including the following:

• IE 6 & IE 7
• Mozilla Firefox
• Safari
• Opera

Avoid using a splash page

Don’t have an animated introduction screen as the intro to a website, it adds a barrier between your audience and the nuts & bolts of the site. It may also adversely effect search engine rankings in the long run as these pages tend to contain little in the way of readable text and links.

Don’t use scrolling elements (frames)

You may be tempted to use scrolling elements within a page (otherwise knows as frames), so as to maintain the visibility of certain page elements while scrolling through others, however, these are generally considered search engine un-friendly, meaning search engines may not be able to see the content inside these frame. They can also present challenges to content management systems, so your best bet is to stay away from them.

The above pointers are by no means exhaustive but they should point you in the right direction if you're making the transition from desiging for print, to designing for the web. 

Categories:  Web Design