Razlika između UX, UI i grafičkog dizajna i koga da angažujete

UX, UI i grafički dizajn se često pominju zajedno, pa naručioci s pravom pitaju da li je to jedan posao ili tri. To su tri različita posla koja se na dobrom projektu nadovezuju jedan na drugi.

U ovom tekstu ukratko objašnjavam svaku oblast, pokazujem na jednom stvarnom projektu kako izgledaju sve tri uloge i pomažem vam da odlučite koga da angažujete za ono što vam treba.

Šta je šta: UX, UI i grafički dizajn ukratko

Šta je UX dizajn?

UX dizajn (User Experience, korisničko iskustvo) bavi se time kako proizvod radi iz ugla osobe koja ga koristi. UX dizajner istražuje šta korisnicima treba, određuje strukturu i redosled koraka, pravi žičane modele (wireframe) i prototipe i proverava ih sa stvarnim ljudima. Cilj je da korisnik obavi ono zbog čega je došao bez zastajkivanja i nagađanja.

Primer: u aplikaciji za naručivanje hrane UX dizajner odlučuje koliko koraka ima od izbora restorana do plaćanja, šta se vidi na svakom ekranu i šta se dešava kada nešto pođe po zlu.

Šta je UI dizajn?

UI dizajn (User Interface, korisnički interfejs) bavi se izgledom ekrana preko kojih koristite sajt, aplikaciju ili softver. UI dizajner bira boje, tipografiju, ikone, izgled dugmadi i formi, razmake i stanja elemenata, i sve to slaže u sistem koji je dosledan na svakom ekranu. Dok UX određuje kako proizvod funkcioniše, UI određuje kako izgleda i kako se ponaša pod prstom ili mišem.

Šta je grafički dizajn?

Grafički dizajn je vizuelna komunikacija: prenošenje poruke slikom, bojom i tipografijom. Grafički dizajner pravi logo, vizuelni identitet, brošure, plakate, ambalažu i objave za društvene mreže. Za razliku od UI dizajna, ovde nema interakcije. Poster za koncert ili ambalažu čokolade gledate, ne klikćete po njima.

Ako vam je lakše kroz poređenje: UX dizajner je arhitekta koji planira prostor da bude funkcionalan, UI dizajner je dizajner enterijera koji taj prostor uređuje, a grafički dizajner pravi tablu iznad ulaza, vizitkarte i plakate po kojima vas ljudi prepoznaju.

Ključne razlike između UX, UI i grafičkog dizajna

Jedan projekat, tri uloge: primer iz prakse

Razlika se najbolje vidi kada sve tri uloge rade na istom poslu. Za 3D Štampu Beograd radio sam sve od početka: kompletan vizuelni identitet, dizajn objava za društvene mreže, fotografije za sajt i ceo webshop, i izgled i funkcionalnost u pozadini. Evo kako se taj posao deli po ulogama.

Grafički dizajn: identitet, objave i fotografije

Osnova je vizuelni identitet, dakle logo i pravila po kojima brend izgleda. Na to se naslanja dizajn objava za društvene mreže, koje moraju da liče jedna na drugu i na brend. U ovu grupu spadaju i fotografije proizvoda i njihova obrada za sajt. Ništa od toga nije interaktivno. Zadatak je da se brend prepozna i da proizvod izgleda onako kakav zaista jeste.

UI dizajn: izgled webshopa

Kada identitet postoji, UI dizajn ga prevodi na ekran. Boje i tipografija iz identiteta postaju dugmad, kartice proizvoda, forme i korpa. Ovde se odlučuje kako izgleda stranica proizvoda, šta je na njoj najuočljivije i kako sve to staje na ekran telefona.

UX dizajn: struktura i tok kupovine

UX deo posla su odluke koje se ne vide na prvi pogled: kako su proizvodi grupisani, kojim putem kupac stiže od početne strane do proizvoda, koliko koraka ima do završene porudžbine i koje podatke mora da ostavi. Pošto sam radio i funkcionalnost webshopa u pozadini, UX se nije završio na crtežu. Tok kupovine je morao da radi i u stvarnosti, sa pravim proizvodima i pravim porudžbinama.

Na ovakvom projektu se vidi i redosled. Identitet daje materijal za UI, a UX određuje gde će taj materijal stajati i zašto. Kada jedan od ta tri dela izostane, to se vidi: lep logo na nepreglednoj prodavnici ili pregledna prodavnica koja ne liči ni na šta.

Šta dobijate od svakog dizajnera

Najlakše ćete proceniti ponudu ako znate šta bi na kraju trebalo da bude u vašim rukama.

Od UX dizajnera

• Mapu sajta ili aplikacije i opis glavnih korisničkih tokova.

• Wireframe, odnosno skicu svakog ključnog ekrana bez boja i ukrasa.

• Klikabilni prototip na kom se tok može isprobati pre programiranja.

• Nalaze iz istraživanja ili testiranja, ako su deo dogovora, kao i UX audit kada se radi o postojećem proizvodu.

Od UI dizajnera

• Gotove ekrane za telefon i za računar.

• UI kit: boje, tipografiju, dugmad, forme i ostale komponente sa svim stanjima.

• Fajl pripremljen za programera, sa merama i izvezenim elementima.

Od grafičkog dizajnera

• Logo u svim varijantama i formatima.

• Brandbook, to jest pravila upotrebe logoa, boja i tipografije.

• Štampane materijale kao što su vizitkarte, ambalaža i brošure.

• Šablone za objave na društvenim mrežama.

Koga da angažujete za svoj projekat

Kratko pravilo, koje odgovara i na pitanje kada vam treba grafički, a kada UX/UI dizajner: ako se ono što naručujete gleda, treba vam grafički dizajner. Ako se koristi, treba vam UX/UI dizajner. Evo kako to izgleda u četiri najčešće situacije.

Novi sajt

Treba vam UX i UI. Za prezentacioni sajt je dovoljan jedan dizajner koji radi oba. Ako nemate logo i identitet, prvo rešite njih, jer se sajt gradi od tih boja i slova. Kod mene se to završava kroz izradu sajta u Frameru, gde dizajn i izrada idu zajedno.

Aplikacija ili softver

Ovde je UX najveći deo posla, jer ljudi u proizvodu provode sate i rade složene zadatke. UI dolazi posle strukture i tokova. Grafički dizajner vam treba samo za brend proizvoda i marketinške materijale. Detalje o tome kako radim na proizvodima imate na strani UX/UI dizajn usluge.

Logo i vizuelni identitet

Ovo je posao za grafičkog dizajnera, i to onog koji se bavi brendiranjem. UX i UI vam za sam logo nisu potrebni, ali je korisno da dizajner zna kako će se logo ponašati na ekranu: u zaglavlju sajta, kao ikona aplikacije i na profilnoj slici. Više o tome je na strani brendiranje i vizuelni identitet.

Redizajn postojećeg sajta ili proizvoda

Prvo utvrdite šta je problem. Ako sajt izgleda zastarelo, a ljudi se na njemu snalaze, treba vam UI. Ako posetioci odustaju, ne nalaze informacije ili ne završavaju kupovinu, problem je UX i novi izgled ga sam neće rešiti. Najčešće je u pitanju i jedno i drugo, pa redizajn počinje od UX analize.

Može li jedan dizajner da radi sve tri stvari?

Može, i ja radim tako. Bavim se dizajnom više od 10 godina i radim UX, UI i grafički dizajn, samostalno, bez agencije iza sebe. Primer sa 3D Štampom Beograd pokazuje kako to izgleda kada je ceo posao kod jedne osobe.

Prednost je u tome što nema primopredaje. Kada isti čovek pravi identitet i sajt, ne mora nikome da objašnjava zašto je logo takav kakav jeste, niti se usput gubi dogovoreno. Imate jednog sagovornika i jednu odgovornost.

Postoji i granica. Na velikom proizvodu, sa mnogo korisničkih uloga i više timova programera, posla ima previše za jednu osobu, pa su tamo uloge s razlogom razdvojene. Važnije od titule je da proverite da li dizajner u portfoliju ima ono što vama treba. Ako tražite aplikaciju, tražite da vidite tokove i prototipe, a ne samo lepe ekrane. Ako tražite logo, tražite identitete koji su zaista u upotrebi.

Najčešće zablude naručilaca

„UX i UI su isto“

Nisu, iako ih često radi ista osoba. Može da postoji lep ekran na kom se niko ne snalazi, kao i jasan tok kupovine koji izgleda neuredno. Zato u ponudi tražite da oba dela budu navedena posebno.

„Grafički dizajner može usput i sajt“

Može ako ima iskustva sa interfejsima. Sajt nije plakat: ima stanja, različite veličine ekrana, forme i greške. Dizajn koji je rađen kao statična slika obično se raspadne čim se otvori na telefonu.

„UX je faza koja se može preskočiti“

UX odluke se donose svakako, samo je pitanje ko ih donosi. Ako ih ne donese dizajner, doneće ih programer u hodu ili vi sami dok unosite sadržaj. Jeftinije je odlučiti o strukturi na skici nego je menjati na gotovom sajtu.

„Logo je brend“

Logo je jedan znak. Identitet je sistem: boje, tipografija, stil fotografije i pravila upotrebe. Bez tog sistema svaka nova objava ili stranica izgleda kao da je iz druge firme.

„Dizajn dolazi na kraju“

Ako dizajnera uključite kada je sve već isprogramirano, ostaje mu samo da ulepša. Najviše koristi imate kada je u projektu od početka, dok se još odlučuje šta se uopšte pravi.

Ako niste sigurni koja od ove tri uloge vam treba, pišite mi i opišite šta pravite. Reći ću vam odakle ima smisla početi.