Five ways for designers to live in web-harmony with developers

Web design harmony

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

Designing with a grid layoutIf 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

Photoshop LayersYou, 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:

Are you a developer with some pent-up frustrations?

Let it all out! Tell me how your designers could make your life easier.

7 responses

Marc Fowler responded on with…

Quality article - I totally agree on all of them. My life would be somewhere between 200 and 500x easier if designers would do this.

James responded on with…

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.

buick dealer responded on with…

Life would be so much easier if designers would all read this!

David Airey responded on with…

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).

Mike Grace responded on with…

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. ; )

James Chapman responded on with…

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.

Adam responded on with…

This actually is a pretty good article and makes a lot of sense.

However, there is one point that probably wastes more of my time than any other issue, and that’s the issue of font sizes and line heights. Yes, you did touch on them, and that’s cool. Whoever’s taking the code and turning into web pages should know that. But the key is that the PSD creator should also know that these are plain text elements and should be sized in relative terms. So if ti’s a 12 pixel font, indicate that the font size should be 75%. If the line-height is 18 pixels on that 12 pixel font, then indicate that the line height is 1.5em.

The PSD creator should also be aware that this text can and will be resized, and should compensate for resizing accordingly in his/her layout (most don’t do that, and I’ve spent hours trying to explain this).

Comments are closed

Responses for this article have now been disabled. You can still email me directly through the contact form.