We often work with external design agencies. Sometimes they work with wireframes we produce, and sometimes not. These are my standard guidelines (or wishlist, if you will) that I try to send to designers before they start. I don’t think I’ve ever received any that meets all these criteria, but it’s always good to aim for. Perhaps it’ll be a useful checklist for other designers out there.
- Final deliverables are layered Photoshop files (.psd), with flat file snapshots of each.
- When providing flat files (incl. work-in-progress snapshots), use 24-bit PNG format (not JPG).
- Use separate files for each distinct layout template.
- Photoshop Layers should be given meaningful names. Multiple identically-named layers are unnacceptable. As far as possible, remove obsolete layers. Use layer groups to organise layers
- Photoshop Guides should be used, matching the page layout grid. Remove obsolete guides. Guides should be snapped to pixel edges Photoshop lets you position guides at sub-pixel level, which causes confusion when working with pixel-level artwork for screen-based media. To snap guides to pixel edges, first create a marquee selection in the right place, and then snap the guide against the marquee edge..
- Consistency between Photoshop files is required, regarding measurements, fonts and colours.
- Use a meaningful and consistent file naming policy. Related files should be named in such a way that they are alphabetically adjacent (e.g.
- Versioning: for updated versions of files, use a consistent and sensible versioning system in the file names. E.g.
homepage-v01.psd. Files with version numbers should stay in order when sorted A-Z. Avoid file name suffixes like
- Bear in mind CSS capabilities and work with them wherever possible. For example, horizontal and vertical lines should follow pixel edges exactly (not anti-aliased) in order to be implemented as CSS borders.
- When drawing vector shapes, remember to check the “Snap to Pixels” box in the shape options.
- Remember to specify hover (mouseover) and active (on click) states for links and buttons.
- Accessibility: Minimum font size is 11px. Body text should ideally be 12px or 13px.
- Accessibility: Test for adequate colour contrast and colour blindness
- Text in Photoshop should be sized in px units (not pt), and in integer sizes (not fractions)
- Specify the actual leading in the Character palette, and, for multi-paragraph text areas, spaces above and below paragraphs in the Paragraph palette, that should be implemented using CSS. Do not use double linebreaks or font sizing to set paragraph spacing
- Use web fonts as far as possible (core web fonts or from a commercial web font service). Only use non-web fonts (e.g. corporate fonts) where absolutely necessary (they’ll be implemented using images). This is extra important for text that will be content-managed or translated.
- Embedded images such as logos should be production quality, as the Photoshop file will be used to cut out final images. (Tip: embed logos as ‘smart objects’, or avoid resizing them multiple times.)
- If working from wireframes, try to avoid a “wireframe aesthetic” (monochrome, everything in boxes). If a wireframe puts something in a box, it just means that information should visually stick together. Use gestalt principles to group information visually.
Edit 3 Mar 2014: Good series on gestalt by Andy Rutledge: 1, 2, 3, 4, and 5.
Edit Feb 2014: Here are 2 excellent resources for designers producing website mockups in Photoshop: