Design Systems

When creating a large software ecosystem, there are a lot of components making the whole. Many of those pieces are (or should be) the same. As a product or platform grows, and the team with it, it can be a struggle to maintain the design consistency that a top-tier user experience demands. Whether it’s due to a fast-moving project, inexperience, or enormous scale, complexity happens to the most well-intentioned organizations. This kind of design debt can create major headaches for designers, developers, and especially users; it’s also a significant cost to the business in terms of maintenance and missed opportunities.

Design systems — roughly aligned with style guides, pattern libraries, etc. — aim to minimize the complexity. As we explore the UI Design of an application, we work to build a consistent style guide that is easy to implement and makes usability standard, while keeping with the brand of the product.  This style guide becomes a reference tool for the entire product team, from design to development.

We begin building these style guides early with mood boards to provide a solid base of “personality” for the product or brand. Designers then make good use of Sketch symbols to expedite delivery & maximize time solving the big problems. Even in the earliest stages of a design project, a style guide enables designers to get to high-fidelity designs quickly without sacrificing the ability to iterate as the project progresses. InVision Inspect then translates these symbols for the product team to build out.

Design systems typically include:

• Font variations

• Hex color sets

• Component variations

• Animation guidelines

• Layout structures and conventions

• Padding and margin guidelines

• Element styles like buttons and containers

• Approved usage of styles

• Copywriting & voice samples

• Relationship to overall brand guidelines

• Style mistakes to avoid

As the product is in development or in a live production environment, cascading style sheets (CSS) or ReactJS components help to reference and maintain this style guide. If a style decision changes later in the product’s life, it is much easier now to change these styles throughout the application if the entire product team adheres to a consistent style guide.

Interested in cleaning up your app or establishing a solid style guide to get started?  Let’s set up a Strategy and Alignment session to kick off your next solution.