Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

The Lost Art Of Design Etiquette

Endless layers in Photoshop. Overstuffed image folders. That jQuery plug-in that has 12 files associated with it. Hundreds or thousands of individual pieces go into making a website. No wonder we go off the deep end when we can’t find a closing div — er, section tag. We work with a ridiculously large number of things, and how we organize them (or choose not to) is often left to personal preference. But our messy habits result in confusion for the designer or developer who inherits your work.

Does it really need to be this way?

Us Vs. Them? Link

The great divide between designers and developers is well documented. Designers complain when developers would rather backgrounds not have any images. Developers gripe when given a Photoshop document with missing fonts. If those were the only problems we face, we’d be thrilled.

Unfortunately, not every studio is a breeding ground for pixel-crafting harmony. Sometimes designers work on one floor, developers on another. If you asked a good number of them, they’d say they were content with that arrangement. No wonder communication breakdowns are so frequent. The only brains we have to pick are those of our fellow designers or fellow developers, with little crossover it seems. Proximity doesn’t always improve proficiency, but don’t tell that to bees.

The essence of teamwork. You’ve heard of designer bees and developer bees, right?

Web designers have the unique ability to communicate through layout, shape, typography and, ultimately, simplicity. That same discipline must be exercised internally when sharing their artwork with colleagues — using, coincidentally, those same tools. As challenging as it may be, we can bring sophistication to our interfaces in Photoshop, so that our artwork achieves clarity through order. Just as our client has a target audience, we should also be considerate of the internal audience that uses our work.

We’re nibbling at the edges of websites that deliver a happy marriage between remarkable aesthetic and solid function. Seeing some websites already achieving that is exciting. But to fill the Web with more of it, designers and developers will need to combine their skills in even more proficient and efficient ways.

A Call to Arms Link

Let’s start a revolution that has less to do with being nice and more to do with holding one another to higher standards. Let’s get caught up not in the sexy pixels of tomorrow, but rather in attention to detail in our workflow. What if we made it easier for others to actually use and edit our work? Yes, my friends: let’s start an etiquette revolution.

Designers vs. Developers1
Make better websites, not war. Fist bumps, man hugs and peace signs, people.

More Than Just Chivalry Link

Why etiquette? I agree: at first it does sound stuffy and time-consuming, especially if what we’ve done has always worked. The client won’t see the etiquette, we’ll still get paid, and all is well. But let’s reason here: whether you’re in a group or creating websites all by yourself, the level of detail in your craft reflects how much you value your profession and should be apparent in the finished product.

Even so, internally, inheriting messy artwork can be a point of contention for developers. A design could be the most beautiful and useful thing in the world, but if it’s not practically built, it will waste precious time and money. All of the investigative work of the developer in posing questions to the designer about what’s confusing in their PSD should not have been necessary; the work should have been clear from the beginning, and the designer as organized as ever.

Can both the individual and group benefit from some good ol’ fashioned etiquette?

Personal Gain Link

Here’s a plain illustration of my point. Think of the designer or developer whose work inspires you most. Imagine you had the opportunity to work with them on a project. They got the ball rolling with a PSD or a directory of coded files, and handed it off to you for editing. How surprised would you be if the layers were unnamed? Or the code wasn’t indented, all smushed together? You likely wouldn’t see that, right? Every layer, every line of code reflects on who they are.

Even if you’re a one-person shop, holding yourself to high standard of organization has always been good practice. By doing so, you make less work for yourself when you need to go back to edit something. More importantly, if you were ever to pass off a PSD to a developer or client, you’d want it to speak to your attention to detail and professionalism.

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

Collective Gain Link

Have you ever inherited a PSD from a designer and, on seeing the missing fonts, unnamed layers and myriad of masks, knew you were in for about four hours of work just to get started? No? Must be just me, then.

Indulge me, then. Those hours, even if few, are time spent by someone less familiar with the file than the designer and, thus, unnecessary. Our job as Web designers is to run a tight PSD ship. In theory, I should be able to organize my PSD in a fraction of the time that someone else could, just because of my familiarity as the designer. The result? An easier process for the inheritor and less time billed for the company.

Equally important, how much less disgruntled would developers be if designers handed over their work without so many blunders? How many projects would come in under budget? How about world peace? Too far?

Let’s apply the same clarity that we bring to the canvas to the “Layers” panel, too. Now we’re on our way to higher standards.

Let’s look at some recurring issues and see how to resolve them.

Common Mistakes Link

Didn’t Put the File on the Server Link

Just your luck. A deadline is fast approaching, and you’ve set aside a good amount of your day to plough through editing a PSD that a fellow designer has just finished working on. Problem is, you can’t get to it because it’s sitting on their desktop instead of the server. How convenient. And doesn’t this always happen when they’re on vacation?

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

The remedy
Depending on the hardware, designers should work directly off a networked server, and use their computers only for local back-ups. Alternatively, you could set an alert (in iCal or your app of choice) at the end of each day to remind you to commit your files to a shared spot.

Unnamed or Unused Layers Link

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

The remedy
Name layers and make folders as you go in Photoshop. Yes, it takes discipline, but it’s easier than having to go back to rename and delete after the fact. Use folders, too: they’re there for a reason.

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

Unpurchased Stock Photos Link

Hello there, Mr. iStockphoto watermark. Curious to see you in the final PSD. If we could have only mustered the $3 for credits, I could have gotten rid of you myself.

The remedy
For everything, proofread, proofread, proofread. Your text and your images.

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

Inaccurate File Names Link

You look confused, developer. Clearly, you should be using website_LATEST-v3_FINAL.psd instead of website_USE_THIS_ONE_ULTIMATE.psd.

The remedy
One file, named accurately. Archive the rest if you think you might need to go back to the third of your nine iterations for some reason.

File Naming2
No amount of highlights and descriptions is as good as maintaining a single file and archiving the rest.

Missing Fonts Link

Does this sound familiar?

The following fonts are missing for text layer “myFont, notYours”:

Guilty Culprit Extra Condensed

Font substitution will occur. Continue?

Ain’t that something? Confirming wouldn’t be a good solution in this case, because then the developer would be doing some guesswork to match the font that the designer presumably has more knowledge of. This usually happens when a font needs to be used as image text, so a straight substitution might not be an option.

The remedy
Ideally, the designer would be considerate enough to include the (licensed) font somewhere within arm’s reach of the PSD. Alternatively, the studio could install common fonts on all production computers. Apps like Fontcase, Suitcase Fusion3 and Linotype FontExplorer X4 will manage your fonts for you.

Inconsistent or Inaccurate Content Link

If I’ve learned anything from working with developers, it’s that they don’t like to do things twice. Rightfully so. Whether it’s unpurchased stock photos, inconsistent type sizes or inconsistent colors, when they’re not caught the first time around, images need to be reproduced and code needs to be altered. And sadness overcomes all those involved.

The remedy
Develop a brand guide if one doesn’t exist, and have someone check your work before you hand it off. Think of it as quality control.

Tips And Tools Link

Name Files For Function Link

Be descriptive but practical when naming PSDs, JPEGs, etc. Something like header_bg.jpg is a little more indicative than blue_box.jpg, isn’t it?

Conserve File Size Link

I may sound like an old curmudgeon, but file size is still pertinent today. When exporting images, remember that a background at 80 quality will still look close to one at 100 quality but will likely be at least 33% smaller in size. Everyone still likes pages that load quickly, even if our Internet connection speeds have increased over the years.

Snap to Pixels Link

When I’m cutting up a PSD, one of the most common things I have to negotiate are those 1-pixel semi-transparent lines on the outer edges of shapes. The best way to remove them is pretty well cloaked in the vastness of Photoshop’s settings. When choosing a shape to draw, such as a rectangle, look towards the top of the screen at a row of those same shapes, with an arrow at the end of the row. Click that arrow, and you’ll see more options. Check the box “Snap to Pixels,” and you’ll see that the shape you draw will have much more precise edges.

Use Version Control Link

A fantastic way to cut down on the chaos of sharing files is to use a version-control system such as Git or Subversion. You designers, don’t feel that only developers can geek out about this. Using some type of revision control for our PSDs and other artwork files is equally important, because those files tend to get revised and transferred quite a bit. Version control is crucial when multiple people are working on front-end and back-end development, because overwriting someone’s work when uploading your own is all too easy.

Communicate Link

The saying “Communication goes both ways” never meant so much as it does here. Designers should freely communicate their decisions to developers, who themselves should express their concerns about programming said decisions. Nothing new, but it just doesn’t happen as openly as it should. If you consult with each other frequently, you’re bound to have more etiquette.

Be Teachable Link

Part of practicing good Web design manners is having the humility to know you’re not the best at what you do (except for one of you out there, Mr. Best Web Designer).

Implement Standards Link

The best way to force your Web team to adhere to standards is to come up with a list of best practices, on that holds each person accountable for their PSDs, HTML, CSS and beyond.

Code Standards
Isobar has done some of the work for you with its Code Standards and Best Practices.

The Photoshop Etiquette Manifesto5 for Web designers was created to give both beginner and seasoned designers a crash course in keeping PSDs organized and understandable for others. With helpful visual comparisons of “Do this” and “Not this,” the website serves as both an educational resource and a checklist. With the crown of “Layer Mayor” at stake, why not take more pride as the resident PSD pro in your office?

Photoshop Etiquette Manifesto for Web Designers6
Setting some guidelines in your workplace is key to accountability and consistency.

Moving Forward Link

Having said all this, it’s encouraging to see more designers learning and understanding the process of developers, and vice versa. Some have done it out of necessity, such as freelancers who are hybrid designers/developers. Others have done it in order to understand their co-workers better, in the hope of a better product.

Hopefully, it’s become apparent that being on the same page, especially in Web development, is crucial to success. What are you doing to emphasize a high standard and clarity in your own craft and to make your team’s job easier?


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6

↑ Back to top Tweet itShare on Facebook


Dan Rose is a designer at Adjacent, a focused design studio in Syracuse, NY. He's the author of Responsive Web Design with Adobe Photoshop and the creator of Photoshop Etiquette.

  1. 1

    Ha. I know my developer is laughing at me now. I don’t know where my brain goes sometimes after I finish designing. I guess I just think I am done. So glad I have a wonderful developer that kindly asks me for the changes. I am a recovering unnamed layers addict.

  2. 2

    I had to edit a Prestashop back-end script the other day that wasn’t commented one bit. It was fun, until I got a headache. Inheriting PSDs with layers and masks that aren’t labeled is almost worse. I once had to edit a Paint Shop Pro file that was over 100 layers, and nothing was labeled. I spent more time figuring out the layers than I did making the edits.

  3. 3

    This article makes me feel awful about my unnamed layers! I don’t land up with hundreds, but I just prefer grouping them. I’ve tried naming and get about half way and then fail miserably with the rest… Great article though, thanks.

    • 4

      I believe truely amazing creatives have a bit of trouble with structure.. I know I do, I also take longer to get inspired… vs. my partner that is a more structured creative, my designs rock harder than his, but his are more elegantly coded than mine…

    • 5

      No shame! We’ve all been there. I think the most important takeaway is that we *want* to be organized. How we go about it always takes discipline and sometimes unique methods. Naming layers is a great place to begin. If you do one PSD fully-organized, you’ll be bound to do more.

      • 6

        I’m definitely inconsistent with naming layers during design once the creativity starts flowing. My solution is to name the layers once I’m done with either the creative burst or the file entirely, also taking time at that point to delete layers that were created and merely hidden in case I decided to go back to that idea. That way, when I reopen the file even years later, I’ll have instant recall for whatever I was working on. I think that balance is the key element here, one way or the other isn’t wrong per se, though both methods working together is the true ideal.

  4. 7

    As a print designer first and web designer a distant second, can someone please explain why PSDs are the default format for web design work? While I love Photoshop, Illustrator has so many advantages (more flexibility with typography, scalability, and the ability to share art across media) without any disadvantages that I can find.

    Is the use of Photoshop for layout work simply industry momentum at this point or am I missing some important features that explain this?

    • 8

      I used to use Illustrator for web design until being hired by a web design firm. There, Photoshop was the standard and I had to convert. I brought up a similar question with supporting argument to my Senior Designer. His response was simple: Photoshop is pixel based, Illustrator is vector base.

      In web design, the metric is in pixels, so work with the program that best supports that metric. The mantra is Pixel Perfect Design for a reason ;-)

      Hope that helps!

    • 9

      Historically, Photoshop was the “go-to” app for designing websites. But in recent years Illustrator has gained many new features that make it just as viable as Photoshop depending on your preferences.

      I personally feel “free’er” in Illustrator using multiple pages and my design style probably suites a vector environment more. For me, Photoshop layers are a pain to navigate and feel restrictive.

      There was a comprehensive article on SM recently about why to use Illustrator:

      But like most things in life, it boils down to personal preference.

      • 10

        I also find Photoshop’s layers too restrictive and prefer to work in Illustrator. Reading the SM article some time ago about designing for web in Illustrator was really liberating – I’m much more confident to apply my preferences and use the program I enjoy most. Every time I use Photoshop, I have to go back and name the layers. Illustrator seems so much more intuitive.

        I’m also guilty of naming files ambiguously with words like ‘final’. I should know better – it never is the last version, as there’s always something more to be done. Version numbers work so much better. But I will take the time to check the file before sending it on. I’d rather clean up any mess in-house before asking someone else to deal with it! Thanks for a useful article.

      • 11

        Illustrator’s a great tool, but we spend more time in Fireworks than anything else. I used Photoshop for years, but switched to FW back in ’04, and never looked back. FW just feels so much more pixel-precise to me, and its ability to quickly knock out clickable walkthroughs is great for quick-and-dirty workflows.

        Between Illustrator, Fireworks, and OmniGraffle, I’m good to go. :)

    • 12

      The web is not vectorized, it’s pixelized, which is why Photoshop is the best tool to create layouts for websites. Photoshop allows designers to make their design pixel perfect and accurate in scale. You can vectorize certain objects in Photoshop and have a logo (as an example) as a layer link to Illustrator so you can easily modify it for scalability purposes.

      • 13

        Yeah, the assumption that because some elements of websites are raster-based, therefore we should use raster-based programs to build the web, is way off in my mind.

        If we were to take that assumption to it’s logical conclusion, we should be building websites directly in the browser with CSS. Some people do this already and that’s fine too.

        The point is, there is no “best” application to build websites. And where “pixel-perfection” is required, one could use the same argument, i.e. link a photoshop file to an Illustrator file. At the end of the day it’s a personal working preference.

    • 14

      Illustrator is a program designed for creating vector artwork whereas Photoshop is designed to create and edit raster images. The web is made up of raster images, so it makes sense to use Photoshop over Illustrator. Much easier to get things pixel-perfect in PS.

      Really, Adobe intends for us to use Fireworks when designing for web, and I’ve been told it’s really good for that, but it hasn’t really caught on.

      • 15

        I’m familiar with about a dozen raster image editing programs, and I have to say, from a usability standpoint I put fireworks and GIMP on the bottom of the stack. (My favorite for designing for the web is actually corel photopaint, oddly enough, though I use photoshop for compatibility for professional projects)

  5. 16

    re: Inaccurate File Names

    This system has worked well for us:

    • “Filename” is the name of the file i.e. “Smashing Mag Wireframes”.
    • “BA” is the initials of the person working on the file.
    • “01” is the version number.

    So in this example the file would be named:
    Smashing Mag Wireframes–BA_01.psd

    We always use the latest version of a file based on the version number located in the file name. We never, repeat never, put ambiguous version descriptors such as “Final”, “Print”, “Approved” or “Alternate” in file names.

    • 17

      I do the same as you and it works well!! Interesting… :)

    • 18

      What if two employees have the same initials :) . good idea though if working in a small team

    • 19

      F. Morgan Whitney

      August 30, 2011 12:53 pm

      Rather than relying on weird naming rules that everyone has to know, consider using git or some other revision control system.

      – When you commit your changes, you are required to leave a comment, meaning there is a nice audit history of who has done what to the file.
      – Never worry again about someone deleting a version of your file that you wanted to save, you can easily revert to any saved revision
      – You can add a tag to a committed version, like “1st draft” so it’s easy to find the one you want to send to the client vs. the one that’s in a messy state

    • 20

      Hector Hurtado

      September 5, 2011 2:23 am

      We also use a naming convention. I have not thought of adding designer’s initials to the file, but the problem has never appeared to begin with.

      As a comment to your structure, may I suggest not to use dashes and underscores but rather choose one and stick to it. I have found this adds to the confusion of when, where, and why to use which. A similar reasoning goes for spacing, some people will collate things that makes sense to them, others space everything out… In other words, if you use a convention, make it bullet-proof ;)

      To sort out the mess, I have stated the camelCase convention with dashes as entity separators. In your example, it would thus be:


      Hope this helps.

  6. 21

    The problem of that unpurchased stock photo happened to the wii version of Okami in similar way. Some guy of capcom took a watermarked game cover from IGN which later was used for production. Well, capcom came buckets in that guys ass. He has lost his job for this big mistake.

  7. 22

    In regards to the Snap To Pixel recommendation … If you draw your shapes with the view at 100%, you will not get the “1-pixel semi-transparent lines on the outer edges of shapes.” Those only occur when you draw a shape and your view is less than or more than 100% magnified. Hope this helps someone out there! I know its saved me a lot of hassle when cutting up images. Easier on developing too because there’s no guess work on whether the shape is really supposed to be 50px tall or 51px.

  8. 23

    This is great. Thank you.

    To expand upon file naming, please, please, please, NEVER name anything “new”. Where do you go form there? “newer”? And then what, “newerer”?

    However, consider not deleting previous versions. Instead, name them properly, and store them in an “old” folder or “archive” or something similar. You never know when someone’s going to say “Can you bring up that one you did four versions ago?”

    • 24

      You’re welcome!

      The point you make is spot on. In many workflows (especially Agile), a group may be best served by structuring folders like this:

      Client // Wireframe // Round 1 // client_wireframe.psd

      This keeps the iterations clear without having to toss any previous work.

  9. 25

    That is why we design AND develop, both steps of the chain, we prep it so that any designer/developer that takes it knows where each element is.

    We are a team of ” creative designer married to a more structured designer that really really gets code” results in a lovely synergy for these kinds of projects!

    • 26

      You got it. Ideally, having development knowledge would make any designer more sympathetic to being organized. You see the errors and hurdles that happen from both sides of the fence. Traditionally, working in both disciplines, or even so closely to other disciplines, wasn’t the norm. However, the benefits seem to be more apparent today than they were years ago.

  10. 27

    rafael armstrong

    August 29, 2011 9:08 am

    If there were Commandments for design/dev, these would likely be included, and they’d probably be on circuit boards or iPads instead of stone.

    That said, I would add that, if including fonts isn’t necessarily an option (the ol’ pc/mac, non-OTF chasm), then outlining/rasterizing (depending on whether it’s a PS or AI file) the appropriate type layers would be a good way to go.

  11. 28

    Just a tiny correction regarding the Nintendo game using istockphoto in the box: while you can get that image for 3 credits, you’d probably be required to purchase an extended license due to the packaging being mass produced. So even if you paid some money for the non-watermarked image, you might still be violating their license agreement!

    • 29

      Very true. Duly noted! Certainly makes the offense even worse, now doesn’t it?

  12. 30

    Justin Carroll

    August 29, 2011 10:29 am

    I appreciated this article. Thanks for writing it. It highlights a need for just paying attention and keeping the communication alive. A couple things come to mind.

    To start a company needs to be dedicated to a policy especially concerning version control. In other words it can’t just be something some developer is trying to push. Their superiors (if applicable) need to rally around that idea or no one else will follow it, or they’ll be lazy about it at best because let’s be honest – it’s a giant pain in the ass.

    For communication, this is tricky. I’m not sure it’s always both ways, have you seen The Apprentice? If the PM doesn’t effectively communicate the requirements of a project they can’t expect an effective execution of those requirements. Is it the designer/developer’s job to second-guess what the PM is telling them?

    There is this philosophy of the perfect PSD file, but after working with some of the biggest agencies in the world I can tell you first hand no one cares. If you can’t navigate a messy PSD file then you probably shouldn’t be working in this industry. At the end of the day a designer is hired for their ability to design solutions, naming Layers is a bonus. I love me a tidy PSD file, but it’s just not always a reality.

  13. 31

    Yes, agree! Except for the designer vs. developer cartoon (I know the author didn’t make it). There are some women in the field. We clean up after we make coffee and we name our layers.

  14. 32

    Although, I agree wholeheartedly on naming layers, organizing stuff … I can not quite agree on improving one’s skill set on sites like Method&Craft is a good idea … Trying to teach people how to do things the hard&wrong way … … Wouldn’t it be much better and faster to use the “Duplicate Layer/s …” option here Mr.Yaron!?

    I respect Smashing Magazine and I think it’s a great source for any designer out there, however I think there should be less articles that include ads for pretentious sites.

  15. 33

    Melinda Rainsberger

    August 29, 2011 11:46 am

    Something else to consider with naming: actions. If you name your layers and folders, it makes it easier to change out one little element. In a perfect world, static elements would be approved before you make hundreds of pages, but that’s not always the case. I just finished a whole bunch of banner ads, and the client wanted to test 2 different color schemes. The previous designer didn’t label anything, and the same element had different names from file to file (like the background was Layer 01 in some and Layer 02 in others), so I couldn’t simply write an action to swap out the background for all the files.

    Names matter!

  16. 34

    You touched a lot of things with your article …

    “most common things I have to negotiate are those 1-pixel semi-transparent lines on the outer edges of shapes.” Well I hate that too. It happens a lot of time when I am dealing with amateur designers.

    Maybe designers and developers should communicate better? sit together and talk?

    • 35

      Right-o. For me, etiquette is a vehicle to harbor that communication. Showing that you care enough to organize your work so that it makes a developer’s job easier/efficient is a great first step in to opening lines of communication. Otherwise, their reaction is either to complain to you or to keep it to themselves, neither of which are good building blocks for positive communication.

  17. 36

    Thanks for this article.

    I admit most of the time i received PSD source from my boss, i need to re-design it and tweak some layers with mask and create specific name on where to place and move those layers.

    I usually do make 4 to 5 Folders layer to make my layers more neat and clean to look.
    » Header
    » Menu Navigation (optional)
    » Ajax / Flash
    » Content
    » Footer

  18. 37

    What about if you do not slice .psd files, but you instead create a work flow like this:
    AI>Flash>Dreamweaver… Oh, well then you would be a Design Developer and everyone else would be an idiot. HA!

    • 38

      AI – not meant for pixel-based editing
      Flash – no longer the way to do any actual website coding
      Dreamweaver – if you already made it flash… what?

  19. 39

    Great article, and it is trending on Worldwide Twitter. Nice one!

  20. 40

    this was a great read.

    *fist bump* to all the Layer Mayors out there


↑ Back to top