10 naredbe za web dizajn za svaki projekt
Imate li pravilnik kada je u pitanju dizajn web stranice? Postoje neka pravila koja se primjenjuju u gotovo svakom projektu web dizajna - nazovimo ih „naredbama web dizajna“.
Bez obzira na to koliko su velika ili mala web mjesta, ta su pravila temelj dobrog dizajna. Ako slijedite ove osnovne smjernice i učinite ih dijelom vašeg razmišljanja za svaki započeti projekt, izbjeći ćete mnoge zamke u koje dizajneri mogu naići!
1. Treba biti dosljedan
Učinite dizajn što jednostavnijim za interakciju korisnika Dosljedan dizajn jednostavan je za upotrebu i razumljiv dizajn. Angažmani i radnje korisnika, kao i vizualni materijali, trebali bi biti slični u izgledu i upotrebi kroz jedan dizajn.
To znači da su gumbi jednake boje i koriste ista stanja lebdenja kako bi pomogli korisnicima da znaju kako komunicirati, naslovi su iste veličine i koriste isti slovo u dizajnu, a elementi poput boja slijede paletu koja je prepoznatljiva i povezana s marka.
Ostali vizualni elementi također trebaju slijediti dosljedan stil kao i stil i plan upotrebe elemenata kao što su ikone ili fotografije, video ili ilustracije. Dizajn treba imati glas koji se koristi za kopiranje blokova koji odgovaraju ukupnoj estetici.
Svi ovi elementi konzistentnosti doprinose ukupnoj upotrebljivosti, čineći dizajn što lakšim za interakciju s korisnicima.
2. Koristite razmak
Dodatni prostor oko elemenata može vam pomoći u stvaranju razdvojenosti i olakšanju čitanja. Nema potrebe da se svaki element gurne u prostor iznad svitka. Koristite bijeli prostor da biste uspostavili ritam i protok, stvorili vizualnu hijerarhiju i pomogli korisnicima da se kreću kroz dizajn.
Ako je sadržaj dobar, pomaknut će se.
A razmaci zapravo mogu pomoći u poticanju tog djelovanja korisnika povlačenjem oka prema zaslonu.
Whitespace je još važniji kako se veličine ekrana smanjuju. Dodatni prostor oko elemenata može vam pomoći u stvaranju razdvojenosti i olakšanju čitanja. (Razmislite o tome koliko koristi može biti malo dodatnog prostora kada je riječ o jednostavnom dodiru gumba.)
Niste sigurni gdje uključiti bijeli prostor u dizajn? Započni ovdje:
- Gumbi oko ili drugi interaktivni elementi
- Kao redak redaka između vrsta vrsta radi lakšeg čitanja
- Između elemenata tako da se razlikuju od istoka, poput omotanja fotografija ugrađenih u tekstne blokove
- U obrascima se lako mogu dodirnuti mobilni zasloni
- Oko bilo kojeg elementa na koji želite da se korisnici usredotoče
3. Koristite rešetku
Mreža je temelj korisničkog iskustva. Kada dizajnirate s mrežom, konačna web stranica je preciznija, dosljednija i elementi se postavljaju redoslijedom koji ima vizualni smisao.
Mreže su horizontalne i vertikalne, iako je najpoznatija mreža za web dizajn mogla biti vertikalna mreža stupaca s 12 stupaca za poravnavanje elemenata.
Rešetka je nešto što vidite samo u procesu dizajniranja i ako imate poteškoća s pronalaženjem elemenata ili stvaranjem organiziranog obrisa, rešetka može biti potpuni spasitelj.
4. Nećete zaboraviti korisničke obrasce
Korisnici rade stvari na određeni način i očekuju određene stvari od vašeg dizajna. Da bi postigao što veći uspjeh, dizajn treba koristiti opće prihvaćene obrasce korisnika (ponavljajuća rješenja za probleme u dizajnu) kako bi ljudi točno znali kako dizajn funkcionira.
Uobičajeni uzorci korisnika uključuju:
- Redoslijed informacija u obrascima, počevši od imena ili e-pošte i završavajući sa „pošalji“
- Postavljanje navigacijskih izbornika
- Lokacija i priroda na kojoj se može kliknuti ikona košarice za e-trgovinu
- Kako funkcioniraju obavijesti
- Ikone za pretraživanje i razgovor, između ostalog
UI Design Patterns ima dugi popis korisničkih obrazaca za sve vrste dizajnerskih situacija.
5. Koristite sličnost u akcijama sučelja
Svaki bi element u dizajnu web stranica trebao raditi kao i svaki drugi element iste vrste. Ti bi elementi također trebali imati vizualni identitet kako bi korisnici na prvi pogled znali što jesu i što rade.
Postoji toliko mnogo korisničkih sučelja koje se mogu ugraditi u dizajn da je poštivanje Gestalt principa sličnosti nužno. Grupiranje vizualnih elemenata i radnji tako da ih se vizualno prepoznaju pomoći će stvoriti bolji opći doživljaj za korisnike.
6. Koristite dobro tipografiju
Odmaknite se od dizajna i provjerite je li pismo lako pročitati iz daljine. Ne morate biti glavni tipograf, ali to definitivno pomaže.
Toliko toga što predstavlja dobar dizajn temelji se na čitljivosti i čitljivosti. A ti koncepti ovise o načinu odabira i korištenja slova.
Ako ste u nedoumici, odlučite se za jednostavne slojeve tipa, kao što su serif i sans serif. Odmaknite se od dizajna i provjerite je li pismo lako pročitati iz daljine. Zatim pogledajte slova na malom platnu, poput zaslona telefona kako biste osigurali da je lako i tamo pročitati.
Pokušajte upotrijebiti tip u okruženju s visokim kontrastom, poput svjetlosnog tipa na tamnoj pozadini ili tamnog na svijetloj pozadini kako biste svaku riječ lako pročitali.
7. Nećete zaboraviti zaslone mrežnice
Čak i najmanji zasloni mogu donijeti elemente i slike s približno savršenom pikselom.
Trebate razmotriti kako ćete postupati sa slikama, ikonama i drugim elementima kako bi sve izgledalo lijepo bez obzira na veličinu zaslona. Kada je moguće, korištenje vektorskog formata može biti idealno rješenje, što je i jedan od razloga što SVG sve više raste.
Ako nemate sliku koja bi rezolucija odgovarala uobičajenim veličinama zaslona, nemojte je koristiti. Nijedna slika uopće nije bolja od loše ili pikselirane slike.
8. Morate biti iskreni
Vaš bi dizajn trebao biti istinit vašoj maloj tvrtki, informacijama ili brandu i transparentan u onome što radite. Nemojte krasti dizajn ili sliku, ne pretvarajte se s lažnim ključnim riječima da biste potaknuli promet i bili istiniti za koga i o čemu se radi u vašem sadržaju.
S toliko nereda na webu, korisnici žele komunicirati s dizajnom koji je autentičan. Prevariti korisnike da nešto rade ili se prijaviti za proizvod ili uslugu ili ih samo zavesti u temu ili informaciju trebao bi biti u suprotnosti s vašim osobnim etičkim kodeksom. Ne prihvaćajte projekte koji ovo očekuju od dizajna.
9. Nećete zanemariti pristupačnost
Web bi trebao upotrebljavati što veći broj ljudi. I dok možda može biti teško osigurati da mu dizajn bude dostupan, nije toliko kompliciran kao što možda mislite.
Google ima sjajan vodič o pristupačnosti web mjesta, koji definira ovako:
Općenito govoreći, kada kažemo da je neka web lokacija dostupna, mislimo da je njezin sadržaj dostupan, a njenom funkcionalnošću može upravljati doslovno bilo tko. Kao programeri, lako je pretpostaviti da svi korisnici mogu vidjeti i koristiti tipkovnicu, miš ili dodirni zaslon te mogu komunicirati sa sadržajem vaše stranice na isti način kao i vi. To može dovesti do iskustva koje za neke ljude djeluje dobro, ali stvara probleme koji se kreću od jednostavnih smetnji do zastoja za druge.
Pristupačnost se, dakle, odnosi na iskustvo korisnika koji mogu biti izvan uskog raspona "tipičnog" korisnika, koji mogu pristupiti stvarima ili komunicirati s njima drugačije nego što očekujete. Konkretno, to se odnosi na korisnike koji imaju neku vrstu oštećenja ili invaliditeta - i imajte na umu da to iskustvo može biti nefizičko ili privremeno.
Mnoga načela dobrog dizajna, poput veličine, kontrasta i prostora, doprinose ukupnoj dostupnosti.
WebAIM ima popis za provjeru, kao i druge alate, koji će vam pomoći da utvrdite je li vaš dizajn dostupan. Popis obuhvaća četiri područja koja se odnose na pristupačnost: Je li dizajn uočljiv, operativan, razumljiv i robustan?
10. Trebate biti susretljivi
To bi trebalo biti prilično razumljivo u 2018. godini, ali vaša web stranica mora odgovarati. To uključuje svaki element, od teksta do slike do gumba do cjelokupnog okvira.
Svaki dizajn mora raditi na svakom uređaju. Razdoblje.
Zaključak
Čvrsti skup pravila može vam pomoći brže ući u dizajnerski projekt i raditi dosljednije. Imajte na umu da nijedna od ovih zapovijedi ne govori vam kako projekt treba izgledati; imaju svoje korijene u teoriji kako nacrtati i stvoriti svaku web stranicu.
Imate li dodatnih pravila web dizajna kojima biste dodali ove zapovijedi? Javite nam što su na društvenim medijima. Samo obavezno označite Design Shack!
