Kroz više od desetljeća plivanja u dizajnerskim vodama, mogu sa sigurnošću reći da je vizualni izražaj najteži dio dizajna. Upotrebljivost, pristupačnost, testiranje i psihologija – to ili naučiš ili ne naučiš. Logiku možeš racionalno istrenirati, a kako se ne radi o kvantnoj fizici, ne trebaju ti godine mukotrpnog rada da savladaš.

S vizualnim aspektom stvari stoje drugačije. On traži godine prakse. Naučiš teoriju, ali je osjet nešto drugo. Učiš nevidljivo preliti u vidljivo. Još ako nemaš prirodno izražen osjećaj za estetiku… j*** ga, druže. Trebat će ti bogzna koliko vremena da razviješ instinkt za to što “valja”, a što ne.

Koliko god se inženjer u meni opirao (IT fakultet je ostavio traga) i tvrdio da je funkcionalnost najvažnija, ne mogu zanemariti činjenicu da vizualni dojam snažno utječe na to hoće li korisnik uopće posegnuti za nekim proizvodom.

S ovim se borim još od davne 2002. kada sam imala priliku birati svoj prvi mobitel. Odabrala sam onaj koji mi je bio ljepši pored onog s više funkcija iako je gospođa mama bila spremna izdvojiti veći budžet za napredniji mobitel. Od tada hodam osviješteno s lekcijom u glavi “nije sve u izgledu”.

No, podsvijest je mnogo jača od racionalnog pa nastavljam padati na izgled zajedno sa ostatkom čovječanstva.

Vizualni dizajn izravno utječe na našu visceralnu, intuitivnu procjenu proizvoda. Ona koja se javi puno prije racionalnog. Izgled proizvoda nam aktivira trenutačan dojam o kvaliteti, neovisno o tome koliko je nešto zapravo jasno, upotrebljivo ili jednostavno za korištenje.

Svodi se na privlačnost ili odbojnost na nesvjesnoj razini. To je amenovano i teško da će se promijeniti.

Iako tupim da je vizualni dio dizajna najteži za pohvatati i da za njega treba puno više vremena nego za onaj funkcionalni, svejedno ti u nastavku donosim 12 konkretnih savjeta s nekoliko formulica kako da:

• tvoj UI izgleda profi;
• tvoj rad ne izgleda kao početnički pokušaj ili kao patnja juniora;
• čak i drljavo napravljeni proizvod predstaviš kao oličenje kvalitete i funkcionalnosti.

1. Neka margina unutarnjih elemenata bude manja od paddinga kontejnera
   
   Jedna od češćih bolnih pojava koju viđam kod junior dizajnera (ili dugogodišnjih dizajnera bez razvijenog osjećaja za detalje) jest kada unutarnji child elementi imaju veći razmak među sobom nego što imaju od ruba svog parent elementa. Ovdje mislim na gornje i donje margine ili gap child elemenata u odnosu na padding parent elementa.

Autorica N. Jerković

Moja brzopotezna formula bi bila: child margina* < parent padding**
*Margina (ili gap) – prostor oko elemenata
**Padding – prostor između sadržaja elementa i njegovog ruba

S estetske strane, veći padding na parent kontejneru stvara uravnotežen “prostor za disanje” oko sadržaja, dajući oku mjesta za odmor. Stvara osjećaj organiziranosti i izbjegava izgled prenatrpanosti. Dio toga je u osjećaju kojeg ne mogu riječima opisati, ali mogu reći da jasnije usmjerava pažnju na sadržaj. Da ne filozofiram puno, pogledaj sliku ispod. Osjećaj će ti sve reći.

Gore – Razmaci između child elemenata veći su od paddinga parent elementa. Dolje – Prazan prostor je uravnotežen, s dominantnim paddingom parent elementa. – Autorica N. Jerković (Izvor ilustracija: Igor Kapustin)

2. Podesi rubne radijuse u ugniježđenim kontejnerima

Još jedna česta stvar koja bode u oči je kad unutarnji elementi imaju isti radijus kao i njihov parent kontejner. Tada kutevi ne sjedaju prirodno jedan uz drugi. Vizualno nešto jednostavno ne štima, iako možda ne znaš odmah reći što.

To nešto možemo srediti kratkom formulom: vanjski radijus = unutarnji radijus + padding

Počni s najmanjim radijusom – onim na unutarnjem elementu. Zatim dodaj padding da izračunaš koliko bi trebao biti radijus kontejnera koji ga okružuje. Na primjer: ako unutarnji element ima radijus od 16 px, a padding oko njega je 8 px, onda vanjski kontejner treba imati radijus od 24 px. Spasilo nas je malo matematike toliko da se ne moramo zamarati osjetom, barem ne u ovoj situaciji.

Gore – I vanjski i unutarnji radijus iznose 24 px. Dolje – Krivine su usklađene i izgledaju prirodno sljubljene tako da je vanjski radijus proširen iznosom paddinga. Unutarnji radijus od 16 px uparen je s paddingom od 16 px, čime se dobiva vanjski radijus od 32 px. – Autorica N. Jerković

Gore – Primjerak kartice bez primijenjene formule. Dolje – Kartica s izbalansiranim radijusima prema formuli. – Autorica N. Jerković (Izvor ilustracija: Igor Kapustin)

A što kad imaš više ugniježđenih slojeva? Tada ova formula ima svoja ograničenja. Ako bi svaki sloj samo oduzimao isti padding, brzo bi došao do elemenata s oštrim kutovima koji se kose s oblim vanjskim izgledom. Zato prepolovi padding na svakom sloju:

• Prvi sloj: Radijus = 24px, Padding = 8px
• Drugi sloj: Radijus = 24px – 8px = 16px
• Treći sloj: Radijus = 16px – (8px /2) = 12px
• Četvrti sloj: Radijus = 12px – (8px /2) = 8px

Prepolovljavanjem paddinga, svaki sloj zadržava malo tog osjećaja zaobljenih kutova. Ovako izbjegavaš oštre kuteve koji su mogli doći u konflikt s oblim.

3. Bolja vizualna hijerarhija marginama iznad i ispod naslova
   
   Još jedna vrlo česta pojava su nepravilno postavljena udaljenost naslova od teksta iznad i ispod. Često je naslov jednako udaljen od prethodnog i od sljedećeg paragrafa. Jadničak ostane negdje u sredini, vizualno ne pripadajući nikome.
   
   Naslov treba biti bliže tekstu koji slijedi ispod, jer se upravo na njega i odnosi. Za dobar vizualni ritam, gornja margina bi trebala biti barem 2x veća od donje. Ponekad čak i 3x, ovisno o kontekstu i veličini fonta.

Jedina iznimka je ako taj “naslov” zapravo nije naslov, nego neka istaknuta rečenica (blockquote ili quotes) koja pripada sadržaju iznad. Onda ga više ne zovemo naslovom i valjalo bi ga vizualno diferencirati od pravog naslova (manji font, italic, druga boja, što god da ga odvoji od pravog naslova).

Gore – Naslov paragrafa jednako je udaljen od gornjeg i donjeg teksta, ostavljajući dojam da se pajdo radije drži neutralno – ni s kim, a sa svima. Dolje – Naslov je dvostruko udaljeniji od gornjeg paragrafa, čime se vizualno povezuje s donjim. – Autorica N. Jerković

4. Dobar kontrast teksta da ga svi vide

Ovaj savjet možda ne djeluje kao čisto estetski, ali negativno utječe na nesvjesnoj razini ako stvara poteškoće pojedincima. Korisnici nam mogu biti stvarno širokog spektra. Od omladine do starijih, od kompletno zdravih do onih s posebnim potrebama.

Cilj je zadovoljiti što više korisnika, što uključuje i one sa oštećenjem vida. Da bi njima tekst bio čitljiv, a i da generalnoj publici bude lakše, mora zadovoljiti WCAG 2.1 smjernice za kontrast razine AA:

• Mali tekst (18 px i manji) mora imati kontrast najmanje 4,5:1.
• Veliki tekst (bold iznad 18 px ili regular iznad 24 px) mora imati kontrast najmanje 3:1.

Za ovo ti ne treba velika pamet.

Kontrast provjeri na coolors.co ili sličnim stranicama. Samo ubaci heks kodove i vidi jesi li dobro “ubo” ili izvaži opet.

Gore – Podsjeća na trenutke kada netko teži “seksi” nefunkcionalnim komponentama sa niskim Opacity. Dolje – Komponenta koja se, prema WCAG 2.1 smjernicama, može čitati i time ispunjava svoju svrhu. – Autorica N. Jerković

5. Sama boja nije indikator

Postoji više vrsta sljepoće na boje, a najčešći oblik pogađa sposobnost razlikovanja crvene i zelene. I to nije rijetkost, osobito kod muškaraca. Neki korisnici čak uopće ne vide boje.

Kako bi tvoj UI bio pristupačan svima, ne bi bilo dobro da se oslanjaš samo na boje za značenja ili razlikovanje elemenata. Potrebno je dodati i druge vizualne znakove kao što su podcrtavanje, ikona ili različiti oblici koji pomažu u razlikovanju.

Gore – Adresa stranice “snowed.com” označena je samo plavom bojom da bi pokazala da je to link. No bez boje, izgleda kao običan tekst. Korisnici koji su slijepi na boje ne mogu znati da se na njega može kliknuti. Dolje – Dodavanjem podcrtavanja jasno pokazujemo da se radi o linku, čak i bez boje. – Autorica N. Jerković

6. Sjena je suptilna i ovisi o boji pozadine

Najbolja sjena je ona koja naglašava, a ne koja privlači pozornost. Ona koja je suptilna. Ona koja se stopi s pozadinom. Zvuči banalno, ali su mrlje katrana kod juniora dizajnera često primjer izazova za dobru sjenu. Da bi se lijepo stopila u ostatak dizajna, drži se ovih par parametara:

• U stvarnom životu svjetlo najčešće dolazi odozgo od sunca, lustera, nebitno. Zato je najprirodnije za sjenu da joj X os bude 0, a Y ide prema dolje (drop-shadow s pomakom prema dolje).
• Svi elementi u dizajnu trebaju imati sjenu u istom smjeru. Nema sunca malo tamo, pa malo ‘vamo u istom trenutku. Logički, jedan izvor svjetla = jedan smjer sjene.
• Za suptilnost prilagoditi Opacity (neprozirnost) i Blur (zamućenje). Što manji Opacity i što veći Blur, to je sjena suptilnija.
• Pozadina diktira sjenu:
  • Na bijeloj pozadini koristi crnu ili tamnosivu sjenu. Što je boja sjene tamnija, to joj više smanji Opacity.
  • Na obojenoj pozadini, koristi tamniju nijansu te iste boje. Tako će se sjena bolje uklopiti.
  • Na crnoj (ili jako tamnoj) pozadini, tamna sjena se više ne vidi. Zato koristi svijetli glow efekt (bijeli ili u boji).
• Botunima dodaj manju sjenu dovoljno da se “uzdignu” iz pozadine, a kontejnerima dozvoli nešto veći doseg sjene.

Primjer sjene na bijeloj pozadini. Kombinirane su dvije sjene kako bi jače istaknuli element i vizualno pojačali osjećaj dubine. Jedna sjena je oštrija i tamnija za jasnije definiranje ruba elementa, a druga je mekša i prozirnija kako bi “uzdignula” element s pozadine. – Autorica N. Jerković

Lijevo – Sjena je čisto crna i djeluje teško na obojenoj pozadini. Desno – Sjena je u tamnijoj nijansi boje pozadine, čime se vizualno bolje uklapa i djeluje prirodnije. – Autorica N. Jerković

Zasad smo prošli 6 savjeta za bolji i profi UI dizajn, a ostalih 6 te čeka uskoro u drugom dijelu.