Mahtab: Welcome to episode 19 of The Crux of It. I’m Mahtab Rezai. I’m the Principal and CEO of Crux Collaborative and we are a User Experience Consulting firm specializing in regulated industries. Today I'm joined by my colleague, Annette Gustafson. Hi Annette.
Mahtab: So we're going be talking today about brand standards and specifically about brand standards in 2018, and what they need to include and consider in order to accommodate the digital channel, because this is something that we encounter. It's amazing to us that we still see brand standards that are almost entirely print focused and truly, they just miss the boat on some key components that need to be considered and included.
Annette: Yeah, absolutely. We see it a few times a year when I start to dig into the brand guidelines. I sometimes just have to shake my head.
Mahtab: Yeah and we have to go back then to our client. We just have to go back and be like, hey so…
Annette: There's some key things we need, let's talk about it.
Mahtab: Yeah, let's talk about it. So let's talk about what some of those things are. So first of all if someone is not familiar with brand standards, you and I both have design backgrounds, so it might be more familiar to us than others but just as context, the cornerstone, the three pillars really of brand standards are colors, fonts, and images.
Mahtab: So when a company is working on brand standards, they're trying to get those things, foundationally set up for a brand or for a product and obviously brand standard guidelines can expand to a lot more. That can be key messaging, there can be the tone. There can be all sorts of things but really just foundationally at a bare minimum, they have to address color, they have to address font, and they have to address images.
Mahtab: At the highest level, a generalization I think we can comfortably make is that, in print a lot is in your control. You can control a lot more than you can in the digital channel but in the digital channel you need to account for a lot more. There's more elements that are needed.
Annette: It's dynamics, it's not static.
Mahtab: So let's talk about some of those. So color, let's start with color.
Annette: Yes, so color oftentimes when we give brand guidelines we're still seeing things spec’d out in Pantone colors, which absolutely I understand because that's foundational to print but the fail point that we see when it comes to brand guidelines is then taking those Pantone colors and translating them into - what is the RGB color value, also what is the HEX color value. Those are essential for our work.
Mahtab: So I know many people might know RGB but I don't know if everyone will know HEX colors. So when we say HEX colors, what do we mean?
Annette: It's the Hexadecimal color. So it is a six digit number. So that's what we use when we're doing our CSS. So that's how assign the color value.
Mahtab: That's how code ... that's how color is conveyed in code.
Annette: Code, yep.
Mahtab: Easy for me to say. Okay what's another thing to consider in addition to the HEX values and the RGB values?
Annette: So yeah, once you have your full color palette, your primary color palette, your secondary color palette and even potentially your tertiary color palette spec’d out, being mindful and going back and making sure that they pass contrast, being mindful of accessibility. So when we talk about that, when it comes to the web and accessibility you need to make sure that your colors, and when it's on a certain background color, pass readability and contrast.
Annette: There are some tools out there in which you can test that and oftentimes when we receive some of these brand color palettes, we'll go through and we'll do some of the testing and oftentimes they fail.
Mahtab: Like nearly the entire palette fails.
Annette: Yeah, a lot of times they do. So we'll have to go back and say, can we tint this in a certain way, make it a bit darker so it can pass contrast. So allowing some flexibility in your brand guidelines for the online component.
Mahtab: Okay. What else?
Annette: Oftentimes too, we'll see that too few colors are spec’d. So not considering the meaningful secondary color palette - because this is important when it comes to things like, what is your link color. So spec’ing that out, what is your button color, usually we want to do a primary button color and a secondary button color, for primary and secondary actions.
Annette: And then also too in digital, we have interactive behavior. So what is the hover state? So, your button may be your primary blue color but how would you like us to do that hover state transition to a lighter color or darker color. So spec’ing out some of those things.
Mahtab: Yes so that's a lot about color. Let's talk a little bit about fonts. So what do we need to know in 2018 when it comes to fonts?
Annette: Well there's a lot of fonts out there. It's important to be mindful of your fonts online. When you're in print world, you have ultimate control. You can ultimately fine tune the tracking, the kerning, exactly how it lays out, where's your line breaks, the space in between the letters but when it comes to digital, not as much.
Mahtab: Yes absolutely. The user's device often does that for you, how big is the screen, how much space does it have, what are their settings?
Annette: And there's a lot of fonts out there and in 2018 the world of web fonts is excellent but if you're choosing one be mindful to make sure that, that font is available as a web font and then also how is it available. There's a lot of open source fonts out there. So with an open source font, Google fonts comes to mind - they have a lot of open source fonts, that are free to use, unlimited use, no licensing but if you're using a specific font, be mindful of the licensing because sometimes there is licensing out there that requires a monthly fee, potentially an annual fee and sometimes there's even limits to the number of page views that you can have per month when using that particular font.
Mahtab: That can be an unexpected and unnecessary expense for the client that can add up and then-
Annette: Managing that.
Mahtab: That's like a whole job, maintaining something that you wouldn't have to if you just made a better decision.
Mahtab: The other thing I think with fonts is, what is the type of company, and we see this a lot when something is being spec’d for print, they're thinking of business cards, they're thinking of letterhead, maybe they're thinking of just a few print pieces. They're not thinking of paragraphs and paragraphs of content and is this font legible at that density.
Mahtab: They're also not thinking of data and specifically we've seen this with a surprisingly high number of our clients because we do lot of work in financial services where the brand team has spec’d a font where one or more of the numbers are beautifully styled to do something irregular, which is great for your address and your address label but terrible on a table of data where you have different x heights, you have where it's hanging below the baseline. You just have all sorts of things happening.
Annette: So yeah take a look at each individual character set. Take a look at the letter values, take a look at the numerical values. Take a look at those numbers and see if they're shifting on the baseline jumping up and down because when you have that, that cognitively becomes difficult to read.
Mahtab: And last but not least, imagery.
Annette: Yes. In print, you can control a lot. That big beautiful image with the text overlaying it, goes to print, you know exactly how it's going come out. We don't have that luxury in the digital world, especially when it comes to adaptive, responsive design. You know we've seen multiple times where the image scales down and crops to a certain portion and now all of a sudden the person's eyes are cropped out or the text is-
Mahtab: Yeah we know like the headline over a pair of lips-
Annette: Yes, exactly.
Mahtab: And it's like what happened here.
Annette: Awkward. Or even when you overlaying text on an image too, all of a sudden it's running across someone's face and it's awkward. So be mindful of the composition of your photography where does it crop out, can it blend off. Just be mindful of that type of stuff.
Mahtab: Yeah and we see that again because in print you have ultimate control. We've seen brand guidelines that are so specific, but they don't account for the variation in the digital space. Whether it's on a device, if it's an app, whether it's online and like monitors, whether it's retina images and something can either be load heavy.
Annette: Yeah, you have to mindful of the size of your images and the number of images that you're using because you want your images to present nicely, so you want higher quality but you go too high and now you're affecting your load time of your sites and this is a deterrent to the users. It's not loading they back out.
Mahtab: And conversely it's all like pixely.
Annette: Yes if you optimize it too low, it looks poor. If you're not optimizing the retina, it looks poor, so that could be diminishing to your brand. So being mindful of that.
Mahtab: So as you can see, there's a lot to consider for digital brand standards and something that is important to think about. So hopefully this has been helpful and some context. Let us know if you have any feedback or questions about what we shared. Our contact information is on our website. Thank you for listening. You can find us on SoundCloud, on iTunes, Google Play, Stitcher and on cruxcollaborative.com/thecruxofit