Design Systems Structure
Design System is an adaptable set of mediums, rules, and blueprints that help establish the regulations between collaborative, expandable teams and scalable product and application.
Design System supports designers, product management, and developers to have a common language during the implementation. It helps save time and manage massive product or application, and ensure that style, experience, and functions are consistent across.
Design System is not a rigid set of mediums. As stakeholders, we should keep it refined and aligned with the business objectives and leave the door open for any enhancement. This happens through collaborative work and involves many stakeholders, like content strategy, marketing, product managers, and many more that’s because design system will have an important role in each step of the creative process of product or service.
Design System Structure
We can’t separate the process of creating a design system on Design and Development Teams who will create and use it. Design System Structure is divided into three parts:
01- Design and Development teams
Improve the maturity of design teams and the work environment as well as highlighting the benefits of the design system and integrate that within the design process.
02- Designers and Developers tools
Tools like manage assets, monitor and establish a solid connection between the multidisciplinary team and assets.
03- Design System Assets
Design system assets is a combination of many parts like Principle Salesforce Design System (clarity, efficiency, consistency, and beauty), interaction rules, visual assets, UI pattern, UI motion, visual pattern, code component, and content strategy which we then document all these parts under style guides.
The Process of Building the Design System
First, we have to make sure we will not reinvent the wheel. We have to look inside the organization documents like a visual guideline and content strategy, annual report, HR documents to figure out what information is relevant and understand what we have to use and what not.
Step 1: We have to answer these questions: Do all companies need design system? What are the goals and impacts to build a design system? Companies have multiple products — we need to make sure products, services and application have the same tone?
Step 2: Elevate the level of maturity of the importance of design system between all stakeholders by conducting meetings and workshops to explain the benefits and impact that on all company’s sections.
Step 3: Conduct reviews covering both design and code of the current product, application and all touch-points (website, mobile apps, wearable apps, kiosk, etc.) then measure the impact on the user experience, performance, and efficacy of works. This kind of process usually takes time because many departments and stakeholders are involved in it. This step is important because we do planning to build the design system — what should be included and who should build it.
Step 4: Unify communication and management rules and tools between all design and development teams. This will establish a solid ground to build a design system and establish a strong methodology to apply for design system access on all products and apps.
Rules: Folders & Naming, Grid System, unite(px, pt, ), …
Design tools: SketchApp, Adobe XD, UxPin,….
Communication tools: Slack, Microsoft Skype or Teams
Management (Version control): Abstract, Atlassian
Storage and sharing tools: Google Drive, DropBox, Microsoft SharePoint
Documentation tools: Google Doc, JIRA
Prototyping tools: InVision, Axure RP, Flinto, Proto.io, Prototypr.io, Framer, Principle
Host code snippets: Github,
Step 5: Create a visual element representing the core components — elements like colors, typography, layout, iconography, imagery, and others
Example of the Design System
Google Material Design
MailChimp
Microsoft
IBM Design
Wrapping up and Advice
01- Should look at the quality of communication between different teams — who will involve in the creation and use of the design system.
02- Don’t start from scratch. We should look inside for any existing patterns.
03- Ensuring design system is achievable with your current development process.
04- Socializing the design system is essential to get adopted.
05- Get people onboard early for contribution for each stage of the process.
06- Merge agile methodology within the design system
07- Building process to ensure what you build is aligned with the business goals.
08- Identify tools and process and include within the design system’s documentation.
09- Keep it in mind that the Design system will take its own time.
Reference
Design Systems vs. Pattern Libraries vs. Style Guides — What’s the Difference?Abstract vs Kactus vs Plant: a guide of version control solutions for Sketch
Design Systems, Style Guides, and Pattern Libraries
http://findguidelin.es/
Design Systems (Smashing eBooks)
https://www.designsystems.com/
