<<

WGU | STYLE GUIDE Illustration WGU ILLUSTRATIONS

Illustration is one of our most important forms of communication. It has the power to capture and convey both abstract and complicated ideas quickly, then etch those ideas into the mind of the viewer. Illustrations not only decorate, they inform and inspire. WGU’s illustrative style combines strong organic shapes, flat fields of , and subtle linear elements to create a progressive, contemporary look.

ILLUSTRATION STYLE The WGU brand uses a bold, fluid color palette designed for flexibility across a broad array of communication mediums. Our illustrations use the same color palette to maintain brand consistency while allowing the illustrator a wide range of creative expression.

COLOR PALETTE WGU PALETTE WGU ( 540) is the for all WGU communications and should remain the primary color in layouts that use WGU illustrations. Our Secondary Blue (Pantone 2209), grays, and also play an important role in the WGU palette. Colors used in our illustrations should never overpower those predominant colors. WGU’s color palette also includes accent colors chosen to complement those and grays. These accent colors and their tints offer strong support to our primary blues in WGU illustrations.

PRIMARY COLORS WGU Blue (Primary Blue) WGU Blue (Secondary Blue)

WGU Blue is the core of our brand WGU Light Blue is complementary to identity and should always be our primary color, WGU Blue, and is the primary color in any university designated for the state name in our communication. WGU Blue is used in state logo-and-tagline lockups and our brand logo-and-tagline lockup. In department logos. It is also used illustrations, it is the suggested color for in the background elements of linear elements and often becomes our WGU’s illustrations. CMYK 66 12, 57, 100, PANTONE 540 CMYK 19 23, 23, 79, background color. PANTONE 2209 PRINT RGB RGB 0, 48, 87 73, 134, 160 PRINT WEB HEX: 003057 HEX: 4986AD WEB

WGU STYLE GUIDE 2 SECONDARY COLORS

ACCENT COLORS The accent palette consists of five bold colors chosen to attract attention and add visual energy to our communications. Accent colors and their tints often play a primary role in WGU illustrations. CMYK 2 100, 0, 78, CMYK 0 100, 29, 0, CMYK 0 87, 54, 0, CMYK 48 64, 100, 9, CMYK 0 0, 99, 53, 362 PANTONE 7408 PANTONE 715 PANTONE 202 PANTONE 513 PANTONE

RGB RGB RGB RGB RGB PRINT PRINT PRINT PRINT PRINT 80, 158, 47 246, 190, 0 246, 141, 46 134, 38, 51 147, 50, 142 HEX: 509E2F HEX: F6BE00 HEX: F68D2E HEX: 862633 HEX: 93326E WEB WEB WEB WEB WEB

NEUTRAL COLORS The neutral colors in our illustration palette provide three recommended shades of gray that can serve as the primary color of an illustration’s linear elements, or as the color in the illustration’s background elements. COOL GRAY COOL GRAY COOL GRAY CMYK 66 20, 30, 40, CMYK 40 12, 14, 20, CMYK 8 4, 2, 4, 10 7 1

RGB RGB RGB 99, 102, 106 PRINT 151, 153, 155 PRINT 217, 217, 214 PRINT HEX: 63666A HEX: 97999B HEX: D9D9D6 WEB WEB WEB

ILLUSTRATION TINTS

The colors in WGU’s palette are used in illustrations at either full-strength or as a 50% tint of the full-strength color. (See “Using the Illustrious” for more details.) Only the color tints represented below should be used in WGU illustrations. WGU’s Primary Blue PMS-540 should never be used at less than full-strength. CMYK 50% 19 23, 23, 79, CMYK 2 50% 100, 0, 78, CMYK 0 50% 87, 54, 0, CMYK 50% 48 64, 100, 9, CMYK 0 50% 0, 99, 53, CMYK 40 50% 12, 14, 20, PANTONE 2209 50% PANTONE 362 50% PANTONE 715 50% PANTONE 202 50% PANTONE 513 50% COOL GRAY 7 50%

RGB RGB RGB RGB RGB RGB PRINT PRINT PRINT PRINT PRINT 164, 194, 207 PRINT 167, 206, 151 250, 198, 150 194, 146, 153 201, 152, 198 217, 217, 214 HEX: A4C2CF HEX: A7CE97 HEX: FAC696 HEX: C29299 HEX: C998C6 HEX: D9D9D6 WEB WEB WEB WEB WEB WEB

WGU STYLE GUIDE 3 TEXTURES AND LINEAR ELEMENTS TRANSPARENCY, GRADIENTS, AND TEXTURES Transparencies, gradients, and textures are not used in WGU illustrations; they utilize only flat fields of color.

ORGANIC SHAPES & OFF-CENTER DESIGN ELEMENTS The WGU illustration style incorporates organic shapes and graphic elements that give the final product an unpredictable energy. That energy is further enhanced through the asymmetrical alignment of many of its background elements. ORGANIC SHAPES

Organic shapes

OFF-CENTER DESIGN ELEMENTS

Off-center design elements

WGU STYLE GUIDE 4 LINEAR ELEMENTS All WGU illustrations make use of some linear element in the main focal area of the illustration. That linear element can be straight or it can have a flowing organic quality, but it should always retain an uncomplicated simplicity.

Organic elements Straight elements

STROKE COLOR Linear elements used in WGU illustrations should always be in either WGU Blue (Pantone 540), , Cool Gray 10, or .

WGU Blue Black Cool Gray 10 White Pantone 540

STROKE WEIGHT We default to a 1pt stroke for WGU illustrations.

STROKE CAPS AND CORNERS The stroke in linear elements in WGU illustrations uses the round cap and round join settings.

WGU STYLE GUIDE 5 USING THE ILLUSTRATIONS PUTTING IT ALL TOGETHER Putting all of these elements together for use in a practical setting is best achieved by following simple guidelines that vary based on the color of the background the illustration appears on.

DARK BACKGROUNDS When illustrations appear on a dark background the stroke of the illustration will default to white. Fill colors for background elements will default to the full-color versions of any of the colors from our Accent Color pallet (See “Accent Colors” section). No color tints should be used. Special Note: Hero Illustrations (see “Hero Illustrations” below) that appear on a dark background should include a white box that contains and organizes any background elements.

Dark background White stroke color Full-color fills

LIGHT BACKGROUNDS When illustrations appear on a light background, the stroke of the illustration will default to Primary Blue, Black, or Cool Gray 10. Fill colors for background elements will default to the colors shown on our Illustration Tints (See “Illustration Tints” section). No full-color versions of our colors should be used.

Light background WGU Primary Blue, Black, or Cool Gray 10 stroke color Tinted fill-colors (See “Illustration Tints” section)

WGU STYLE GUIDE 6 TWO KINDS OF ILLUSTRATION HERO AND SPOT ILLUSTRATION These rules apply to illustrations that fall into one of two categories: Hero or Spot Illustration. These two approaches to illustration fill distinct needs. HERO ILLUSTRATION Hero Illustrations are used to tell complex stories. They typically feature one large central element, often a person, surrounded by illustrative elements that continue the visual narrative.

HERO ILLUSTRATIONS: BACKGROUND & FOREGROUND The visual information that is represented in Hero Illustrations is more complex then that used in Spot Illustration. For this reason we approach the foreground and background of Hero Illustrations in different ways.

FOREGROUND ELEMENTS The elements that appear in the foreground of Hero Illustrations carry the primary part of the visual messaging of the Illustration. They should stand out. For this reason, the foreground elements of a Hero Illustration will utilize full-color versions of the colors from our Accent Color pallet (See “Accent Colors” section).

BACKGROUNDS ELEMENTS Elements that appear in the background of a Hero Illustration convey the illustration’s secondary information and should not overpower the primary information conveyed by the foreground information. For this reason background elements in a Hero Illustration use the less prominent colors from our Illustration Tints palette (See “Illustration Tints” section).

Background elements

Foreground elements

WGU STYLE GUIDE 7 Special Note: Hero Illustrations that appear on a dark background should include a white box that contains and organizes any background elements. With this exception, Hero Illustrations that appear on a dark background follow the same rules as Hero Illustrations that appear on a light background.

Containing box Dark Background

SPOT ILLUSTRATION Spot Illustrations are simple visualizations of ideas that will be used as stand-alone pieces. While they are often simple distillations of a single idea, they can also be dynamic narratives of larger concepts.

WGU STYLE GUIDE 8