跳到主要内容

关于设计系统你需要知道的一切

+$If you're working in any kind of digital design, you'll have heard the term 'design systems' by now. If you haven't quite figured them out yet, you've come to the right place. In this article, we'll define exactly what a design system is, the reasons for using one, and how to create one. On page 2, you'll find a deep-dive into the history of the web to find out where design systems came from.

+$What is a design system?

+$A design system is a single source of truth that designers and developers create, reference and develop together. It’s a matrix of rules comprised of a library of symbols – fonts, icons, colours, shapes, grids, animations, tone of voice or more – that carry different meanings, determined by their function and hierarchical relevance.

+$It’s essentially a living organism made of elements that evolve from fulfilling pre-existing requirements to newly defined ones as the product grows in complexity. These elements are translated into development-ready components that can be picked up and used immediately in a live environment.

+$Who defines a design system?

+$Designers and developers work closely together with an agile approach to establish the rules of a design system. Designers define all aspects of visual communication – UI, branding and user experience – while working with developers to transform those properties into coded components, by iterating them consistently until they perform technically and stylistically in a self-contained manner.

+$Why have a design system?

+$Though a design system is a foundational requirement for any digital products that scale, at its core are principles that apply to any design work. The most important aspect is to put in place a set of rules that, when repeated over and over again, will consistently return the same principles.

+$In the same way responsive design is considered a modular approach in terms of how blocks of content behave on a web page in different viewports, a design system follows an atomic approach by addressing each particular element that defines the properties of a component.

+$The purpose of setting up a system is having a library of tried and tested components that can be reused consistently and expected to perform each time on all product dimensions – style, branding, behaviour, function and delivery. The biggest advantage of a design system is to be able to prototype efficiently and iterate both design and code symbiotically in a journey towards a high-quality product.

+$How do I develop a design system?

+$Now let's take a look at the steps you might take to put together a design system for a digital product project.

+$01. Establish a clear product vision

+$First, you need to have a clear idea of the product you are developing. Here are a few essential questions to consider:

它有什么作用?

  • +$What is the purpose of your product?
  • +$What are the requirements for this product?
  • +$What sort of functionality will the product need in order to perform?

它是谁的?

  • +$Who is the audience for this product?
  • +$Does the user have any quirks that might affect how the product is received?
  • +$Why will the user engage with this product? What makes it unique?
  • +$Is the user familiar with similar products?
  • +$Is the product responding to an identified need or creating a new one?
  • +$Does it address accessibility?

+$Where will it live?

  • +$Is this product a website? A web app? An app? Something else?
  • +$Is it device agnostic?

+$Should it deliver the same experience cross-platform or focus on particular micro-experiences within specific contexts?

+$The purpose of a design system is to reduce complexity in development, by addressing known concerns as well as identifying new ones during the conception stage. It’s important to define the product mapping early on in the process, as it will help recognise potential hold-ups that can be avoided at the prototyping stage.

+$02. Work out your plan of attack

+$Secondly, you’ll need to assess the best approach. If you’re working on a new product, you’ll likely start with an MVP (minimum viable product), where the attention will be on validating functionality and learning users’ feedback. In those cases, it makes sense to use existing UI kits from established platforms, such as+$Google’s Material UI要么+$Apple’s UI kit

Google’s Material UI

+$Google’s Material UI is changing product development with its in-depth graphic exploration and open source code

+$If you’re past the MVP stage or creating a whole design system from scratch, your product mapping – which should include key aspects such as information architecture, a sitemap and user journeys – will inform you which basic functionality needs to be addressed first.

+$For example, if your product is an ecommerce app, what elements do you need to have throughout the user journey to perform a purchase – from the homepage through to product page, checkout and order confirmation? Is it vertical or horizontal navigation? What do CTAs look like: are they icons, text only, have a coloured background? What image ratios are you considering: portrait, square, landscape?

+$By addressing each element’s properties by hierarchical functionality, you’ll be able to lay solid foundations for progressive UI releases, thus building a consistently reliable system.

+$03. Choose the right tools

+$Thirdly, developing a product should always be an inclusive process that depends on all parties involved: designers, developers, product owner, client and users. Together, these individuals create an ecosystem, a testing ground that will shape the design system throughout the journey to the end product delivery.

+$As progress needs to be shared and, sometimes, worked on in real time, it’s important to choose the tools that best fit your workflow. Thankfully, we’re fairly spoilt for choice when it comes to+$design and prototyping tools

Design+Code

+$Design+Code is the place to learn if you’re a designer looking to prototype in code

+$There are currently platforms that cater for slightly different file-sharing goals. Sketch is considered a design standard; Adobe XD is gaining strides with its latest release; InVision is a solid platform as well as a valuable design resource and Figma is breaking ground by bringing together desired features. Alternatively, if you’re one of those designers who enjoys writing code in order to push your work, you’ll love Framer X. Need an extra hand? Check out+$Design+Code+$, one of the best learning resources out there.

+$Developing a design system is a collaborative approach that relies on principles of teamwork and transparency. It’s a commitment between teams willing to make mistakes and learn from them, discover new ways of doing things, innovate together and, all-in-all, just get a kick for a job well done because the product works and exceeds expectations. Which is the best feeling in the world.

+$Next page: the history of design systems



翻译字数超限