Skip over navigation

Artwork Semantics: Sensible and Fun for Everyone!

By on Apr 10, 2009 in Loud Dog Projects, Web Design, Web Engineering

When designing for the web, it’s important to remember that your .psd or .png will inevitably have elements that require some tweaking to be reproduced accurately.

Things like background gradients, tabs, and buttons especially often must be extracted from the overall design and engineered in their own right. These graphical widgets often need to be as flexible, or “stretchy” as possible to account for an increase in text size or browser “zoom”.

With this in mind it’s always helpful to the engineering team if your Photoshop or Fireworks artwork is layered and named sensibly. It’s much easier to take the time up front to name your design elements semantically (named what they mean) rather than end up with a document full of elements named “Bitmap,” “Group: 8 Objects,” or “Layer 1.”

Here are some screenshots of the layers that make up a graphic used in a related article as I named them in Fireworks on the left and the same layers as they’d appear with their default, generic names:


The only layers I didn’t rename were the default “Rounded Rectangle” names that Fireworks inserted, as they’re pretty much self-evident.

Not only does semantic naming make production easier for me as a front-end engineer, but it makes sense for designers (web and print) as well. Much like the programming admonition to always use verbose, intelligent code comments to ensure your code is understandable to others and to its author in the future, think of yourself three to six months from now and how much nicer it’ll be when you need to open that layered graphics document and get reacquainted.

Rather than spending time trying to decipher what the hell everything means, you’ll recognize your own handiwork, simply read the layer names, and be able to pick up right where you left off.

See? Naming semantically is sensible and although maybe not “fun” per sé, it’ll certainly result in your engineer’s deployment of your vision being far closer to the opposite of “not fun”. Yay semantics!

Hey! This wasn't written by a quiver of finches! It was written by , who does awesome work at Loud Dog, a digital branding firm in San Francisco that helps businesses express themselves authentically via identities, websites, and marketing collateral.

If you want us to do awesome work for you, if you have a question, or if you're just feeling lonely and want to chat, we want to hear from you!

Get in touch

Leave a Reply

Your email address will not be published. Required fields are marked *