Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Visual Inventory Audit

One of the first steps to establishing a design system is creating something called a visual inventory or interface inventory.

An interface inventory is a categorized collection of every piece of design that makes up our digital product. They help us capture the status quo of every style, such as colors, typography, spacing, borders and components of a user interface.

There are many benefits for creating one:

  1. They help us gain clarity regarding which design components make up a digital product.
  2. Help us discover and analyze unintentional inconsistencies between them.
  3. Is a conversation starter for our team on how to refactor design with a pattern-based approach.
  4. It serves as a blueprint for a pattern library.
  5. And last but not least, it is an aid to communicate and gain buy-in from stakeholders to establish a design system.

In this lesson, we will take a look at when and how to create the visual inventory as well as what usually goes into the inventory.

When should you start?

An interface inventory can be done at any phase of the product development process. Some teams start when kicking off a redesign or if they are struggling with confusion due to inconsistencies. However, there also may be no perfect time to start. If you and your team don’t have a clear overview of your digital design, use that as a sign to get started with an interface inventory.

How To Create The Visual Inventory

Here are the basic steps to creating an interface inventory:

  1. Crack open your project. Get your screenshot fingers ready.
  2. Set up a blank template where you’ll dump and categorize the components of the interface. I’d recommend using a program like Keynote or PowerPoint, as you really just need a category title and a place to dump screenshots.
  3. Start screenshotting. Now for the fun/tedious part. Start grabbing screenshots of the ingredients of your interface. Grab headings, text fields, radio buttons, carousels, accordions, tabs, images, icons, video players, graphs, etc, etc. Note that you’re not trying to capture every single instance of a component, but rather uncover distinct treatments of a component (like a button with a bevel and right-facing caret vs another without any bevel/caret).
  4. Categorize screenshots. You can do this as you go or after your screenshotting session, but the goal is to be able to view all the various treatments of a particular molecule side by side.

Components of A Visual Inventory

Now that you understand the basic process of conducting the visual inventory audit, let’s look at what usually goes into the inventory so you know what to look for.

A design system can generally be divided into 3 hierarchies. First, there is the “building block” elements such as color palettes, typography scales, grid systems, icons and other design assets. These belong to the most basic level.

Then we expand to UI patterns, which includes templates that provide the layout for the entire page, modules that provide layouts for certain sections, components that are groups of elements and finally elements that are individual, such as a button, a form field etc.

Finally, we rise up to the highest level, which is the overall guiding design principles, editorial guidelines for copy and implementation guidelines for how the design system should be used.

Based on this structure, we can start putting together our inventory to serve the system.

1. Create the Patterns Inventory

Take screenshots of design patterns or collect design patterns from design projects, to form an inventory of all the different versions of patterns.

Start by collecting different examples of patterns from your product(s). Either take screenshots and paste them into one place – for example your presentation tool, or your prototyping tool or collect project files and take patterns directly from there.

Check the frontend code and/or talk to developers about the architectural

approach used across the codebase. Try to identify if the frontend architecture is modular and if you can use it to categorize patterns in the inventory.

Quite often frontend developers work using modular architecture that can be used to organize patterns in the design system. Approach with care and a critical mindset, but definitely do not ignore what already exists.

If modular frontend architecture exists, categorize your patterns in the inventory using categories from the architecture.

Take patterns collected from products and group them into categories. For example, if the lowest level of the frontend architecture is an element then collect all the buttons and place them under a category ‘element button’. You might also want to document links to all the styling files associated with a given element. Not only will you communicate with frontend developers in the same language, you’re also showing the full scope of the inconsistencies.

if there is no modular frontend architecture, categorize patterns in the inventory

Even if there’s no modular fronted architecture in your ecosystem, you have to categorize all the patterns collected in the inventory. You don’t have to make the decision about the overall architecture of your design system just yet. Simply find the common categories for elements (buttons, form fields, sign-up forms…), so the team and stakeholders can quickly notice where the inconsistencies exist.

2. Create the Colors Inventory

A typical source of design inconsistency is the set of colors used across the product portfolio. For example, the inventorization of colors at this organization showed a massive redundancy slowing down the development process. 116 colors variables with 62 shades of gray were used before the emergence of its design system.

Collecting the variables through screenshots and asking developers to identify them from codes will provide us with the tools to consolidate them when we streamline the design system.

Additionally, taking note of the number of places where a particular color appears is also important.

3. Create the Typography Inventory

In a complex project, typography can quickly get out of hand. Lack of consistent typographic scale used across the project makes the information architecture convoluted and hard to understand for users, while it also increases the cost of product maintenance due to fragmentation of code. By creating inventory for text styles, you show your team and stakeholders where styles become inconsistent.

  • Walk through the UI and check all the text styles through a browser console. You can ask the developer’s help for this.
  • Take notes of any inconsistencies of text styles in one project.
  • Form a typographic scale by ordering text styles in the order of the informational importance (from the biggest level of heading to the smallest level of text). Create multiple scales if necessary.

4. Create the Icons Inventory

Icons provide the necessary context for user experience and speed up the recognition of key actions in most of the interfaces. Inconsistent usage of icons can lead to extreme confusion of users and increase the maintenance cost. By creating an inventory of icons, you can help your team and stakeholders understand the pain of not having a design system in place.

Identify all the icon libraries used across the product. Mark inconsistencies across the icons (e.g. two icons from different families used in one UI, two similar icons assigned to different actions, two different icons assigned to the same action etc.)

Check if there are different ways of implementing icons across the product portfolio

There are multiple ways to use icons. Inline SVGs, SVGs as data-urls, icon fonts – talk to the development team, or browse through the code to understand which methods are used in your design and development ecosystem. If different methods are in use, it’s worth taking a note since this is likely to increase inconsistencies and further slow down the software development process. You can learn about different methods of implementing icons and their efficiency, here.

5. Create the Space Inventory

Space is the key ingredient of any UI and designers and developers have to manage it efficiently. Add to your inventory different kinds of grids used across the products and perhaps also dive deep into paddings in the containers to understand any inconsistencies. List and document grid systems used across the product portfolio (if there are any).

Scroll to Top