Read the translation version: mp.weixin.qq.com/s/zF_V7iHam… Many thanks for the C270 great translation
The book purchase address: www.smashingmagazine.com/printed-boo…
The project I participated in during the internship and the graduation project were the driver, Design and implementation of component library, which required the cooperation of Design, Android and iOS. However, I did not understand many concepts related to Design, so I found the Design System to read in April this year. In this way, I want to understand the exploration and cognition of the design system of foreign design industry, so as to better deal with the problems encountered in the work.
I have learned a lot after reading, so I will make a learning record of the knowledge and concepts. This chapter is from chapter 1 to Chapter 3, and I will update the subsequent learning record.
To make it easier to understand and more applicable to the scenarios I’m using, the nouns in the book have been consistently modified:
- Design Patterns -> Design elements
- Functional Patterns -> Functional elements
- Perceptual patterns -> Perceptual elements
- Design Patterns Library -> UI Component Library (a generalized “UI component library” includes not only functional design elements such as “components”, but also perceptual design elements such as “styles”)
- Modularization -> componentization
- Engineer -> Developer
1. Design system
1. Design system
“Design system” : a series of interrelated, organized design elements and practices serving the design of digital products.
- “Design element” : any reusable interface component, including buttons, text boxes, ICONS, color schemes, fonts, and reusable functional flows and interactions
- “Practice” : The process of creating, refining, using, and sharing these elements within the team. The goal of the design system: to improve the cost effectiveness of the design process through a series of interrelated design elements and practices, and ultimately to promote the realization of product objectives.
2. Design elements (core and cornerstone of the design system)
Type of design element
- “Functional element” : the “physical, executable part” of a design element determined by the core function of a product and its domain
- “Perceptual elements” : design elements that are determined by the product’s temperament (or brand image) and further shape the perception that the product brings to people. “descriptive”
(This includes styles, text styles, color schemes, icon styles, Spaces and layouts, specific shapes, animations, sound effects, etc.)
Without perceptual design elements, it would be difficult to identify the brands of products in the same domain and with similar functions.
“Design language” : a series of interrelated design elements collectively define the design language of the product interface.
“Design elements that can be clearly defined, described, and reused” are needed for design and development efforts to be proactive and for design and development communication to be efficient. It is:
- A standard that can be implemented and reused
- A systematic design thinking mode
- Reuse capability
- Avoid designers to focus too much on the design elements themselves, and more energy for the design needs of thinking
- Avoid the developer too much energy on the interface element style adjustment, and more energy on the implementation of the business function
3. Collaborative language
Language is the foundation of collaboration. The team should discuss, review, and validate the working language that everyone needs to use on a consistent basis before entering the actual work process.
The use of “working language”
- Describe the requirements concept from the high level
- Expressions used in everyday design decision discussions
Based on this, the naming of design elements and related documents is consistent across the team. Not only should the naming be defined, but also the use and cognition of design elements should be described and unified in detail. Therefore, an effective way to extract and share collaboration is needed: UI component libraries.
4. UI component library
UI Component Library: A typical tool for collecting, organizing, and sharing design patterns, including prescriptive instructions on how to use design principles and elements
- The history of the UI component library
Brand Identity Document Extension -> Interface Design Patterns -> UI Component Library Static PDF -> Dynamic “code base”
- Limitations of the UI component library
Component library ≠ design system. Component library is only a tool to construct efficient design system. It cannot guarantee the quality of design output, but it can help fix problems.
Component libraries can’t fix “bad” designs: design problems with components themselves, misuse of components…
Collaboration is the cornerstone of a component library. It is interpretation and communication within the team to ensure that everyone is on the same page. It is these interpretations and communication that determine the long-term usefulness of a component library.
Component libraries do not constrain creativity, they only reflect the characteristics of the design system itself. If the design system is more inclusive of creative experimentation, then component libraries can also show this, making creative work easier.
It is necessary to integrate component libraries and practice methods in a unified systematic mechanism, based on a solid design language, component libraries can truly become efficient design collaboration tools. Otherwise, it will just be a set of scattered components.
5. How to define the effectiveness of the design system
It is judged by observing how effectively its components work together to achieve product objectives
- A unified goal
In an efficient system, the subsystems are highly interconnected and have the same goals: the design logic is embodied in the architecture of the front-end implementation, design elements are subject to specifications, and design language characteristics are clearly represented in the design solution, code, and UI component libraries. Harmony is everywhere in the way such systems operate, including efficient functional processes and a consistent user experience.
6. Systematic design thinking mode
- Analyze the product: target users, core objectives of the product, product temperament
- Develop design principles: Make every design decision based on principles
- Key behavior -> Functional design elements
- Visual Styles -> Perceptual design elements
- Unified Cooperative Language
2. Design principles
1. What are the characteristics of effective design principles
Good design principles are unique and encourage designers to find ways to think.
- Details can be tested: based on the specific product context to do detailed
- Practical: the adjective is verbalized, the perceptual cognition is indexed, and the examples are used to interpret “simplicity” -> “remove unnecessary content”
- Clear point of view: Explain priorities and balance in the face of conflicting elements
- Easy to remember
- Repetition and emphasis
- Control the number of design principles (3-5)
Eg. Four design principles of Airbnb: “unity”, “universal”, “graphics” and “communication”;
TUNE rules for Spotify: Tone, Usable, Necessary, Emotive (pleasing to the eye, easy to use, Necessary, emotional)
How do you define design principles
- Start with the goal: Design principles must be consistent with the product’s goal and contribute to the expression of the product’s character
Eg. TED product goal “To convey the idea far and wide.” -> Design principle “Pursue lasting application, not blindly following the cutting edge”
- Seek input from multiple sources: define a team, integrate cognitive feedback from both old and new employees
- Focus on the target audience: Identify the target audience and audience for the design principles
- Test and Iterate
Design decisions are shaped by design principles, which in turn drive change in the former, requiring constant testing, validation, and revision. Integrate the applicability assessment of design principles into the design review, and continuously consider whether the design principles can keep fit with the current product development stage; If not, iterate over the design principles.
3. From design principles to design elements
- Principles determine the selection and application of design elements
- Design elements are “words” and design principles are “grammar”
- The iteration of elements also affects the evolution of principles in reverse
Functional design elements
Functional design elements can be simple and independent, or they can be combined into more complex elements.
Key behavioral and functional design elements
Design elements are the embodiment of interface behavior logic, so it is necessary to ensure that the product objectives and key behaviors they carry are relatively stable, and their appearance and characteristics at the interaction level can be slightly changed.
2. How to define functional design elements
Key: Understand the important relationships between functional elements and design goals and key behaviors
- Create a map of design elements: list them at different stages of the user experience
- Perform an interface inventory: Summarize different scenarios for unified components (needed every few months)
- Understanding design elements in terms of “behavior” : “What it is” -> “What it does”
Coupling the presentation with the content type results in context constraints
Eg. “Course banner” -> “Promotion Content”
- Sorting out the information architecture: elements contained in a single component, judging the hierarchy and whether it is an optional presentation element -> developers build a framework more clearly
- Measure the weight ordering of similar elements and describe the rules for their use
- Use content as a variable: Start at the goal level, focusing on the definition and implementation of the design goal, rather than designing specific content
To Be Continue~
Welcome to call (no one you wake up