Naučite osnovni dizajn korisničkog sučelja za 5 minuta

Ako osnovno razumijete HTML i CSS i želite stvoriti izvrsna korisnička sučelja u pregledniku, ne tražite dalje! U ovom ćete članku poboljšati svoje vještine dizajniranja korisničkog sučelja upoznavanjem sljedećih sedam osnova:

  • bijeli prostor
  • poravnanje
  • kontrast
  • ljestvica
  • tipografija
  • boja
  • vizualna hijerarhija

Ovaj se članak temelji na besplatnom Scrimba tečaju koji je stvorio briljantni Gary Simon, poznat i kao DesignCourse. Tečaj nudi set interaktivnih vodiča koje možete pohađati vlastitim tempom, pa čak i ponoviti kako biste stvarno ugradili svoje učenje.

Pokretanje tečaja: Naučite osnove dizajna korisničkog sučelja?

Mislimo da bi svi front-end programi trebali imati osnovne vještine dizajniranja korisničkog sučelja. Pa u ovome? naravno, @designcoursecom vas to uči. Sve bez upotrebe alata za dizajn, samo HTML i CSS.

RT cijenjeni? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba) 28. siječnja 2020

Dakle, ako vam ovaj članak ostavlja želju za još, svakako pogledajte tečaj. Sad uskočimo u to!

Bijeli prostor

Prvi temelj dizajna koji ćemo razmotriti je White Space , također poznat i kao negativni prostor. Kao što i samo ime govori, to je razmak između elemenata na stranici.

U

Elementi zgnječeni na stranici bez praznog prostora ne samo da izgledaju neprivlačno, već su i teški za navigaciju i nezgodni za čitanje.

Prostor možemo prilagoditi na razne načine, uključujući podloge, margine i visinu crte. Pogledajte donju i prije sliku kako biste vidjeli kakve razlike može postići učinkoviti bijeli prostor.

Prije i poslije prilagodbe razmaka

Poravnanje

Sljedeće je Poravnanje . Ovo je postupak osiguranja da je svaki element pravilno pozicioniran u odnosu na druge elemente, na primjer osiguravajući poravnanje stupaca prema stranici.

U

Kao što možete vidjeti iz sljedećih slika, prva stranica s elementima u brojnim različitim stupcima (slabo poravnanje) daleko je manje atraktivna i čitljiva od druge koja ima jako poravnanje

Stranica sa slabim poravnanjem Stranica s jakim poravnanjem

Kontrast

Važno je uzeti u obzir i kontrast prilikom izrade stranice ili aplikacije. Kontrast je razlika između boja koje se pojavljuju jedna na drugoj na stranici.

U

Kao što možete vidjeti iz ovog primjera, stranice s lošim kontrastom teško se čitaju i elementi se ne ističu.

Stranica s lošim kontrastom

Stranice s dobrim kontrastom, poput one u nastavku, ne samo da izgledaju puno bolje nego su i jednostavnije za upotrebu i pristupačnije.

Primjer dobrog kontrasta

Kako bi vam pomogli da kontrast postignete kako treba, WCAG (Smjernice za pristup web sadržaju) predlažu minimalni omjer kontrasta (AA) od najmanje 4,5: 1 ili 3: 1 za veliki tekst ili poboljšani omjer kontrasta (AAA) od 7 : 1 ili 4,5: 1 za veliki tekst. Postoji niz dodataka ili web stranica za provjeru.

Skala

Razmjera je također važan dio korisničkog sučelja, stoga pažljivo razmotrite veličinu svakog elementa. Na primjer, elementi bi trebali biti dovoljno veliki u odnosu na stranicu (tako da nema velikih praznina). Također, elementi veće važnosti, poput naslova, trebali bi biti veći od onih manje značajnih.

U

Pogledajte slike prije i poslije u nastavku i primijetite koliko bolje izgleda stranica kada je pravilno prilagođena.

Stranica slabe razmjere Primjer dobre skale

U

Tipografija

Tipografija također ima velik utjecaj na korisničko sučelje. Postoji mnogo načina da se to prilagodi, uključujući odabir fonta, veličinu fonta, poravnanje, razmak slova, visinu retka, stilove fonta, boju i kontrast.

U

Općenito je da na jednoj stranici koristite najviše dvije obitelji fontova i osigurajte da različiti aspekti rade zajedno kako bi se utvrdio redoslijed važnosti. To je poznato kao vizualna hijerarhija , koju ćemo detaljnije pokriti u nastavku.

U

Ako slijedite ove savjete, vaša će stranica izgledati jednako dobro kao i ova:

Primjer dobre tipografije

I ne zbunjujuće i nečitko, poput ovog:

Stranica s lošom tipografijom

Boja

Osnovni dizajn korisničkog sučelja koji prvi oblikuje korisničko iskustvo je boja . Psihologija boja znači da svaka boja određenim ljudima izaziva značenje - na primjer, crvena može značiti opasnost, dok bijela može izazvati čistoću i vedrinu.

Budite oprezni s bojom. Značenja se razlikuju među kulturama, zato uvijek istražujte i pri odabiru boja uzmite u obzir svoju ciljanu publiku.

U

Također je važno imati na umu da previše boja može stvoriti loše korisničko sučelje i boje koje odaberete koristiti bi se trebale nadopunjavati. U pravilu ne možete pogriješiti ako upotrijebite svjetlije ili tamnije varijacije iste nijanse jednu do druge. Pogledajte samo koliko je druga slika ispod dolje u usporedbi s prvom!

Stranica s lošim izborom boja Dobra upotreba boje

U

Vizualna hijerarhija

Posljednja stavka na našem popisu Osnova dizajna je vizualna hijerarhija . Neki su elementi korisničkog sučelja važniji od drugih. Vizualna hijerarhija omogućuje nam utvrđivanje ove važnosti.

To se može postići položajem, kontrastom, bojom, ljestvicom, stilom ili kombinacijom gore navedenog, kao što je prikazano na drugoj slici ispod, koja ima puno bolju vizualnu hijerarhiju od prve.

Stranica s lošom vizualnom hijerarhijom Korištenje tipografije i boja za uspostavljanje vizualne hijerarhije

Zamotati

U ovom smo članku pokrili sedam glavnih osnova dizajna: razmak, boja, kontrast, skala, poravnanje, tipografija i vizualna hijerarhija. Svi su jednako važni za korisničko sučelje - ako nedostaje jedan od ovih elemenata, patit će cjelokupno korisničko iskustvo. Svakako ih uzmite u obzir prilikom izrade dizajna korisničkog sučelja.

Tečaj Osnove dizajna korisničkog sučelja

Ako želite detaljnije proučiti ove teme, pogledajte besplatni tečaj Osnove dizajna korisničkog sučelja na Scrimbi. U njemu ćete mnogo detaljnije naučiti o osnovama.

Sretno i sretno kodiranje :)