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.
content-normal.psd,content-wide.psd - 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-final.psd,-updated.psd,-new.psdetc. - 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:
- Typecast blog: “Make It Like the PSD”
- Photoshop Etiquette: A Guide to Discernible Web Design in Photoshop
About us: Isotoma is a bespoke software development company based in York and London specialising in web apps, mobile apps and product design. If you’d like to know more you can review our work or get in touch.