Download

Check out our new Blockchain Marketing Campaign Template: Download Template

Chat

The Designer’s Quickstart Guide to Visual Identity Systems

Jun 28th, 20216 minutes

Eric Izazaga

Marketing Coordinator

You’d expect that any company with an internet presence would have a set of clearly defined rules for creating consistent designs, product messaging, and branded sales materials. Unfortunately, many times that’s not 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 how brands can create a stunning visual identity system that frees up designers and production artists to focus on what they do best: create!

What is a Visual Identity System?

A library, in the physical sense, is a building that houses collections of books, magazines,  and other forms of print and physical copies of digital media that are available to anyone. Visual identity systems are like libraries. Visual identity systems are a collection of design software, templates, color palettes, type kits, icons, logos, and files that are usually hosted in the cloud for design departments to access at any time.

How Do Designers Benefit from Visual Identity Systems?

A visual identity system is a single source of truth for design and development teams, which, in our decentralized world of remote work, is becoming increasingly important.   When done correctly, design 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. Now let’s explore what exactly a visual ID system includes.

Visual Identity System Example

visual identity system, also known as a design system, is a repository of reusable components with clear usage guidelines, shared among designers and developers. Unlike a library, an identity system showcases how to implement existing components to avoid inconsistencies. In addition to design components, systems can also have more technical aids like reusable code snippets for developers.

Above is an image of a design system for a website to give you an idea of how flexible you can be when creating design systems for your team.  Notice that each section is labeled, letting any new designer or developer on the project know what each design component is used for. You can even include components that show how your website or app should look across multiple devices to ensure you’re following the responsive design framework.  

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. Having 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, pattern, brand, foundations, and content - Atlassian’s design system is a perfect example to which design departments should aspire.

Component

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.

Get Started on your Design System

So where should you get started? 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.  Visual identity systems will solve a lot of problems for your team. More notably, it will save you from having to send multiple messages to stakeholders to get the “okay” on new design work - this is how you save time and resources with a holistic approach to design.

Marketing-Site

Webstacks Product Teams

Webstacks provides world-class product teams to help high-growth technology companies streamline their web operations, boost revenue, and substentially elevate the their web presence.

Get started
Advice delivered straight to your inbox.
Loading...