Graphic Elements

Overview

We use a set of graphic elements to add interest and complexity to applications in the Guidehouse design system. The pages that follow will instruct in using and creating graphic elements in the Guidehouse look and feel.

The Guidehouse graphic elements add dynamism and compositional interest, color and a sense of playfulness through the use of positive and negative space. They range from simple to complex—from a single shape with text overlaid to a sophisticated compositional layering that includes bleed and photography.

Types of graphic elements

Graphic elements are used in three ways:

Stand-alone graphic shapes
A stand-alone graphic shape in a single color adds interest to a composition. Text can be laid on top, and cropping and bleed can be used to add further interest.

Illustrations
Building blocks can be used to create a more complex shape, or illustration, giving the sense that the combined shape is folding, twisting or layered in space. This shape can then be layered under text or cropped in a similar manner to stand-alone graphics.

Dimensional constructions
This arrangement combines the two shapes above. However, by overlapping shapes, greater compositional complexity is created. Additionally, the shapes may also be used as a container for photography and cropped, resulting in a multilayered, rich composition.

Shape elements

There are two basic types of shapes within the graphic element system: stand-alone shapes and building-block shapes.

Stand-alone shapes are used independently from other graphic elements. They are placed on an application according to space and headline, and can be overlaid with headline or body copy text. Stand-alone shapes have five or more edges, though not every edge may be visible once the shape is cropped. See page 40 for more details.

Building-block shapes are rectangles, rhombuses, or parallelograms with four edges. They can be combined at the edges or seams to make a larger shape that appears layered or dimensional, referred to throughout this section as “illustrations.” For interest and dynamism, buildingblock shapes use right-angled corners as well as angles of between 60 and 70 degrees

Creating stand-alone shapes

Stand-alone shapes are the simplest of the three graphic elements, and are best used in less complex layouts.

When creating a new stand-alone shape, ensure that it has five or more sides. Create custom shapes tailored to specific layout scenarios that give a playful sense of positive and negative space.

Use a variety of angles that create intersting shapes and activate the positive as well as negative space. However, also use some 90-degree angles and the horizontal and vertical axes.

Creating illustrations

Illustrations are more complex shapes than stand-alone shapes, and should be used in more sophisticated applications or as part of multi-page layouts.

Inspired by the Guidehouse symbol, illustrations use four-sided building block shapes seamed at the edges to create new, more complex shapes. Illustrations give a sense of shapes that fold, bend, twist or layer in space. They can crop on one or more edges, but should not crop too tightly. Alternate a single brand color with black or white (one only) throughout the shape.

When combining building-block shapes to create illustrations, maintain a relationship to the x and y axes, while also using shapes with angles of between 60 and 70 degrees. Shapes within an illustration may overlap one another to create an impression of layering, receding in space, twisting, etc.

Creating dimensional constructions

This is the most complex of the three arrangements and should be used for spreads, covers, and more sophisticated design audiences.

Dimensional constructions layer or pair two or more illustrations, stand-alone shapes or buildingblock shapes. Between two and five elements total should combine to make a dimensional construction.

Color can be used, both on backgrounds and within illustrations and shapes. Choose one brand color, plus black and white. See page 18 for more details. When a second color is added, it should only be used as an accent.

Further complexity within dimensional constructions can be created by using photography that is contained within illustration shapes. Dimensional constructions can also crop on one or more edges. The finished composition should feature a combination of shapes that emphasize a sense of movement, rhythm, and an underlying symmetry and order

Cropping

There are three primary ways to crop graphic elements:

Touching an edge
The point of a graphic element may just touch the edge of an application. This method is used for digital applications or print applications that do not bleed.

Entire shape rests along an edge
For some applications, the edge of a graphic element may run along the edge.

Two or more edges crop completely
For more sophisticated applications, a graphic element may bleed off of two or more edges.

Things to avoid

Our graphic elements function most effectively when used as outlined throughout the guidelines. Please avoid these common mistakes.