Using Color As A Branding Element On Your Squarespace Website — Video Collab With Charlotte O’Hara
We’re back! Your favorite online branding duo—Charlotte O’Hara and I—have another video collaboration for you! This time we’re dishing all about how to use color effectively on your Squarespace website.
This video is part TWO of our video series on branding your website. If you missed the first video, peep the link below!
In the last video, we talked a little bit about how to choose and use your color palette on your website. But today we are going even deeper and giving you even more tips and tricks to keep your website looking clean, professional, and right on brand.
Just a heads up—we are talking Squarespace over here! Charlotte and I are, of course, huge proponents of using Squarespace when building your business online, so that’s what we’re looking at today. But don’t worry! All of you out there rockin’ out with Wordpress, Showit, Shopify, or any other platform can use these tips too. We got you :)
This is the second video in a collaboration series I’m doing with Charlotte, so stay tuned for more good stuff, and let us know if this video is helpful for you!
Let’s get to it!
Using Color As A Branding Element On Your Squarespace Website
Psst! If you’d prefer to read a blog post, just scroll on down to get all the info we chat about in the video. And for all of you lovely video watchers, there will be some helpful visuals down below, so be sure to check them out when you’re done!
Here are my top tips on how to use color effectively on your Squarespace website.
Choose just 1-3 dominant colors
This is a classic case of less is more. The fewer colors you spread throughout your website, the more memorable and impactful those colors will be for your brand. Remember that colors can convey emotions and have psychological influence, so choose these wisely!
The dominant colors are perfect to highlight larger blocks or sections; use them for index backgrounds, headers and footers, or big calls-to-action.
Use accent colors sparingly
If you do choose to select a couple of accent colors, be sure to keep them limited to little pops here and there. Buttons, links, and navigation on hover are some good places for accents.
These are also best pulled into your website with imagery and graphics! As a quick example, go take a look at my blog page — here I use the full range of my color palette in the blog thumbnails. That way I have variety in my graphics without cluttering my main website with too many pinks and oranges.
Keep your colors consistent
Nothing will confuse a user more than clicking a link and seeing colors they didn’t expect for your brand. They might even think they have left your site entirely and just give up—that’s not good! So needless to say, consistency is key.
Once you’ve chosen a color palette, stick to it! Make good use of the Site Styles on Squarespace and this tip will be easy peasy :)
Buttons should grab your attention
People will naturally gravitate towards bright colors and want to click, so any call-to-action deserves the brightest, warmest color in your palette. Try to stay away from neutrals so these don’t get overlooked.
In Squarespace, you can even set different colors for different sized buttons. That said, I like to make all buttons the same color. That way, people can start to recognize action steps the moment they land on a page (this will even grab the attention of those pesky page skimmers)!
Consider visual hierarchy when styling headings
Generally, each heading should pop out at you in order from H1-H3. Heading 1 should be the biggest and the boldest, Heading 2 a little less so… and so on. Colors are a good way to differentiate between the three (but i’ll say it again, don’t get crazy).
Let’s talk body text for a sec. Under NO circumstances should you use a light and/or bright color for this part of your website! I rarely stray from black, but if you must, then choose navy or dark gray. This will help tremendously with legibility and keep the color from pulling focus from your actual content.
Opt for simplicity in backgrounds
When it comes to the background color of your website as a whole: when in doubt, white it out. You can’t go wrong with a simple white website. Most sites are white with dark text for a reason! It’s clean, it’s simple, and it’s easy to read.
If the above color suggestions are just not satisfying your color hunger, try adding a colored border or choosing a *very* light color to use as a background.