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.