Several weeks ago, I had the opportunity to help Catalyst Studios host a short workshop for print designers looking to make the transition to interactive. As with many people in this situation, our attendees wondered how to streamline the process of moving their design from concept to production and specifically how to improve the Designer/Front-End Developer partnership. One of the results of this session was a checklist of details and considerations to be applied before turning all those hours of sweat and blood over to the developers who must bring it to life. I realize that the interaction between designers/developers frequently contains an amount of contention and while I believe the very best way to alleviate that stress point is for designers to learn some code perhaps this checklist will provide a sort of bridge.
I want to preface this list by explaining that at Catalyst Studios we typically follow the process of creating site mockups in Photoshop and then breaking them down into the visual elements required to display a site. Type, color, layer styles, size, position and so on are translated from the PSD into HTML, but we aren’t simply slicing up the document into a group of images that show the page. This list is intended to optimize this process of mapping the elements base on our work flow, however most of it should easily translate to other processes and software applications.
Ok on to what you all care about–the list (annotated and explained as I have time). This document can be summed up by saying as a designer you need to be specific. Never assume that the developer is looking at the same vision you have in your head. Meaning its rarely enough to simply create one of similar elements and expect the developers to know how to modify that object or to intuitively know how a drop-down menu should look or even what font you had in mind for those form fields. Keeping in mind that you need to specify exactly how EVERYTHING will look, and interact makes this list somewhat irrelevant but here goes:
Interactivity
- Did you design alternate content states?
- Have you defined a visual look for rollover/hover states on buttons and links?
- Have you defined a visual look for error messaging and status information?
Concept & Layout
- Did you account for different sized content?
- Did you design for extremes?
- Did you design for dynamic content?
- Does your layout width add up to a standard viewable area?
- Are columns, gutters, margin and padding all equal and add up to the container width?
- Did you provide direction for what should occur when the browser window changes size?
- Did you use web-safe fonts? If not, did you include the font with your design or check licensing for use with @font-face?
Photoshop Document
- Is your image file 72DPI and RGB color space?
- Have color management profiles been removed from the file?
- Did you name and organize your layers?
- Do objects in your layout end on full pixels?
- Have you used any blending modes (multiply, screen, burn) to create an effect? If so find a different way to create the effect.
Production Instructions
- Have you specified content that requires special technology? If so how should these be included?
- have you specified a hand-full of reusable typographic elements side wide? (For example make body copy on all pages the same size, color, etc)
- Have you defined browser compatibility requirements? (Must support IE6 or needs a mobile version)
- Did you consider how this will look on different devices/mediums?
- Did you specify any locations where visual objects should be the same height?