设计 Systems: How to Make Sure Yours is Realistic for Your Organization

什么是设计系统 

设计 System, Components Library Illustrations.

设计 systems have many definitions, 但是用最简单的方式, it is a set of deliverables that are composed of both tangible and intangible elements.

  • 有形的: patterns, components, tools for 设计ers and developers, style guidelines.
  • 不记名的: brand value, mindset, shared values and beliefs.

The point of a 设计 system is to help facilitate the work of the creative team (including 设计ers and developers); therefore, the system must work for those who will use it (the team). The goal is to provide 设计 languages that enable knowledge to be easily transferred from one team to another. 

Most 设计 systems usually contain both style guides and pattern libraries.

  • 风格指南: focus on the use of graphic styles (colour, fonts, illustrations). 
  • 模式库: focuses on the use and integration of functional components. 

设计 systems encompass the general knowledge shared between company departments (such as 设计ers and developers). 设计 systems provide solutions to 设计 problems that various teams regularly face through the use of 设计 patterns that smooth out the entire 设计 and development process. 

The Stages of a 设计 System 

Creating a 设计 system is a long process that can be broken down into five main stages, 正如 系统成熟度指标, created by Marcelo Somers and John Gully. 

阶段1:不一致 

  • 没有适当的设计系统.
  • The organization has not yet attempted to unify a single UI paradigm. 

阶段2:静态 

  • PDF or Wiki of brand guidelines is established.
  • 这个阶段 typically takes place when organizations hire an outside agency for their branding work. The agency will deliver a PDF which the organization will use as a guideline for every future application they build. 然而, this strategy can be problematic because the branding work is static and non-evolving, meaning it is unable to fulfill the longterm needs of a growing company/organization. 

阶段3:手动 

  • UI-kit and component-library with code examples are established.
  • 这个阶段 reflects some reality of the application you are building as your pattern libraries can showcase some live examples and snippets of code that developers will use in the future. 
  • 这个阶段, 然而, is still just a form of documentation that must be manually updated to ensure synchronicity with the production of applications. 

阶段4:自动 

  • Component-library is automatically compiled into the code of the website. 
  • Creating an automatic pattern library requires the coordination of the whole organization, as multiple applications will be using the same codebase. If changes need to be made to the codebase, it will likely have implications on all the applications that use it. 
  • This is the stage where the manual documentation of stage 3 becomes automated to sync with the production site. For this to happen, the following requirements of an automatic 设计 system must be fulfilled:
  1. The pattern library and production applications must both have access to the same UI code. 
  2. As part of your application’s build process, the UI code must be downloaded from a remote location. 
  3. UI code must be versioned so various applications can be tied down to the 设计 system at different stages.
  4. Live examples in the UI code must be automatically updated with new changes. 

第五阶段:管理 

  • The pattern library process is completely integrated into your organization. 

Creating a 设计 System that fit your organization

When creating a new 设计 system, many look to the top 设计 systems currently available, 比如谷歌设计, Shopify, 苹果, 等. What many fail to realize is that the 设计 system used by the largest tech companies are often out of reach for smaller-scale companies, simply because companies like Google and 苹果 have a nearly unlimited amount of resources (money, time, maintenance team) to pool into their 设计 systems. While these systems are impressive, they are often not realistic for an average-sized company, 也不是必须的. 

The good news is that you don't need a complex system to