brand
identity guidelines 2022
00
table of contents
i
ii signage exterior sign business hours information desk directory restrooms door plaques lab rules ui design smartphone view tablet view merchandise credits introduction project brief design overview basic elements color palette typefaces logo elements master logo logo variations logo restrictions minimum space and scale stationery letterhead envelope business card cd and slip folder 27 29 31 33 35 37 39 41 43 45 47 51 57 01 03 04 05 07 08 11 13 15 16 17 19 21 22 23 24 25
01
introduction
01
project brief design overview
02
project brief
Varibyte is a programming language tutoring company that specializes in teaching adults aged 18 - 35 who may not have the time, resources, or patience to learn by themselves.
This is where Varibyte comes in.
Documentation for many programming languages is either very dense, sparse, or non-existent. Many tutorials assume some level of prior programming knowledge. These issues make it incredibly difficult and frustrating for someone who has no knowledge to start learning and become proficient with a language. This culminates into the overarching problem of programming being inaccessible to a large number of potential learners, simply because the criteria to start is too demanding.
Other resources aimed at helping adults learn programming are largely online-based and face the same issues of pacing and maintaining consistent lesson-learning, making even these inaccessible for a wide range of people as well. Varibyte is a brick-and-mortar company that hires dedicated tutors, many of whom hold Doctorate’s or P.h.D degrees in the fields of Computer Science and Engineering. Varibyte offers a wide range of languages suitable for a wide range of tasks, and its tutors are eager to teach interested adults about the boundless possibilities that programming offers.
03
01.
introduction
01. introduction
design overview
Varibyte’s design language is indicative of a professional learning environment. Because Varibyte is designed to appeal to those aged 18 - 35 who have an interest in learning programming, Varibyte’s branding must immediately look and feel like an inviting tech company.
The strictly horizontal and vertical lines maintain the traditional tech vernacular. Traditional tech is mainly comprised of greys and muted blues, but Varibyte’s brand colors stand out and are reminiscent of those present in many modern programming interfaces. The logo’s icon and typeface have rounded corners
that evoke an inviting and friendly atmosphere and, while appearing unmistakably technology-focused and professional, still give the sense of friendliness and helpfulness that Varibyte strives for.
04
02
basic elements
05
06 color palette typefaces logo elements master logo logo variations logo restrictions minimum space and scale
07 Eggshell White Byte Blue Tech Teal Soft Yellow Pastel Red R: 31 G: 84 B: 102 R: 89 G: 227 B: 191 R: 237 G: 237 B: 237 R: 255 G: 214 B: 140 R: 255 G: 84 B: 102 C: 89 M: 58 Y: 44 K: 25 C: 54 M: 0 Y: 37 K: 0 C: 6 M: 4 Y: 4 K: 0 C: 0 M: 16 Y: 51 K: 0 C: 0 M: 82 Y: 48 K: 0 #EDEDED #1F5466 #59E3BF #FFD68C #FF5466 color palette 02. basic elements Varibyte’s logo and brand colors are comprised of four solid colors that are combined into gradients when appropriate. These colors were chosen to mimic the layout and color-coding of many modern programming interfaces, most of which have a default dark background and color-coordinate important key words and phrases within the code to improve legibility.
Varibyte’s logo and brand typefaces are comprised of two font families.
‘Brandon Grotesque Black’ has been modified and is used exclusively for the Varibyte name in the logo. Only the lowercase letters are used; the
uppercase and number characters are omitted from the official Varibyte use of ‘Brandon Grotesque Black.’
This typeface is not permitted to be used elsewhere in any promotional or corporate designs.
08
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
typefaces 02. basic elements
Brandon Grotesque Black (modified)
09 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Acumin Variable Concept Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Acumin Variable Concept Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Acumin Variable Concept Black
‘Acumin Variable Concept’ is Varibyte’s body copy typeface. The three font weights that are used are ‘Acumin Variable Concept Medium,’ ‘Acumin Variable Concept Bold,’ and ‘Acumin Variable Concept Black.’ It is a versatile sans serif font that is legible at small point sizes and is slightly round, which pairs with and complements Varibyte’s logo font ‘Brandon Grotesque Black’ well.
‘Acumin Variable Concept Medium’ is used everywhere traditional body copy exists. Headlines and emphasis are in either ‘Acumin Variable Concept Bold’ or ‘Acumin Variable Concept Black.’ How these two font weights are used is not enforced
and can be interchanged; however, Varibyte traditionally uses ‘Acumin Variable Concept Bold’ for all forms of emphasis and headlines except when more hierarchy is needed; then, ‘Acumin Variable Concept Black’ is used for the most important information, such as headlines, and ‘Acumin Variable Concept Bold’ is used for emphasis.
10
02. basic elements
logo elements
The term “Varibyte” is a combination of the words “variable” and “byte.” A variable in programming is any form of manipulatable data that can be read by a program. A byte is an amount of data that can store eight bits, which are binary values that can hold either a 0 or 1.
The Varibyte icon is reminiscent of the square brackets [ ] that, in many languages, represent the beginning and end characters of an array. An array is a special form of “container” in programming that holds data values. In Varibyte’s logo, this is to
represent the encompassing of many different languages that Varibyte offers tutoring and specialized classes for. ‘Brandon Grotesque Black’ has been modified to square out the top of the “r” and bottom of the “b.” The type is all in “Byte Blue,” except for the i, which has had its dot removed and is colored in “Pastel Red.” A comparison can be seen to the right.
11
a r
reminiscent of the beginning and end of an array modified Varibyte typeface ‘Brandon Grotesque Black’ characters
12
b
The x-height is defined by the height of the “e.” The logo in its entirety is 9.5x long and 2.5x tall. The icon and
combined ascender and descender are the same height. Master black and white logo
13
master logo 02. basic elements
with specifications x 0.75x 0.75x 1.5x 9.5x 0.3x 7.6x 2.5x
Master colored logo
14
02. basic elements
logo variations
The Varibyte logo can be modified to be all “Eggshell White,” all
“Byte Blue,” or a colored logo with “Eggshell White” text.
15
02. basic elements
logo restrictions
The Varibyte logo is not to be recolored outside of the acceptable variations. It is not to be stretched, squashed, tilted, or reversed. The icon is not to be placed over the company name nor separated any
distance further than 0.3x as defined in the logo design. The gradients in the icon are not to be reversed or recolored. do not distort the logo do not separate the icon
do not recolor the logo do not flip or rotate the logo
16
02. basic elements
minimum space and scale
The Varibyte logo requires a minimum of x space between it and any other content. The smallest size
the Varibyte logo can be is 0.375” by 1.625”. 0.375” 1.625”
17
18
x x
03
stationery
19
20 letterhead envelope business card cd and slip folder
letterhead 21 11” 8.5” 1.25” 0.5” 03. stationery 1.75” 0.5”
22 envelope 03. stationery 4.125” 9.5” 3.75” 0.5” 2”
business card 23 03. stationery 2” 0.375” 1.625” 3.5” 1.75”
24 cd and slip 03. stationery 4.75” 0.5” 1.75” 2.75” 2” 4.75”
25 folder 03. stationery 12” 4” 9” 4.5” 1” 3.5”
26
04 signage
27
28 exterior sign business hours information desk directory restrooms door plaques lab rules
exterior sign 29 04. signage 84” 72” 60” 15” 42” 156”
30
business hours 31 04. signage 84” 72” 48” 6” 10.6”
32
information desk 33 04. signage 72” 6” 12” 48” 63” 24” 90”
34
directory 35 04. signage 72” 84” 60” 12”
36
restrooms 37 04. signage 80” 72” 48” 13.5” 13.5”
38
door
39 04. signage 80” 72” 48” 6” 12”
plaques
40
lab
41 04. signage 24” 42” 21” 72”
rules
42
05 ui design
43
44 smartphone
tablet view
view
view
navigation bar
a navigation bar that allows users to access their account and various links around the website
hero image
an image and short tagline to entice users to sign up and learn with Varibyte a display of available types of languages and invitation to learn more about what Varibyte offers
available languages
45
05. ui design
smartphone
about Varibyte
call
to action
a section inviting users to learn more about the company a section dedicated to telling users what Varibyte offers and inviting them to sign up an image of the tutors at Varibyte inviting users to learn more about them
meet the team footer
46
navigation bar hero image
available languages
47 tablet
05. ui design
view
about Varibyte
48
call to action meet the team footer
49
50
06merchandise
51
52 t-shirt cap mug pen
53
54
55
56
57
07. credits
credits and attributions
signage: https://www.freepik.com/premium-psd/contemporary-office-receptiondesk-wall-mockup 10101514.htm https://acuttingedgeglass.com/frameless-heavy-glass-doors/ http://www.capitalcityglass1.com/storefront.html#close https://www.showerlagoon.com/commercial-glass/glass-storefronts/ https://www.istockphoto.com/photo/white-restroom-doors-for-male-andfemale-gm610957266-105019161 https://stock.adobe.com/images/blank-wall-in-bright-office-mockup-withlarge-windows-and-sun-passing-through-3d-rendering/303511577 https://www.123rf.com/photo 54728675 three-elevators-in-hotel-lobby.html
ui design:
https://videohive.net/item/computer-code-programming-screen/23984350 https://www.allhealthmatters.co.uk/post/how-to-be-a-supportive-colleague https://www.sjc.edu/alumni/get-involved/volunteers/class-chair-program https://www.free-mockup.com/downloads/woman-holding-tablet-mockuppsd/
https://www.freepik.com/free-psd/right-hand-holding-smartphone-mockup 12716885.htm#query=hand%20holding%20phone&position=31&from view=keyword
merchandise:
https://graphicburger.com/pocket-t-shirt-psd-mockup/ https://www.freepik.com/free-psd/isolated-black-cap-mockup 15205619. htm#query=pen%20mockup&position=17&from view=search&track=sph https://www.freepik.com/free-psd/white-mug-elegant-blacksurface-mockup 19196991.htm#query=mug&position=1&from view=search&track=sph
https://mockups-design.com/free-pen-mockup/
58