The Lost Art Of Design Etiquette


Endless layers in Photoshop. Overstuffed picture folders. That jQuery plug-in that has 12 files compared with it. Hundreds or thousands of particular pieces go into creation a website. No consternation we go off a low finish when we can’t find a shutting div — er, territory tag. We work with a ridiculously vast series of things, and how we classify them (or select not to) is mostly left to personal preference. But a disorderly habits outcome in difficulty for a engineer or developer who inherits your work. Does it unequivocally need to be this way?

Us Vs. Them?

The good sequence between designers and developers is good documented. Designers protest when developers would rather backgrounds not have any images. Developers dispute when given a Photoshop request with blank fonts. If those were a customarily problems we face, we’d be thrilled.

Unfortunately, not any studio is a tact belligerent for pixel-crafting harmony. Sometimes designers work on one floor, developers on another. If we asked a good series of them, they’d contend they were calm with that arrangement. No consternation communication breakdowns are so frequent. The customarily smarts we have to collect are those of a associate designers or associate developers, with small crossover it seems. Proximity doesn’t always urge proficiency, though don’t tell that to bees.

The hint of teamwork. You’ve listened of engineer bees and developer bees, right?

Web designers have a singular ability to promulgate by layout, shape, typography and, ultimately, simplicity. That same fortify contingency be exercised internally when pity their pattern with colleagues — using, coincidentally, those same tools. As severe as it competence be, we can move sophistication to a interfaces in Photoshop, so that a pattern achieves clarity by order. Just as a customer has a aim audience, we should also be demure of a inner assembly that uses a work.

We’re roaming during a edges of websites that broach a happy matrimony between conspicuous cultured and plain function. Seeing some websites already achieving that is exciting. But to fill a Web with some-more of it, designers and developers will need to mix their skills in even some-more proficient and fit ways.

A Call to Arms

Let’s start a series that has reduction to do with being good and some-more to do with holding one another to aloft standards. Let’s get held adult not in a voluptuous pixels of tomorrow, though rather in courtesy to fact in a workflow. What if we finished it easier for others to indeed use and revise a work? Yes, my friends: let’s start an use revolution.

Designers vs. Developers
Make improved websites, not war. Fist bumps, male hugs and assent signs, people.

More Than Just Chivalry

Why etiquette? we agree: during initial it does sound bleak and time-consuming, generally if what we’ve finished has always worked. The customer won’t see a etiquette, we’ll still get paid, and all is well. But let’s reason here: either you’re in a organisation or formulating websites all by yourself, a turn of fact in your qualification reflects how many we value your quarrel and should be apparent in a finished product.

Even so, internally, inheriting disorderly pattern can be a indicate of quarrel for developers. A pattern could be a many pleasing and useful thing in a world, though if it’s not many built, it will rubbish changed time and money. All of a inquisitive work of a developer in posing questions to a engineer about what’s treacherous in their PSD should not have been necessary; a work should have been transparent from a beginning, and a engineer as orderly as ever.

Can both a particular and organisation advantage from some good ol’ fashioned etiquette?

Personal Gain

Here’s a plain painting of my point. Think of a engineer or developer whose work inspires we most. Imagine we had a event to work with them on a project. They got a round rolling with a PSD or a bureau of coded files, and handed it off to we for editing. How astounded would we be if a layers were unnamed? Or a formula wasn’t indented, all smushed together? You expected wouldn’t see that, right? Every layer, any line of formula reflects on who they are.

Even if you’re a one-person shop, holding yourself to high customary of classification has always been good practice. By doing so, we make reduction work for yourself when we need to go behind to revise something. More importantly, if we were ever to pass off a PSD to a developer or client, you’d wish it to pronounce to your courtesy to fact and professionalism.

(Aside to Fireworks users: I’m about to make a ton of references to PSDs, so feel giveaway to surrogate “Fireworks PNGs.”)

Collective Gain

Have we ever hereditary a PSD from a engineer and, on observant a blank fonts, unnamed layers and innumerable of masks, knew we were in for about 4 hours of work customarily to get started? No? Must be customarily me, then.

Indulge me, then. Those hours, even if few, are time spent by someone reduction informed with a record than a engineer and, thus, unnecessary. Our pursuit as Web designers is to run a parsimonious PSD ship. In theory, we should be means to classify my PSD in a fragment of a time that someone else could, customarily since of my laxity as a designer. The result? An easier routine for a heir and reduction time billed for a company.

Equally important, how many reduction discontented would developers be if designers handed over their work though so many blunders? How many projects would come in underneath budget? How about universe peace? Too far?

Let’s request a same clarity that we move to a board to a “Layers” panel, too. Now we’re on a approach to aloft standards.

Let’s demeanour during some repeated issues and see how to solve them.

Common Mistakes

Didn’t Put a File on a Server

Just your luck. A deadline is quick approaching, and you’ve set aside a good volume of your day to plough by modifying a PSD that a associate engineer has customarily finished operative on. Problem is, we can’t get to it since it’s sitting on their desktop instead of a server. How convenient. And doesn’t this always start when they’re on vacation?

Alarm Reminder
If you’re like me, your short-term memory could use a sign during 5:00 pm daily.

The remedy

Depending on a hardware, designers should work directly off a networked server, and use their computers customarily for internal back-ups. Alternatively, we could set an warning (in iCal or your app of choice) during a finish of any day to remind we to dedicate your files to a common spot.

Unnamed or Unused Layers

The developer didn’t pattern to need a machete to use your file. Thicker than a Amazon rainforest, your PSD has layers-a-plenty, some even with such renowned names as “Layer 0 copy.”

The remedy

Name layers and make folders as we go in Photoshop. Yes, it takes discipline, though it’s easier than carrying to go behind to rename and undo after a fact. Use folders, too: they’re there for a reason.

Messy Layers
Distinguishing “Layer 0” from “Layer 1” is hard. Let’s use a words.

Unpurchased Stock Photos

Hello there, Mr. iStockphoto watermark. Curious to see we in a final PSD. If we could have customarily mustered a $3 for credits, we could have gotten absolved of we myself.

The remedy

For everything, proofread, proofread, proofread. Your content and your images.

Watermarked photo
Ouch! See what happens when we forget to buy a stock?

Inaccurate File Names

You demeanour confused, developer. Clearly, we should be regulating website_LATEST-v3_FINAL.psd instead of website_USE_THIS_ONE_ULTIMATE.psd.

The remedy

One file, named accurately. Archive a rest if we consider we competence need to go behind to a third of your 9 iterations for some reason.

File Naming
No volume of highlights and descriptions is as good as progressing a singular record and archiving a rest.

Missing Fonts

Does this sound familiar?

The following fonts are blank for content covering “myFont, notYours”:

Guilty Culprit Extra Condensed

Font transformation will occur. Continue?

Ain’t that something? Confirming wouldn’t be a good resolution in this case, since afterwards a developer would be doing some guesswork to compare a rise that a engineer presumably has some-more believe of. This customarily happens when a rise needs to be used as picture text, so a true transformation competence not be an option.

The remedy

Ideally, a engineer would be demure adequate to embody a (licensed) rise somewhere within arm’s strech of a PSD. Alternatively, a studio could implement common fonts on all prolongation computers. Apps like Fontcase, Suitcase Fusion and Linotype FontExplorer X will conduct your fonts for you.

Inconsistent or Inaccurate Content

If I’ve schooled anything from operative with developers, it’s that they don’t like to do things twice. Rightfully so. Whether it’s unpurchased batch photos, unsuitable form sizes or unsuitable colors, when they’re not held a initial time around, images need to be reproduced and formula needs to be altered. And unhappiness overcomes all those involved.

The remedy

Develop a code beam if one doesn’t exist, and have someone check your work before we palm it off. Think of it as peculiarity control.

Tips And Tools

Name Files For Function

Be detailed though unsentimental when fixing PSDs, JPEGs, etc. Something like header_bg.jpg is a small some-more demonstrative than blue_box.jpg, isn’t it?

Conserve File Size

I competence sound like an aged curmudgeon, though record distance is still impending today. When exporting images, remember that a credentials during 80 peculiarity will still demeanour tighten to one during 100 peculiarity though will expected be during slightest 33% smaller in size. Everyone still likes pages that bucket quickly, even if a Internet tie speeds have increasing over a years.

Snap to Pixels

When I’m slicing adult a PSD, one of a many common things we have to negotiate are those 1-pixel semi-transparent lines on a outdoor edges of shapes. The best approach to mislay them is flattering good cloaked in a proportions of Photoshop’s settings. When selecting a figure to draw, such as a rectangle, demeanour towards a tip of a shade during a quarrel of those same shapes, with an arrow during a finish of a row. Click that arrow, and you’ll see some-more options. Check a box “Snap to Pixels,” and you’ll see that a figure we pull will have many some-more accurate edges.

Use Version Control

A illusory approach to cut down on a disharmony of pity files is to use a version-control complement such as Git or Subversion. You designers, don’t feel that customarily developers can geek out about this. Using some form of rider control for a PSDs and other pattern files is equally important, since those files tend to get revised and eliminated utterly a bit. Version control is essential when mixed people are operative on front-end and back-end development, since overwriting someone’s work when uploading your possess is all too easy.


The observant “Communication goes both ways” never meant so many as it does here. Designers should plainly promulgate their decisions to developers, who themselves should demonstrate their concerns about programming pronounced decisions. Nothing new, though it customarily doesn’t start as plainly as it should. If we deliberate with any other frequently, you’re firm to have some-more etiquette.

Be Teachable

Part of practicing good Web pattern manners is carrying a piety to know you’re not a best during what we do (except for one of we out there, Mr. Best Web Designer). Be open to being prepared by other designers, developers and illusory websites such as Think Vitamin Membership and Method Craft. You’ll benefit a honour of your co-workers for holding a beginning to urge your ability set.

Method  Craft
Websites like Method Craft are useful resources in your query to turn a Web pattern hero.

Implement Standards

The best approach to force your Web group to belong to standards is to come adult with a list of best practices, on that binds any chairman accountable for their PSDs, HTML, CSS and beyond.

Code Standards
Isobar has finished some of a work for we with a Code Standards and Best Practices.

The Photoshop Etiquette Manifesto for Web designers was combined to give both amateur and seasoned designers a pile-up march in gripping PSDs orderly and distinct for others. With useful visible comparisons of “Do this” and “Not this,” a website serves as both an educational apparatus and a checklist. With a climax of “Layer Mayor” during stake, because not take some-more honour as a proprietor PSD pro in your office?

Photoshop Etiquette Manifesto for Web Designers
Setting some discipline in your workplace is pivotal to burden and consistency.

Moving Forward

Having pronounced all this, it’s enlivening to see some-more designers training and bargain a routine of developers, and clamp versa. Some have finished it out of necessity, such as freelancers who are hybrid designers/developers. Others have finished it in sequence to know their co-workers better, in a wish of a improved product.

Hopefully, it’s turn apparent that being on a same page, generally in Web development, is essential to success. What are we doing to stress a high customary and clarity in your possess qualification and to make your team’s pursuit easier?