What is a design system?
A design system is a reference guide that defines each component of a project insuring a consistent design. The term is usually applied to digital products but can be extended to a brand’s entire output. Designers and front-end developers are likely to be the primary users of a design system.
In most cases, a design system will be comprised of:
- Components: the elements used to create the website/app/experience (colors, typography, icons, etc.)
- Guide: Instructions for how to use the components – both technically and philosophically (size, placement, interactivity, purpose etc.). This should be as visual as possible.
- Shareable reference: A repository for the system, including assets, instructions, example and best practices.
While a UI library may be part of a design system, it is not one by itself. A design system must include the instructions for using the library.
Why create a design system?
Creating a design system for your project allows you to:
- Save time (& money): having a centralized resource for reusable components will avoid wasting time redesigning elements (a form component could be re-used for several projects).
- Create intuitive experiences: Design systems allow you to create projects that feel cohesive and display a unified design philosophy.
- Improve your collaborative work: A design system offers you and your team a shared vocabulary to work with.
Patterns & principles
Design systems can be broken down into two main components: patterns and principles.
While “components” refer specifically to individual elements (i.e: form, button etc.), the term “patterns” can also refer to a wider set of interactions (i.e: the account creation flow).
Most design systems include two types of patterns:
- Universal patterns are elements that exist on almost all websites/apps and that don’t need to be re-invented for the experience you are designing (i.e: text, buttons, forms, etc.)
- Specific patterns are elements that are designed for the specific interactions or aesthetic of your product (i.e: the set up screen of a bluetooth speaker app will likely want to refer to the physical object’s design).
Designing patterns out of context can be difficult (how will you design your button if you don’t know where it will be placed or its purpose?).Designing an entire page (including the button) and extracting the individual components for your design system after the fact is often a better workflow.
Most design systems include two types of principles:
- Universal principles are applicable to many other companies and products, but applies to you as well (i.e: accessibility – all websites should be responsive, including yours.)
- Specific principles are specifically relevant your product (i.e: Patagonia’s “Don’t cause Unnecessary Harm”principle highlights the companies sustainability statement).
Atomic design is a popular approach to design system. It uses the analogy of chemistry to outline the hierarchy of components in a system.
Paragraphs were written by Jack Strachan for UX Planet
Atoms: In chemistry atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. When we relate this to our design systems the atoms are very much the basic assets of our product. They are the foundational building blocks that comprise all our user interfaces such as type, labels, colours and spacing.
Molecules: Molecules are a group of atoms pieced together to take on new properties or to complete a function. In design systems, we can think of our molecules as our building blocks or ‘atoms’ that we are piecing together to form a functional element. Perhaps we are putting together an image header with a title label for a profile molecule or doing something more complex such as constructing a checkout function using atoms to form the molecule.
Organisms: Both atoms and molecules are simple functional forms in our design systems that can be reused across a product. Organisms are slightly more complex and form bigger chunks of our product. We can think of these organisms in our design systems as groups of molecules. Where atoms make up a molecule to form a search feature it can be combined with another molecule that forms the page navigation to make an organism — a complete page navigation with a search feature. These will be used as a distinct pattern across a product.
Documenting and sharing your design system
Your design system should be organized and easy to share. Using a Google Doc for the guide is a good starting point. Popular software for creating components includes Sketch and Adobe XD. When you share an XD file with collaborators, they will be alerted of any changes you made each time they open the project. Large companies often formalize their design system into a website, but this isn’t necessary for each project.
Using an existing system
While you can create your own design system, starting with an existing, well crafted system and customizing it is a great option. Companies such as Apple, Google, Shopify etc. offer free guides and UI kits for a variety of UX software.
Let’s take Google’s Material.io system as an example. It can be used in a variety of ways (just code, Sketch, Figma or XD). Since we’ll be mostly using XD for our UX work in this class let’s download there:
- Launch Adobe XD
- Go to File > Get UI Kits > Material Design
- Click on the download file for Adobe XD (Component Sticker Sheet for Adobe XD).
Once the file is open, you will see that it contains a lot of components for an array of devices. The guide for using these components can be found on the project’s website: https://material.io/design/ (i.e: if you want to see how the guidelines for using buttons, go to Components > Buttons and you will find examples and explanations).
Create a new Adobe XD file and add an artboard the size of the device you are designing for. You can copy and past components from the Material XD file onto the artboard and customize them (font, size, color etc.).
Food for thought
Here are a few examples of great design systems and other resources:
- New York City Transit Authority Graphics Standards Manual (1970) – digitized book and short video introduction
- Apple’s Design System (Human Interface Guidelines – HIG) – Guidelines for designing software/apps for apple devices.
- Google’s Material Design – Used by Google for all their products (i.e: Google maps, YouTube), but also by other designers who want to create elegant interfaces (not just for Google devices). Open-sourced. Watch this video introduction.
“Laying the Foundation for the NPR Design System” – A case study describing the process of creating a design system for NPR.
Mfumo wa kubuni ni nini? Mfumo wa kubuni ni mwongozo wa kumbukumbu ambayo hufafanua kila sehemu ya mradi kuhakikisha kubuni thabiti. Neno hilo kwa kawaida hutumiwa kwa bidhaa za dijiti lakini linaweza kupanuliwa kwa pato lote la chapa. Wabunifu na watengenezaji wa mbele ya mwisho ni uwezekano wa kuwa watumiaji wa msingi wa mfumo wa kubuni. Kwa kawaida, mfumo wa kubuni utakuwa na: - Vipengele: vipengele vilivyotumiwa kuunda tovuti, programu, uzoefu (rangi, typography, icons, nk). - Mwongozo: Maagizo ya jinsi ya kutumia vipengele <unk> wote kiufundi na kifalsafa (ukubwa, uwekaji, interactivity, kusudi nk). Hii inapaswa kuwa kama visual iwezekanavyo. - Sharable kumbukumbu: hazina kwa ajili ya mfumo, ikiwa ni pamoja na mali, maelekezo, mfano na mazoea bora. Wakati UI maktaba inaweza kuwa sehemu ya mfumo wa kubuni, si moja kwa yenyewe. mfumo wa kubuni lazima ni pamoja na maelekezo kwa ajili ya kutumia maktaba. Kwa nini kuunda mfumo wa kubuni? Kuunda mfumo wa kubuni kwa ajili ya mradi wako inaruhusu wewe: - Kuokoa muda (na fedha): kuwa na rasilimali ya kati kwa ajili ya vipengele reusable itazuia kupoteza muda redesigning vipengele (a fomu kipengele inaweza kutumika tena kwa ajili ya miradi kadhaa). - Kuunda uzoefu intuitive: Mifumo ya kubuni kuruhusu kujenga miradi ambayo kujisikia cohesive na kuonyesha falsafa ya kubuni umoja. - Kuboresha kazi yako ya ushirikiano: Mfumo wa kubuni hutoa wewe na timu yako msamiati wa pamoja wa kufanya kazi nayo. Mifumo ya kubuni inaweza kuvunjwa katika vipengele viwili kuu: mifumo na kanuni. Wakati <unk>vikundi<unk> rejea hasa kwa vipengele binafsi (yaani: fomu, kifungo nk. ), neno "mfano" pia inaweza kurejelea seti pana ya mwingiliano (yaani: mtiririko wa uundaji wa akaunti). Mifumo mingi ya kubuni ni pamoja na aina mbili za mifumo: - Universal mifumo ni vipengele kwamba zipo juu ya karibu tovuti zote / programu na kwamba hawana haja ya kuwa re-invented kwa uzoefu wewe ni kubuni (yaani: maandishi, vifungo, fomu, nk.) - Mifumo maalum ni vipengele ambayo ni iliyoundwa kwa ajili ya maingiliano maalum au aesthetic ya bidhaa yako (yaani: kuweka screen ya bluetooth msemaji programu pengine unataka rejea kwa muundo wa kitu kimwili). Kubuni mifumo nje ya muktadha inaweza kuwa ngumu (jinsi gani wewe kubuni kifungo yako kama hujui ambapo itakuwa kuwekwa au kusudi lake? Kubuni ukurasa mzima (ikiwa ni pamoja na kifungo) na kutoa vipengele vya mtu binafsi kwa ajili ya mfumo wako wa kubuni baada ya ukweli ni mara nyingi workflow bora. Mifumo mingi ya kubuni ni pamoja na aina mbili za kanuni: - kanuni za ulimwengu zinatumika kwa makampuni mengine mengi na bidhaa, lakini zinatumika kwa wewe pia (yaani: upatikanaji <unk> tovuti zote zinapaswa kujibu, ikiwa ni pamoja na yako.) - Kanuni maalum ni maalum muhimu bidhaa yako (yaani: Patagonia ya <unk>Don<unk>t kusababisha madhara yasiyo ya lazima<unk> kanuni highlights kampuni ya taarifa ya uendelevu). Ubunifu wa atomu ni mbinu maarufu ya kubuni mfumo. Inatumia mfano wa kemia kuelezea utaratibu wa vipengele katika mfumo. Jack Strachan, mwanzilishi wa UX Planet Atoms, aliandika hivi: Katika kemia, atomu ni vipande vya msingi vya nyenzo zote. Kila elementi ya kemikali ina mali tofauti, na haziwezi kuvunjwa zaidi bila kupoteza maana yao. Tunapohusiana na mfumo wetu wa kubuni, atomu ni mali ya msingi ya bidhaa yetu. Ni msingi wa ujenzi wa vitalu ambavyo vinajumuisha interfaces zetu zote za mtumiaji kama vile aina, lebo, rangi na nafasi. Molekuli ni kundi la atomu zilizokusanywa pamoja ili kupata sifa mpya au kukamilisha kazi fulani. Katika mifumo ya kubuni, tunaweza kufikiria molekuli zetu kama vitalu vyetu vya ujenzi au "atomu" ambazo tunazunganisha pamoja ili kuunda kipengele cha kazi. Labda sisi ni kuweka pamoja picha header na jina la kichwa kwa molekuli profile au kufanya kitu ngumu zaidi kama vile kujenga kazi ya malipo kutumia atomu kuunda molekuli. Atomu na molekuli ni aina ya kazi rahisi katika mifumo yetu ya kubuni ambayo inaweza kutumika tena katika bidhaa. Viumbe ni tata zaidi na hufanyiza vipande vikubwa zaidi vya bidhaa yetu. Tunaweza kufikiria viumbe hawa katika mifumo yetu ya kubuni kama makundi ya molekuli. Ambapo atomu kuunda molekuli kuunda kipengele cha utafutaji inaweza kuunganishwa na molekuli nyingine ambayo fomu ukurasa urambazaji kufanya kiumbe <unk> ukurasa kamili urambazaji na kipengele cha utafutaji. Hizi zitatumika kama muundo tofauti katika bidhaa. Kuandika na kushiriki mfumo wako wa kubuni: Mfumo wako wa kubuni unapaswa kuwa na utaratibu na rahisi kushiriki. Kutumia Google Doc kwa mwongozo ni hatua nzuri ya kuanza. Programu maarufu kwa ajili ya kujenga vipengele ni pamoja na Sketch na Adobe XD. Wakati unashiriki faili ya xd na washirika, watahadhariwa juu ya mabadiliko yoyote uliyofanya kila wakati wanafungua mradi. Kampuni kubwa mara nyingi kuidhinisha mfumo wao wa kubuni katika tovuti, lakini hii si muhimu kwa kila mradi. Kutumia mfumo uliopo Wakati unaweza kuunda mfumo wako wa kubuni, kuanzia na mfumo uliopo, ulioundwa vizuri na kuubadilisha ni chaguo kubwa. Kampuni kama vile Apple, Google, Shopify na kadhalika. Kwa hivyo, tunatoa miongozo ya bure na vifaa vya UI kwa programu mbalimbali za UX. Hebu tuchukue mfumo wa Google wa Material.io kama mfano. Inaweza kutumika katika njia mbalimbali (tu code, Sketch, Figma au XD). Tangu sisi itakuwa hasa kutumia XD kwa ajili ya kazi yetu UX katika darasa hili hebu kupakua huko: - Kuanzisha Adobe XD - Nenda kwa faili > Kupata UI Kits > Material Design - Bonyeza faili ya kupakua kwa Adobe XD (Component Sticker Sheet kwa Adobe XD). Mara baada ya faili ni wazi, utaona kwamba ina mengi ya vipengele kwa safu ya vifaa. Mwongozo wa kutumia viungo hivi unaweza kupatikana kwenye tovuti ya mradi: https: material.iodesign.org (yaani: kama unataka kuona jinsi ya kutumia vifungo, kwenda viungo > vifungo na utapata mifano na maelezo). Kuunda faili mpya Adobe XD na kuongeza artboard ukubwa wa kifaa wewe ni kubuni kwa. Unaweza kunakili na pasting vipengele kutoka Material XD faili juu ya artboard na customize yao (font, ukubwa, rangi nk). Mfano wa programu hii ni New York City Transit Authority Graphics Standards Manual (NYTAMS) ya 1970, ambayo inatoa mwongozo wa programu ya Apple kwa ajili ya vifaa vya Apple. - Google's Material Design  Inatumiwa na Google kwa bidhaa zao zote (yaani: Google ramani, YouTube), lakini pia na wabunifu wengine ambao wanataka kuunda interfaces kifahari (si tu kwa ajili ya vifaa vya Google). Chanzo wazi. Tazama video hii ya utangulizi. "Kuweka msingi wa mfumo wa muundo wa NPR: ""Utafiti wa kesi unaoelezea mchakato wa kuunda mfumo wa muundo wa NPR."