Branding and Style Guide 2021
}{
Table of Contents
01
04
Outdoor Signage Check-In Directions Daily Schedule Team Labels
Introduction 4 About Us Company Background Design Background
02
Basic Design Elements
12
Color Typefaces Logo
03
Stationery Design 22 Letterhead Folders Envelope CD & Cover Business Cards
Signage Design 32
05
User Interface Design
46
Mobile Tablet
06
Merchandise 56 Stickers Shirts Water Bottles Mugs Tote Bags 3
01 Introduction > About Us > Company Background > Design Background
5
What is Vaughan Hackathon? A hackathon is a design sprint-like event; often, in which computer programmers and others involved in software development, including graphic designers, interface designers, project managers, domain experts, and others collaborate intensively on software projects. The Vaughan Hackathon is a 3-day event meant to create a community for the marginalized group of women working in tech. Over the event weekend, aspiring women in tech ranging from the ages of 18-25 gather from around the world to participate in a rapid-prototyping competition based on a given theme. The event is meant to bring women in tech together to not only create innovative project, but also to bond, discuss experiences and projects, listen to guest speakers - all having to do with being or supporting women in technology.
6
7
Company Background The name ‘Vaughan Hackathon’ stems from the name of the iconic mathematician and NASA employee, Dorothy Vaughan. A “human computer”, Vaughan was one of the first Black female mathematicians at NASA . As a supervisor at NASA, she was responsible for the recruitment of many other important women in technology, many of whom helped the US win the Space Race of the 60’s. She was a pioneer for breaking down gender and race barriers of the 50’s-70’s that women today still face. The hackathon was named after Vaughan as her work is a true embodiment of what this hackathon aims to provide: empowerment for women to further overcome gender and race barriers in tech. The future of women in tech started because of Dorothy Vaughan. And now, because of her, the future starts with you.
8
9
Design Background The theme of this conference is to acknowledge the past and look eagerly towards the future. Since the conference is named after Dorothy Vaughan, whose work was integral to helping the US win the big space race of the 60’s, our branding is meant to pay homage to the era of her work while also setting an image for the future of technology that is being led by many of our expected attendees. In order to convey this ideology, the design system of the conference’s branding is highly based off retro-futurist and midcentury modern design that spread through America as a result of the space race in the 1960’s, as well as modern technology. In this way, the designs will be a look into the future of technology without forgetting the tech pioneers of our past.
10
11
02 Basic Elements > Color Palette > Typefaces > Logo
13
Color Palette To remove ourselves from common gender norms, we tried to stay away from using too many ‘feminine’ colors. Instead, the color palette is highly based off of common colors used in design during the era of the 60’s.
14
Groovy
Power
Future
#FF805C RGBA(255, 128, 92, 1) C=0, M=63, Y=64, K=0
#FFA1E5 RGBA(255, 161, 229, 1) C=4, M=43, Y=0, K=0
#FFC501 RGBA(255, 197, 1, 1) C=.08, M=22, Y=99, K=0
Fortran
Space
Stark
#F3F1E1 RGBA(243, 241, 225, 1) C=4, M=2, Y=11, K=0
#000000 RGBA(0, 0, 0, 1) C=75, M=68, Y=67, K=90
#FFFFFF RGBA(255, 255, 255, 1) C=0, M=0, Y=0, K=0
Typefaces Primary Typeface Our main typeface is Night Division, a typeface created by Clint English. This typeface is a retro-futuristic sans serif, which is meant to be a representation of how this hackathon aims to pay homage to the past, while also looking towards the future of women in technology. Since this is such a stylized font, we aim to only use this
ABCDEFGHIJKLMN OPQRSTUVWXYZ 0123456789 !#$%^()-_=+\|;:’”,.<>?/
for our logo, large titles, and short headers in order to keep our designs accessible.
Secondary Typeface Our secondary typeface is Galyon/Galyon Bold. As a simple rounded sans-serif, this typeface creates a friendly, welcoming environment. We use this mainly for body text or any non-title text in order to provide easy and accessible readability for all guests.
AaBbCcDdEeFfGgHhIiJjKkLlMmNn OoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !#$%^&()-_=+\|;:’”,.<>?/ AaBbCcDdEeFfGgHhIiJjKkLlMmNn OoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !#$%^&()-_=+\|;:’”,.<>?/ 15
Symbol Description The symbol of our logo represents the 3 mantras of our hackathon: innovation, creation, and empowerment. The women’s emblem represents empowerment, brackets commonly used in programming represent innovation, and a light bulb represents innovation of ideas. Together, they make up our hackathon symbol.
Empower
Create
+
16
Innovate
+
Logo Ratio
17
Master Logos These are the primary logos that should be most commonly used to represent the hackathon and our brand.
18
Logo Variations There will be times where our logo will need to be placed on dark or colored backgrounds. Furthermore, our logo can also be altered in order to fit the specific year we are hosting the event in. In these cases, the logos below are acceptable variations of our logo.
19
Logo Restrictions The following are examples of ways that our logo should NOT be used. Any similar variations are also restricted.
DO NOT skew or rotate the logo
DO NOT stack the logo symbol or logo type in any way.
20
DO NOT make the logo use other colors
Logo Spacing & Sizing
Minimum Spacing
Minimum Sizing
Below are the guidelines for the minimum clear spacing around the logo. In other words, there should be no instance where there are design elements or text within the boundaries measured below. This rule also applies to all variations.
In addition to minimum clear space, there is also a minimum size requirement for the logo. The logo should never be LESS than the below measurement.
21
03 Stationery > Letterhead > CD & Cover > Envelope
> Folder > Business Cards
23
Letterhead
24
CD & Cover
25
Envelope
26
27
Folder
28
29
Business Card
30
31
04 Signage > Entrance > Directions > Check-In
> Daily Schedule > Team Labels
33
Front Entrance Sign
34
35
Front Entrance Banners
36
37
Direction & Information
38
39
Check-In
40
41
Daily Schedule
42
43
Team Labels
44
45
05 User Interface > Tablet > Mobile View
47
Tablet UI
1. Navigation Access different pages, change language, access cart, and profile.
2. Sign Up CTA Announcement about Vaughan Hackathon and link to sign up or learn more.
3. About Us Short synopsis to learn more about Vaughan Hackathon and what the event is about.
4. About Dorothy Vaughan Short biography about Dorothy Vaughan, who she was, and her contributions to women in science.
48
5. Mentor List List of mentors’ names and workplace for the year’s hackathon, which leads to pages containing a more informational bio.
49
6. Recap Video Embedded compilation video of the previous years’ hackathon. With a link to view more years.
7. Testimonials Carousel of testimonials from past hackathon participants.
8. Sponsor List A list of logos for all our sponsors
9. Footer Newsletter sign-up form, links, and contact information.
50
51
Phone UI 1. Navigation
2. Sign Up CTA
3. About Us
52
5. Mentor List 4. About Dorothy Vaughan
53
6. Recap Video
8. Sponsor List
7. Testimonials
54
9. Footer
55
06 Merchandise > Tote Bag > Shirts > Stickers
> Water Bottles > Mug
57
Tote Bag & Mug
58
Shirts
59
Stickers
60
Water Bottles
61
Credit & Attrributions Photos https://www.un.org/en/un-chronicle/closing-gender-gap-science-and-technology-0 https://www.twincities.com/wp-content/uploads/2017/02/3c0876_d2fabaf84ebd41ceb52f651e64b4ca7b-mv2.jpg?w=1073
Stationery https://www.graphicpear.com/stationery-branding-identity-mockup-psd/
Signage https://www.shutterstock.com/image-photo/mock-screen-background-various-billboards-information-1978519025 https://mockupden.com/download-in-progress/?pack=29e28ef30f25bfd512f2e5a6966ad92b https://psd.zone/mockups/roll-up-standing-banner-mockup-psd/ https://mockups-design.com/free-roll-up-mockup-2/ https://www.freepik.com/free-psd/blank-exhibition-wall-mockup-train-station_3576468. htm#page=1&query=escalator&position=0&from_view=keyword https://country4k.com/product/free-indoor-banner-stand-psd-mockup-in-4k-2/
User Interface https://designhooks.com/freebies/male-hand-holding-iphone-x-free-mockup/ https://www.freepik.com/free-psd/home-automation-app-mock-up-tablet_16090372.htm#page=1&query=ipad%20 mockup&position=2&from_view=keyword
Merchandise https://www.freepik.com/free-psd/tote-bag-black-mockup_11810572.htm#page=1&query=tote%20bag%20 mockup&position=2&from_view=keyword thttps://mockups-design.com/free-mug-mockup-4/ https://www.freepik.com/free-psd/friends-representing-inclusion-concept-with-mock-up-t-shirts_15164979.htm https://www.freepik.com/free-psd/hand-holding-purple-stainless-steel-bottle-mockup-with-urban-v_16324500. htm#page=1&query=Water%20bottle&position=2&from_view=search
the future starts with you.
© Vaughan Hackathon, 2021 Created by Khristine Le 64