Branding Is More Than Just a Logo
Think of a brand. Any brand you like. Google, FedEx, Apple–doesn’t matter. Since it’s one of the most recognizable brands, let’s go with Apple.
Being emotional creatures, humans are fond of concepts, ideas and even products that hit that coveted nerve in them. This phenomenon was highly evident in Apple’s 2017 apocalypse video, which gave us a satirical glimpse of what life would be like without Apple products.
Through this video, Apple connected with their users on an emotional level and made them realize that it’s not just a company, but an essential part of daily life. Apple, with branding, created this strong connection with people and underlined the importance of their products in their lives.
Branding is absolutely critical to a business—it helps to identify your products, create a persona with which your customers can connect, and distinguish you from your competitors. In this post, I’ll cover the key elements that make up your branding and how to incorporate them into the design of your digital products.
Let’s jump right into it.
Key elements of branding
Branding is the practice of creating a strong identity of a company and its products in the customer’s mind by combining tangible and intangible brand elements. Below are some of the key elements used in building and communicating your brand image—and they should all be covered in your brand book and guidelines.
- Tone of voice
- Design sensibility
- Business values
- Mission and vision
- Customer experience
Branding is so much more than just a logo. It’s the collection of various elements that make up your brand and connect it with your customers.
Note that I’m not saying that logos aren’t important—your logo is often the most recognizable brand element since it serves as a means of identification. Think: the Swoosh, the Golden Arches and the Starbucks Siren. Ideally, your logo eventually becomes something people instantly recognize.
Stay recognizable with your brand with a complete style guide
To maintain consistency between your branding and your digital product, a style guide is a must. Digital products need a defined component system both designers and developers can use. Many style guides also include voice and tone guidelines for copywriting, along with boilerplate text for PR.
To ensure that your digital product stays true and recognizable to your brand—and that it’s also easier to design and develop—cover these important brand elements: typography, colors, icons, imagery and tone of voice.
1. Typography text styles
One of the first parts in forming a project style guide is to define typography styles. Consistency is key here, too—it’d be odd to see Arial all over your homepage and Calibri on your blog and social assets.
Carefully select, and then consistently use, a typeface to solidify your branding. Differentiate text styles per usage. Here are the most common text styles for digital products:
- Caption types
Use fonts that are easy to read on mobile, not just on the web. If your brand’s typography is good for titles but doesn’t support huge chunks of body text, then find a secondary font for this purpose. Use different text styles that support the individual needs of your product.
2. Color styles
Setting a good color palette for your digital product is really important. Colors play an integral role in interface design as they’re used to communicate different things to users.
It can be a challenge to develop a color palette that includes your brand colors, looks good on all devices, meshes well with typography and iconography, and always follows the best design principles (like the ones outlined in the picture below). Color Hunt is a great resource, and Dribbble has lots of inspiration.
Really loving the color palette, design process and brand direction that @gcellz of @ImpossibleFoods is sharing!@AIGAdesign // #AIGAdesign // #AIGAdesignconf // #Branding // #ImpossibleBurger pic.twitter.com/2y3WxoDaV1
— Eric Johnsen (@ericjdesigns) November 12, 2020
When creating a digital product, you need to define primary, secondary and perhaps even tertiary color sets.
Primary colors are the dominant colors that are displayed most frequently across your product’s screens and components. You can use a secondary color in combination with a primary color to draw attention. Accent colors can be extracted from the primary colors and are mainly used to emphasize actions and highlight information. Lastly, signal colors are used to indicate things like error and success notifications.
Your final color style guidelines (that include which colors should be used in which scenarios) could look something like this:
3. Buttons and other actionable items
Buttons let people take an action on a screen or page with a simple tap or click.
In your design guide, define buttons and other actionable items—including how they’ll appear in different states. States help communicate the status of user interface (UI) elements to the user. Because states enhance usability, consistency is key.
A great example comes from Zoom. They have detailed design guidelines (opens PDF) that, among other things, include how different UI elements should look depending on their state.
Iconography is a visual design system that guides the representation of features and functions through icons. Add specific instructions within the guide to define how you’ll use different patterns and icons across the product.
Icons should reflect your brand’s visual style. For example, if your brand is more serious in tone, then your icons shouldn’t look playful.
An important point to note here is the app icon. An app icon typically contains a brand logo. However, you could have a complicated logo that can’t be easily translated into an icon. If that’s the case, here’s a great resource that explains how to stay consistent and ensure that your product icon colors and key elements reflect your brand identity.
Consistency can be especially important if you want to convey that your new digital product is part of a certain product line (or a similar notion). To see this in action, just open Gmail and look at the app icons.
Imagery is extremely helpful in improving the user experience and representing a brand’s visual language. At the beginning, define if you plan to use photographs, illustrations or both.
You can use imagery in your digital product for various purposes:
- Tell a story
- Convey a clear message
- Teach how to perform an action
- Draw someone’s attention
- Portray the intent and context about content
- Delight people in a confusing state (error state)
- Reinforce a brand message or value
Choose images for their ability to represent your brand message and reflect your product’s style. Both professional/user-generated photography and different styles of illustration can be used within a single product to represent your brand. These should be relevant to each other by having a common intention, style and function, regardless of the image type.
A great example comes from Airbnb illustrations. They created illustration guidelines in an effort to create a more inclusive visual identity that reflects their brand values.
6. Component blocks
Components are the building blocks of any digital product. They represent more complex elements that are made out of a combination of icons, buttons, text and color. Each component is different for its purpose, size and layout of the elements it contains.
They’re also an actionable part of the system, so make sure you properly define their different states. Stay brand-consistent by using your defined typography, color and illustrative styles.
7. Voice and tone
Define your brand’s tone in your guidelines. For example, do you sound conversational or formal? Do you use the serial comma? What about headlines—sentence case or title case?
Copy should never be an afterthought—it’s a big part of how you communicate who you are, what you do and why you’re worth someone’s time. And copy isn’t just on your homepage. It’s in social media posts, email, ads and more.
Words can shape the way your brand is perceived. Use positive language and avoid passive voice. Your tone should be functional as well as expressive to enable the brand to make more space for connection and relevance.
For inspiration, look at Uber’s voice guidelines. Here’s an excerpt:
“[This guide]is designed to serve as an umbrella that informs and unites style guides for departments, countries, and languages. Voice and tone express a brand’s essence, signaling who we are and what we stand for. They create the feeling: ‘that sounds like Uber.’ And they let us show up in the world as the innovative global mobility company we are.”
And here’s how they followed that approach in one of their product design updates:
Different ways to communicate
In digital product design, there are lots of different scenarios where you need to communicate a specific message to the user. These scenarios include the onboarding process, in-app dialogs and different feedback screens. Use these scenarios as opportunities to connect with your users and put them at ease.
App onboarding process
The onboarding process starts with an app launch screen, which is used to keep users engaged while the app loads. It lets you set the tone for the in-app experience and increase engagement using your logo, colors, text or any imagery.
Onboarding is a starting point for someone to get familiar with the product and its main features—and to immediately understand how it will solve a problem they’re having. If it doesn’t seem worthwhile, that person likely won’t come back.
Besides being an introduction to your product’s main features, onboarding is also an opportunity to communicate in your brand’s visual language.
Check out how Slowly does this successfully in their onboarding process. Through a set of screens, the app communicates the benefits and value a user will receive from using it, educates them about its core function (mailing), and collects profile information to deliver personalized content and notifications.
Slowly keeps onboarding concise when demonstrating its benefits. This entire onboarding process facilitates a positive user experience and leads to better product adoption and increased user retention.
For those interested in learning more, here’s a guide on how to design a perfect onboarding experience.
Dialogs enable users to perform a task or ask questions, and they can also provide users with information or feedback on progress. Dialogs consist of a title, optimal main instruction or information, different controls and commit buttons.
When you’re writing text for these, use a short, concise statement or question in a title to clearly explain what’s included in the request. Write dialog content in your specific brand voice by referring to your predefined style guidelines.
For a solid example, see this Headspace message and how their copy is in their brand voice. In this dialog, they point out benefits in a casual tone:
Feedback type screens (empty, error, and success states)
The purpose of feedback-type screens is to inform users on actions they took (or actions they’re about to take). It’s also an opportunity to use your brand’s tone of voice, imagery and colors.
1. Empty states
Empty states can display a wide variety of content like a list without list items or a search that returns no results.
Below is a great example of an empty state from Airbnb. They use their brand’s illustration system to enrich something that would otherwise be a simple “nothing found” message while simultaneously encouraging their users to explore and take action.
2. Error states
Error states need to clearly indicate what’s wrong. Handle error states according to your brand. For instance, if your tone is a bit quirky, take inspiration from brands like Redbubble:
3. Success states
This is the most positive part of user experience, and it happens when someone successfully completes a certain task. You can use a success state to let a user know how much you appreciate their accomplishment in accordance to your brand style, like Lifesum does below:
Having clearly defined style guidelines will ensure that your digital products stay consistent across different devices. This, in turn, will enable your audience to make that instant connection with your brand as soon as they start interacting with your digital product.
Consistency is everything.
Header photo by Balázs Kétyi on Unsplash