The days of the ever resourceful all-in-one web designer-come-developer extraordinaire are long gone. In this industry the general consensus is that a great developer doth not a great designer make (and visa-versa).
It’s more common for designers and developers to work side-by-side collaboratively in web design harmony. Or not as the case may be. Designers tend to make developers jobs as fiddly as possible and developers have a knack for screwing up great designs.
It doesn’t have to be that way, here are five tips designers can follow to make developers’ jobs easier and ensure the site turns out as great as you intended.
1. Design to a grid and be consistent
If there’s one thing that’s going to wind up your developer more than anything else, it’s when the side column in one flat visual is 5px wider than in the next. Your developer is put in a position where they have to decide what is right, is it the first visual or the next? You’re asking your developer to use their initiative… dangerous ground!
One of the first things graphic designers are taught is how to design to a grid. It gives your design structure both visually and in a logical sense that really helps your developers build clean and organised markup.
2. Please use Photoshop, not Illustrator
Illustrator is a great tool and many designers will know it inside out – especially those from a predominantly print background. However, it is primarily a print tool – not a web tool. The thing about websites is that we do things in pixels, not millimetres, picas or inches.
Whilst in theory Illustrator allows you to create documents in pixels and provides all the tools for your developer to slice up the segments and export to web, in practice your developer will moan and groan every step of the way because it simply doesn’t offer the tight pixel perfect control that Photoshop does for this purpose.
3. Label your layers and group them neatly
You, the designer, may have some kind of innate understanding of your unorganised mess. But developers on the other hand think in a series of 0’s and 1’s – they like order and structure and if there’s one thing they hate doing more than using their initiative, it’s guessing what “Copy of Layer 23 8″ corresponds to.
Make your developer love you by deleting any unnecessary layers, labeling everything with sensible names and grouping similar and logical items such as header elements and side column elements together.
4. Understand web typography
I think we’ve moved on from the days where the entire web was built using only Arial and Verdana. But as a designer for the web you have a duty to understand what web-safe fonts are and build up more ambitious font stacks with the understanding that the viewing experience won’t be the same for every user.
Try and avoid demanding image replacements for heading elements. It takes your developer many, many times longer to slice and dice an image rather than using pure CSS. You’ll earn your developer’s respect if you show an understanding for the medium you design for.
5. Provide clear briefing documents and explain everything
Don’t just wing over the PSDs and wash your hands of the whole affair. You want the site to look as great as you designed it, right? Then spend a bit of time briefing your developer on all the niggly details.
A few things your developer will be keen to hear:
- How does the grid work, how many columns are there and what is the margin between each column?
- List down every single hex colour that you’ve used. Do you trust your developers ability with the colour picker not to?
- Explain the fonts and font stacks for every heading and body element. Your developer will want to know typefaces, font sizes, line-heights and margins.
Are you a developer with some pent-up frustrations?
Let it all out! Tell me how your designers could make your life easier.
6 fantastic comments
Quality article – I totally agree on all of them. My life would be somewhere between 200 and 500x easier if designers would do this.
I’d certainly agree about not using Illustrator but I personally use Fireworks for web layout, perhaps you could also include this as it’s arguably a better tool for pure web design than Photoshop anyway.
Life would be so much easier if designers would all read this!
All great pointers, buddy.
It’s funny, I was reading Marc’s comment and for a moment thought he said:
“My life would be somewhere between 200 and 500px easier if designers would do this.”
What a wonderful sunny Sunday it is! Heading to my folks later with my big bro. He’s a Newcastle fan (there may be trouble ahead).
I work with some really fun and great designers and I can tell you that it makes a really big difference when they understand and do those five things. ; )
It’s also handy when the PSD has units set to px not pt… it’s easy to change but can come up with some funny values if changed afterwards.
What are your thoughts?
