As a front-end developer, nothing stops productivity in its tracks faster than opening up a complex design document. There is too much to take in and there may not be enough time to figure the file out. From there, the process becomes one of random clicking around in the Layers palette to see what appears when and where, and how layers work together.
If you are a web designer, there are several things that can be done during the design process to ease the developer's pain. A little extra time spent preparing the file for production can greatly speed things up, even if the designer and developer are the same person. Also, this is a definite bonus for another designer that may have to work with your file.
So without further ado, here are a couple tips and tricks that I have found useful in my workflow to simplify the process of a design file handoff.
This is the easy one (well, it is for some). Photoshop, Pixelmator and Illustrator are all editing tools that feature layers that can be renamed, moved, and grouped into folders. When building a web site or UI design, it is extremely helpful to give layers and layer groups purposeful names. Developers and other file viewers should not be spending time trying to figure out what "Layer 223 Copy 2" actually is. Also, these layers should be grouped (if possible) into area folders. For example, any layers related to the header area in a design could be placed into a group named "Header."
Additionally, I spend a little time searching for unused or hidden layers. Unused layers are unnecessary and bloat the design file. If I know that some layers aren’t going to be useful later on, I delete them. I don’t just turn off their visibility, which could lead to confusion of whether or not the layer is needed in the final design.
solutions are becoming more and more common, fonts included with design files should be highlighted or itemized for the developer. Is the chosen font available in Typekit
or other font service library
? Or is the plan to just use the font in an image? How about using standard web fonts instead? In any case, give the developer a heads-up on how the fonts are to be used so the code can be prepared with this in mind.
In my experience, it's far more clear to just to include the fonts with the design file when passing it along (license permitting). It's a simple motion, but it is extremely courteous.
Guides should make sense to a front-end developer. They may have been used in the design process as a grid or for alignment, but for a developer they serve a different purpose. Guides are used for measurement. In my workflow, precision is created by using a combination of guides, the marquee tool, and the Info palette.
If guides are all over the place, seemingly without purpose, then there is a problem. Thankfully, there is a simple solution. In Photoshop, delete your unused guides. Just leave the most important guides which frame major elements.
In Illustrator, guides can be assigned to layers. This is very convenient for those not wanting to throw away any guides. In this case, create a new layer named "Final Guides" and put them in there. Leave another guide layer for yourself if you need it; just make sure it is out of the way and not visible by default.
The "Smart Objects
" feature was first added to Creative Suite 3 in 2007 and continues to be a superb tool. Sure, it's great for roundtrip workflow, but it is even better in production scenarios. I import all images into the PSD at full size initially (within reason to keep the total file size down), then convert them to Smart Objects. The added benefit of maintaining the original quality is key, as is the flexibility of non-destructive resizing and transforming.
Responsive Web Design
is becoming commonplace. This leads to the front-end developer needing quick access to a wider range of image sizes. The image within the design may not be at its maximum size, but it should be able to scale up without a problem in practice. Smart Objects help simplify this issue, so it’s a great idea to use them. The finished site might not actually be responsive now, but down the road that may change––and it’s good to be prepared for it.
Also, keep in mind that vector graphics from Illustrator are wonderful as Smart Objects.
Button States and Form Validation
This one is short and simple. Make sure that your design file includes examples on how to handle interactive states. I like to keep each state (hover, active, visited, disabled, etc.) in its own layer or layer group and give it a name describing when or how it should be used. "Submit Button: Hover" works, for example.
The same idea applies to form validation. If there is a form used in the design, make sure that an example of an error state is included. If a user enters wrong data or forgets to fill a field, what does the response look like? Make sure to include different responses such as an error message or help popup.
These techniques don't need to be used for every single element that has a different state, but it's good to have an example for each unique style throughout the design.
Don't Overuse Layer Blending Modes
Layer blending modes are fine for flat images, such as those in a hero area. However, for any reusable and layered element that CSS will be styling, layer blending modes will not work. For buttons or images that may be layered, merge the blended layers together (while keeping a copy of the original safely tucked away). It may take a bit of extra time going through the design, but it will make some front-end developer very, very happy.
For the technically inclined, blending modes (or compositing) is supported in canvas elements
. But out of the box, HTML and CSS cannot create blended layered elements.
Build a Swatch
Give the front-end developer a place to find all major colors used in a design. Either export a swatch from your design application, which takes your entire swatch collection with it, or do something even better! Enter ColorSchemer Studio
. This application enables you to create your own color collections, then export them as any conceivable file format for sharing. My personal favorite trick is using the “Export as HTML Color Chart” option. With this command, an HTML file is created containing a grid of your swatch colors complete with hex and RGB values. I find this extremely useful and prevents the front-end developer from needing to use the eyedropper tool which could result in less-than-precise color selection. It’s pretty neat.
is a similar, and free, tool that can also export swatches and it’s already integrated with the Creative Suite. Bonus!
If there are any special orders in the design, it's a good idea to use the Photoshop Note tool. Remember it? It's under the eyedropper tool. I don't go crazy with these little guys, but it's nice to leave bits of information such as element dimensions, color values, and other facts (that may be otherwise scribbled on a sticky note) that could be easily lost. Now there is no need to go back and forth with the designer with information readily available in-file.
"And that's why you always leave a note."
- J. Walter Weatherman
Is Everything Cool?
Even after all these examples, the most important tool in the design and development process still remains: communication. If the designer doesn't communicate with the developer, then the developer may be forced to make tough decisions without a lot of information to pull from. The design files that I create show as much information as possible without creating bloat and redundancy for the developer; it tells a story without all the filler. Proper communication up front and hints throughout a design file can make the process much less painful for everyone involved.
As a good starting point, check out this PSD
for some guidance.