Developer-Friendly Design Tips & Techniques
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.
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.
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, 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:
- See my previous post, How to Style 4 Tricky Elements with CSS3
- Form elements: radio and checkboxes, dropdowns (see Tessa’s post, Custom Styling for Select Menus for a lean, efficient workaround)
- 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!