Global Game Changers Brand Standards Guide
Brand Introduction............................. 6
Table of Contents
Logo................................................... 9 Badges............................................... 14 Colors................................................. 15 Typography........................................ 16 Printed Materials................................ 20 Website.............................................. 25
a brand:
it’s more than a logo or set of colors. It’s the total sum of experiences a consumer has with your brand. All 5 senses can be engaged in these experiences, but for the sake of this book, we’re focusing on the visual. Having brand standards enables you to have consistent communication that makes your brand recognizable and unified.
First, we’ll go over the identity elements, like wordmarks and badges. From there, we’ll discuss regulations for print and web.
GGC | Brand Standards Guide
Brand Introduction Project Purpose Create unified material that can effectively explain and sell itself without the GGC team there to explain it in person. Bring graphics (web and print) up to a national organization level.
Audience Kids Teachers/Parents Volunteers Donors
Tone Kid-friendly Bright Animated Responsible Energetic Super-hero, but not comic book
Terminology Mark:
Global Game Changers Children’s Education Initiative
Logotype:
Tag Line:
Global Game Chan Children’s Education Initiative
Signature or Logo:
Children’s Education Initiative
Signatures
1
Our goal for the logo was to bridge the gap between designing for kids and adults. The mark itself is a playful illustration and the cape swirling around the globe adds an element of dynamism. The wordmark adds a contrasting professionalism but still flows with the logo because they are the same typeface and navy color. We’ve designed several different logos so that the logo is flexible for a variety of uses. One and two are the primary signatures. One should be used for vertical and square-like spaces. Two will be used for horizontal purposes. Three and four are secondary signatures. Three should be avoided if possible because it breaks up the title. It should only be used if space permits. Four should be used for vertically narrow spaces.
2
The mark and wordmark can be used by themselves but the tag line cannot.
3
GGC | Brand Standards Guide
4
9
Proportions & Minimum Size In both the vertical and horizontal versions of the signature, the mark is about 3½ times larger than the wordmark. The mark itself should be displayed no smaller than ½" in height. The mark can be by itself at this size or paired with the logotype, but the tag line shouldn’t be used.
3½
1
The wordmark should be displayed no smaller than ¼" in height with the tag line. The primary vertical signature should be displayed no small than 1⅕". The primary horizontal signature should be displayed no small than 9⁄10".
Global Game Changers Children’s Education Initiative
½"
¼"
Global Game Changers Children’s Education Initiative
Global Game Changers Children’s Education Initiative
Global Game Changers Children’s Education Initiative
Global Game Changers
Global Game Changers
Children’s Education Initiative
Children’s Education Initiative
1⅕"
Global Game Changers Global Game Changers Children’s Education Initiative Children’s Education Initiative Children’s Education Initiative
9⁄10"
Game Changers GlobalGlobal Game Changers Children’s Education Initiative Children’s Education Initiative Children’s Education Initiative
Children’s Education Initiative
GGC | Brand Standards Guide
10
Clear Space Proper clear space ensures that the logo or signature can breathe and isn’t too crowded.
Signatures The height of the logotype and tag line combined applied to all sides.
Global Game Changers Children’s Education Initiative
Global Game Changers Children’s Education Initiative
Mark The radius of the mark/logo applied to all sides.
Logotype with Tag Line
Global Game Changers Children’s Education Initiative
Global Game Changers Children’s Education Initiative
The height of the logotype and tag line combined applied to all sides.
Global Game Changers Children’s Education Initiative
Children’s Education Initiative
Global Game Changers
Education Initiative Global Children’s Game Changers
Children’s Education Initiative
Global Game Changers Children’s Education Initiative
Children’s Education Initiative
GGC | Brand Standards Guide
Global Game Changers Children’s Education Initiative
Children’s Education Initiative
Global Game Changers
Education Initiative Global Children’s Game Changers
Children’s Education Initiative
Global Game Changers Children’s Education Initiative
Children’s Education Initiative
11
The recommended Ignite Good! mark was designed to stand alone from the logo because often they are used together on the same page (see web example). The clear space, sizing, and improper use guidelines for the GGC logo apply to Ignite Good! as well. The lettering should be kept white and not be punched out.
IGNITE
I
Ignite Good!™
TE I N G
GOOD!
The GGC logo should be kept at the bottom in case this mark is used in context without the GGC logo visible so that the user
GGC | Brand Standards Guide
12
Incorrect Use
1
2
3
These rules apply to the mark, signatures, wordmarks, and badges. 1. Don’t remove GGC.
GLOBAL GLOBAL GLOBAL GAMEGAME CHANGERS GAME CHANGERS CHANGERS
2. Don’t recolor. 3. Don’t change the logotype font. 4
4. Don’t add elements.*
5
6
5. Don’t apply effects. 6. Don’t skew or make the logo 3-D. 7. Don’t alter the signature layout. 8. Don’t invade the clear space.
GLOBAL GLOBAL GLOBAL GAME CHANGERS GAME CHANGERS GAME CHANGERS
9. Don’t crop the signature. *
If the mark is on the outerspace background, a white circle should be added behind to provide contrast.
GGC | Brand Standards Guide
7
GLOBAL GAME CHANGERS GLOBAL GLOBAL GAME CHANGERS CHANGERS GAME 8
9
13
Badges Badges are used as incentives for kids to explore and Ignite Good!™ in different areas. They are sometimes seen in front of a diagonal corner ribbon (e.g. workbook badges spreads). The typeface on the badges is Futura Bold Condensed because it’s tall and legible at smaller sizes. This font should only be used on badges and nowhere else in the brand. The clear space, sizing, and improper use guidelines for the GGC logo apply to badges as well.
GGC | Brand Standards Guide
14
Primary Color Palette
PANTONE PMS 158 CP CMYK 0 / 62 / 95 / 0
CMYK 100 / 80 / 6 / 32
RGB 232 / 119 / 34
RGB 0 / 45 / 114
HEX E87722
HEX 002D72
PANTONE PMS 368 CP
GGC | Brand Standards Guide
PANTONE PMS 288 CP
PANTONE PMS 109 CP
CMYK 65 / 0 / 100 / 0
CMYK 0 / 9 / 100 / 0
RGB 120 / 190 / 32
RGB 255 / 209 / 0
HEX 78BE20
HEX FFD100
15
Typography Cubano Cubano is a fantastic headline font due to it’s rounded edges, wide strokes, and all-caps, giving it a childish yet serious attitude. It is appropriate for headlines and subheadings but never for body copy. It can be used for both print and web, but must be used sparingly. Otherwise, it can come across as too boisterous. The original version of Cubano and its italic are preferred over Cubano Sharp and Cubano Sharp Italic.
Purchasing Personal License: losttype.com Commercial License: chandlervdw.com/cubano/ $$
GGC | Brand Standards Guide
Cubano The quick brown fox jumps over the lazy dog. Abcdefghijklmnopqrstuvwxyz 0123456789
Cubano italic The quick brown fox jumps over the lazy dog. Abcdefghijklmnopqrstuvwxyz 0123456789
16
Typography Ideal Sans With no almost no straight lines and few symmetries, Ideal Sans is a playful humanist typeface that comes across as warm and inviting. This font appears professional, but with its humanist quirks, it’s also playful for kids. Ideal Sans is the typeface used in both GGC’s logo and logotype. It also has a beautiful italic and looks good at text, subtitle, and headline sizes. It can be used for both web and print.
Purchasing typography.com/fonts/ideal-sans/styles/ Font Package: Ideal Sans 1 Basic $$$
Ideal Sans Light The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Ideal Sans Regular The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Ideal Sans Bold The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
GGC | Brand Standards Guide
17
Typography ff Tisa Pro Initially created based off a slab serif wood type, Tisa is dynamic, friendly, and legible, even at small sizes. It’s ideal for body copy with its large x-height and pronounced serifs. With unique design details and a beautiful italic, it can also be used for subheadings, subtitles, and footnotes. It should be used primarily for print. The original version of Tisa is preferred over the sans-serif version, ff Tisa Sans Pro because it contrasts with Ideal Sans and Cubano.
Purchasing myfonts.com/fonts/fontfont/tisa/ Font Package: ff Tisa OT 1 $$$
ff Tisa Pro Light The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ff Tisa Pro Regular The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ff Tisa Pro Bold The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
GGC | Brand Standards Guide
18
Free Alternatives
Lato Light
Lato
The quick brown fox jumps over the lazy dog.
Lato is a clean, legible, Humanist typeface created by a Polish designer, ﾅ「kasz Dziedzic, for a corporate client. The client decided to go in a different design direction, so ﾅ「kasz released Lato online for free.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Lato is a free alternative to Ideal Sans and can be used for both print and web.
Lato Bold The quick brown fox jumps over the lazy dog.
Downloading fontsquirrel.com/fonts/lato Free!
Merriweather With its quite large x-height and sturdy serifs, Merriweather is a cheery free alternative to Tisa. When using Merriweather, especially for print, be cautious of how large it is. It often needs to be set at a smaller point size. The original version of Merriweather is preferred over the sans-serif version, Merriweather Sans. Merriweather can be used for print and web.
Downloading fontsquirrel.com/fonts/merriweather Free!
GGC | Brand Standards Guide
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Merriweather Light The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Merriweather Bold The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 19
ANIMAL S
Print Elements
Illustration Style
Illustration Style The overall illustration style is called flat design. It is simple, clean, vibrant, and two-dimensional and generally features crisp edges and open space. To show dimension, an object may be cut in half so that one side has slightly darker colors than the the opposite side, but this should be a subtle effect.
GENERAL
ANIMAL S
ARTS
Effects, such as drop shadows and glows, should not be used frequently; if used, they should be subdued. VETERANS
Characters Little Big Heart, Global Girl, Pixel, and Krumi should appear on materials for kids, teachers, and parents, but should be used more sparingly on materials for funders.
GENERAL
H E A LT H
VETERANS
B U L LY I N G
Characters
Diagonal Corner Ribbon This ribbon can be used in the upper-left hand corner of documents next to titles. The workbook badge spreads must have this next to the badge title.
Full-Bleed Semi-Circles These should be used on only business materials or materials for funders. The semi-circle should encapsulate the logo but not the wordmark. If the logo is in full-color, the semi-circle should be a tastefully contrasting color.
GGC | Brand Standards Guide
20
Diagonal Corner Ribbons
ARTS Badge
ART ART
Lucy and her friends after a concert at a nursing home.
The arts include music, theater, painting, sculpting, and many other creative activities. They allow people to express and share their ideas and emotions in ways that can inspire and educate others. Whether you create art or simply enjoy supporting what others have created, you can ignite good!
Danny is painting a tribal drum.
How you can ignite good! • volunteer or participate at an art camp or local cultural event • try playing an instrument • support local theatre by going to see a play or audition for a role • make cards for kids in the hospital • sing for senior citizens at a nursing home
Global Game Changers | Badges
These kids are interested in musical theatre.
Doodle Time Draw your favorite way to express yourself.
2 4
Global Game Changers | Badges
Color your own badge!
53
Full-Bleed Semi-Circles
GGC | Brand Standards Guide
21
Badge Spreads (Left)
Full Bleed Diagonal Corner Ribbon
The left side of the spreads needs to be kept similar for each badge. By putting the Ignite Good! box in the same area on each page, kids won’t have to search around the spread to find how to earn their badge. The suggestions should be bulleted for quick reading. At least one character needs to be on the spread (can be on left or right page) demonstrating the badge. While most illustrative elements will be in the background, at least one (e.g. characer or object) needs to break a text box barrier and be at the front. This makes the scene appear more active and engaging.
ARTS Badge
ART ART
Title Badge White Circle
The arts include music, theater, painting, sculpting, and many other creative activities. They allow people to express and share their ideas and emotions in ways that can inspire and educate others. Whether you create art or simply enjoy supporting what others have created, you can ignite good!
Description
Danny is painting a tribal drum. How to Ignite Good
How you can ignite good! • volunteer or participate at an art camp or local cultural event • try playing an instrument • support local theatre by going to see a play or audition for a role • make cards for kids in the hospital • sing for senior citizens at a nursing home
Doodle Time Draw your favorite way to express yourself.
Character demonstrating badge
Global Game Changers | Badges
GGC | Brand Standards Guide
2 4
Global Game Changers | Badges
22
Badge Spreads (Right) While the left side of badge spreads are relatively fixed, this side is looser and should change with each badge.
Photos
ARTS Badge
Essential Elements:
ART ART
• Photos explaining badges and/or pictures of arts include music, theater, painting, sculpting, and many other how to earn badgesThe creative activities. They allow people to express and share their ideas
Captions
Lucy and her friends after a concert at a nursing home.
and emotions in ways that can inspire and educate others. Whether
you create art or simply enjoy supporting what others have created, • Interactivity (e.g. drawing, journal space, you can ignite good! coloring, crossword, maze, word search)
Danny is painting a tribal drum.
• Illustration overlapping maingood! text frame How you canthe ignite • volunteer or participate at an art camp or local cultural event • try playing an instrument • support local theatre by going to see a play or audition for a role • make cards for kids in the hospital • sing for senior citizens at a nursing home
Global Game Changers | Badges
Brand Standards Guide GGC || Graphics Standards Guide
These kids are interested in musical theatre.
Doodle Time Draw your favorite way to express yourself.
2 4
Global Game Changers | Badges
Interactivity
Color your own badge!
53
23
Kids’ Website Elements
Typographic Style
The illustration style and character styling of print elements apply to web elements. However, the diagonal corner ribbon is seldom used and the full-bleed semi-circle is not used.
Typographic Style The type needs to be big and simple for quick understanding. It should be encouraging and exciting.
Background Colors & Illustrations Within 960 pixels, the background should be a solid, bright flat color. Beyond 960 pixels, the background will be outerspace. At the top of the page, the characters would parallax scroll over the earth and night sky to make it seem as though they were flying.
Background Colors & Illustration
Navigation Pages include: Home, Games, Leaders, GGC Map, Store, and Contact. The webpage is a single page, and each navigation option takes you to the location on the page.
Responsive To keep up with technology and various screen sizes, this website needs to be responsive. For the mobile site, the backgrounds are bright colors (similar to desktop except minus outer space) and navigation slides out from the left to conserve space.
GGC | Brand Standards Guide
24
Navigation (Top)
Navigation (as you scroll)
Responsive
GGC | Brand Standards Guide
25
GGC | Brand Standards Guide
Prepared by Cape Studios UofL CA&D Design for Public Issues Class Fall 2014
26