EightShapes, LLC is a user experience design firm specialized in web sites and web applications.

Wireframe Templates

A wireframe template is a standard starting point to create a wireframe schematic, usually a page design.

Wireframe Template Canvas

Wireframe Template Canvas

There are two options for starting a wireframe, each exactly the same except for available grids:

  • Generic (/wireframes/wireframe(page).indt)
  • Yahoo (/wireframes/wireframe-yahoo(page).indt), based on the grids within the Yahoo Design Pattern library stencils

Pages & Masters

Wireframe Page & Masters

Wireframe Page & Masters

The wireframe template includes one page by default. Other than when creating interactive prototypes (that modularly include other wireframe files), it is a best practice to include one – and only one – wireframe page per document file.

Each template includes different masters, each specific to a particularly collection of grid guidelines.

Grids & Guidelines

Guidelines are included within each master that you can apply to a page. These guidelines provide you with standard – or design system specific – vertical columns into which you can create your designs. Teams with established visual systems often have four or more distinct grids to work within, and each is available as a separate master.

Layers

Wireframe Layers

Wireframe Layers

The wireframe template includes five different layers:

  • Content: The layer with default focus, you’ll include all of your wireframe artwork here unless your personal preference leads to multiple layers within a single wireframe page. Shown, focused, and unlocked by default
  • Component markers: Useful for including annotations – most often, ID markers for different components of your page layout – separate from the actual artwork, especially for teams depending on large component libraries of standardized page chunks. Shown and unlocked by default.
  • Grid guidelines: Contains only the vertical blue guidelines to which you can fit and snap artwork. Shown but locked by default.
  • Grid descriptions: Would contain a visual reference of your design system’s grid collections, even including notes labeling page regions of each grid and when to use each one. Refer to the Yahoo wireframe template for a common example. Hidden and locked by default.
  • Fold: Underlays a fold “band” from 590px to 610px down from the top of the page, reminding you where the page fold is for a 1024×768 browser window across the range of browser/platform combinations.

Where

All four deliverable document templates are available in the /wireframes/ directory.

How

To start a new wireframe page design, double click or open a wireframe template in Adobe InDesign. By default, an untitled document (separate from the template) will open with a page displayed. At this time, it’s recommended that you name and save the document file in it’s intended folder.

When

Use the wireframe template whenever you are starting a new page or component design.

Why

The wireframe template enables you to quickly start a wireframe schematic in a consistent, powerful way. By incorporating styles for text and objects, built in grids and guidelines, and even more, you have a solid foundation for creating page designs within the context of your design system. That said, the wireframe templates is intentionally light, lacking any embedded artwork.

Depending on your design system, you may choose to include a header, footer, and even a page title if most all of your pages start with the same set of common elements. Reusable page layouts, component page chunks, and primitive elements are abstracted out into separate snippet files and object libraries. Therefore, the core wireframe template maintenance is eased, file size minimized, and broad applicability sustained.

How Much

Use the wireframe template once for each page design you start.