Face—Design System 0→1→∞
01 Project Brief
Model:
B2B
Timeline:
2018–now
My impact:
[Product Design], [Requirements Documentation]
Live View
The design system of the TrendTech team, which we use for all products
A framework for creating interfaces
02 Challenges
It’s important to speak the same language with front-end development and be synchronized, manage variability, and incorporate it into the design process, and not answer 90% of questions about mechanics, logic, and component behavior—all in the documentation.
Create a component library, define a set of parameters for each component, and the variability of these parameters
Document all used states and mechanics
Place business components (organisms) in the library for centralized management
Challenge #1: Create a component library, define a set of parameters for each component, and the variability of these parameters
A component is a set of parameters and their variability.
02-1 Variability of parameters
Each component has a set of parameters, a list of possible values for these parameters, and a default value, so you can influence the entire product through configuration.
Challenge #2: Document all used states and mechanics
If you’ve answered the same question twice—describe the pattern and refer to the document, or better yet, include it in the front-end developer onboarding.
02-2 Pattern library and editorial policy
In addition to mechanics and states, there are always many abbreviations, designations, and formulations that should be added to the editorial policy; this document is constantly updated.
In addition to mechanics and states, there are always many abbreviations, designations, and formulations that should be added to the editorial policy; this document is constantly updated.
Challenge #3: Place business components (organisms) in the library for centralized management
How to implement a complete product redesign in 1 day?
02-3 Library of organisms
If your product is 5+ years old, you have a whole zoo of similar components that can be brought to a unified behavior. Then you can influence this component throughout the product if needed.
More Project’s:
