As your organization grows, you’ll likely need to evolve your brand and design too. Developing a design system will help you speed up the design process, eliminate inconsistencies, and reduce design debt across your whole organization. The InVision design system template gives you the tools you need to define your design principles, document components, and clarify rules and best practices for design, writing, and more. It’s the perfect starting point for any design system.
Hogyan használd a sablont (design system)?
Step 1. Define your design principles
Your design principles are the foundation of your design system: they are the values that guide you as you create new products, features, and functionality, and they interact to create your unique look and feel. Choose principles that are concrete, that reflect your organization’s unique point of view, and that designers can apply – using their expert discretion to resolve any tensions or conflicts.
Step 2. Describe your visual language
Once you have your design principles figured out, it’s time to move on to the elements of your visual language. These are things like your color palette, typography, sizing and spacing rules, and your icon and illustration libraries. For each design element, list the rules designers should apply and include a few “dos and don’ts” to demonstrate how the elements are used in practice.
Step 3. Write your writing rules
After you’re done with the visuals, it’s time to move on to words. Every organization has a different writing style and a different voice. Even conventions for capitalization, punctuation, and numbers can vary from one design team to another. Get your nitty-gritty writing rules down on the page, add brand terms to your lexicon, and create a cheat sheet at the top to answer common questions or remind the design team of important writing conventions.
Step 4. Build out best practices
You know what works and what doesn’t for your design team. In the next section, write down your best practices for things like accessibility, browser support, and mobile design. That way, designers have a nice little cheat sheet to help them craft tried-and-true designs that are both beautiful and inclusive.
Step 5. Document your components
Now it’s time to get into the weeds. Paste in a code snippet for each component in your design system and use the tables in this section to describe the ways it can be modified in different design contexts. This section is critical for ensuring that your designs are implemented correctly and consistently by the developers in your organization, so make sure you give it your full attention and time.
InVision is the digital product design platform used to make the world's best customer experiences.
Customer interview report
Turn customer interviews into insights with the customer interview report.
Lead Content Designer
Document components in your design system with this handy template.
Create a framework for answering critical business questions through design and testing.