VMTech
Razgovarajmo
← Sve kompetencije
PROIZVOD I RAST · 03

UI Design

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.

Razgovarajmo
OD MAKETE DO SISTEMA

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
  1. Mreža i tipografijaPrvo se zadaju skala veličina, razmaci i pravila naslova — nije ukras, već konstrukcija
  2. Boja i kontrastPaleta se proverava na kontrast i radi u svetloj i tamnoj temi istovremeno
  3. StanjaPrazno, učitavanje, greška, dug tekst, onemogućeno — ono što obično iskrsne tek u kodu
  4. Tri jezikaSrpski i ruski tekstovi duži su od engleskog — maketa to uzima u obzir
  5. Komponenta u sistemuElement ulazi u biblioteku sa pravilima primene, a ne ostaje slika u maketi
  6. Ž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 kodu
KomponenteElementi sa svim stanjima, a ne samo u idealnom obliku
Pravila primeneKada je koja komponenta primerena — da se novi ekran ne izmišlja iznova
Mreža i prilagođavanjePonašanje blokova pri promeni širine je opisano, a ne prepušteno koderu
Tekstovi interfejsaTon, dužina oznaka i formulacije grešaka — deo sistema, a ne slučajnost
Provera 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.