7 savjeta za oblikovanje konzistentnosti
Dosljednost će vaš dizajn učiniti boljim, jednostavnijim za upotrebu i praktično nevidljivim. Korisniku daje dovoljno prostora za doživljaj dizajna na način na koji namjeravate.
Dizajn za dosljednost je u nekim slučajevima neispavan i malo je zamišljen za razumijevanje u drugima. Jednostavno, dosljednost je nit koja povezuje elemente u jednom dizajnu. Ona također povezuje dizajne kroz jednu kampanju ili marku, stvarajući proizvod prepoznatljiv, upotrebljiv i učinkovit. Posebno obratite pažnju na sve primjere u nastavku, svaka marka predvodi u dosljednom i upotrebljivom dizajnu.
1. Dominantne i sekundarne boje i nijanse
Postoji razlog zašto je na raspolaganju toliko informacija o stvaranju sjajnih paleta boja. Boja može biti jedan od ključnih vizualnih čimbenika koji povezuje marku s vizualnim tretmanom.
Posebna identifikator boja može uvidjeti korisnicima tko ste na prvi pogled. Zamislite samo kako neke najveće marke na svijetu - Coca-Colu, Facebook, T-Mobile - prepoznaju po boji. Možete li prepoznati ove marke i bez njihove boje potpisa?
Dobra upotreba boja također pomaže korisnicima da se kreću putem web stranice i znaju da se još uvijek nalaze na pravom mjestu. Ako bi vas svaki klik doveo na stranicu s novom paletom boja, biste li ispitivali jeste li na pravom mjestu?
Da biste stvorili sjajnu paletu boja, odaberite dominantnu boju i koristite koncepte teorije boja da biste dodali sekundarnu boju ili dvije. Zatim unesite kratki skup stila i pravila uporabe za svaku boju i kako će se koristiti tijekom dizajna. Pridržavajte se pravila i dosljednosti vam je boja. (Bonus: Stvorite zabavnu ljetnu paletu boja.)
2. Veličina, razmak i položaj tipografije
Baš kao što se boja treba temeljiti na paleti sa stilskim pravilima, tako je i za tipografiju potreban isti tretman. I lako za vas, koncept je isti kao i u boji.
- Odaberite dominantni oblik i veličinu.
- Odaberite sekundarne tipove i veličina.
To može biti malo složenije od tipografije za web, ali shvaćate, zar ne? Kada je riječ o web stilovima, trebali biste povezati tretmane određene veličine, veličinu, razmak i pozicioniranje s CSS-om kako bi svaka oznaka (poput h1, h2, h3, tijelo, itd.) Pozvala ispravnu opciju tipa.
Daljnji tip koji se koristi na jednoj lokaciji - poput navigacije - trebao bi biti dosljedan cijelom tom elementu. Korisnici će biti prilično zbunjeni ako svaki navigacijski element koristi drugačiji font. Ta se konzistentnost primjenjuje na cijelom web mjestu; Svi slični predmeti trebaju koristiti iste tekstualne tretmane.
3. Veličina i odnosi elemenata
Koliki su elementi u vašem dizajnu? Jesu li svi gumbi jednaki? Što je sa naslovima i fotografijama?
Veličina elemenata treba biti diktirana stilom i ostati ista za svaku uporabu. (Zamislite samo kako će smiješno izgledati vaš klizač ako pokušate staviti fotografije različitih oblika. To neće uspjeti.)
Uobičajena veličina i odnosi između elemenata pomažu korisnicima da vide obrasce i stvaraju vizualni tok. Ove zajedničke osobine stvaraju sklad i ravnotežu koji dizajn čine lako probavljivim i čine da korisnici budu angažirani.
4. Prostor i kako se koristi
Jednako je važna koliko i veličina elemenata, prostor između njih. Ništa više ne smeta od dizajna u kojem se elementi naizgled bacaju na platno bez ikakvih organizacija i pravila - neke se fotografije preklapaju, dok druge mogu imati dosta prostora između njih.
Najbolji način za uspostavljanje - i pridržavanje - zajedničkih pravila razmaka je pomoću mrežnog sustava. Ovaj set nevidljivih linija pomoći će vam da odredite gdje i kako smjestiti elemente tako da vrlo pojedini blok, od teksta do gumba do slike, padne u savršen sklad.
Dok razmišljate o prostoru, ne zaboravite provjeriti je li konzistentni razmak i vertikalno i vodoravno. To uključuje pogled odnosa između sličnih elemenata i onih koji su različiti. (U redu je imati pravila razmaka za svakog.)
5. Vizualni materijali koji prelaze u medije
Vizualne oznake robne marke, poput slika i ilustracija, trebale bi se prenositi preko medija. Bez obzira dizajnirate li projekt za web mjesto ili brošuru, bilbord ili društveni medij, vizualni identitet branda ne bi se trebao mijenjati.
To često uključuje uporabu zajedničkog skupa fotografija. Neke marke imaju detaljna pravila za upotrebu slike - od prekrivanja boja ili vodenih žigova na svim slikama do određenog omjera za sve fotografije. Bez obzira na to što želite da bude vaš stil, važno je koristiti neovisno o mjestu.
Da biste to učinili najučinkovitije, važno je imati sjajnu vizualnu palubu s visokokvalitetnim slikama visoke rezolucije koje možete koristiti i ponovo koristiti.
6. Korisnički obrasci koji prirodno djeluju
Vaš dizajn mora funkcionirati kao i drugi slični dizajni i slijediti prihvaćene uzorke korisnika. Prečesto dizajneri žele učiniti nešto drugačije s načinom rada; ne upadaj u ovu zamku.
Ako web stranica ili aplikacija ili ispisani element funkcionira onako kako korisnici očekuju, mogu s njim lako komunicirati. Oni će znati što raditi i dizajn postaje pomalo nevidljiv kako prolazi upotrebljivost. (Ovo je vaš stvarni cilj kao dizajner.)
Četiri su tipa općeprihvaćenih obrazaca o kojima treba razmišljati:
- Obrasci sadržaja: stil i ton sadržaja i vaše marke
- Obrasci označavanja: HTML i CSS koje morate dizajnirati na svim stranicama i na cijeloj web stranici
- Obrasci dizajna: izgled svakog elementa u dizajnu i svih povezanih stilova
- Korisnički obrasci: Kako korisnici stupaju u interakciju s elementima dizajna, poput gumba, izbornika ili ikona
7. Elementi korisničkog sučelja koji se lijepe
Ovo nije ljepljiva navigacija, ali slična je ideja.
Svaki se element interakcije i sučelja treba ponašati na isti način.
- Veze se otvaraju izravno ili na novoj kartici (odaberite je za svaku vezu)
- Tipke su iste boje u cijeloj
- Navigacija ostaje na istom mjestu i uključuje iste opcije
- Podnožja i bočne trake trebale bi sadržavati određeno mjesto i veličinu (ne čini da je podnožje ogromno na jednoj stranici, a na maloj sitno
- Ikone su prepoznatljive i rade ono što korisnici očekuju
- Elemente koji se mogu kliknuti uvijek je moguće kliknuti (poput fotografija koje povezuju)
Popis je odskočna daska koja prikazuje sve sitne detalje o kojima trebate razmišljati u pogledu ljepljivosti i upotrebljivosti. Zapamtite, ako nekom elementu dopustite da izvede neku radnju, vjerojatno bi trebao biti univerzalan.
Zaključak
Konzistentnost dizajna stvara strukturu kakvu žele korisnici. Također stvara okvir koji korisnici razumiju, doprinoseći ukupnoj upotrebljivosti i angažmanu.
Započinje s setom pravila i stilskim vodičem za svaki projekt. Čak i ako radite sami, napravite popis pravila o tome kako će projekt koristiti boju, vrstu, veličinu, prostor, elemente korisničkog sučelja i interakcije. Ubrzat će proces dizajniranja za vas i dovesti do boljeg, korisnijeg dizajna.
