Wednesday, May 22, 2013

The Handoff: From Design Comps to Reality, The Reality of Design Comps

Anyone designing for the web has most likely handed over their very precious Photoshop file to a developer. We hand the file over with full confidence that the developer will create a website that looks exactly like the comp. The comp that UX and visual designers, project managers, and clients have seen, loved, made tweaks to, spent sleepless nights over, and expect to see on the screen when the site is opened for the very first time.

Us designers at Rightpoint are privileged enough to work with some crazy talented developers, so the fear of handing over that pristine Photoshop file isn't nearly as daunting as it could be. However, there are some rules on handing over design files. These are rules I've created for myself through years of collecting information from the web (photoshopetiquette.com is a great resource), handing off horribly organized files to developers in my younger, more naive years, and learning from others (thanks everyone I've every worked with!). Here are MY rules to live by.

 

Rule #1 (and absolutely no question, the most important): Be nice to developers

I mean, you should be nice to everyone, but be especially nice to developers. And not just to get what you want, but to develop a relationship with them. Start learning a little bit about what they do, how they do it (ask them questions—it will help you design smarter), what their pain points are, and how you can help them. To me, there are few things better in life than learning from and helping your coworkers.

 

Rule #2: Take the time to clean up your file

As we all know, Photoshop files can get overwhelming while designing a website. Even the smallest of sites can have layer upon layer of graphics. For our own sanity, designers (usually) have some system of keeping their file in order. Even the best of us (I'm definitely NOT the best of us) stray from keeping the file in order while we're working. We change our minds, add things, delete things, turn layers on and off, and have "mystery" layers, aka type layers with no type.

 

Rule #3: Learn to use Layer Comps

No, not Layers. Layer Comps. They’re two different things, but equally as important when handing over a file. Layer Comps will not only change your life, but will change the lives of the developers it touches. They will love you forever. Trust me.

 

 

As you can see, the Layer Palette can get complex quickly. Multiple layers are shown and even more are hidden. Within the Layer Comps palette, one comp is made visible. Also, look at the third and fourth line of the Layer Comps palette; you'll see there are comps created for hover state and drop down. Again, a huge time saver. And as a bonus for designers showing or sharing work with clients, easily save a PDF of each page (File > Scripts > Layer Comps to Files). You can choose to create JPGs or a PDF of your file. It's like magic.

Three rules. Pretty easy rules as well. They’re guaranteed with the Rebecca LaRue seal of approval to help not only your life and the life of your design, but the life of your best friend, the developer.