& CAFE BRAND IDENTITY GUIDE 2021
2
Table of Contents Introduction
01
Signage Design
Project Brief
Exterior
Design Overview
Directional Kiosk
Basic Elements
05
Color Palette
Informational Menu
User Interface Design
Logo
Letterhead
Informational Signage Informational Hours + Prices
Typography
Stationary Design
24
17
37
Tablet Mobile
Envelope
Merchandise
Business Card
Aprons
CD Package + CD
Pins
Folder
Cups
46
Coffee Mugs 3
Introduction Project Brief Design Overview
1
Project Brief CyberSpace is a modern internet café and workspace founded in 2017. With the explosion and availability of the internet in the United States, many people don’t see the need for cybercafés. But CyberSpace focus more on the workspace aspect of the establishment. The café serves to fuel and charge the energy of its customers. The mission of CyberSpace is to create a working space and hangout space that could bring people together and motivate them to work. The services at CyberSpace include workspaces, a coffee bar, and technology such as computers and Wi-Fi. The main target audience is young consumers specially college students that need to find a place to do homework and distress, but anyone is welcomed.
2
3
Coffee Bar
WorkSpaces
Technology
We offer a variety of items in our menu to help energize our customers.
We offer a variety of workspaces to help our customers be more productive.
We offer a variety of services such as computer rentals for the needs of our customers.
Design Overview The overall design goal is to create the branding system for CyberSpace. Compared to other similar establishments CyberSpace aims to create a modern, fun, inviting, and motivating environment. The establishment aims to fuel its customers with its delicious coffee bar and to provide a working environment for them to distress and accomplish their work. The main goal is to brighten the mood of customers. We want them to feel happy and excited to get work done. We also want them to feel calm and not stress. Our branding focuses on the idea of play and exploration, which is shown using shapes. Shapes are used by children to play, explore, and learn.
4
Basic Elements Color Palette Typography Logo
5
Color Palette These are fun and unique brand colors that help CyberSpace stand out from their competitors. The colors were inspired by the cyber aesthetic and color meanings. KNOWLEDGE Helps encourage learning on our workspaces with the message of knowledge and work. COMPASSION & PLAYFULNESS Helps encourage compassion and play on our working spaces.
TRUST & CALM Helps build trust with our customers and helps calm them down, since we understand they might be dealing with work-related stress. REALIABILITY Used as a light background color for the logo and branding.
Wise Navy HEX: 0B2444 C: 100 M: 86 Y: 44 K: 47
Love Pink HEX: E52F92 C=3 M=94 Y=0 K=0
Lax Blue HEX: 447CBF C=76 M=47 Y=0 K=0
Light Gray HEX: 447CBF C=76 M=47 Y=0 K=0
6
ICONOGRAPHY The iconography help represent what CyberSpace is about. It also helps customer know more about the establishment.
SHAPES Shapes represents the fun and playful environment. The triangle represents the playful aspect and the circle the friendly and collaborative environment. WORKPACES Icon represents workspaces and areas.
TECHNOLOGY Icon represents the technology services.
COFFEE BAR Icons that represents the coffee bar.
7
PATTERN The pattern gives the customer an idea of what CyberSpace is about using the iconography from the brand. There is a dark and light variation which Can be used interchangeably. DARK VARIATION
LIGHT VARIATION
8
Typography PRIMARY TYPEFACE
SECONDARY TYPEFACE
Fun and friendly typeface used on our logo and as headings throughout our branding.
Modern typeface used throughout our branding as body text and sub-headings.
Puffin Display Soft Bold
Montserrat Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Montserrat Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
9
MODIFICATIONS FOR LOGO Logo had the following modifications using the primary typeface.
y
a
Triangle to represent play and circuit descender to represents technology.
Triangle to represent play.
b
p
Circuit scender to reprent technology.
Circuit descender to reprent technology.
10
Logo LOGO DESCRIPTION
CYBER Technology + Internet. CIRCUIT Shows technology aspect of the brand.
SPACE Work spaces.
11
& CAFE
CAFE Caffee Bar.
CIRCLE
PLAY
Encourages collaboration and proactivity.
Shapes show fun and encouraging environment.
BLACK & WHITE LOGO WITH RATIO x
x 8x
x
1.5x
1.5x
x
0.5x
1.5x
0.5x
x
& CAFE
x
4.45x
7.5x
12
MASTER LOGO
& CAFE 13
VARIATIONS Variations include one with the color palette and another one with a dark background. BRAND COLORS
DARK BACKGROUND
For logo with brand colors use a light gray as the background.
For any dark or bright background use the light gray version of the logo. Mainly used for merchandise.
& CAFE
& CAFE
14
RESTRICTIONS BACKGROUND
PROPORTIONS
Don’t a dark background on the color logo.
Don’t distort the logo. Keep proportions.
& CAFE
& CAFE
COLOR
Don’t rotate the logo to different angels.
Don’t use off branding colors on the logo.
&
CA FE
ROTATIONS
15
& CAFE
MINIMUM CLEAR SPACE
MINIMUM SIZE
0.1x
0.7’’ & CAFE
0.75’’
0.1x
0.1x
x
& CAFE 0.1x
16
Stationary Design Letterhead Envelope Business Card Folder CD Package + CD
17
18
Letterhead
1.8’’
DIMMENSIONS
0.25’’
0.5’’
H: 12’’ 1.8’’
W: 9’’ 1’’
& CAFE 2’’
12’’
4’’ CyberSpace Cafe 1234 Main Street Las Vegas, NV, 12345 Tel: (702)-123-4567 cyberspace@gmail.com
0.25’’
19
9’’
0.25’’
Envelope DIMMENSIONS H: 4.125’’
9.5’’
W: 9.5’’
0.5’’ 0.25’’
& CAFE
CyberSpace Cafe 1234 Main Street Las Vegas, NV 12345
1.625’’
1’’ 4.125’’ 1.5’’ 3’’ 4’’
1’’
2.4’’
2.4’’
1.5’’
Coffee & Working Spaces
20
Business Card
CD Package + CD
DIMMENSIONS
DIMMENSIONS PACKAGE
H: 2’’
H: 4.75’’
W: 3.5’’
W: 4.75’’ DIMMENSIONS CD H: 4.7’’ W: 4.7’’ 3.5’’ 4.75’’ MAYRA CARRERA
0.75’’
General Manager 1234 Main Street Las Vegas, NV 1234
2’’
0.46’’
0.25’’
Tel: (702)-123-4567 Fax: (702)-123-4568 cyberspace@gmail.com @CyberSpaceCafe
1’’ 3.5’’
4.75’’
1.2’’
2’’
0.25’’
4.7’’
1.2’’
1.14’’ & CAFE
Coffee & Working Spaces
0.25’’
1.14’’
0.25’’
& CAFE
0.25’’
4.7’’
21
6’’
Folder
0.75’’
0.6’’
0.25’’
DIMMENSIONS CLOSED H: 12’’ W: 9’’ DIMMENSIONS OPENED H: 12’’ W: 9’’
12’’
12’’
1.2’’
1.14’’ & CAFE
0.5’’
0.25’’ 9’’
22
3’’ 0.75’’ 0.25’’
4.25’’
23
18’’
Signage Design Exterior Design Directional Kiosk Informational Signage Informational Menu Informational Hours + Prices
24
Exterior
0.6’
3’
DIMMENSIONS OF SIGN H: 2.5’ 2.5’
W: 3’
& CAFE
DIMMENSIONS OF POLE H: 10.5’ W: 0.6’
2.5’
10.5’
5.5’
25
26
Directional Kiosk
3’
DIMMENSIONS
Main Floor
H: 6.5’ W: 3’
Kiosk
Collaboration Lab
Energy Bar
Computer Lab
Outdoors
Play Room
Launch
Green Room
5.5
P
Quiet Lab
& CAFE
1.5’
27
3.5’
Restrooms
6.5’
28
Indicational Signage
2.5’
DIMMENSIONS LARGE 0.65’
H: 0.65’
0.65’
W: 6’
0.25’
0.95’
DIMMENSIONS SMALL
8’
6.6’ 5.5’
H: 0.65’
4.6’
W: 2.5’ DESIGNS Computer Lab
Computer Lab
Energy Bar
Energy Bar
Launch
Launch
Outdoors
Outdoors
Play Room
Play Room
Quiet Lab
Quiet Lab
Green Room
Green Room
6’ 0.65’ 0.25’
Launch
5.2’
5.5’
29
0.65’
Launch
8’
4.4’
30
31
32
Informational Menu DIMMENSIONS OF EACH BOARD H: 3.5’ W: 3’ 3’
3’
Desserts
Drinks 1’
Teas
Classics
Baked Goods
Small Medium
Large
Small Medium
Large
Small Medium
Large
Espresso
3.25
4.25
5.25
Green
2.74
3.85
4.25
Cake Special
3.25
4.25
5.25
Americano
4.74
5.50
6.15
Black
2.74
3.85
4.25
Cupcake
4.74
5.50
Mocha
4.74
5.50
6.15
Cake Pop
4.74
5.50
6.15
Hot Chocolate
4.74
5.35
5.75
Bagels
4.74
5.35
5.75
Frappes
3.5’
Donuts
Smoothies
Small Medium
Large
Cholate
2.25
3.25
4.25
Glazed
2.74
3.50
4.15
6.25
Powder
2.74
3.50
4.15
6.05
Sprinkled
2.74
3.35
4.75
Small Medium
Large
Caramel
4.74
5.70
6.25
Oreo
4.74
5.70
6.25
Chocolate
4.74
5.70
Vanilla
4.25
5.20
Small Medium
Large
Green Mix
3.74
4.85
5.25
Fruit Mix
3.74
4.85
5.25
Macarons
Iced Lattes Small Medium
Large
4.25 5.50
5.25 6.15
Green Tea
2.25
3.25
Americano
3.25 4.75
Mango
2.74
3.50
Mocha
4.75
5.50
6.15
Strawberry
2.74
3.50
4.15
Caramel
4.75
4.75
5.25
Cholocolate
2.74
3.35
4.75
Espresso
Small Medium
5.5’
4’
33
6.15
Large
4.25 4.15
34
Informational Hours + Prices DIMMENSIONS OF EACH BOARD H: 1.5’
1.5’
W: 1.75’
Computer Lab
DESIGNS
Hours Monday-Friday
9:00 AM-12:00 PM
Saturday
8:00 AM-11:00 PM
Sunday
Computer Lab
Play Room
Hours
Hours
Monday-Friday
9:00 AM-12:00 PM
Monday-Friday
8:00 AM-10:00 PM
Saturday
8:00 AM-11:00 PM
Saturday
8:00 AM-9:00 PM
Sunday
9:00 AM-11:00 PM
Sunday
9:00 AM-9:00 PM
Prices
Computer Usage
2.50/hour
Color Printing
40¢/page
Blk/W Printing
30¢/page
Charger Rental
1.50/hour
Prices
Computer Usage
2.50/hour
Hour Pass
1.50/hour
Color Printing
40¢/page
Video Game
1.00/hour
Blk/W Printing
30¢/page
Board Game
50¢/hour
Charger Rental
1.50/hour
5.5’
3.5’
35
9:00 AM-11:00 PM
Prices
1.75’
36
User Interface Tablet Mobile
37
38
Tablet NAVIGATION BAR Includes a logo, hamburger button, shopping cart, profile, and search icon.
HAMBURGER BUTTON Includes options like menu, about us, workspaces, coffee bar, and technology. SHOPPING CART ICON PROFILE ICON
SLIDE SHOW
SEARCH ICON
Shows news and announcements.
LOGO CALL TO ACTION Button to learn more.
39
MENU
ARROW
Shows menu categories.
Allows user to move to the next item.
ABOUT US Gives information about CyberSpace.
SERVICES Gives information about the services at CyberSpace.
CALL TO ACTION Button to learn more.
STRIPES Brand colors/stripe brand element.
ICONS Icons from pattern. 40
ANNOUNCEMENT Follow us on Social Media announcement.
SOCIAL MEDIA ICONS Buttons that take you to CyberSpace Social Media pages.
EMAIL SIGN UP SIGN UP BUTTON LOGO
BOTTOM NAV BAR CONTACT INFO
COPY RIGHT 41
42
Mobile MENU
NAVIGATION BAR
SLIDE SHOW ABOUT US
SERVICES
43
SERVICES
ANNOUNCEMENT
EMAIL SIGN UP
LOGO
COPY RIGHT 44
45
Merchandise Aprons Pins Cups Coffee Mugs
46
47
48
49
Credits MOCKUPS Anthony Boyd Graphics. “iPhone 11 Pro Max and iPad Pro Mockup #2.” https:// www.anthonyboyd.graphics/mockups/ iphone-11-pro-max-and-ipad-pro-mockup2/#utm_source=dribbble.com&utm_ medium=referral.
DribbleGraphics. “Inside Office Stand Banner Free Mockup .“ DribbleGraphics. com, 24 December 2018, http:// dribbblegraphics.com/download/freeinside-office-advertisement-stand-bannermockup-psd/
DailyMockup “Best Free iPad Mockup PSD.” DailyMockup.com, https://dailymockup. com/downloads/ipad-mockup-psd/
free-psd-templates. “FREE PAPER SODA CUP MOCKUPS.” free-psd-templateIN PSD.com, https://free-psd-templates.com/ free-paper-soda-cup-mockups-in-psd/
Deep Lab. “Glossy Button Pin Mockup Set - FREE.” Behance, https://www.behance. net/gallery/91050151/Glossy-Button-PinMockup-Set-FREE Deep Lab. “Mug Mockup set - FREE.” Behance, https://www.behance.net/ gallery/88678589/Mug-Mockup-set-FREE. gallery/131028039/Free-Apron-MockupPSD?tracking_source=search_projects_ recommended%7Capron%20mockup.
Graphic Google. “Free Advertising Stand Banner Mockup.” GraphicGoogle.com, http://graphicgoogle.com/free-advertisingstand-banner-mockup/ TinyDesignr. “Free Apron Mockup PSD.” Behance, https://www.behance.net/ PHOTOS Maike Ma. “Universität Leipzig.” @hello_ maike, Unsplash, 27 August 2019, https:// unsplash.com/photos/p91csiiX73A
50
MAYRA CARRERA GRC 420 Fall 2021 CyberSpace Brand Identity Guide 2021
51