Sketches allow us to move fast, discuss, and validate multiple ideas quickly without fully committing to them and without significant cost or investment.
At Crema, we are in the business of people and we believe creativity and innovation can impact the world for good.
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.