Step 7
Always use web-safe fonts for body copy and headings. You can find overviews of safe fonts at tinyurl.com/webfonts and at tinyurl.com/webfonts1. Remember that fonts never look the same in Photoshop and browsers.

To get a more accurate reflection of how words are rendered in browers, go to the Paragraph panel and disable hyphenation. Now set your leading to your grid height (or a multiple thereof, if you prefer) throughout.


Step 8
When building vertically, use multiples of your grid size for component sizes and page sections, and align things using guides. Don’t get too hung up on trying to align objects from different major page components (such as main content and sidebar), perfectly.

Maintaining a vertical grid in web design is actually pretty difficult unless you’re extremely fastidious regarding vertical image heights and apply restrictions to every single one of the content boxes.


Step 9
When adding simple borders to images, use internal single-colour strokes. If sticking to the vertical grid, image heights must be a multiple of your grid size. Differentiate captions from body copy with italics or visual indicators. Placing an indicator on the other side of the nearest gutter draws a user’s attention.


Step 10
Save layouts as PSDs and make copies for exporting. (Exports often need you to flatten an image, and it’s easy to accidentally overwrite a layered file.) When exporting, think modular – don’t just slice a design into rectangles. For semi-transparent components, copy them to a new document and use File > Save for Web & Devices to save them as PNG-24 files.