Dizajn sistem lahko podjetju prinese številne pozitivne učinke; prihranek denarja, prihranek časa, produkti so hitreje na trgu in pri izdelavi produkta se zgodi manj oblikovalskih napak. Dizajn sistem je tako smiselno vzpostaviti čim prej. 

Uvedba dizajn sistema lahko podjetju prihrani ogromno stroškov, ker je manj programiranja in oblikovanja, pravi Romina Kavčič, oblikovalska strateginja (BirdBuddy), ki je v okviru DMS Taktika predstavila osnove dizajn sistema. 

Ko imamo vse komponente naše znamke zbrane na enem mestu, v centralni knjižnici, lahko vsi zaposleni hitreje pridejo do oblikovalskih elementov, kode, navodil za pisanje … S tem prihranimo ogromno časa, produkte hitreje sestavljamo in tako tudi hitreje pošljemo na trg. Obenem s tem hitreje pridemo do prototipov za testiranje.

Osnove dizajn sistema 

Že samo tipografija, barve in stil ikon določajo karakter znamke. Dizajn sistem sestavljajo:  

• Znamka: logotip, barve, vzorci, fonti, tekst, ton, v katerem komuniciramo z javnostjo, načela oblikovanja - kakšni smo mi kot podjetje.
• Tisk: predloge za tisk, t. i. »print templates«, npr. če oblikujete revije, so predloge na voljo vsem oblikovalcem.
• Digitalni elementi: dodamo vse oglase in pravila, kako se oglasi izdelujejo, vse osnove dizajna (t. i. »UI design tokens«), iz katerih izhajamo in na njihovi podlagi gradimo produkte, prehod med kanali pri več kanalih.
• Animacije: če uporabljamo animacije, je prav, da pravila zapišemo tudi v dizajn sistem.
• Platforma: izkušnjo aplikacije ponovimo na vseh platformah (iOS, Android, desktop).
• Spletne strani
• Koda: Za vsako komponento v dizajn sistem dodamo tudi kodo, ki jo potem vsak programer lahko enostavno skopira in uporabi v novi aplikaciji, spletni strani ...
• Dokumentacija: dokumentacija dodatno razlaga vsako področje in omogoča, da vsak razume postopke in uporabo elementov. 

‍

Člani DMS si lahko posnetek predavanja ponovno ogledate v DMS Labu.

‍

Dve teoriji o gradnikih dizajn sistema

Prvi način sestavljanja je razvil Brad Frost in jo sestavljajo: 

• atomi (najbolj osnovni gradniki) - npr. puščica, ki jo lahko uporabimo v gumbu,
• molekule (sestavljene iz atomov) – gumb, ki združuje puščico, font in okvirček,
• organizmi (sestavljeni iz molekul) – združene molekule, npr. meni – logotip, font, gumb, 
• predloge oz. »templates« – v dizajn sistem dodamo predloge, npr. pri prodajnih spletnih straneh, kjer še nimamo besedila in slik, imamo pa prednastavljene okvirje, da imajo oblikovalci občutek, kaj lahko delajo,
• strani – že definirane spletne strani, npr. kako je videti pot pri prodajni spletni strani od trenutka, ko da kupec izdelek v košarico, do trenutka, ko je nakup zaključen.

Podjetje Salesforce je uporabilo drugačen način, saj so namesto atomov definirali žetone (t. i. »design tokens«). Gre za najbolj osnovne gradnike, kjer  namesto označevanja barv s #hex kodami raje uporabljajo reference. 

»Namesto hex kode za barvo se uporabi ime, kje se barva uporablja (npr. barva znamke). Če se bo ista barva uporabljala tudi za gumbe, se to zapiše (npr. primarna barva za gumbe). V svetu t. i. »dizajn tokens« barve tako niso poimenovane s svetlo siva, srednje siva, temno siva, ampak se jim določi lestvica (npr. od 1 do 10). Ustvariti moramo univerzalen jezik, razumljiv vsem, ki delajo z dizajn sistemom. Enako velja za osnovne žetone dizajn sistema (fonti, razmiki, mreža …),« je uporabo metode razložila Romina Kavčič. 

‍

Do dizajn sistema v petih korakih

1. Plan, raziskava

• Začnemo z intervjuji ljudi, ki delajo v različnih oddelkih: sprašujemo jih, kako trenutno sodelujejo z drugimi oddelki, kako si delijo datoteke.
• Oblikovalce boste vprašali, katere elemente (t. i. »top assets«) največkrat uporablja podjetje  – katere komponente se največkrat spreminjajo. 
• Pomembno je, da naredimo revizijo celotnega sistema, ki ga uporabljamo, naredimo posnetke zaslona ali videoposnetke elementov, ki jih imamo in hitro se bodo pokazale nekonsistentnosti. 

2. Načela oblikovanja 

Kot podjetje bomo povedali, kdo in kaj smo (primer: principles.design/examples/ – kako organizacije po svetu definirajo načela oblikovanja in kako se to odraža na vizualnem nivoju).

3. Grajenje, distribucija

Ko dodamo vse najpomembnejše komponente, moramo zgraditi sistem. Najenostavneje je, če je dostop do centralne knjižnice dostopen na spletu, saj tako najlažje povežemo dokumentacijo in vse ostale zaledne sisteme. 

4. Vzdrževanje
V okviru gradnje ne boste le ustvarili knjižnice svojih elementov, pač pa boste hkrati sistematizirali procese in različne deležnike spodbudili k medsebojnemu komuniciranju v istem jeziku. 

Pri vzdrževanju se lahko po določenem času uporabe dizajn sistema pojavi težava. Nekatere stvari se namreč nehajo uporabljati, morda se je spremenila tehnologija in zahteva prilagoditve. Da bi se v največji možni meri tem težavam izognili, je nujno nenehno medsebojno komuniciranje vseh, ki sodelujejo pri dizajn sistemu in sprotno odpravljanje tovrstnih ovir.

5. Dizajn sistem

Kako se torej lotiti projekta gradnje dizajn sistema?

Romina Kovačič za začetek priporoča aplikacijo Figma, v kateri zgradite knjižnico vseh dizajn elementov. V knjižnici lahko vsi vidijo vse oblikovalske datoteke, kar je mogoče izvoziti v jezik, ki je primeren za programiranje. Programerji nato sprogramirajo vse potrebno. Če pa posamezno podjetje že ima spletno stran ali mobilno aplikacijo, lahko posamezne komponente hitreje poveže z že obstoječo kodo. 

Figma tudi omogoča, da programerji pridejo do dizajn elementov s klikom, dobijo pa tudi CSS kodo za stile. Ko bomo zbrali vse komponente na enem mestu, bomo dobili »user interface design kit«, ki ga bodo potem uporabljali vsi oblikovalci. Tako jim ne bo treba znova risati form, gumbov …, je še razložila Romina Kavčič. 

Če vas zanimajo ostale vsebine na področju dizajna, jih najdete tukaj.