960 Twenty Eleven Grid

This is a photoshop .PSD file with preset groups inspired by WordPress’ Twenty Eleven theme. It helps to have the guides turned on in Adobe Photoshop when viewing this file.

Designing for Web Guidelines:
We have worked with many graphic designers and we have put together these guidelines to assist designers who do not usually design for web.

Unit of Measure:
Pixels
Because of the size difference in monitors, inches should never be used as a unit of measure.

Backgrounds:
Size matters! Backgrounds should be small and able to be tiled vertically or horizontally or both. Large backgrounds slow down the page because it has to be downloaded before it can be displayed.

Gradients:
Linear Gradients only, because they can be tiled. Radial gradients should be avoided.

Fonts:
All fonts should be web safe fonts, meaning it will display on most systems. Some good resources are:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

For titles and headings, you may consider any of the Google Web Fonts: http://www.google.com/webfonts

Fonts should be included as TTF or OTF file for PC, not sure about MACs. Never rasterize your fonts as this makes the font name and size unavailable to the designer.

Drop Shadows & Outer Glow
Should be avoided, but if you must, as long as the layer can be saved as a PNG file with a transparent background.

Layers & Blending Mode:
Should always be set to Normal. Multiply, Color Burn, and other blending modes don’t translate well when you are chopping up the graphic into layers.

Page width:
Main Viewable Area: 960×600 pixels (above the fold area)

This can be longer, but should not exceed the standard 960 in width.

Screen Resolution:
Standard is 72 dpi
300dpi is for print, but most monitors can only display resolution of 72dpi, so when designing for the web, keep this in mind.

Published by

Suzette Franck

Suzette Franck has been in web development for over twenty years; she started making hand-coded HTML websites on geocities with font tags and tables back in 1995. Since then, she has taught herself CSS, Sass, PHP, MySQL, as well as becoming a Wordpress expert; evangelizing and presenting at over twenty-two WordCamps across the country and multiple WordPress meetups in Southern California where she resides, about all aspects of building and maintaining sites on WordPress.

Suzette is passionate about WordPress the application as well as the WordPress Open Source Community, and loves to code and teach others the wonders of WordPress. She is a purveyor of lowbrow art, and when she is not WordPressing, she is painting or visiting Los Angeles art galleries to add more work to her growing art collection.

What do you think?