Interactive Standards & Guidelines

Ironically, the most successful user experiences are those that aren’t noticed at all. These are the experiences that are so natural and intuitive that the user barely needs to think about anything other than the task they are trying to complete.

There are many elements that go into an successful “invisible” user experience, but perhaps the most important attribute is consistency. Navigation stays in the same place from page to page. A color used for links in one section isn’t suddenly used for headlines in another section. “Continue” buttons don’t randomly change to “next” text links. And so on.

But how do we keep everything straight? And more importantly, how will our clients maintain consistency after we complete our work and the site is in their hands? The answer is Interactive Standards & Guidelines.

Most of us in the visual communication field are familiar with other types of visual standards. Brand guidelines, design standards, and style guides have been important in the graphic design world for a long time. Design and branding firms are great at creating and documenting an original, cohesive look for a company. They design the logo, create the color palate, define the typography, and select the imagery, with the goal of establishing consistency in the way the brand is positioned across a wide range of media. If these design decisions weren’t documented, it would leave these things open to interpretation, and would dilute the brand.

Interactive Standards & Guidelines have a similar goal of consistency, but differ from brand guidelines in that they need to consider both the visual aspects as well as the functional aspects of the system. We need to define how the interface works, in addition to how it looks.

At Crux Collaborative, we strive to create Interactive Standards & Guidelines that are as usable as the sites and applications we design. We make sure everything we design meets the requirements of our client’s overall brand system, as well as their technical requirements. And we document everything to make sure that future site contributors won’t have to wonder how something is supposed to look or work – it will already be defined for them. When a good system is in place, it’s easy for our clients to grow and expand their websites or applications while maintaining consistency with the original user experience design.

When creating Interactive Standards & Guidelines, we consider things like:

1. Who will be using them? (e.g., designers, developers, writers, etc.)
2. Will navigation need to be consistent across all web properties, including mobile-optimized sites?
3. What browsers do we need to optimize for?
4. What is the system for links, buttons, and calls-to-action?
5. How will we translate and extend the core brand elements of typography, color palettes, and imagery for interactive communications?
6. How will we ensure a consistent experience between landing pages, micro sites, and web applications?
7. How will we give site owners enough flexibility to create unique product sites while being consistent with their master brand?

The Interactive Standards & Guidelines we create for our clients are delivered in one or more of the following formats:

Printed Interactive Standards & Guidelines:

Printed guidelines are created when our client’s desired end result is a printed manual and/or PDF for distribution. This type of standards documentation is designed and developed in a tool like InDesign or Word. Like the other formats, printed guidelines provide standards for key elements such as typography, color palettes, navigation, page types, and layout. More in-depth guidelines may include governance for page components and/or technical development guidelines.

Online Interactive Standards & Guidelines:

We create online guidelines when our client’s desired end result is an interactive, web-based method of browsing the standards. Often, our clients host their interactive guidelines on a secure website or an intranet. Online standards provide the same details as printed guidelines, but are optimized for online access and enable secure file distribution of visual assets such as photography, logos, and templates via download.

Active Interactive Standards & Guidelines:

In some instances, our clients need their guidelines to be “working” documents rather than “reference” documents. In those cases, we design and develop a pre-defined series of templates in Photoshop and HTML. Page type templates and components are defined early in the project, and are designed and developed to work consistently throughout the site. Photoshop templates are set up to include layers, and contain layout specifications for typography, colors, size dimensions, and structure. HTML templates are then developed based on these specifications and the defined technical guidelines. The Photoshop templates, used in conjunction with a well-developed HTML and CSS system, help ensure consistency and eliminate guesswork or misinterpretations as designers and developers continue to evolve sites.

Successful guidelines provide value, flexibility, and consistency. When done right, they shouldn’t feel limiting, boring, or inappropriate. They are clear to understand, easy to use, and flexible enough to accommodate change.

Contact us to learn more about how we help our clients optimize their interactive guidelines.