Lepa maketa umire u drugoj nedelji razvoja ako u njoj nema stanja: prazne liste, dugog imena, greške pri učitavanju i teksta na tri jezika različite dužine.
Kako ekran postaje komponenta koja se ponovo koristi
Svaki element prolazi isti put — inače će za pola godine u proizvodu biti pet različitih dugmadi.
design.vmtech.rs
Komponenta: kartica porudžbine
LIVE
ponovo se koristi
Mreža i tipografija
skala 4 px
Boja i kontrast
AA · light + dark
Stanja
6 stanja
Tri jezika
sr · en · ru
Komponenta u sistemu
u biblioteci
Živi u kodu
ponovo se koristi
OD MAKETE DO SISTEMA
01Mreža i tipografijaPrvo se zadaju skala veličina, razmaci i pravila naslova — nije ukras, već konstrukcija
02Boja i kontrastPaleta se proverava na kontrast i radi u svetloj i tamnoj temi istovremeno
03StanjaPrazno, učitavanje, greška, dug tekst, onemogućeno — ono što obično iskrsne tek u kodu
04Tri jezikaSrpski i ruski tekstovi duži su od engleskog — maketa to uzima u obzir
05Komponenta u sistemuElement ulazi u biblioteku sa pravilima primene, a ne ostaje slika u maketi
06Živi u koduProgramer sklapa nove ekrane od gotovih delova, bez usaglašavanja svakog dugmeta
POZNATA SLIKA
Šta se dešava sa dizajnom nakon pola godine
Dizajn kao skup slika
U proizvodu je pet nijansi plave i četiri veličine dugmadi — svaki ekran je crtan posebno
Novi ekran traži dizajnera, jer nema od čega da se sklopi
Dug naziv proizvoda lomi karticu, a to se otkriva u produkciji
Tamna tema izgleda kao svetla sa obrnutim bojama
Sitan sivi tekst na sivoj podlozi čita se samo na dizajnerovom monitoru
Dizajn kao sistem
Boje, veličine i razmaci zadati su tokenima — ne mogu se „slučajno“ promeniti na jednom ekranu
Novi ekran se sklapa od gotovih komponenti za nekoliko sati, a ne za nedelju
Granični slučajevi su nacrtani unapred: prazno, mnogo, greška, veoma dugo ime
Tamna tema je projektovana posebno, sa sopstvenim vrednostima kontrasta
Kontrast se proverava po standardu, a ne na oko u idealnim uslovima
OBIM POSLA
Šta ulazi u UI rad
Vizuelni pravac
Dve-tri varijante na jednom stvarnom ekranu — izbor se pravi na sadržaju, a ne na apstrakciji.
Tipografija
Skala veličina, rezovi, prored i pravila za ćirilicu i latinicu.
Paleta i teme
Svetla i tamna tema kao dve punopravne šeme, a ne automatska inverzija.
Biblioteka komponenti
Dugmad, polja, tabele, kartice i obaveštenja — sa svim stanjima i pravilima primene.
Ekrani proizvoda
Ključne stranice u tri veličine: telefon, tablet i desktop — sa stvarnim tekstovima.
Ikone i grafika
Jedinstven set u jednoj debljini linija, bez mešanja stilova iz različitih izvora.
Pristupačnost
Kontrast po standardu, vidljiv fokus, veličine ciljeva za prst i čitljivost pri uvećanju.
Predaja razvoju
Tokeni, razmaci i ponašanje komponenti u obliku koji se prenosi u kod bez pretpostavki.
KAKO OVO ŽIVI
Od čega se sastoji dizajn sistem
TokeniBoje, veličine, radijusi i senke kao promenljive, zajedničke maketi i koduKomponenteElementi sa svim stanjima, a ne samo u idealnom oblikuPravila primeneKada je koja komponenta primerena — da se novi ekran ne izmišlja iznovaMreža i prilagođavanjePonašanje blokova pri promeni širine je opisano, a ne prepušteno koderuTekstovi interfejsaTon, dužina oznaka i formulacije grešaka — deo sistema, a ne slučajnostProvera u pregledačuGotovi ekrani se porede sa maketom na stvarnim uređajima, ne samo u editoru
Izvorni fajlovi maketa i biblioteka komponenti predaju se Vama uz projekat: dizajn sistem mora da preživi promenu izvođača.
PITANJA
Šta se obično pita
Treba nam samo redizajn. Zašto sistem?
Ako proizvod ima pet ekrana i neće se menjati — sistem je zaista suvišan i tako ćemo i reći. Isplati se tamo gde su ekrani u desetinama i gde se pojavljuju novi: bez zajedničkih pravila svaki sledeći ekran košta kao prvi, a proizvod postepeno prestaje da izgleda celovito.
Može li se uzeti gotov šablon i prilagoditi?
Ponekad da — na primer, za interni panel gde je važna brzina, a ne različitost. Ali šablon nosi tuđa rešenja: svoju mrežu, svoju tipografiju i svoju logiku komponenti. Ako je proizvod za klijente i treba da izgleda kao Vaš, a ne kao još jedan šablon, jeftinije je odmah napraviti svoje.
Ko crta stanja grešaka i prazne ekrane?
Mi, i to je podrazumevani deo posla. Prazan ekran nije „nema ničega“, već mesto gde se čoveku objašnjava šta da uradi prvo. Poruka o grešci nije izvinjenje, već uputstvo. Ako se ne nacrtaju, pojaviće se u kodu kao sivi tekst „Nema podataka“.
Da li je tamna tema dodatni posao?
Jeste, ali nije dvostruki. Ako je paleta od početka opisana tokenima, tamna tema je drugi skup vrednosti i provera kontrasta, a ne ponovno crtanje svih ekrana. Najskuplje je dodavati je u projekat gde su boje ručno upisane na svakom elementu.
Šta predajete programerima?
Makete sa opisanim tokenima i razmacima, biblioteku komponenti sa stanjima i pravila ponašanja pri promeni širine. Uz to poredimo sklopljene ekrane sa maketom u pregledaču — na tom koraku se obično nađu razlike koje bi inače doživele riliz.