上QQ阅读APP看书，第一时间看更新

Branding - visuals

When creating the brand guidelines, it's important to ensure all aspects of the guide--logo, typography, color palette, iconography, and so on-- are created for all possible mediums the brand will channel to. In the digital age that we find ourselves in the brand guidelines must be flexible and cater for the dynamic ever-changing digital environments in which the brand will live. Within the visual context UX is making the brand visually adaptable to any possible scenario and platform it might find itself in:

Logo: The basic guidelines for designing a logo look at the medium it will be used on such as print or digital. The next factor is color. Should the logo be full color or only use a spot color? Should the logo be flat design or have gradients? All these factors are important, but let's throw some UX factors into the mix:

Is the logo simple enough, or can it be simplified to use as a favicon? A favicon is the small logo in the top of your browser tab when you open a website. The formatting of a favicon is 16x16 pixels or 32x32 pixels, which is pretty small. If you have a logo with too much detail, the logo will look blurry and sometimes unrecognizable on such a small scale.
The following is an example of four well-known brands and their original logos:

And, how they incorporated their logo to favicons for their websites:

Let's take a detailed look at the favicons:

Amazon did an amazing job of combining all elements, the black typography and orange arrow from the original logo into the favicon without making it busy and difficult to recognize the brand. Putting the elements in a white container reinforces the brand's look and feel.
Microsoft's logo is simple enough to use as is in the favicon. It's ideal to have an icon or typography in the brand logo that can be used as a single recognizable visual element like the four squares of the Microsoft logo.
Starbucks' logo is interesting and unique, but too detailed to simplify for smaller ratios. The favicon is blurry and barely recognizable as seen in the preceding screenshot. It is possible to create a new simplified version of the current logo to use for smaller ratios like favicons, app logos, and more by using, for example, just the star in a green circle as illustrated in the following screenshot.
Adidas' original logo is designed well to be utilized for smaller ratios, but is just not implemented correctly for the web. By using just the three stripes, which is iconic of the Adidas brand, the favicon will be clear and easily recognizable, as illustrated in the following screenshot:

Can the logo fit into a square dimension? If your brand has an app or there's potential that there might be an app in the future, the logo must be scalable to be used on different devices such as iOS or Android. All apps have icons displayed as entry points to access the app. This point can be illustrated clearly through the previous favicon example, which is also a square dimension.

Typography: The origin of typography is deeply rooted in print where the letters lived on a physical surface, which larger letters which are more easily readable than in the current digital era, where we have to cater for smaller letters, that live within an environment of light glaring from computer and mobile screens. Due to the amount of hours we spend on these devices, typography online has become a lot more important to reduce strain on the eyes and improve readability of the copy.

Keep the typeface simple. People work on personal computers, students study on their laptops, and most people stare at a computer or phone screen between 3-10 hours a day. Thus reading on screen can put unnecessary strain on a person's eyes if the typeface is too detailed or too small for the device. Typography is divided into two main types of typefaces, namely Serif typefaces and Sans typefaces. The following is a clear example of the difference between the two typefaces and a short explanation of which typeface works better for print and digital:

It's also good practice to have a webfont version of the font you're using for the website. A webfont is a font that's not pre-installed on the user's computer when browsing a website, but instead the webfont reference is coded in the backend and is downloaded when the user opens the website in a browser. This will allow you to use a wide variety of fonts outside of the basic Arial and Verdana fonts that usually come standard when a personal computer is purchased. You can find an endless source of webfonts online on Google Fonts: https://fonts.google.com/

Color palette: The color palette within the brand guidelines is probably the most tricky to create. Based on the mediums in which the brand will be represented, the colors used will have a great impact on the messages conveyed to the user.

Does your color palette include colors used for system notifications and warnings such as error messages when the user fills in a form incorrectly? It's easy right, error messages are red, but what if one of your brand's primary colors is red like Virgin Atlantic? In the following screenshot, the Check in form lives within a container with shades of red as the background:

The error message iconography and copy is also red, which does not allow the error message to stand out within the form elements.

Another example is if your color palette consists of many colors such as red, green, blue, orange, and yellow, would notification messages stand out within the UI? Will the user easily notice the notification or is there a chance that the notification can get lost with all the colors present on the UI? The following is an example of Taco Bell's login form, which consists of black, blue, gray, turquoise, pink, and red. As you can see, it's really hard to notice the error messages within the form:

Is the color palette accessible? Do the colors comply with the Web Content Accessibility Guidelines (WCAG) standards? At a later stage in this book we'll discuss accessibility in design in more detail.

Iconography: When iconography is used, will it be clear to all users using the website, despite cultural and technical backgrounds? We won't go into detail again as we already discussed this topic in the previous chapter.

These are just a couple of visual touch points to highlight how UX is an integral part of the brand. The presentation layer of a brand is important, it's the experience the user has with the brand that can make or break the relationship between the user and the brand.