Brand Identity Guide 2020
Witches Brew Brand Identity Guide 2020
Table of Contents Introduction
Project Brief Design Overview
Basic Elements Color Palette Typeface Logo
Stationery
Letterhead Envelope Business Card CD + Sleeve Presentation Folder
7
Signage
31
11
Main Entrance Informational Indicational Advertisement
14
Mobile App UI
47
Brand Assets
57
8 9
12
16
23 24 25
Task: Product Quiz Product Mockups
32
34 38 44
48
58
26 27 28 5
INTRODUCTION PROJECT BRIEF DESIGN OVERVIEW
PROJECT BRIEF
Witches Brew is an ethical hair care company looking to inspire their audience to take pride in their hair care by providing custom product formulas fitted to the customer’s needs. They will offer a wide range of ingredients for all hair and scalp types and promote ethical product creation by choosing natural, cruelty-free, and vegan ingredients and processing. Witches Brew’s goal is to create a haircare line that’s for everyone. A haircare line that you can get excited to use today and look forward to using tomorrow. Witches Brew is here to encourage self care that starts from the roots.
8 Witches Brew Brand Identity Guide
DESIGN OVERVIEW
The haircare industry has hundreds of competitors, but competition may be narrowed down by companies that provide a custom product. Consumers who use Witches Brew hair products are not looking for any shampoo and comditioner, they’re looking for their shampoo and conditioner, a product that targets their specific hair and scalp concerns. The identity of Witches Brew must be as unique as the very consumers who use our products. While Witches Brew is a company open to anyone interested, branding leans towards younger feminine consumers. We expect consumers to be bold and daring, but we also expect some to keep it safe, as we have with our color palette. Witches Brew branding brings the best of both worlds, with bold magenta and soft yellow and pink with a signature Witches Hat.
Introduction 9
Elements of design regarding Witches Brew branding. General rules and restrictions on colors, type, symbols, and the official logo.
LOGO DESIGN COLOR PALETTE TYPEFACE BASIC ELEMENTS MASTER LOGO LOGO VARIATIONS
COLOR PALETTE
HEX: #c91a7a RGB: 201, 26, 122 CMYK: 18, 100, 17, 0
12 Witches Brew Brand Identity Guide
HEX: #fac 9 d9 RGB: 250, 201, 217 CMYK: 0, 25, 2, 0
HEX: #5 2003d RGB: 82, 0, 61 CMYK: 58, 100, 41, 48
HEX: #fcded6 RGB: 252, 222, 214 CMYK: 0, 14, 11, 0
Basic Elements 13
TYPEFACE
Aa
Voltage Bold
Aa
Aa
Literata Book Regular
Literata Book Bold
Logo and decorative headings.
Body text.
Titles, headings, and subheadings.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 123456789,.()?!
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 123456789,.()?!
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 123456789,.()?!
14 Witches Brew Brand Identity Guide
TYPEFACE CUSTOMIZATION
1
3
2
1
Sparkle jot: A sparkle design was used for the jot of the “i” on “Witches Brew.”
2
3
Offset Outline: A magenta outline was added to give contrast to the light pink and yellow.
"h" and "B" Connection: A connection was made between the “h” and “B” in order to connect the logo.
Basic Elements 15
SYMBOL DESCRIPTION
2 4 1 3 1
Wide Brim Hat: A witch hat. Purple to magenta gradient to show
3
depth under the brim.
2
Sparkles: Add visual interest to the hat and are used throughout branding.
Ribbon: Adds femininity and breaks up the large amount of magenta.
4
Crooked Point: Adds a more sinister feel, an offset to the pink color scheme which makes the brand more youthful and jovial.
16 Witches Brew Brand Identity Guide
BLACK & WHITE LOGO AND RATIO
x
1/10 x 4/5 x
2/5 x
2x
Basic Elements 17
MASTER LOGO
VARIATION
18 Witches Brew Brand Identity Guide
RESTRICTIONS No element of the logo may be stretched out of proportion. The ratio must be kept. The scale of the logo may be adjusted or a different variation of the logo may be used in the case the logo does not fit.
The logo may not be placed on colors without proper contrast. If the logo must be placed on a background such as this, a single color version of the logo may be used instead.
The colors of the logo may not be flipped. This causes a lack of contrast and color visibility in the logo that strains the viewer's eyes. The colors of the logo are non negotiable, and should a problem arise, the black and white logo should be used instead.
Basic Elements 19
MINIMUM SIZE
1 in
1.2 in
0.5 in
0.8 in
20 Witches Brew Brand Identity Guide
0.5 in
0.9 in
CLEAR SPACE
x
1/10 x
1/10 x
All variations of the logo will use this specified amount of clear space. Corresponding to the Master Logo's x height, all variations of the logo require a minimum 1/10 x amount of space.
Basic Elements 21
Official stationery shown with size guidelines for print for Letterhead, Envelope, Business Card, CD and CD Sleeve, and the Presentation Folder.
STATIONERY LETTERHEAD ENVELOPE BUSINESS CARD CD+ SLEEVE PRESENTATION FOLDER MOCKUP
LETTERHEAD
0.8 in
1 in
1 in 1.5 in
11 in
1 in 1.2 in
0.4 in
1.7 in
8.5 in
24 Witches Brew Brand Identity Guide
0.4 in
ENVELOPE
0.3 in 0.2 in 2 in
0.3 in 1.2 in
4.125 in
0.3 in 0.4 in
0.5 in
1.6 in
0.5 in
0.4 in
9.5 in
Stationery 25
BUSINESS CARD
CONTENTS CENTERED.
0.1 in
0.3 in
1 in
3.5 in
2 in
0.6 in
0.3 in
2 in
26 Witches Brew Brand Identity Guide
CD & SLEEVE
CONTENTS CENTERED.
5.2 in
4.7 in
3.3 in
5.2 in
Stationery 27
PRESENTATION FOLDER
3 in
12 in
6.8 in
1 in 0.7 in
0.5 in
0.4 in
5.2 in
0.5 in
1.3 in 0.5 in
4.25 in 2.3 in 1 in
28 Witches Brew Brand Identity Guide
Stationery 29
Signage design for Witches Brew, including visual scale and size guidelines. The section includes Main Entrance, Recipes, Brewing Process, Potion Lab, Employees Only, Restroom, and Advertisement designs.
SIGNAGE MAIN ENTRANCE INFORMATIONAL INDICATIONAL ADVERTISEMENT
31
MAIN ENTRANCE
9 ft
7 ft
5.2 ft
0.5 ft
32 Witches Brew Brand Identity Guide
1 ft
Signage 33
2.5 ft
RECIPES
1.5 ft
0.4 in
3.5 ft
0.3 in
5 ft
3 ft
34 Witches Brew Brand Identity Guide
5.2 ft
Signage 35
3 ft
BREWING PROCESS
2 ft 0.6 in
0.3 in
4 ft
6 ft
3 ft
36 Witches Brew Brand Identity Guide
5.2 ft
Signage 37
POTION LAB 4.5 ft
5 ft
5.2 ft
1 ft
1 ft
38 Witches Brew Brand Identity Guide
Signage 39
EMPLOYEES ONLY
4.5 ft
5.2 ft
3 ft 2 ft
40 Witches Brew Brand Identity Guide
Signage 41
RESTROOMS 6 ft
1.5 ft
1 in
1 ft
1.8 in
1 ft
5.2 ft
4 ft
Measurement from "Restrooms" sign to the top of the door it's above is 0.5 ft.
42 Witches Brew Brand Identity Guide
Signage 43
ADVERTISEMENT
2 ft
12.5 ft
0.8 ft
0.6 ft
8 ft
0.6 ft
5-20 ft.
5.2 ft
44 Witches Brew Brand Identity Guide
Signage 45
User Interface for mobile application, featuring a task walkthrough of how a consumer using the application would open the app and navigate the personalization quiz.
MOBILE APP UI TASK: PRODUCT QUIZ
STEP 1
1 LOADING Open the application, starting the task process. The Witches Brew logo is shown against a white background. To indicate that the application is loading, the sparkles at the bottom will move to indicate an action is happening so the user is aware of a wait period.
48 Witches Brew Brand Identity Guide
STEP 2
2 GREETING POP-UP Upon loading, first time users will be greeted with a pop-up indicating that they are able to sign up for benefits. For this process, no sign up is required, so the user will close the popup using the "x" button on the upper right corner. Should the user want to, they also have the option of using the "SIGN UP" button to make an account for the application.
Mobile App UI 49
STEP 3
3 HOME Once the pop-up is removed, the user is shown the "HOME" screen. For this task, the user will use the "TAKE THE QUIZ" button, in order to access the personalization quiz for their hair care products. The user also has the ability to search for products or information, access their shopping cart, shop for additional products, view their account information, and view store information.
50 Witches Brew Brand Identity Guide
STEP 4
4 QUIZ PART 1 This is the first page of the personalization quiz. The user must provide hair type (straight, wavy, curly, coily), hair structure (fine, medium, coarse), and scalp moisture (dry, normal, oily). The user may then use the "CONTINUE" button to access the next page of the quiz. If the user does not provide an answer for each section, the "CONTINUE" button will instead be pink and unavailable. Progression is shown beneath the button to allow the user to know how far they are in the quiz. The user also has the ability to use the "<" button on the upper left to take them to the previous page. This will not undo progress in the quiz. Here, the user has indicated their hair is "Wavy" Hair Type, "Fine" Hair Structure, and "Oily" Scalp Moisture.
Mobile App UI 51
STEP 5
5 QUIZ PART 2 This is the second page of the personalization quiz. The user will select up to six hair goals that coincide with what they would like their hair products to perform. Upon choosing an option, information will be shown at the bottom for that specific "goal" that allows the user to read what ingredients and benefits are associated with that "goal." The user must choose at least one option, and may not choose more than six options. The user may then use the "CONTINUE" button to access the next page of the quiz. The button will not be available if the user has chosen at least one "goal." Here, the user has chosen "Strengthen,
Lengthen,
Hydrate,
Nourish
Roots, and Oil Control."
52 Witches Brew Brand Identity Guide
STEP 6
6 QUIZ PART 3 This is the third page of the personalization quiz. The user will select a fragrance for their products and the strength of that fragrance. The user must choose an option for both sections to continue. The user The user may then use the "CONTINUE" button to access the next page of the quiz. Here, the user has chosen "Rose" Fragrance with "Strong" Fragrance Strength.
Mobile App UI 53
STEP 7
7 QUIZ PART 4 This is the fourth and final page of the personalization quiz. The user will select a color for their Shampoo and a color for their Conditioner. When a color is chosen, the chosen color will be indicated by the sparkle design, the color name appearing beneath the product, and the Potion Bottle will fill with the chosen color. New colors will be indicated by the "New!" text beneath the color. The user will then input a name for their product, which may not contain special characters. The user must complete all sections. The user may then use the "CONTINUE" button to complete the quiz and move on. Here, the user has chosen "Cauldron Black" for their Shampoo color, and "Spectral" for their Conditioner color. No name has been inputted.
54 Witches Brew Brand Identity Guide
STEP 8
8 PRODUCT SELECTION Once completing the quiz, the user is able to select which products they want to purchase. The user has the option to choose "8oz" or "16oz" sizes for both Shampoo and Conditioner. The user may also add an aditional Hair Mask with a personalized color. All of these choices are optional. Once the user has made their selection, they may use the "ADD TO CART" button to add the products to their cart, which will prompt the Shopping Cart icon at the top to show a the number of products inside. The user may alternatively use the "BUY NOW" button to immediately check out their selection. Here, the user has chosen "8oz" Shampoo, "16oz" Conditioner, and "8oz" Hair Mask in "Eye of Newt" color, and added all three products to their cart.
Mobile App UI 55
Product examples for Witches Brew which show possibilities for how to use the logo on physical products.
BRAND ASSETS PRODUCT EXAMPLES
58 Witches Brew Brand Identity Guide
Brand Assets 59
Any questions, comments, or concerns may be sent by email to hyberger@unlv.nevada.edu.
DESIGNED BY AYANA HYBERGER
www.witchesbrew.com