Wireframe Template - A Starting Point

At DrupalCon San Francisco, Justin, Scott, and I presented a session on 'Efficient Workflow for Design & Development Projects.' It was great sharing our process and how we approach projects and hearing what other people thought. You can hear us talk and follow along with the slides on the DrupalCon site.

For my part, I covered our approach to design and how that relates to the rest of our process. I talked a bit about tools & conventions we use to get to a design concept and one of the tools we use is a template file for creating wireframes. In the spirit of sharing, below you'll find the .psd file we use whenever we create wireframes.

Before you get too far with the file I wanted to cover some points to keep in mind when working with this:

• There's a Baseline Grid layer for laying out typography, a Grid folder for showing a 12 or 16 column grid, and a Colors & Fonts folder for some simple guidelines for creating content regions and giving them weight.
• This isn't meant to be a layout template. This is a guide for structuring content and giving weight to that content. You should definitely change this layout to best fit your project and the pages you'll be wireframing.
• These wireframes are intended to have just enough of a design to keep people from getting caught up in how ugly they look and just enough simplicity to keep everyone focused on content and weight.
• You may find that other options for creating wireframes, like OmniGraffle and InDesign, work better for you. It really doesn't matter what you use, as long as the end result is successful at achieving your goals.

With all that said, here's the file: WireframeTemplate.psd (1.9MB)

We would love to hear if anyone uses this and the responses they've received. We're always trying to refine our process so let us know if you have any feedback.