A logo, some colors, and a font are great, but it takes a bit more to create a robust brand that is ready to be put to rigorous use.
We love when we get to work with clients to bring a new brand to life via their website or UI/UX project. We’ve been fortunate to work with amazing branding companies this past year, including Pentagram and Innovatemap. We love taking their work and putting it through its paces to create fresh and focused projects.
When we kick off your website or UI/UX project, we want to avoid costly delays associated with an incomplete brand. We will need enough branded assets to carry through a complete working website. Stepping back from the original timeline to shore up a brand ends up eating the budget for more fun things—like motion graphics or additional website components.
In addition to providing your brand guide, here are some additional elements we will need to make your brand shine, as well as pointers on how you can ensure that your project is successful.
Color Accessibility
Ensuring that we meet accessibility standards with your brand colors is our priority. What does that mean, exactly? We follow the WGAG Accessibility Standards, and when it comes to colors and typography the three things to keep in mind are:
Most text needs to have a contrast ratio of at least 4.5 to 1 (written 4.5:1)
Large text, at least 18pt text or 14pt bold text, needs to have a contrast ratio of 3:1
This does not include text in logos—but if it fails accessibility tests, it will be hard for some people to see. We have a color-blind person on our team and he consistently has a hard time with some colors.
To test this, you take your background color, set it against the color you want to use, and run it through an accessibility checker. There are many contrast checkers online, but we use the Able plugin for Figma.
Color Usage
Somewhat related to color accessibility is color completeness and usage. We need more than your primary brand color—we need your secondary colors and any specific usage guidelines that you have for them (for example, if purple is only used for a single product and you use green for the other product).
We need colors that work for headlines, links, and buttons. Every link on a website has five possible states and five possible colors:
- Link – what you see before you click. In the olden days, these were always blue.
- Hover – the color that shows up when you hover over the link, often with an underline.
- Visited – this used to always be purple, but now we can choose any color.
- Active – some links and buttons change color only when you are pressing down on them.
- Disabled – usually a ‘go away gray’ color that indicates a button’s action cannot be taken.
Give us enough colors to work with, including good colors for UX—a solid green for go and red for stop— that match your branded colors.
Web Fonts
Back when we started creating websites, we only had about a dozen fonts to choose from. The 2010s brought us web fonts and eventually the ease-of-use of Google Fonts. If your new brand doesn’t include free and easy to use Google Fonts, your fonts must be licensed. That’s totally fine with us—we love a high-design font—but hold onto your butts when it comes to the cost. Typical font licenses are driven by traffic numbers per-month, and how many designers need a ‘seat license’ to use the fonts. We’ve had two projects with fonts spec’d from Klim and the cost for use was around $4,000 for each project.
Iconography
Everyone needs some iconography these days. We’re more than happy to create it, but including your icon styles in your branding will save you time and money on your web project.
Company-specific Photography
Do you have photos of your building, headshots of your key staff, and pictures of your organization getting together? We’ll need several of these compa- ny-specific photos to help make About Us and Career pages sing. Remember to get model releases if you use images of your employees.
Photography Styling
Nearly all projects will use stock photography. While we understand there is a range of bland and clipart-looking stock, there are also some great assets out there. Before declaring, “we can’t use stock”, make sure your budget includes time and costs for photoshoots.
If your photos have a specific styling, that should be part of your brand guide.
Brand Fitting
Modern brands should work across a range of applications, from websites, to embroidery, to signage. All brands should work in a circle or a square—think social media avatars. Having logo options that are sturdy enough to withstand usage across a variety of media will set you up for consistent success with your brand recognition.
Tone of Voice / Craft Messaging
Make sure your brand not only looks like you, but sounds like you. A Tone of Voice guide and sample messaging will help us deliver a targeted website. Include things like the exact write-up of your name, and how you refer to your customers (are they customers, clients, fans, users, or something else?) Decide on your pronouns: is the company “we” and the customer is “you”? Or is the company an “it” entity and the customer is “me/my”?
This guide also usually gives us a list of quips and phrases that we can use as we design the website.
This article appeared in the Fall/Winter 2022 issue of the Anchor & Alpine Magazine.
Need help beefing up your brand?
Give us some time and money and we’ll get ‘er done.