Helpful web design tips for Graphic Designers

It's not uncommon for us to receive design files and artwork from traditionally trained Graphic Designers who don't have the experience of building a functional website. One of the issues we find with web pages designed by graphic designers is the consideration of various devices that the site will be view on.

This article attempts to bridge the gap between the graphic designer's approach and the recent changes in online viewing habits.

For the majority of graphic designers in the workforce, digital design was still in its infancy while they were at design school. At design school they were taught that a website design was just another application for branding. You made a nice layout for the dimensions of the average desktop screen. Many designers still approach web design in this manner however, the problem with this approach now is the general population are accessing websites on many different devices, and there's no longer one screen size to design for.

So what's a graphic designer to do? How can you bridge the gap between design approach/experience and the end-result? Short of learning HTML and CSS, the one thing you can begin doing immediately is changing your approach to designing for the web.

To get you started, we've compiled the following list of tips to help you with designing your next web design project.

1. Set-up your files at actual size

The most common thing we see from graphic designers are files supplied to us in the wrong size, scale or format. If you want to be sure that your design is built exactly how you envisioned it, set-up your documents to actual size in Photoshop. Make sure you set up your Photoshop document in RGB color mode at 72ppi (screen resolution) and set your unit preferences to pixels. Delete any unwanted layers, and make sure you name all your layers clearly - your front-end developer will love you for it.

2. Design multiple Photoshop layouts for different sized devices.

For responsive or adaptive websites, you need to design at least 3 layouts for your website: mobile phone, tablet and desktop. Here's some useful device sizes:

Mobile phone (up to iPhone 5): 320px width (device viewing size is 320px x 568px)
iPad: 768px width (device viewing size 768px x 1024px)
Desktops and laptops: 1224px width
Widescreen and larger monitors: 1824px width

As a side note, 1366x768px is currently (as of March 2013) the most common screen resolution.

3. Design to a grid

This is not essential, but designing to a grid helps you optimise your time designing. A good place to start is the 960 grid system. The photoshop templates included in the 960 download include 12, 16 and 24 columns grids for desktop sized screens. Admittedly, there are no ready-made tablet and mobile photoshop templates in the 960 download however, you can use the supplied templates for your mobile and tablets but remove a few columns to fit to size. The other approach is to scale the templates down to mobile and tablets device size.

4. Use web fonts

You've probably heard this one before, and you probably think 'Web fonts are so limited and ugly and they compromise my design!' - enter Google web fonts. Google web fonts is a large online collection of fonts that you can use in your designs for... free! You can browse and add fonts to your own personal collection, then review and download them to use in your web designs. Brilliant!