Even designers without HTML or CSS experience should be aware of the kind and amount of work that goes into making a design come alive on the web.

Teamwork! Photo of soccer team, all hands in.

Teamwork!

There isn’t much a designer can do that really annoys me… but then again I work with some pretty awesome designers. By “developer-friendly” I mean that, from time to time, the changes designers make in Photoshop translate into extra time spent in development. Sometimes it’s worth it for the aesthetic appeal, but often the result is impractical coding and leaving less wiggle room in the client’s budget.

Whether it’s organizing PSDs or avoiding tricky form elements, designing websites in a developer-friendly way will help you stay on schedule, under budget, and not make your developer want to stab you — all important concerns for a healthy work environment.

Organizing PSDs

I rarely find myself digging through the layers palette for an asset, whether it’s nicely labeled and grouped or not, because in Photoshop you can usually just click on something to select what you need. However, for the sake of future revisions, try to stay organized.

Every team works out their own handoff process and system of organizing files, but there are a few rules of thumb you can follow. If you are still working out your process, this is a good place to start.

Rules of Thumb

  • Separate different pages into different PSDs
  • If different page designs are all in one file, make sure they are grouped by page and groups can easily be toggled between. Nested groups are an issue if you have CS5 and your dev has CS4, for example.
  • Know that layers are great, and the web is in RGB.
  • Sometimes it’s hard to dig out a background or texture/pattern so include the tile somewhere.
  • Keep a color palette in the PSD that is easily accessible.

Developer Pet Peeves

  • Text-boxes that go on forever, covering up other elements with their invisible space. (This is my biggest pet peeve since it interferes with my click-to-select habit.)
  • Shape layers/vector masks – these are nice for design purposes, but they also mean that I have to rasterize and sometimes merge a few layers before selecting and cutting out the asset.
  • Merged buttons. It’s possible and favorable to style a button with CSS3 instead of just using an image. Keep button layers editable so your dev can get any icons out separately and reference the layer styles for CSS.
  • Illustrator for web design: just don’t.

Layer Styles

Layer styles, while visually pleasing, also present development problems:

  • Layer styles other than normal: CSS has no equivalent to multiply, hard light, dodge, bevel and emboss, etc. To recreate the effects, we basically have the ‘normal’ blend mode to work with. That usually means that if you use special blending modes on layers/layer styles, I can’t just open the layer style box and copy the parameters for the effect. It’s possible to get pretty close by sampling the resultant colours, but sometimes that creates more work.
  • Inner shadow and other styles on images: Most styles other than border, drop shadow and simple border radius on images aren’t yet directly doable in CSS3 and require workarounds that involve more code that can slow a site down, so use them sparingly. (Here is a workaround and lots of examples)

Form Elements, et cetera

Despite the huge strides we have made with the newest web technology, form elements are still a pain to code. Maintaining consistency across platforms and devices with form elements presents a challenge that is infamously underestimated with regards to time (and therefore cost).

This is a great place for designers and developers to work together to decide what is best for the project on a case by case basis.

These articles, although aimed at developers, will give you an idea of some of the things we do to deal with certain elements in a design:

Overall

  • Maintain consistency with headers, text styles, spacing.
  • Think flexible, reusable, sliceable, layerable.
  • Different devices (see responsive site gallery ) – how will your design work in them?

Communication, communication, communication

Designers should be open to communication so they understand how design decisions affect development time and resources. Developers shouldn’t be afraid to tell a designer how they can design more efficiently for the web.

Ideally, this happens before the client sees a design so that expectations are well managed. Sometimes minor adjustments can be made to simplify development without compromising design goals.

In the end, designers and developers can create the best possible product by working together as a team.

How does your team do it? Share your sagely advice in the comments below!

3 Comments

  1. Andy Birchwood on | Reply

    Hi Jenna!

    “Illustrator for web design – Just don’t”

    couldn’t help but rise to this. You probably get a bit frustrated that it doesn’t behave like Photoshop. If you did give it some time, you might notice that illustrator behaves much more like a browser than Photoshop. Vector rectangles = divs. Object styles & effects = css properties. All the effects are accessible in one panel so you can check exact values.

    And there’s more:
    - Shadows are rendered exactly the way a browser renders shadows: x offset, y offset, blur, opacity.
    - Rounded corners are applied as a style, like border-radius in css
    - You can select a group of objects with similar styles using the magic wand, just like a css class
    - You can eyedropper a stack of styles across a group of objects with just one click, a bit like adding a css class to an element, much easier to maintain consistency
    - You can select a group or direct select a shape or object without knowing what order the layers are in or whether text boxes are over the top

    • Jenna Boese on | Reply

      Hi Andy,

      I may be a bit jaded from dealing with horribly organized AI files in the past. It probably has more to do with the person creating the file (possibly coming from a print design background) than the program. So far, my experience with AI files is that they are a mangled mess of shapes buried in weird groups and clipping paths, with impossible to dig out gradients, shadows, radii and other things that should be straightforward, like you’ve mentioned.

      Thanks for shedding some light on the virtues of properly-used Illustrator. :)

  2. Alex Morris on | Reply

    An interesting read, thank you. What annoys me are the (often vast) pop-up ads that burst out of nowehere and block the entire screen. You’re left searching for the “x close” icon and getting a bit irate. Internet users aren’t the most patient sorts and they tend to force me to just leave the page. What I love? Pinterest! Notice how everyone’s nicking the idea! StumbleUpon, Facebook, and a myriad of other sites. Oh, I’m not a designer myself. I are a writer, as you probably can’t tell from my use of English. Innit.

Leave a comment

We'd love to work on your next project

Get in touch