Dizajn sistem

Dizajn sistem je skup gotovih dijelova od kojih se sastavlja sajt, zajedno s pravilima kako se koriste. Dugmad, polja u formama, kartice, razmaci, veličine naslova, boje za stanja. Na engleskom design system, a dio ljudi ga zove i biblioteka komponenti.

Ideja je jednostavna: odluke se donesu jednom, pa se koriste svugdje. Bez toga svaka nova stranica donese svoje dugme, svoj razmak i svoju nijansu sive, i sajt se kroz dvije godine raspadne na nešto što izgleda kao pet različitih sajtova.

Šta sistem sadrži

Kod većine sajtova dovoljan je skup koji staje na nekoliko stranica.

Osnove. Boje s imenima i namjenom, veličine teksta, razmaci u koracima koji se ponavljaju, zaobljenja i sjene.

Dijelovi. Dugme u svojim varijantama, polje u formi, kartica, obavještenje, navigacija, podnožje.

Stanja. Kako dugme izgleda kad je pokazivač na njemu, kad je pritisnuto, kad je isključeno. Kako polje izgleda kad je u njemu greška. Šta se prikazuje dok se podaci učitavaju i šta kad ih nema.

Pravila. Kada se koristi glavno, a kada sporedno dugme. Koliko dugmadi smije biti na jednom ekranu. Kako se piše tekst na dugmetu.

Zadnja dvije stavke se najčešće preskoče, a upravo one prave razliku između sistema i spiska slika.

Razlika prema vizuelnom identitetu

Ovo se često miješa, pa vrijedi razdvojiti.

Vizuelni identitet kaže kako firma izgleda: logo, paleta boja, tipografija, stil fotografija. Vrijedi svugdje, i na fakturi i na vozilu.

Dizajn sistem kaže kako se to pretvara u ekrane. Koliko je visoko dugme, koliko prostora stoji između sekcija, šta se dešava kad forma ne prođe.

Identitet je izbor, sistem je gradivo. Firma može imati odličan identitet i sajt koji se raspada, jer identitet ne govori ništa o tome kako se slaže stranica.

Zašto se isplati

Prvo, brzina. Nova stranica se slaže od postojećih dijelova umjesto da se crta iz početka. Kod sajtova koji redovno dobijaju nove stranice usluga ili kampanja to je razlika između dana i sedmice.

Drugo, dosljednost. Kad dugme svugdje izgleda isto, ljudi ga prepoznaju bez razmišljanja. To je dio UX posla koji se ne primjećuje dok se ne pokvari.

Treće, održavanje. Kad boja ili veličina teksta stoji na jednom mjestu, promjena se radi jednom. Bez toga se traži po stotinu mjesta i uvijek se nešto propusti.

Četvrto, pristupačnost. Kontrast i veličina dodirnih površina se riješe jednom, u samim dijelovima, umjesto da se provjeravaju na svakoj stranici.

Koliko je dovoljno za manju firmu

Ovdje se najviše pretjeruje, pa vrijedi biti konkretan.

Sajt firme s petnaest stranica ne treba biblioteku s pedeset komponenti. Treba mu dogovor o nekoliko stvari.

Tri do četiri veličine naslova i jedna veličina brodteksta. Dva razmaka koji se ponavljaju, jedan manji i jedan veći. Jedan izgled glavnog dugmeta i jedan sporednog. Jedan izgled kartice. Boje s namjenom, a ne samo spisak.

To je posao od jednog dana i pokriva devedeset posto onoga što sajt te veličine treba. Ostalo se dodaje kad se pokaže da zaista fali.

Za veće sajtove, trgovine i firme koje redovno objavljuju nove stranice, sistem raste, i tada ima smisla zaseban projekat.

Gdje sistem živi

Na dva mjesta, i to je najosjetljiviji dio.

U alatu za dizajn, najčešće Figmi, gdje dizajner slaže ekrane od istih dijelova.

I u kodu sajta, kao stvarne komponente i imenovane vrijednosti. Ovo drugo je ono što zaista radi; prvo je dogovor.

Kad postoji samo u Figmi, programer svaki put improvizuje. Kad postoji samo u kodu, dizajner crta stvari koje se ne mogu složiti. Zato se pri predaji dizajna uvijek dogovori šta je od toga dio sistema, a šta izuzetak za jednu stranicu.

Dobar pokazatelj da sistem radi je jednostavan: kad se traži nova stranica, prvo pitanje je koje dijelove već imamo, a ne kako će izgledati.

Kako se uvodi u sajt koji već postoji

Sistem se rijetko pravi na praznom papiru. Najčešće se uvodi u sajt koji je rastao godinama, i tada se radi obrnutim redom.

Prvo se popiše šta postoji. Prođe se kroz desetak najvažnijih stranica i zabilježi koliko različitih dugmadi, veličina naslova i razmaka se zaista koristi. Kod sajtova starijih od nekoliko godina taj spisak bude neugodno dug.

Zatim se svede. Od sedam dugmadi ostaju dva, od jedanaest veličina teksta pet. Odluka se donosi po tome šta se najčešće koristi, a ne po tome šta je najljepše.

Onda se te vrijednosti upišu na jedno mjesto u kodu, kao imenovane vrijednosti, i stranice se postepeno prebacuju na njih. Ne sve odjednom; počinje se od onih koje donose upite.

Na kraju se dogovori pravilo za dalje: nova stranica koristi postojeće dijelove, a novi dio se dodaje samo kad se pokaže da zaista fali, i tada ulazi u sistem, a ne pored njega.

Ovo je posao koji se ne vidi izvana i koji se zato teško brani. Ono što se vidi je posljedica: sljedeći redizajn traje kraće i košta manje, jer se ne počinje ispočetka.

Greške koje najčešće viđamo

Prva je sistem koji postoji kao dokument, a sajt ne prati ni jedno njegovo pravilo.

Druga je previše varijanti. Sedam vrsta dugmadi znači da niko ne zna koje koristiti.

Treća su stanja koja nisu osmišljena, pa se greška u formi rješava u zadnji čas i uvijek drugačije.

Četvrta je sistem napravljen za sajt od deset stranica, koji je trajao duže od samog sajta.

Peta je razilaženje dizajna i koda, kad se jedno mijenja a drugo ne.

Šesta je izostanak pravila o tome ko smije dodati novi dio, pa se kroz godinu nakupi pet kartica koje rade isto.

Lista za provjeru

• Izgleda li dugme za slanje isto na svim stranicama vašeg sajta?
• Koliko različitih veličina naslova sajt zapravo koristi?
• Stoje li boje kao imenovane vrijednosti na jednom mjestu, ili su upisane po kodu?
• Zna li se kako izgleda polje u formi kad je greška?
• Postoji li dogovor koje dijelove nova stranica smije koristiti?
• Slažu li se dizajn u Figmi i ono što je stvarno u kodu?
• Imaju li dugmad dovoljnu veličinu za dodir na telefonu?

Pojmovi koje ćete čuti uz dizajn sistem

• Komponenta: dio koji se ponavlja, kao dugme ili kartica.
• Design tokens: imenovane vrijednosti boja, razmaka i veličina.
• Stanja: kako dio izgleda kad je aktivan, pritisnut, isključen ili u grešci.
• Figma: alat u kojem sistem najčešće živi na strani dizajna.
• Wireframe: skica rasporeda, koja se slaže upravo od ovih dijelova.
• Knjiga standarda: pravila identiteta, širi dokument u kojem sistem ima svoje mjesto.