Visual Identity Systems: The Designer’s Quickstart Guide

You’d expect every brand to have a set of defined rules for creating consistent designs, product messaging, and branded sales materials. Unfortunately, that’s not always the case.

We’ve met teams of all sizes - from pre-seed to series E - who fall short when it comes to having a comprehensive and organized visual identity system.

From trying to sort through multiple, slightly different icon iterations to sifting through years of logo designs in a single shared Google Drive folder, an undocumented design system can frustrate employees, waste precious time, and present an inconsistent brand.

Let’s discuss brand strategy and how to create a stunning visual identity system!

What is a Visual Identity System?

A visual identity system is a collection of design software, templates, color palettes, type kits, icons, logos, and images that are usually hosted in the cloud for design departments to access at any time.

Visual identity systems ensure universally consistent graphics for a brand's digital and physical presence.

Due to its reusability among designers and developers, a good visual identity system will also be equipped with clear usage guidelines. These guidelines showcase how to implement existing components in order to avoid branding inconsistencies.

Creating a visual identity is a crucial part of developing a wholistic brand identity - which encompasses both visual and non-visual elements.

How Do Designers Benefit from Visual Identity Systems?

A visual identity system (also referred to as a design system) is a single source of truth for design and development teams. In our decentralized world of remote work, this has become increasingly important.

When done correctly, visual identity systems provide a multitude of benefits: 

• Increases design consistency across teams (e.g. graphic, video, development, etc.)

• Improves cohesiveness from design to design

• Shapes brand perception

• Decreases onboarding time of new designers

• Speeds up the design process with reusable elements

If education is the great equalizer, design is the great communicator.  When brands put systems in place, they observe benefits across the company.

Visual Identity System Example - Colors

Now let’s explore an example of what exactly a visual identity system includes.

Above is a color palette taken from our Atomic Design guide. It plays a crucial role in our own visual identity system here at Webstacks.

Each web page, asset, social post, and piece of merchandise that Webstacks creates starts with this exact color palette.

Our entire visual identity system exists on Figma, which gives any Webstacks designer or developer easy and convenient access whenever it is needed. Notice that each section is labeled, letting any new designer or developer know exactly what each color is.

We recommend using a tool like Figma to start building out the design components you’d like to include. It’s important to have a collaborative tool that members across your team can access at any time.

Speed Up & Scale DesignOps with Atomic Design

Get a complete overview of the atomic design methodology and how it's used by creative teams to maintain brand consistency across the marketing site.

Get The Ultimate Guide to Atomic Design

Identity system requirements

Design teams across the world have unique processes, standards, personnel, messaging, and design software tech stacks among other things.

Because all brands are different your identity system can be whatever you want it to be, as long as it is your company’s single source of truth.

But there are three important requirements every team should follow:

1. Take ownership of the visual identity system

Everyone on the team must be on board with the visual identity system. 

Designers must invest time into building out their design library, design managers must dedicate time to building a governance model, and stakeholders must be prepared to invest time into reviewing the final design system.

When everyone on the team takes some modicum of responsibility for upholding standards, design integrity, resources, and processes the whole team benefits. 

2. Keep technical details in mind

Because a visual identity system is a shared library the people that use it frequently (e.g. designers and developers), must decide on naming conventions and a shared vocabulary that makes sense for both teams.

Have trouble aligning? Atomic Design principles can help with dividing components into categories with descriptive technical details and improving cross-team collaboration.

3. Build a visual identity system that is future-friendly

Your visual identity system should be more than just a reusable set of components. The system must scale for future projects.

The identity system can be used as a checklist for future design projects and making sure any new components or ideas adhere to the visual identity system that you created.

How to Build a Visual Identity System

So we’ve touched on the requirements of a visual identity system. Now let’s dive into getting your visual identity system started at a basic level.

1. Build your components

Start by building a catalog of reusable components. This includes patterns, colors, text styles, icons, and grid systems.

2. Establish your design principles

Establish the principles for the design system. This includes the technology for writing the design system and how it will be distributed.

3. Choose your color palette

Decide on primary colors, naming convention, and the system for building primary, secondary, and accent colors. Need help? Check out this color palette generator.

4. Decide on typography

Choose the typefaces, sizes, scale, spacing, and leading you to want to use across all of your brand touch products (e.g., website, web apps, print materials, emails, etc.)

5. Implement an icon library

Icons are useful for mitigating language barriers and influencing user behavior. Finalize your icon library and technology to implement it. Check out Noun Project for free icons.

6. Standardize other style properties

It’s important to standardize other style properties such as white space and grid styles. Standardization in this situation means eliminating inconsistencies.

7. Build one design pattern at a time

With the foundation built, it’s time to compile a handful of patterns to demonstrate how your components work together. Not sure where to start? Try creating a form pattern, lead generation landing page pattern, blog post pattern, and product page pattern.

8. Analyze your progress

Run a sprint retrospective to analyze progress and make necessary improvements. Sprints can ensure quick learning across the entire team.

Case Study: Breaking down Atlassian’s Visual Identity System

Atlassian, creators of the popular project management tools Trello and Jira, focuses on keeping companies agile, organized, confident, and fast to market. Atlassian’s brand personality expresses itself in its visual identity system. Organized into five groups - components, patterns, brand, foundations, and content - Atlassian’s design system is a perfect example to which design departments should aspire.

Components

Atlassian has ten components that are used as building blocks for their designs.

This doesn’t mean your design system should also have ten components, rather you must find the components that will fit your User Interface (UI) needs.

Within each component, there are more layers that designers and developers can use.

For example, Atlassian’s avatar component shows designers what the default icon would look like and includes the line of code developers will need to deploy it in a UI.

To take it a step further, Atlassian includes another block in their avatar component, called the avatar item, that shows what the avatar item looks like with a wrapper along with a line of code. 

Atlassian’s components also include badges, banners, buttons, dropdowns, modals, messages, flags, checkboxes, and more!

Patterns

Patterns are different combinations using the components described above. This part of their visual design system is a small “how-to” guide on implementing component combos.

The form pattern’s labels let their team know the correct way to style their forms including the dialogue box length, placeholder text, label alignment, and more. 

A well-written visual identity system removes ambiguity and allows designers to answer questions on their own without interrupting senior designers with common questions.

Atlassian also designed custom graphics to display what the finished design should look like after following the design system guidelines.

This custom illustration shows the proper way to position headers, text, and button components. Small notes can be paired with these illustrations to explain the illustration.

Patterns must include the reusable components you came up with in step one. If they’re not being used, consider restructuring your visual identity system from step one.

To give you a better understanding of pattern combinations, here are Atlassian’s patterns: benefits modal, first impressions, forms, inline edit, messages, and spotlight.

Brand

Adding your brand mission, vision, values, and personality to the system is a huge plus! 

There might come a time where you forget what the messaging should sound like or the values that keep your audience engaged.

Fret no more - this page will save you from losing touch on your brand’s identity.

Atlassian includes a section on how to apply personality, mission, and promise to their work.

They provide a set of questions for their team to ask themselves to ensure the work they create is in line with brand expectations. This is a must-add in our book!

Foundations

For Atlassian, foundations include all their visual elements that make their design work look beautiful. This portion of their visual identity system includes accessibility, color, grids, iconography, illustrations, logos, and typography.

It’s important to add something similar to what is pictured above. Atlassian does a great job of displaying what to do and what not to do.

This is especially important to ensure consistency is accomplished across all platforms, channels, and your website. This section should cover your color palettes, icon sizes, and types, grid sizes, and any other visual aspects of your design system.

Before building your foundation in your visual identity system, we recommend you create a brand style guide, which is a set of rules and guidelines on logo usage, typography, illustration styles, and other essential design components. 

Need some inspiration? Check out how we created the Webstacks brand style guide.

Content

The content portion of their design system covers grammar, voice, tone, and language that should be used to best craft their messages. Similar to the brand component, it is an essential part of any design system. 

By implementing these grammar rules, writers will feel confident drafting new copy, and stakeholders will feel their product is being represented accurately across copy, formatting, language, and style.

Speed Up & Scale DesignOps with Atomic Design

Get a complete overview of the atomic design methodology and how it's used by creative teams to maintain brand consistency across the marketing site.

Get The Ultimate Guide to Atomic Design

Start Your Visual Identity System

In today's digital landscape, it is essential for any company to differentiate itself through branding, design memorable visuals, and market those visuals consistently.

This is best achieved through well-built visual identity systems.

Properly executed, you will a save a significant amount of time and resources - all while projecting a distinct and unified identity.

Looking for more assistance on developing your brand identity and visual identity system?

Check out our creative process here at Webstacks.