Home

Zivtech's Drupal Style Guide

This is intended as a guide for designers designing for Drupal.

By integrating this style guide into your workflow, you'll help us to closely, consistently, systematically and cleanly translate your design into a functioning Drupal theme and maintain it's original integrity.

Composites and wireframes are essential for us, but they're not the only tools in bringing website designs to life. A style guide will give us the clearest, strictest specifications to follow, and help us understand exactly how the website will look, feel and function. It will save more time than it takes to create, and take much of the guesswork out of the theming process. IN short - it makes our lives easier, and the end result as close as possible to the original concept.

Comps

Please ensure your comp is well documented and includes the following:

  • clearly labelled layers
  • clearly grouped layers
  • grids that you may have used to structure the layout

The following may be helpful:

  • a few short explanatory paragraphs

Spec sheet

This will clearly spell out the most essential design aspects that are illustrated in the comps.

Please include the following:

Text

Please consider:

  • Avoid using multiple types of fonts unless you have a compelling reason.
  • Use websafe fonts - keep non-standard web fonts to a minimum
  • Testing your site-wide base font at http://www.typetester.org/ - a great resource for web designers which allows you to compare screen type

Headers

page headings (h1), sub-headings (h2), third-level sub-headings (h3), fourth-level sub-headings (h4)

Please include color and font-size.

Examples:

H1 - Header

H2 - Header

H3 - Header

H4 - Header

  • Basic screen colors in the following format: #FFFFFF
  • Text size (in em)
  • Line height (in em)
  • Any type which must be typeset, or substituted for an image (only when absolutely necessary - see "other factors" below)
  • Any other general, essential rules for type formatting (eg. text alignment.

Links

Specify color and text decoration (eg. underline, bold, etc.) for the following:

  • Links - a
  • Visited - a:visited
  • Active - a:active
  • Hover - a:hover

Lists

Please specify look for ordered 'ol' and unordered 'ul' links.

Examples:

Ordered list:

  1. First Item
  2. Second Item

Unordered list:

  • First Item
  • Second Item

Page titles

Major page elements - headers, footers, navigation bar, sidebars
Specify the following:

  • Size in pixels
  • Background screen colors in the following format: #FFFFFF
  • Spacing between elements in pixels

Drupal Site Elements

Chapter 3, a Drupal shop in San Francisco, has created an excellent resource that shows basic Drupal-specific elements that are a in almost every Drupal site.

Please review the following: http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_appr...

Images

  • Borders
  • Preferred external margins
  • Minimum and maximum sizes

Other major html elements (where applicable)

  • Custom dot point styles
  • Horizontal rules - eg. 1px, solid/dotted #EEEEEE

Other elements

  • Forms - clearly label custom form design elements eg. buttons.
  • Comments - specifiy indentation of replies etc.

Other factors - designing & theming sustainably using Drupal and CSS

To keep the the site's sustainability (it's ability to grow in content effortlessly, without endless adjustments) please avoid the following:

  • Columns of text - there is no provision for columns in CSS2
  • Background images for sections that will need to be resized according to different content
  • Gradients as the background for major site content and text that will neccessitate all overlaid images to be transperant
  • Non-websafe typfaces for site-wide text like H1s.
  • Rounded corners in sections that will need to be resized according to different content and will require images - there is no provision for rounded corners in CSS2
  • Unnecessary images with transparencies
  • Menus: remember these can be dynamic. Designing a pixel perfect menu may mean that it can't be updated or changed in the future.

Templates

Please see these great templates.

  1. Website Style Guide Photoshop Template from Jozef (Jojo) Toth
  2. Example Spec Sheet from Peter Camburn of About Face Design http://www.aboutfacedesign.net