The 4 most important branding elements for your website - video collab with Mariah Althoff
Gather round, my friend, today’s blog post & video is a fun one!
I’m sharing a really fun collaboration with you today and I’m so excited for you to check it out!
As a custom web designer who also offers branding packages, I naturally get asked a lot of branding questions. I wanted to share the 4 most important branding elements for your website today but to make it a bit more interesting, I invited my friend Mariah Althoff to join in me!
Mariah Althoff is a visual branding expert and web & graphic designer who has worked with a seriously impressive roster of clients. From solopreneurs to small businesses all the way up to massive companies like Walmart (!), Mariah knows her stuff!
In this video, we’re chatting all about the 4 most important branding elements for your website. It’s basically a conversation between friends (#onlinebizbesties) but we’re sharing lots of practical information and lessons you can apply to your own Squarespace website. I know you’ll get a lot out of our tips & recommendations!
If you’d rather read a blog post than watch a video, no worries - I’ve got you covered with all the information below.
This is the first video in our branding and Squarespace website collaboration series, check out the other posts/videos here:
Without further ado, let’s get into.
4 of the most important branding elements for your website
Click play on the video or watch it on Youtube.
My friend Mariah is a visual branding expert and web & graphic designer and I’m so happy to have her here with me today. We had so much fun recording this conversation and I know you will get lots out of our chat! It’s packed full of really solid information about what to prioritize when it comes to branding and your Squarespace website so hit play on the video above or read the summary below. Enjoy :)
A lot of what we talk about relates to websites built on Squarespace but you can still apply many of the same principles to your website on another platform (e.g., Wordpress, Showit, Shopify, etc.).
Professional websites don’t look like DIY hobby projects. They help you grow your business and serve your customers and online audience- big difference! Branding is an integral part of a professional website and it is not something to be messed around with.
Let’s take a look at the 4 most important branding elements of your website.
1. Logo
Note: Read this post to learn how to create a logo for your brand and website.
The logo should be on every page of your Squarespace website. Either upload your logo (graphic) or use a text-based site title.
Here’s what Mariah’s logo looks like:
When you visit Mariah’s website, you’ll see that her logo is clearly positioned in the top left hand corner of the header section, next to the main navigation menu. It’s easily visible and accessible on all pages her of website.
A few more logo branding tips:
Should be on every page of your website, for example up in the header
Logo doesn’t need to be intricate
Keep it simple
Must be legible - avoid fonts that are hard to read
Text should be large enough to read
Avoid graphic elements around the text, don’t crowd the words or take away from your brand/business name
Shouldn’t take up too much space on your website - don’t make the logo too big
Instructions on how to add a site logo to your Squarespace website here.
2. Favicon
Note : Read this post to learn how to create a favicon in Canva and upload it to your Squarespace website (video tutorial)
Favicons are super small so keep it simple, design on small scale. Usually an icon version of your logo (e.g., first letter of your name/brand), size prohibits detail.
A few favicon related branding tips:
Design a favicon and upload it to your Squarespace site through the settings field
Favicon can be a sort of icon version of your logo just much smaller - don’t try to condense your logo into a small space
Keep the favicon very simple because it must fit in a very little space - no details or text
Brand it in the same way as the rest of your site
Here’s a look at the favicon of both of our websites:
In the examples above, you can see that Mariah’s favicon is a simple M and mine is similar with CO.
If you don’t upload a custom favicon to your Squarespace website, the default favicon (grey/black square/box) will show up - dead giveaway that your website hasn’t been branded completely or professionally.
3. Color Palette
Note: Read this post to learn how to master color psychology for your brand and website.
Check out Mariahs’s post on how to create the perfect color palette for your brand
Super important to keep a unified colour palette throughout your website, helps to create and support your brand identity.
Our biggest piece of advice when choosing a color palette is to keep your ideal audience/client/customers in mind. Certain colours lend themselves to certain types of businesses. Don’t just pick colours that YOU like, think about what your ideal audience/clients/customers and going to connect with, what speaks to them, what connects with the vibe that you’re trying to portray. For example, navy or dark red for law firms, bright yellow for a cool branding studio, calm pastel colours for newborn photographers, etc.
You can always turn to Pinterest for color palette ideas, and here’s an example of a “bright color palette” search:
Colour sets a mood and portrays the aesthetic and “vibe” of your brand.
A few more color tips for branding:
Keep a unified color palette throughout the site
Use this color palette for any and all branded graphics going forward
Choose 1-3 dominant colors and use them consistently (and if you’d like, 2-3 accent colors) - less is more
Use colors for link colour, headers, buttons, image background/overlays, on index pages, etc.
Again, use colours consistently across your website as well as other platforms and marketing materials.
4. Font Pairings
Read this post to learn my secrets to beautiful Squarespace typography.
Check out Mariah’s post on how to choose the best font pairings for your brand.
A few font related branding tips:
Choose 2-3 fonts
Stay consistent with fonts - header fonts are all the same, body text is all the same, image description text is all the same, etc. Assign your fonts in the Site Stylings section of your Squarespace website and it’ll be applied site wide for that particular element.
Fonts must be legible: dark and large enough to read on the web page
Pick a font that fits with your brand identity and aesthetic - avoid comic sans :)
A great place for font pairing ideas is FontPair, it helps pair Google fonts (which are all available on your Squarespace website).
Font pairing is often an underrated branding element but don’t skip over it - it’s very important, especially for people who are consuming content on your website!
Final Thoughts
Well there you have it, I hope you’ve enjoyed these 4 important branding elements for your Squarespace website. Thank you so much for checking it out and thanks Mariah for joining me!
Be sure to watch the video conversation between myself and Mariah and let us know if you have any question - we’d love to hear from you!
Connect with Mariah Althoff:
Website : mariahalthoff.com
Free Facebook group: DIY: Design It Yourself
Subscribe to Mariah’s Youtube channel
Additional Resources:
Now it’s your turn to tell us, does your Squarespace website have all of these branding elements? Have you already picked out the logo, color palette, font pairings and/or favicon for your brand? Have you uploaded them all to your Squarespace website? Anything else you would add to this list? We’d love to know so leave us a comment below!
* indicates affiliate links (Mariah’s codes)
LAUNCH YOUR BEST SITE - FREE ECOURSE
Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!
