March 22, 2013

Items to Consider when Preparing a PSD for Handoff to a Developer

Here is my list of details to remember, common pitfalls to avoid, and tools to use when preparing a PSD file for handoff to a web developer. This list is based on my experiences doing CMS builds for designers and their clients — your mileage may vary! :-)

Be sure to consider (and communicate to the developer) any alternate sates: For example, hover styles, navigation "here" styles. Use Layer Comps for this (see #11 below).
Consider how any hover states (shadows, colors, etc) might conflict or interact with neighbors and "active" neighbors. This is especially relevant in navigation and tabs (tabbed content nav).
Link colors and clickable elements should be a unique color for best usability. Make links a different color from headings otherwise it's ambiguous what's clickable.
Consider the boundaries of your design. Your canvas in photoshop should show more than just the "wrapper" for the site, it should show what happens outside the content, if anything.
For every link on the page consider what happens when it is clicked. Does it load a new page? If so, what does that page look like? Be sure to consider and, if necessary, design every "view."
When designing for a CMS-driven site, always be thinking about variable content length. Because text will be changing and clients don't always respect word and character limits, do not lock yourself into tight layouts -- especially not vertically-fixed layouts.
Use real text when mocking up your design. If you mock up a page using nice, short and tidy placeholder titles so that everything lines up perfectly in the design file you may find that when the end-user puts real titles in there (and the titles start spanning multiple lines) your design may not look the way you expected! Plan for overflow and flex. The amount of space taken up by text, and where line breaks occur, varies from system to system (esp Mac vs Windows).
Unique content should have a unique URL. It's tempting to design content into a single-page view, but in general it's better to follow an "overview > detail" hierarchy so that full-entries are given their own unique URL (for sharing, deep linking, search engine indexing, and RSS). There are exceptions and alternate ways to handle this that can keep all content on a single page yet allow deep linking and unique URLs, but I consider the “overview > detail” the default approach.
Be careful when bringing your design elements into Photoshop from a non-pixel-based app (such as Illustrator) as it can create artifacts when anti-aliasing is applied to boundaries of elements that don't snap to a pixel grid. This makes the design hard to slice out cleanly.
Know when to use a jpg, when to use an 8-bit png, and when to use a 24-bit png. This is relevant if you will be providing supporting graphics along with the PSD.
Use Layer Comps! Use them extensively to show the various pages and states. It saves huge amounts of time for everyone and aids in communicating with the developer. To me it doesn't matter how chaotic your layers are as long as the Layer Comps are accurate. More on Layer Comps.
Do not flatten (merge) layers and effects too much. While there are times when it's OK to have several layers flattened into one, it can often become an issue when slicing out a design if a certain layer (say some text, or a shadow) cannot be isolated or blinked off. The developer often needs to isolate and slice specific components of the design and won't be able to do that if layers are merged or flattened.
Choose fonts that have web-licenses. Especially on CMS driven-sites where content is likely to change often, try to use fonts that are web-friendly or a have a web-license for use with @font-face. This way you avoid having too much text-as-image.
Don't make your fonts too small and be sure there is enough contrast to make text readable. Your users will thank you ;) See Stop Using Small Font Sizes.
Learn how to use the Elements panel in the Webkit Inspector or the HTML and CSS panels Firebug. It will help you communicate with the developer and build better websites yourself. More on the Inpsector and Firebug.

Comments