Počni neutralnim bojama
Pozadina, površine i tekst zauzimaju gotovo cijeli zaslon, zato ih odaberi prve. Siva s blagim tonom glavne boje djeluje promišljenije od čiste sive i pušta boju marke da se istakne samo tamo gdje je to važno.
Odredi boje stanja odmah na početku
Svakoj aplikaciji trebaju boje za pogrešku, uspjeh, upozorenje i informaciju. Odaberi nijanse koje se slažu s paletom i boju pogreške ne koristi ni za što drugo, primjerice za gumbe marke. Dopuni boju ikonom ili tekstom kako poruka ne bi ovisila samo o boji.
Osmisli i tamni način
Većina telefona podržava tamni način i mnogi ga korisnici imaju uključenog. Nije dovoljno obrnuti boje: koristi vrlo tamne sive umjesto čiste crne i malo smanji zasićenost naglasaka kako ne bi titrali na pozadini.
Provjeri kontrast i dodirne površine
Tekst bi prema WCAG-u trebao imati kontrast s pozadinom od najmanje 4,5:1. Gumbi moraju izgledati drukčije kad su aktivni, pritisnuti ili isključeni. Isprobaj aplikaciju vani i pri niskoj svjetlini, jer je tako koristi mnogo ljudi.
Česta pitanja
Koliko boja bi aplikacija trebala imati?
Obično jednu glavnu boju, neobaveznu boju naglaska, neutralne boje za pozadine, površine i tekstove te četiri boje stanja: pogreška, uspjeh, upozorenje i informacija.
Koju boju koristiti za glavni gumb aplikacije?
Glavnu boju tvoje marke, ako je u dobrom kontrastu s pozadinom. Koristi je samo za najvažniju radnju na svakom zaslonu.
Kako izraditi tamni način palete?
Pozadina postaje vrlo tamna siva s blagim tonom boje marke, površine su malo svjetlije od pozadine, a naglasci se posvijetle i ublaže. Tekst prelazi u prljavo bijelu. Kod svakog primjera to ćeš vidjeti kad klikneš gumb „Tamni”.
Koju paletu odabrati za minimalističku aplikaciju?
Osnovu od sivih (gotovo bijela pozadina, vrlo svijetlosive površine i gotovo crni tekst) s jednom jedinom bojom naglaska za ono važno. Tu ideju slijede palete u kategoriji „Minimal”.
Kako prenijeti paletu u Figmu, Flutter ili SwiftUI?
Kod palete klikni „Izvezi” i odaberi format: JSON tokeni za Figmu, ColorScheme za Flutter, boje sa svijetlim i tamnim načinom za SwiftUI, Tailwind ili CSS varijable. Kod kopiraš jednim dodirom.
