your personal branding guide (to be completed ahead of class)
a stylesheet (.scss file) for customizing your website’s appearance
Pre-class Prep
A. Create your own personal branding guide
This week’s pre-class prep is to create your own personal branding guide – a collection of visual and messaging resources (e.g. colors, fonts, logos, key words) used to create a uniform image of a brand. Here, that brand is you!
Why is it important that you consider your brand identity? Bren Teaching Faculty and science communication professional, Alex Phillips, summarizes this nicely in her talk Establishing Your Online Presence. She explains that establishing your brand identity:
gives you more control over your online presence
creates consistency, which builds trustworthiness and credibility
filters decision-making about your online content
Interested in reading more about the benefits of developing a personal brand? Check out these resources:
Many thanks to Miya Scheble (MEDS career Development Program Manager) for sharing these resources!
I. Write down your personal branding adjectives and key messages
Expand for information on branding adjectives and key messages
Your personal branding adjectives are words that guide how you present yourself and your brand. While you don’t need to explicitly state these words on your website (though you certainly can!), they serve to:
define your brand’s personality
connect with your target audience(s)
shape your tone (in both your writing, visual, and overall aesthetic styles)
Write down 3-5 adjectives to describe your personal brand.
Consider:
How do you want people to perceive you?
What do you want to communicate about yourself?
What are your qualities, motivations, values, strengths? Your personal branding adjectives do not need to describe everything you already are – they can be descriptors of your long-term goals, values, and motivations.
Once you’ve determined your personal branding adjectives, jot down a few key messages that capture the core ideas you want to convey about your brand.
Consider:
How do these key messages incorporate / add context to your personal branding adjectives?
Aim for ~2-3 sentences (can be bullet points)
Similar to your adjectives, these key messages do not need to be explicitly stated somewhere on your website. However, you may find that they work well as taglines on your landing page (or even your LinkedIn profile), or help you (re)frame your website bio.
II. Define your target audience(s)
Expand for information on defining your target audience(s)
Your brand does not need to speak to or reach everyone – instead, you should have a target audience(s) in mind. Knowing your audience helps you make decisions on:
what types of content you publish
how you arrange content
what level or types of details you need to include
your tone
Write down your target audience(s).
Some examples include:
potential employers (feel free to be more specific here as well, e.g. potential employers in the environmental data science sector)
early career data scientists or environmental scientists
environmental data scientists who are also passionate about < fill in the blank > (Jadey Ryan is a great example of this!)
III. Select your typefaces / fonts
Expand for information on selecting typefaces / fonts
First, a few important definitions:
typeface (aka font family): the underlying visual design (e.g. Times New Roman, Helvetica, Roboto)
font: an implementation / variation of a typeface (e.g. Times New Roman in bold, Times New Roman in italic)
During class, we’ll learn how to import font families from Google Fonts for use across our website. Explore the vast selection, and choose 1-2 font families. Add their names and hyperlinks to your personal branding guide.
Tips on choosing your font family(ies):
Stick to 1-2 font families. Using too many typefaces can overwhelm a reader. You can use one typeface across your entire website, or alternatively, choose one typeface for things like header text and another for body text.
When in doubt, use a sans-serif font family.Sans-serif fonts work great everywhere, but are especially ideal for body text since they’re cleaner and easier to read. If you do want to use a serif font, it’s best to reserve those for any header text.
Make sure your font family choice(s) have a variety of styles. If your font family doesn’t include bold or italicized styles, you won’t actually be able to apply those styles to your website. For example, Nunito comes in a variety of weights (boldness levels) and italic, where Sen comes in a variety of weights, but not italic.
Check out some visually-pleasing font pairings.fontpair has hundreds of Google Font pairings to browse!
IV. Build your color palette
Expand for information on building color palettes
One of the most exciting parts of building a website is deciding on which colors you’ll use. This can take some time and tweaking, so it’s helpful to think a bit about your palette beforehand. We’ll consider updating colors for the following website elements:
Navigation Bar: navbar background color, foreground (text) color, hover highlight color
Main Body: body background color, body text color, hyperlink color, in-line code color, inline-code background color
Page Footer: footer background color
We’ll be using a language called Sass to create variables for each of the colors we plan to use throughout our websites (more on that soon!).
It’s helpful to draft up your color variables ahead of time (and save them to your personal branding guide) so that you easily copy them into your stylesheet during class. Define your color variables using the syntax, $variable-name: value;, where you decide on your variable-name, and value is a HEX color code (htmlcolorcodes.com is my favorite site for grabbing HEX codes).
For example, here are the color variables I’ll use for my website during the workshop:
Stick to about 3-4 main colors. Choosing too many colors can overwhelm readers. Consider using different shades of the primary color throughout your site, with a couple complementing / contrasting colors for important highlighted text and / or features. A good general rule of thumb is the 60-30-10 rule – your primary color should be used in ~60% of your design, the secondary color should take up ~30%, and your accent color ~10%.
Consider what emotions your color choices evoke: Colors influence perceptions, emotions, and even behavior. Consider which colors best reflect your branding adjectives and key messages. See this post on color psychology, by HubSpot for guidance.
Use a random color generator. My favorite is https://coolors.co/ – press the space bar to generate new colors. When you see one (or more) that you like, “lock” them in place by clicking on the lock icon. Continue pressing the space bar to generate new colors in the “unlocked” positions.
Generate a color palette from a photo / image. Have an interesting background in your headshot? Consider generating a palette off of it! Check out Color Thief for all your color stealing needs. Alternatively, explore pre-made palettes generated from trending Adobe Stock photos.
Consider contrast and colorblindness-friendly palettes. I love the Let’s get color blind Google Chrome extension for simulating color deficiencies in the web browser, and the coolers color contrast checker for calculating the contrast ratio of text and background colors (it’ll even suggest modified colors to improve your contrast, if needed).
Get inspired by other websites. And you don’t need to take inspiration only from Quarto websites. Just a small handful of examples sites with color schemes that I really love:
V. (Optional) Create a personal logo and / or favicon
Expand for information on creating a personal logo
Quarto supports adding a personal logo to the top left corner of your website’s navbar (e.g. see my website). While completely optional, logos can be attention-grabbing and memorable, offering a way to distinguish yourself. If you’d like to start workshopping your own logo, consider the following tips and try out some free logo makers:
Tips & resources for creating a personal logo:
Keep it simple
Consider incorporating your name or initials (though not necessarily required)
Colors and fonts should match / complement the rest of your branding guide
Consider creating a favicon (image displayed in a web browser’s address bar) that matches / complements your logo
Try out one of these free logo makers:
Adobe Express (this is what I used for my personal logo)
Branding image assets are visual elements that help to define a brand’s identity.
These include your logo, headshot, and any other photos / images you plan to use across your website. You might also include images that influence the overall aesthetic of your brand, but that might not necessarily be used as content on your site.
Begin gathering your image assets and add them to your personal branding guide. You may consider checking out the following image collections for additional or supplementary images:
Unsplash (though many images do require a paid subscription to access){target=“_blank”}
Lecture Materials
We’ll spend our class time learning how to style our Quarto websites using a variety of approaches – from modifying our _quarto.yml file, to creating a stylesheet with Sass variables and CSS rules. Have your personal branding guide ready to reference throughout! All code and examples that we’ll cover can be found in these slides:
Seek feedback on your personal brand from those who know you well. Would they use the same adjectives to describe you? What strengths and characteristics do they perceive that you hadn’t identified yourself? What emotions do your colors, fonts, imagery, and tone evoke? It’s important to remember that your personal brand can (and should) evolve with you! This week is just a starting point.
Revisit and revise your landing page content / bio, as needed. Does your landing page bio fit your personal brand? Consider what information you include and your tone – does it make sense to revise your bio to better fit your brand? Consider if your chosen template suits your needs, or if a different layout might work better.
Add pages to your website. Has thinking deeply about your personal brand inspired ideas for different web pages? Go ahead and add them! Recall that you can add / remove pages by modifying your _quarto.yml file (see last class’ materials if you need a reminder of how to do so). It’s sufficient to include placeholder text to those pages (e.g. Coming soon!) if you’re not quite ready to complete them. You may also remove pages (e.g. about.qmd and resources.qmd) if you don’t plan to use them (though note that you must keep index.qmd).
Finish applying your colors to different website elements using Quarto’s Sass variables. And test out different color combos and / or fonts, if you’re not totally satisfied with your original choices. This is arguably the most fun part of building your website and where you can really let your personality and brand shine through. It can take a while to settle on something that you feel really represents you, and that’s okay (I’ve changed my entire color scheme and font styles multiple times over the years).
Consider writing / borrowing / adapting CSS rules to refine your website styling. You can take your website styling far just by defining Quarto’s Sass variables. However, if you’re looking to fine-tune the appearance of certain web page elements, you may consider turning to more CSS. Review the workshop slides for suggested approaches and tools for guiding your CSS-writing journeys.
