Many companies outsource web design work to freelancers. These same companies often split the duties into at least two, possibly three distinct positions:
- User interface design (graphic design only)
- Web coding (turning the design into web code)
- Programming (turning the web code into a fully functional database-driven website)
Because the logic behind the two technologies are completely different, there are many opportunities for graphic designers to obtain web design jobs without having to know a lick of code.
So, what does it take to design a website’s UI?
Let’s talk about colors
When designing for print, you’re probably used to working with Pantone colors or CMYK process colors. While it is entirely possible to build your designs with these color palettes, you may be disappointed when viewing your designs on the web.
Start your designs in RGB mode to ensure optimal web compatibility. You can choose to setup your palettes using standard RGB values (0-255), or “web hex” colors. Without going into detail, you can see the hexadecimal color codes in color pickers and palettes in Photoshop – these are usually 6-digit codes, 2 characters each representing red, green, and blue.
Pixel precision… size matters
Unlike working with print, web designs are crafted using pixels. Similar to DPI (dots per inch), a pixel is a 1×1 “dot” on screen. Unless you’re carving designs out of rubber stamps, you’ve probably heard of monitor resolutions such as 1024×768, 800×600, and so on.
The resolution of a monitor determines how many pixels will be displayed on a monitor. For example, if a 17″ monitor has a 1024×768 resolution, 1024 pixels will make up the width of the monitor and 768 will make up the height. This is extremely important when considering usability of the site’s design.
As technology progresses, the resolution of monitors are increasing. But consider who your target audience will be – if you know your audience will not consist of the techno-savvy insistent on keeping the most up-to-date hardware, design for a maximum resolution of 1024×768. Keeping the browser interface in mind (address bar, scrollbars, etc), this will give you a maximum of 980×580 pixels displayed above the fold – or before the user has to scroll to view more content. Make sure all the important information can be seen above the fold!
Designing for scalability and speed
Because the web is dynamic, your designs need to be able to adapt to horizontal and vertical scaling. Most websites utilize repeating horizontal and/or vertical background images to limit bandwidth and system resource (less bandwidth and resource hogging leads to faster loading web pages).
To ensure web-compatibility, keep this in mind when composing your design! For example: if you are considering a textured background, be sure to make sure it will tile seamlessly horizontally and/or vertically (and be sure to mark the tile points with guides as well). The same goes for columns, corners, containers, and other elements.
For example: a straight edged column border will be much easier to slice and tile for web output than a paper tear edge (although it can be done as long as you plan ahead).
Consider font selection wisely
Unlike printed material, a website’s font usage (when not converted to an image) is limited to the fonts installed on the visitor’s computer. Imagine sending a design off to a printer – if you didn’t include the fonts with your design (or outlined them in Illustrator), the printer wouldn’t be able to go to press without those fonts.
While titles and headlines can be converted to images, you’ll want to be sure the majority of text on the site uses standard fonts that almost every computer will have installed:
- Arial / Helvetica (Mac)
- Comic Sans (please use sparingly)
- Courier New
- Tahoma / Geneva (Mac)
- Times New Roman / Times (Mac)
- Trebuchet MS (PC only)
Use rulers and guides wisely
One thing that frustrates a web coder to no end is receiving a client-approved design that lacks any measurement structure. You wouldn’t dare send a work-and-turn business card design to the printers without having crop marks, would you?
Always use guides to specify how wide your columns should be (including margins and padding) and how tall your columns should be. It is a good idea to base your widths and heights in increments of 5 or 10 – not only does this make it easier for you to divide by, it also makes it easier for coders as well.
For coders, since you design must be sliced into multiple pieces and put back together again, math is a must. As a designer, you should make the job as easy as possible. If you keep the coder happy, you may continue to receive work from them. Keep your designs clean and simple with plenty of logical guides, and your coders will be happy.
If you ever want to venture into HTML, you’ll also appreciate the necessity of a well-formatted design!