GRAPHIC STANDARDS MANUAL de signe d by Co de O range • Fall 2018
1
2
Brief History 4
Introduction
7
Color
10
Typography
16
Logos
22
Design Elements
30
Digital Applications
35
Application Examples
45
Appendix
56
Contents
3
Brief History
4
THEIR STORY
Project Warm was founded in 1982. Since then, they have been using energ y conser vation to lower utilit y bills for lowincome households. Energ y conser vation is achieved through weatherization ser vices and repairs. Project Warm’s mission is energized by dedicated volunteers involved in Project Warm’s First Line Weatherization Program and those involved with the yearly BLITZ volunteer event.
The BLITZ is an annual event that takes place on the first two Saturdays of November. This event usually consists of about 300 volunteers who go out and help weatherize the windows of lowincome household to prepare them for the cold winter months. This event is a great oppor tunit y for volunteers to connect with the homeowners and see the immediate impact Project Warm has on the families in our communities.
First Line volunteers identif y keys areas of air-loss around the house and make energ y repairs including: weather-proofing and repairing doors and windows, hanging interior plastic window covers, caulking around open seams, replacing broken or missing window glass, replacing furnace filters, making minor repairs to missing dr ywall or open flooring.
5
PREVIOUS BRANDING
Project Warm has been using a few dif ferent logos from over the years. We want to eliminate any inconsistencies like this within their brand. We want their entire visual system to be recognizable in the communit y as their unique identit y. The images shown on the right are the two logos that have been in use at Project Warm in the past.
6
Introduction
7
CODE ORANGE + PROJECT WARM
We, the designers behind this branding program, are four graphic design students from the Universit y of Louisville, Hite Ar t Institute. Our team of four is called Code Orange. We teamed up with Project Warm in August of 2018. The goal for this project is to create a new logo and full visual system for Project Warm. With many rounds of idea generation and feedback, we have worked ver y hard together with Project Warm to create the best possible solution for them. This manual ser ves as a physical manifestation of the work we have done during this semester, but also of what the visual future of Project Warm could look like.
8
ADHERENCE
Having Brand Standards is impor tant for any business because it provides a plat form that assists the business in keeping a consistent tone and look across all design mediums. This Brand Standards Manual will ser ve as a writ ten rule book that will help Project Warm keep this consistency within their organization. Brand Standards is much more than just a new logo. It is a completely updated and well thought-out visual system. Having a defined visual system will help Project Warm achieve the highest level of brand recognition possible within the communit y.
carried out with Project Warm’s mission and work-flow in mind. These rules were not randomly thought up. The standards laid out in this manual should be followed closely by each of Project Warm’s depar tments. We have added Quick Rules, a easy view of the rules discussed on the page. The diagram on the right shows the format that Quick Rules will take on throughout this manual.
1
This is an example of how Quick Rules will look throughout this grpahic standards manual
2 Look at these for a quick over view of the rules discussed on the page
Ever y standard in this manual has been researched extensively and deliberately
9
Color
10
PRIMARY COLOR PALETTE
Cozy Home Orange HEX RGB CMYK
#faa300 250 163 0 0 35 100 2
11
SECONDARY COLOR PALETTE
12
Community Yellow
Fresh & Clean Green
Cool Home Blue
HEX RGB CMYK
HEX RGB CMYK
HEX RGB CMYK
#fde74c 253 231 76 0 9 70 1
#alc960 161 201 96 20 0 52 21
#62b6cb 98 182 203 52 10 0 20
FULL COLOR PALETTE
Project Warm Black
Cozy Home Orange
Community Yellow
Fresh & Clean Green
Cool Home Blue
HEX RGB CMYK
HEX RGB CMYK
HEX RGB CMYK
HEX RGB CMYK
HEX RGB CMYK
#353737 53 55 55 4 0 0 78
approved black
#faa300 250 163 0 0 35 100 2
primary
The color palet te shown above shows the only colors that should be used in any Project Warm communit y outreach ef for t. Any print or digital publication should show use of this palet te. The Project Warm Black shown on the far lef t should be the only black value used. It should not be altered in any way other
#fde74c 253 231 76 0 9 70 1
#alc960 161 201 96 20 0 52 21
#62b6cb 98 182 203 52 10 0 20
secondary
than using tint values of this black. It should not be darkened in any way. The primar y color, Cozy Home Orange, should not be altered in any way other than using tint values of the color. This orange should never be darkened. Communit y Yellow, Fresh & Clean Green, and Cool Home Blue are all secondar y
colors. Their color values can not be altered in any way other than for the use of tints of these colors. These color values should not be darkened.
1 Do not use any colors outside of this color palet te
13
COLOR DISTRIBUTION
50% of the page should be whitespace
The above bar graph shows the correct distribution of color that should occur on all Project Warm materials produced for print and web. 50 percent of the layout should be whitespace. 30 percent should be the primar y color Cozy Home Orange. 20 percent of the layout should use some
14
30%
of the page should contain the primary orange
combination of the secondar y colors. For example, Cool Home Blue and Communit y Yellow could be used as complementar y colors to the primar y orange. These secondar y colors should never over-power the primar y orange.
20% of the page should contain two or more of the secondary colors
1 Follow the color distribution bar graph above for print and web 2 Use at least two secondar y colors 3 Do not use more secondar y color than primar y color in any layout
COLOR APPLICATION
All of Project Warm’s color values can be tinted at any percentage (shown above). Being able to use tints of the colors allows for more versatilit y within applications.
1 All of the above brand colors can be used and tinted to a lighter version of the full-strength color
15
Typography
16
TYPOGRAPHIC STANDARDS
The t ypography chosen for Project Warm’s brand includes a pairing of two websafe t ype families made available by Google Fonts. The of ficial t ype pairing is Montserrat & Work Sans. These should be the only two font families used across all materials produced for the use of the Project Warm organization.
MONTSERRAT
+
WORK SANS
ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 45 67 8 9 0 ~ ! @ #$ %^&*( )
It is impor tant to be consistent with t ypography because it is a big par t of the visual system. It may seem subtle, but it really does make a big dif ference when t ypography is uniform.
1 Only use two t ypefaces: Montserrat and Work Sans 2 Do not pair Montserrat or Work Sans with other fonts
17
MONTSERRAT
Montserrat is a ver y clean sans serif t ypeface. It has a wide variet y of weights and has italics; it is ver y versatile. It has a great x-height that provides ample legibilit y. It also pairs well with other sans serif t ypefaces. For project Warm’s purposes, Montserrat will be used in both web and print. Specifically, Montserrat Bold should be used for headers. Montserrat Bold is also used for the logo t ypography; this should never be altered or changed in any way.
1 Use Montserrat Bold for headers 2 Use the blockmark shown in the right diagram* 3 Do not exceed 20pt font in print or web applications
*Described in more detail on page 34
18
General Headers: Montserrat Bold (14pt) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Body Copy: Work Sans Light (8 pt/12)
MONTSERRAT Montserrat Black
ABCDEFGHIJKLMNOPQRSTUV WX YZ abcdefghijklmnopqrstuvwxyz 1 2 34 5678 90 ~!@ # $%^&*( ) Montserrat Black Italic
ABCDEFGHIJKLMNOPQRSTUV WX YZ abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 78 9 0 ~ ! @ # $% ^&* ( ) Montserrat Bold
ABCDEFGHIJKLMNOPQRSTUV W X Y Z abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^&* ( ) Montserrat Bold Italic
ABCDEFGHIJKLMNOPQRSTUV WX YZ abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ &* ( ) Montserrat Regular
ABCDEFGHIJKLMNOPQRSTUV W X Y Z abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^&* ( )
Montserrat Regular Italic
A B C D EFGH I JK L M N O P Q R S T U V W X Y Z abcdefghijklmnopqrstuv wxyz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ &* ( ) Montserrat Light
A B CD EF GHI JK L MN O P Q R S T U V W X Y Z abcdefghijklmnopqrstuv wxyz 1 2 3 4 5 6 78 9 0 ~ ! @ # $ % ^ &*( ) Montserrat Light Italic
A B CD EFGHI JK L MN O P Q R S T U V W X Y Z abcdefghijklmnopqrstuv wxyz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ &* ( ) Montserrat Thin
A B CD EF GHI JK L MN O P Q R S T U V W X Y Z abcdefghijklmnopqrstuv w x yz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ &* ( ) Montserrat Thin Italic
A B CD EFGHI JKL MN O P Q R S T U V W X Y Z abcdefghijklmnopqrstuv w x yz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ &* ( )
19
WORK SANS
Work Sans is also a sans serif t ypeface. It is extremely versatile due to its wide variet y of weights. It pairs well with the other Project Warm t ypeface, Montserrat. Work Sans will be used in both print and web applications as par t of Project Warm’s brand. Work Sans Light should be used for body copy in print. Work Sans Regular should be used for body copy in web applications, this provides bet ter on-screen legibilit y.
Print Header: Montserrat Bold (14pt) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Body Copy for Print: Work Sans Light (8 pt/12)
1 Use Work Sans Light for body copy 2 Use Work Sans Regular for body copy on web project
Web Header: Montserrat Bold (13.5pt) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Body Copy for Web: Work Sans Regular (12 pt/17)
20
WORK SANS
Work Sans Black
ABCDEFGHIJKLMNOPQRSTUV W XYZ abcdefghijklmnopqrstuvwxyz 12 3 4 5 678 9 0 ~ !@#$ %^&*( ) Work Sans ExtraBold
ABCDEFGHIJKLMNOPQRSTUV W XYZ abcdefghijklmnopqrstuvwxyz 12 34 56789 0 ~!@#$ %^&*( ) Work Sans Bold
ABCDEFGHIJKLMNOPQRSTUV W X YZ abcdefghijklmnopqrstuvwxyz 1234 567890 ~!@#$ %^&*( ) Work Sans SemiBold
ABCDEFGHIJKLMNOPQRS TUV W X Y Z abcdefghijklmnopqrstuvwxyz 1234567890 ~ !@ # $ %^&*( )
Work Sans Regular
A B C D E FG H I J K L M N O P Q R S T U V W X Y Z abcdefghijklmnopqrstuvwxyz 1234567890 ~ !@ # $ %^&*( ) Work Sans Light
A B C D E FG H I J K L M N O P Q R S T U V W X Y Z abcdefghijklmnopqrstuvwxyz 123 4 56789 0 ~ !@ # $ %^&*( ) Work Sans ExtraLight
A B C D E FG H I J K L M N O P Q R S T U V W X Y Z abcdefghijklmnopqrstuvwxyz 123 4 5 6 78 9 0 ~ ! @ # $ %^&*( ) Work Sans Thin
A B C D E FG H I J K L M N O P Q R S T U V W X Y Z abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ %^&* ( )
Work Sans Medium
ABCDEFGHIJKLMNOPQRS TUV W X Y Z abcdefghijklmnopqrstuvwxyz 1234567890 ~ !@ # $ %^&*( )
21
Logos
22
LOGO EVOLUTION
This mark is Project Warm’s original logo. It is currently in use on the main sign at Project Warm’s of fice building.
This mark is Project Warm’s current logo. It was designed in 2012 by Bess McLaughlin. This logo is being used for most Project Warm marketing materials circulating in the communit y today.
This mark is included in the re-brand project completed by four Universit y of Louisville students in the Fall of 2018. This is the new logo that will be used as the main logo from this point forward.
1 Do not use logos from past branding projects
23
This logo is the primar y logo that will be used to of ficially promote Project Warm and the ser vices it provides out in the communit y. The black and white version on the right is only to be used when Project Warm is printing at a low budget since black and white is t ypically cheaper.
24
2
2
PROJ
S T 98 1
E
E
S T 98 1
W T C E
M AR
W T C E
M AR
PROJ
PRIMARY LOGOS
1 Use the full-color logo (on lef t) when possible 2 Use the black and white logo (on right) when budget is low and does not allow for color printing
PROJ
2
The diagram on the lef t displays the appropriate amount of clearspace that should surround the logo when it is being applied to a product. No mat ter what the scale is, the space around the logo should equal a square the size of the height of the “T” at the top of the logo.
S T 98 1
E
E
S T 98 1
W T C E
M AR
W T C E
2
height of the “T”
M AR
PROJ
PRIMARY LOGO CLEARSPACE + MEASUREMENTS
page layouts looking clean and polished. It also keeps things from over-lapping or interacting with the logo’s space which would be inappropriate. The diagram on the right shows the thought process behind the spacing on
1 Always allow enough whitespace between this logo and other design elements 2 Do not change the placement of the housemark inside of the circular wordmark
this logo. Clearspace is necessar y because it keeps
25
INCORRECT USES
4
M AR
ECTW
2
PROJECT WARM
2
E
S T 98 1
S T 98 1
6
1 Do not rotate or tilt the logo 2 Do not crop/cut-of f the logo
7
8
4 Do not apply a drop shadow to the logo
7 Do not change colors within the logo
5 Do change the orientation of
8 Do not combine elements from
the logo
primar y and secondar y logos
6 Do not blur or change the resolution of the logo
26
PROJ
W ECT
M AR
PROJECT WARM EST.1982
3 Do not alter the logo dimensions or stretch the logo
3
E
5
2
PROJ
1
SECONDARY LOGOS
1
2
3
4
These logos are secondar y logos for Project Warm. The logo on the lef t is known as the “one-line logo” and the logo on the right is known as the “housemark logo”. The one-line logo should be used for in-house Project Warm items. It is within the designer’s discretion to decide if it is appropriate to use this logo vs. the main logo if it looks bet ter within the design.
The Housemark logo should be used for in-house items only.
1 Use one-line logo in-house and when it fits bet ter than main logo 2 Use housemark in-house only
27
ONE-LINE LOGO CLEARSPACE + MEASUREMENTS
height of the space
The diagram on the top displays the appropriate amount of = that should surround the logo when it is being applied to a product. No mat ter what the scale is, the space around the logo should equal a square the size of the height of the space between the housemark and the “PROJECT WARM� t ypography. The bot tom diagram shows the thought process behind the spacing between the housemark and the t ypography.
28
1
Use a square the size of the space highlighted in the above diagram to determine the amount of clearspace needed
2 Do not change the spacing between the housemark and the t ypography 3 Do not overlap the one-line logo with other design elements
HOUSEMARK CLEARSPACE
The diagram above shows the appropriate amount of clearspace that should surround the housemark logo when it is being applied to a design. No mat ter what the scale is, the space around the logo should equal a square the size of four window squares.
1
Use a square the size of the space highlighted in the above diagram to determine the amount of clearspace needed
2 Do not overlap the housemark with other design elements
29
Design Elements
30
PHOTOGRAPHY SUBJECT MATTER
All Project Warm photography should have a similar tone and subject mat ter, whether it be for social media, the website, or print materials. Project Warm should avoid use of clip-ar t and stock photography. The images should be personal and candid rather than posed and forced. Pictures of volunteers should show them at work rather than in posed group photos. This will provide the communit y with more accurate glimpses into the work Project Warm does. The char t on the right displays examples of some incorrect photography practices
1 Pick photos that are candid and accurately represent Project Warm 2 Avoid using stock photos 3 Avoid using clip-ar t
31
PHOTOGRAPHY TECHNIQUE
Images used by Project Warm should not be blurr y or have low resolution. When possible, Project Warm should use a good, high-qualit y camera. Photo editing should be ver y consistent. Project Warm should use the Lightroom presets provided by Code Orange.
1 Do not use blurr y or low-qualit y photographs 2 Be consistent with photo-editing 3 Use Lightroom presets shown on the right
32
Lightroom Preset Photo Rules
1.
Lightroom color preset: “Direct Positive”
2.
Adjust Temp + 0-50 (Warm)
3.
Adjust “Exposure” and “Contrast ” accordingly
4.
If there are sun spots, adjust highlights, shadows, whites & blacks in “Tone” section
VIDEOGRAPHY
Videos should be shot with an informal, impromptu tone. Scripted language and over-planned content should be avoided. When possible, Project Warm should use a high-qualit y video camera to avoid poor resolution. When filming, be aware of the surroundings. Do not show too much information about the clients’ homes. Also be cognizant of any background noise that may inter fere with the qualit y of the sound within the video.
1 Do not use blurr y or low-qualit y videos 2 Avoid loud background noise 3 Use an informal, impromptu tone
33
BLOCKMARK
The Blockmark is a design element that should be used as a marker next to headers. It is only necessar y on big projects like brochures, the Project Warm website and mass emails sent out. The example on the right shows how to correctly use the blockmark. The blockmark should always match the color of the header. It should be the size of the tallest let ter in the header sentence. There should always be a space equal to the size of the blockmark between the blockmark and header. That space should also exist between the header and the body copy.
34
Print Header: Montserrat Bold (14pt) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Body Copy for Print: Work Sans Light (8 pt/12)
Digital Applications
35
WEB + MOBILE
All web content on projectwarm.org should be as high-qualit y as possible. Project Warm should avoid put ting too much information on the desktop and mobile sites. The photography and videography used on the website should align with the rules laid out on pages 31-33 in this manual. The web headers should use the orange blockmark and black header text which is shown on the right. As a disclaimer: the fonts on the website may var y in appearance depending on the browser being used. To view the website, up-to-date browsers are ideal.
1 Only use brand-approved t ypefaces 2 Use good qualit y photos, videos, and writ ten content 3 Avoid over-filling the website with too much content 4 Use the blockmark for headers
36
Web Header: Montserrat Bold (13.5pt) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Body Copy for Web: Work Sans Regular (12 pt/17)
SOCIAL MEDIA PRESENCE
With the growing impor tance of a social media presence, Project Warm should keep up-to-date information flowing to their Facebook, Twit ter and Instagram accounts. This is a good way to at tract more donors and volunteers. With this in mind, Project Warm should also be thought ful about the t ype of information they are put ting out there. The photography and videography used in these social media posts should align with the rules laid out on pages 31-33.
1 Do not use blurr y or low-qualit y photographs 2 Be consistent with photo-editing 3 Use an informal, impromptu tone 4 Use consistent imager y across all social media plat forms
37
SOCIAL MEDIA PRESENCE
38
SOCIAL MEDIA PRESENCE
39
SOCIAL MEDIA PRESENCE
40
EMAIL TEMPLATES
Code Orange has produced a Mailchimp email template for Project Warm to use. Mailchimp is a free, online email marketing ser vice that will help Project Warm send out consistent, well-designed mass emails to the communit y. The template provided by Code Orange should not be altered in any way. The photography used in these emails should align with the rules laid out on pages 31-33.
1 Do not use blurr y or low-qualit y photographs 2 Be consistent with photo-editing 3 Do not alter the layout of the email template 4 Use consistent imager y in all emails
41
SINGLE-EVENT EMAIL TEMPLATE
42
MULTI-EVENT EMAIL TEMPLATE
43
EMAIL SIGNATURES
All Project Warm administrators should have the same email signature design. The diagram on the right shows what email signatures should look like. The primar y signature logo and brand-approved t ypography should be used. If profile images are used, they should be good qualit y and not contain clip-ar t.
1 Do not use blurr y or low-qualit y photographs for profile images 2 Do not use any other layout than what is shown on the right 3 Only use the round primar y logo 4 Only use brand-approved t ypefaces
44
Application Examples
45
APPLICATION EXAMPLES
The following pages will display examples of some print and digital applications that could be applied by Project Warm. The production of these materials would help to fur ther establish Project Warm brand recognition in the communit y.
46
LETTERHEAD
47
ENVELOPE
48
BUSINESS CARDS
49
POCKET FOLDER
50
BROCHURES + FORMS
51
DESKTOP WEBSITE
52
MOBILE WEBSITE
53
OUTDOOR MARKETING
54
MERCHENDISE
55
Appendix
56
CREDITS
Photography by Henr y Kerns, Lianna Lamorenna & Quintin White. Videography by Lianna Lamorenna & Henr y Kerns. Graphic Standards Manual designed by Jessica Byrd. Special thanks goes to Mat thew Hudson, Aaron Tornes, Mark McKinley and Rachel Dickey for being great advocates for Project Warm’s mission. They have helped Code Orange a tremendous amount to bet ter understand Project Warm and what they do on a daily basis. Without this collaboration, Code Orange would not have finished this project with such a thorough final solution. Thank you!
57
58