See all Insights

Anatomy of a Web Design Style Sheet

stylesheet_thumbNewfangled partners with several marketing agencies and many more subscribe to our monthly newsletter. Because of those relationships we like to offer design information and tools that will help in the production process.

Previously, I’ve written articles and posted a video about how to prepare Photoshop files for web development. For this post, I’ve created a diagram of one of my recent website style sheets with notes about key components (you can download the full size version below). I typically provide our developers with one of these style sheets that includes a majority of the components they’ll encounter when working with a site’s page templates. It doesn’t account for every template in a site but will give them a running start with the CSS for color, text and common site components.

I recommend developing a style sheet for every site you design because it will not only assist the site’s developer (a batch of brownies wouldn’t hurt either) but it will also help you think through the design and provide a visual language that you can apply to all the page templates.

Style Sheet Anatomy Layout (1.4MB PDF)

Related Posts