How to Capture Brand Identity in a Few Simple Steps

A small peek into capturing client brand identity at Yext

This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.

Illustration by Tyler Anderson, Yext Visual Web Designer

At Yext, one of the Consulting designers’ primary duties is receiving a client’s branding and applying it to our wide range of products. Our ability to mimic our client’s look and feel is not an easy skill we acquire overnight. In fact, finely tuning this skill can take years of practice and attention to subtle details.

Why is Brand Identity Important?

Brand identity is the part of the design the client is going to instinctively know best. After all, it is the client’s brand. If a designer is off the mark, this will only diminish the relationship between our Consulting design team and the client. Therefore, it is immensely important to remain on-brand in order to ultimately build that trust. This can be a tricky balancing act; it can be extremely difficult to consistently remain brand accurate while also trying to improve the user experience of their pages.

Source of Truth

A source of truth (SoT) is exactly what it sounds like; it is a single trusted place a designer can look to regarding questions about a client’s brand styling. The SoT can come in many forms. We prefer a client-provided digital style guide or web page that best represents the brand identity on the Web. Often times we get neither; therefore, it is up to the designer to use the tools at their disposal to glean all the necessary design information we need to complete the implementation.

Here is what every Consulting designer wishes for in order to remain brand accurate:

• Fonts
• Type Hierarchy
• Colors and guidance for their application(typically expressed in hex notation)
• Grid and Spacing Patterns
• Logo file
• Iconography
• Button Styles & Interaction States
• Link Styles & Interaction States
• Text Input Fields & Interaction States
• Essential Interactions for Dynamic Content

While this list is not exhaustive, it is a more than healthy start. However, it is also a rare case. Usually, Consulting designers are given much less to work with. That is why Chrome Inspector is one of our best friends in the design process. We have also developed our own Chrome extension and Sketch plugin to quickly transfer font styles from Chrome directly into Sketch.

What to Look For?

When our Consulting Designers immerse themselves in a client’s brand we consider it imperative to absorb as much material and inspiration as possible. Our designers spend a good bit of time studying the client’s corporate site as well as their SoT. We really dig into our client’s sites by exploring as many secondary pages as we can. Often times a client’s footer will have a sitemap link; we use that to get a high level overview of every page on their site. We also spend so much time on the client’s site that we start getting ads for it on Instagram.

While our Consulting designers are exploring a client’s brand, we note any patterns that we start to recognize. This could be layouts patterns, type patterns, buttons patterns, etc. It’s important that we recognize these patterns because they represent the average case. Because of this research and diligence, the pages our Consulting design team ends up making for our clients seamlessly become an extension of the pages the client already has. To sum up our process, we explore, explore, explore; recognize patterns; and design for the average case.

When to Deviate from a Client’s Brand?

This will vary case by case. Some easy answers include:

• When a client’s brand does not meet WCAG standards but they would like to
• When a client’s brand ignores an SEO or UX Law/best practice that could negatively impact their discoverability goals
• When following a client’s brand results in more development complexity than their time-to-launch timeframe allows; if there is a simpler solution that subtly deviates from their brand, we opt for that instead!

Tips & Tricks We Use

• Pay attention to spacing patterns. Does their brand follow an 8px or 10px spacing scale? Matching a brand’s spacing is a surprisingly important aspect of brand identity.
• Pay special attention to headings and hierarchy; the bigger the font, the more likely they are to be noticed if incorrect.
• Notice how the brand visually separates elements; does the brand alternate background colors or do they use divider lines? In most cases, adding additional spacing will go a long way. Alternatively, if the brand separates content using a card style, this can be an effective pattern to reproduce.
• Follow UX/SEO best practices; these regularly help us intelligently and credibly enhance a client’s brand identity for the better.
• Keep track of where we pull styles and inspiration from the brand. Documenting our sources of inspiration proves useful when we present our designs to clients to help justify our design decisions.
• Note any suggestions you have from an accessibility-standpoint. This is extremely helpful for those clients who are not familiar with WCAG requirements.
• Take the client’s landing page with a grain of salt. While it may be a good source for inspiration, the landing page often an anomaly in terms of the overall brand aesthetics, with unrealistically large fonts, photography, minimal copy, bolder layouts, etc. Understandably so, as the first pages is designed to capture attention and draw users in. We recommend navigating to secondary pages to find a much more consistent “average case” of the brand.

Hopefully, this guide has given you some insight into how our Consulting design team adapts to a client’s branding for application across our wide range of products. The name of the game is to study and understand the branding (all of the things that might make that brand familiar, trustworthy, reputable, etc. to a customer) and apply that faithfully to our projects, so that they too can serve the customer.