My Brand Identity
"Brand identity guidelines define the assets and materials that make a company unique."
- Brad Frost, Atomic Design, page 23
What is a brand identity?
What is this page and why did I spend time making it? As I created my portfolio, I struggled to keep my UI components consistent throughout my site. I knew a design system could be the solution, but I didn't have any experience with them. During a project at work, a colleague recommended the book Atomic Design by Brad Frost. I was immediately impressed by the simple yet powerful methodology. I decided to create my own design system based on Mr. Frost's methodology. I'll be quoting from his book throughout this page.
What is a Design System?
I am using the article Design Systems 101 by Therese Fessenden with the Nielsen Norman Group. My definition below is based on content from Ms. Fessenden's article.
A design system is a comprehensive collection of standards, documentation, and principles along with reusable UI patterns and code components. It's purpose is to facilitate efficient management of design at scale. It establishes a shared language and visual consistency across pages, products, and platforms.
-
- 5 returns spacer
What is Atomic Design?
"Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time." (Frost, 44)
Atomic design is a methodology used for creating UI patterns. It breaks down interfaces into five distinct stages. These stages work together to create interfaces in a more deliberate and hierarchical manner.
For more details and to see it in practice, go to my UI Patterns style guide.
-
- 5 returns spacer
Style Guides
"The cornerstone of good design systems are style guides, which document and organize design materials while providing guidelines, usage, and guardrails." (Frost, 23)
Brad Frost's book is primarily focused on UI components. But a comprehensive design system is more than just a UI toolkit. In order to solidify and convey my brand identity, I created the following style guides.
Brand Identity
Who am I and what do I want to convey?
Explore my brand identity →
Design Language
What are my principles and goals? How do they influence my designs?
Explore my design language →
Voice & Tone
What defines my personality and how do I express it on my portfolio?
Explore my voice & tone guidelines →
Writing
What specific guidelines should I follow when writing my content?
Explore my writing style guide →
UI Patterns
What UI elements do I use and how do I keep them consistent? Based on Atomic Design.
Explore my UI patterns →
Code
What guidelines should developers follow when creating and using code components?
Explore my code guidelines →
-
- 5 returns spacer
My marketing material
Everything I connected to my professional identity should feel cohesive. Here, you can review my documents and see how they all match my visual and tone brand.
Typography
Here are the most common fonts I've used throughout my portfolio. There are several fonts with slight variations, but they're not worth listing here.
Wix has strange and frustrating naming conventions for "Text Themes," which are global settings that apply to text categories like Heading 1, Paragraph 1, etc. I can't rename or delete text themes. So, I have the default text theme name in quotations followed by a more understandable name below it along with an explanation.
Futura 42 Bold
"Heading 1"
Major section heading - Used on the home page for "Recent Work" and "Let's Chat"
Aventir 36
"Heading 2"
Process page section heading - The color should match the project's primary color. I used Aventir because the lowercase letter "j" has a tail. With Futura , it's removed.
Futura 28
"Heading 3"
Paragraph heading - Used for headings on all paragraphs
Open Sans 18
"Paragraph 1"
Standard body text - The default body font. May be bolded, italicized, or underlined.