Logos & Branding (What your Web Designer Wishes you Knew)
Your web designer wants to build a site that works well for your business AND that you are proud to share. Here’s how to help them do just that.
In this new series on What your Web Designer Wishes you Knew, we’ll be taking a look at what you can do to get better results from your web designer. In this post, we’ll focus on your visual identity and give clear examples.
A solid visual identity will allow your web designer to do their best work.
What is a brand?
Brands are what make businesses stand out from their competitors. It’s important to know that brands are more than just logos or slogans. Brands can also encompass the culture, values, and beliefs of the company.
Having a cohesive brand makes you recognizable and memorable. Branding can be everything from a visual identity to a tone of voice in your writing. In many cases, when your web designer mentions your brand they are specifically referring to your brand’s visual identity.
As a web designer, having a solid visual identity to work with ensures we can hit the mark with regard to how your business appears online. We’ll use your brand elements, colors, and logo to create an experience that makes your website look and feel like your business to help drive connection and conversion.
Your brand’s visual identity will typically consist of:
logos (not just one!)
brand colors
brand elements
(sometimes) recommended fonts for digital or print use
Let’s look at each of these parts individually…
Logos (yes, you need more than one)
A logo is NOT a brand, but it is a very important part of your brand! Here are some things to keep in mind when creating or sourcing a logo:
You’ll want multiple versions of your logo that work vertically, horizontally, and in a square or circle (this version can sometimes be called a submark). We’ll use one or more of these on your site, but having these different versions of your logo will ensure you have a logo that works well for any use case. Ask your web designer, but typically we are looking for a horizontal logo for your main website logo along with a submark for your footer.
Your logo needs to work at small and large scales. For example, intricate designs aren’t great for instances where your logo needs to be tiny.
You’ll want to save your logos in the correct formats. Your web designer will typically ask for your logo in transparent .png format - this is the industry standard for Squarespace websites. For other uses, you’ll want to have your logos in a vector format such as .svg or .eps - these formats are easily scalable and can be used for print work as well.
Pro Tip → If you use Canva for creating social media posts or other digital assets, adding your logo in .svg format will allow you to control the colors easily.Make sure you own a license for any fonts used in your logo. Many brand designers use unique fonts so you can license the font yourself for use across your marketing materials.
Your logos should all play nicely together and have a coherent look and feel.
Example 1: The Ivory, sustainable & affordable living in East Austin
A round submark and primary logo:
Example 2: Tiny Windows Consulting, a digital communications consultancy for Jewish nonprofits
A vertical logo (also used as a submark) and a primary horizontal logo:
Brand Colors
You’ll want to provide brand colors to your web designer. The brand colors you provide will set the tone for a cohesive website and brand experience. Typically in Squarespace, we use 5 main colors for the website:
white (or off-white)
a light brand color
an accent brand color
a dark brand color
black (or off-black)
If you have additional brand colors, these can come into play with graphics used on the site such as blog post thumbnails. Brand colors can also be carried through in the photography used on your site by incorporating your brand colors in a photoshoot or selecting stock photos that contain your brand colors.
Example 1: The Ivory, sustainable & affordable living in East Austin
Example 2: Tiny Windows Consulting, a digital communications consultancy for Jewish nonprofits
Brand Elements
Brand elements are often specific graphics (such as patterns, icons, or shapes) that can be carried across your website and marketing materials. These are sometimes subtle touches and sometimes more bold choices that help everything feel cohesive.
Example 1: The Ivory
icons and patterns
Example 2: Tiny Windows Consulting
shapes and gradients
Fonts
Most often, your site fonts will be different than your logo font - you want your logo to stand out! Sometimes your brand designer will provide website font recommendations, but always defer to your website designer on these. As web designers, we want to stay true to your brand, but website usability is paramount. This is why many of us recommend skipping script fonts - visitors need to be able to read your site at a glance, so we are looking for the best way to convey your information quickly. In Squarespace, we typically use two fonts per site:
Heading font
Paragraph font
Depending on your site design, we’ll likely reuse one of those fonts for buttons and meta-data.
Squarespace includes on the order of 600 Google fonts and 1,000 Adobe fonts so it’s likely you’ll find great fonts built into Squarespace without having to license and add a custom font to your website.
Example 1: The Ivory
Calluna (headings) & Europa (paragraph)
Example 2: Tiny Windows Consulting
Lora (headings) & Montserrat (paragraph)
What to Expect
Your web designer may not use every piece of the visual identity you provide and that’s okay! We will use your brand in the best possible way to achieve a website that works for you.
Your web designer may make tweaks to your brand colors (for example, we may adjust the shade of a brand color to create a light or dark color for the website). And we may also suggest alternate fonts for your website to increase usability.
There are certainly subjective preferences that come into play and style “rules” that can be broken, but your web designer will look at your brand as a whole and choose specific motifs to carry your brand throughout your website.
Example 1: The Ivory
circular elements used throughout the site; strong brand colors; pattern used in pre-footer
Example 2: Tiny Windows Consulting
buttons have a similar motif to the logo flames; shapes added to selected images; gradient backgrounds for highlighted sections
Resources
Many web designers offer branding as an add-on to their website design packages. If you plan to hire a web designer for a custom site, ask them if adding on a branding package is an option.
Not ready to invest in a custom visual identity? Try Canva for free and try out their logo templates. Then add your colors and elements from there. Or check out their brand board templates for great inspiration.
Another good starting place for inexpensive DIY options is Creative Market. Check out their brand kits here. These vary in quality, the software required, and which elements they provide. But if you spend a few moments sorting through, something may catch your eye.
If you have a logo but want to learn more about DIYing a full visual brand, Brand it Better helps you take your brand from budget to professional. I went through this process last year and it was extremely helpful, plus I learned a ton about using Canva for my brand.
visit The Ivory website | visit Tiny Windows Consulting
