Design guidelines (interaction style guide)

We create designs showing all the major page types in your site or application, and the templates for these that you need for your content management system or backend.

Our design is called a ‘wireframe’, because at this stage it doesn't have a visual design applied to it.

We provide detailed recommendations about:

  • what the site or application should do
  • how it should behave
  • how it should be laid out on the screen.

A suite of consistent templates

  • You'll understand how the site fits together, and have a suite of page templates to build in to your content management system
  • The design lets you apply consistency across your site or application
  • Your content producers can concentrate on the content rather than on the framework it sits in
  • You can use it to help you develop formal technical specifications
  • You can use it understand the rationale behind the site design for future design and implementation decisions.

What we do

Once we have created several design concepts, and have narrowed the main choices down to one key design, we work on the page designs for the site or application. This means we develop the lower-level page types. For instance, on a web site, we'd generate examples of each page type within the design direction we've chosen.

This might be three page types for a small site, or 20 for a large e-commerce site. For an application, we'd typically design one or more of the major functions.

We document our wireframes in a detailed report called an interaction style guide at the end of the project. This guide shows how the page designs and templates work, in detail.

What you get

The interaction style guide sets out the templates and provides examples of each page type in a highly visual format.

At the end of the project, you’d get (depending on the specific activities you actually choose):

  • Wireframe – how the screens will be structured, where all the items go
  • Workflow – exactly how each area will operate and how it supports users’ tasks,  how people will move through the screens, how users will complete processes such as applications, forms, etc
  • Relative emphasis on various parts of the screen
  • Information architecture – how the menus are structured
  • Navigation structure – how users will navigate the site
  • Labelling - what the elements on the screen are called
  • Layout – where they are placed on the screen
  • Templates for various sections
  • Guidelines for visual design stage, if appropriate
  • Visual design concepts and production graphics
  • Content design and individual page designs for the whole site
  • Style guide for each part of the site, showing how to develop and maintain the site.

The templates will also show how the elements on the screen fit together as a framework. The development team will use these to build page types in your content management system.

Examples

A page from an interaction design guide showing the home page for the web site, including rationale and functionality guidelines:

Interaction design guide page example

 

A page from an interaction design guide showing a template:

Interaction design template example