Basic about UI design system
When I worked at Atlassian as product designer or Arimo as UI designer, I find that the design system plays a big part to accelerate the iteration process which mostly look like (or nearly like) this :
and the team I used to work looks like this
If you have learned about Lean process, you can find the role of UI designer is not significant at the early stage of the product. But sooner or later, after dozen of iterations , hundreds of features came up, you just realized how ugly your product. Those are design debts. That time you may beg for a janitor who can clean up design debt smoothly and make the interface delightful ( or sexy ).
Keep in mind that, the UI designer you are hiring will not only “decorate” the interface but also create the sustainable design system. Why we need the “SYSTEM”? because it will be the guideline for anything appears to user, will be a shortcut for developers to develop features without design but still keep the overall interface consistent ( yes they can if they have design mindset ),… So with the UI design system, everyone in team will be on the same page.
Building a new design system is a way. If you have no clue, here is the structure of UI design system:
Everything starts with a reason, the UI design system as well.
UI Design principles:
- To build the principles, you have to understand deeply about your user and mission of your product. You should do a research of who is the user, their nature, habits, then narrow down their main problems that the product solves,… These research will be the backbone for any further decision on design principle or language whatever the change in content ( Thanks Phowr for this additional idea )
- This task cannot be done in silo. You need a team contains anyone who deeply has wisdom of the company and users like CEO, CMO, founders even devs. Why devs? because they understand the ecosystem of the product ( main product, side plug-in, third-party-developed-products,… ) so designer will have a better vision of what he/she going to build.
- Gather every one in a room and brainstorm, choose unique key points. Try to visual the values or terms as much as possible. Try to shorten the principles as keywords then explain it in 1 or 2 sentences.
- UI design principles have a deep connection with product design principles. OR they can be 1.
- Don’t need to finish this step to start building Design language, you can set a few principles and move on. Those principles can be iterated. But first, let all guys in the room agree with a few draft-principles.
Design language
- From design principles, designers start exploring the foundation : typography, colors scheme, spacing, voice and tone, illustrations. The fun thing is that you usually get your hand dirty before settling down the language.
- Try to gather all the old and current, even potential components and apply explorations on. ( there will be blood and war, and the principles will be your savior )
- Again, this will be a lot of explorations and iterations, we usually choose the option which fit the current product most.
Components and stuff
- In real product, no component stands alone on the white page. Like parts on the body, they have their own functions and nature. So the way we build UI components can be very organic: start with atom, end with ecosystem.
- One component must be defined as what is it, where it should place, how it should be used, transition, interaction, edge cases, usage limit, …
- UI designer should understand UI components most and spread the knowledge through the team by building the guideline document.
The outcomes of the whole process is various. They are for designer, developers or even marketer to use. We used to call it design artifacts. They should be stored in one easy place like dropbox, drives and have their owner to maintain and upgrade.
Final thought:
A good UI design system should help boost up the development speed that the team no need UI designer.
References:
