Design Systems Sprint 1: The Interface Inventory

“A design system isn’t a project. It’s a product serving products.”

Some of the most important life advice I’ve ever received is that changing people is futile. Instead, we should inspire others to follow our lead. So let’s start with ourselves.

Start with yourself

What’s an Interface Inventory?

“…a comprehensive collection of the bits and pieces that make up your interface”.

Where to start an Interface Inventory

  • Elements — the smallest individual pieces of the interface which act as building blocks for components (e.g. buttons, form fields…)
  • Components — independent and repeatedly used pieces of the interface built out of elements (e.g. toolbar item, page loader)
  • Modules — full functionalities built out of components (e.g. toolbar, search)
  • Layout definitions — All of the above use core files (such as variables, icon font definitions etc.) to unify styling.
Modularity of UXPin Less files
  1. Compare. Compare pieces of the interface with their representation in code and identify logical chunks.
  2. List. List all the pieces of the interface in categories derived from the code environment. Add additional suggestions of categories where necessary.
  3. Note. Take notes of any inconsistencies between elements. If possible list classes and files for future reference.

The Inventory of Building Blocks

  • Building Blocks — the smallest, most general and most reusable pieces of the interface such as colors, typographic scales, grid definitions or icons.
  • UI Patterns — the pieces of the interface directly used to build experiences.
  • Rules — guidelines for implementing and growing a design system
The basic structure of a Design System

The Inventory of Icons

Little app that generates a list of icons from an icon font and shows mixin declaration from Less files

The Inventory of Patterns

The inventory of UXPin buttons
The inventory of UXPin form fields

Summary

The Interface Inventory is the source of truth about the status quo.

--

--

--

Design Tools Radical. CEO at UXPin — the most advanced code–based design tool out there: http://uxpin.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Plans Constructability Review: Why, When, and What?

Thinking Game Thinking — Part 1: The MVP Canvas

The cost of bad design

Understanding Customer Needs to Build Better Products

13 FREE Ways to Kickstart Your UI UX Career

Mural stating, “The Best Gift Is You!”

Using an Empathy Map to Settle Design Disputes

Imagine a world in which there is no time. Only images.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marcin Treder

Marcin Treder

Design Tools Radical. CEO at UXPin — the most advanced code–based design tool out there: http://uxpin.com

More from Medium

Learning the importance of a good Design

How to Build an Automotive HMI: Design Specifications (Part 2)

An overview of buttons in UI design.

EnerServ-Energy Management