A Deep Dive into Brand Guides
This brand guide was developed to ensure the conformity and continuity of my portfolio website and overall web experience.
Phase 1
Brainstorming: Adjectives
I began with a list of words, writing down every adjective of myself and my working style that I could think of off the top of my mind.
How does this help students?
When teaching personal branding, I encourage students to write a minimum of 10 good things about themselves. Then, I let them pick pairs, and have their peer write 10 adjectives about their partner. This creates some self-confidence, as well as helps learners to begin to believe in themselves.
Phase 1
Jazzy Quick
01
Balanced
I work to find balance in my life, my work, and my designs.
02
Gray
Gray will define my workspace, just as it defines the colors around me.
03
Passionate
When I fall for something, when something strikes my interest, I go all-in.
How does this help students?
Students pick the top 3 words that they feel most closely align with their personal identity.
This activity encourages students to dig deep and give an explanation for why they’ve chosen their three words.
Phase 2
Moodboard
Using your three adjectives, create a moodboard that visually reflects your words and their meaning.
Student Connection
Students work to connect a feeling with an image. We begin to make connections between thoughts, ideas, and the world around us.
Brand Mantra
I bring a calm and balanced temperament to my digital landscape.
Student connection
Learners create a brand mantra for their brand guide. This helps them to focus on one, singular tagline that defines their work.
Phase 2
Color Palette
What colors define you? What colors will you use for the rest of your brand guide?
Student Connection
Students learn about color, its impact on UX design, and how users are influenced by color. Then, they pick the color palette for their brand guide, which they will stick with throughout the project.
Phase 2
Typography
What typography will define your brand and brand guide?
Student Connection
Learners are treated to an in-depth lesson on the History of Type. They learn past and current typographic connections, as well as how type influences the world.
Phase 2
Logo Exploration
Student Connection
Students are given a dry erase marker and whiteboard space. They are encouraged to sketch, draw, and doodle based on their name and three adjectives. They submit their top 8 choices, and the class looks at them all together. We give helpful (and kind!) corrective feedback, and from there students narrow down their choices.
Phase 3
Building a logo
Development: Break down your logo.
Logo Anatomy
The logo will start from lightest to darkest of the three grays.
The arrows will be perfectly aligned with 1/4 inch spacing. The letters and arrow points should align long the x-axis.
The three colors of the arrows show the movement of gradient of gray that I love, as well as an abrupt change, which fits with my name.
My last name is Quick, showcasing the change of style.
Student Connection
Students take their best design idea and put it into practice, creating their logo in Adobe Illustrator. They’ll decide on how it should be displayed, as well as consider various use-cases.
Phase 3
Logo Color Variations
What are the variations of your logo that you will need? Black & white, print & digital.
Student Connection
Students begin to think about how logos are displayed differently across different mediums, such as social media, mobile, desktop, print and other digital mediums.
Phase 3
Logo Guidelines
The logo should be displayed with the three-tier gray and black text whenever possible.
Minimum sizes: 1in x 3in
On dark, solid-colored backgrounds, the white logo should be displayed.
On all other background, the tri-colored logo should be displayed.
Student Connection
Our designers create all variations that they could possibly need, using the information they learned during the lesson on logo color variations.
Phase 3
Favicon & Whitespace
What are your whitespace guidelines, and how will you use whitespace to your advantage?
Whitespace Guidelines
There should be a 5 pixels or equivalent buffer on the left and right.
There should be a 2pixels or equivalent buffer on the top and bottom.
Placement Guidelines
The minimum width is 50px.
The logo can be broken down to just the arrows if needed.
Student Connection
Students first learn about favicons and their purpose in UX and web design. Then, they define how their favicons should be used, before finally creating and implementing their own. They’ll use Adobe Photoshop to craft templates for multiple sizes and formats.
Phase 3
Business Cards
Using your logo and guidelines, create a business card.
Student Connection
Students learn about the history of and purpose of a business card. Then, they create their own for future use in Adobe InDesign.
Phase 3
Letterheads
Create a letterhead that can be used for digital and print.
Student Connection
Students learn what letterheads are and how to use them. Then, they begin to create their own in InDesign.
Final Phase
Covers & Resumes
Finally, create a resume and put it all together for your brand guide.
Student Connection
Students learn about resumes, coverletters, and their use in the professional world. Then, they craft their own. Students leave this course with multiple physical objects that will aid in job searching and future educational endeavours.