S tem brezplačnim enournim tečajem se naučite osnov oblikovanja uporabniškega vmesnika
Z veseljem sporočam, da smo pravkar začeli s tem brezplačnim tečajem Scrimba o osnovah oblikovanja uporabniškega vmesnika Garyja Simona.
Začetek tečaja: Naučite se osnov uporabniškega vmesnika?
Menimo, da bi morali vsi front-end razvijalci imeti osnovne veščine oblikovanja uporabniškega vmesnika. Torej v tem? Seveda vas tega nauči @designcoursecom. Vse brez uporabe orodij za oblikovanje, samo HTML in CSS.
Cenjeni RT-ji? // t.co/mT9fDjShUd # 100daysofcode
- Scrimba (@scrimba) 28. januarja 2020Gary je v zadnjih 20 letih oblikovalec uporabniškega vmesnika in front-end razvijalec, vodi pa tudi zelo priljubljen YouTube kanal DesignCourse.

V samo eni uri bo Gary izpopolnil vaše veščine oblikovanja uporabniškega vmesnika, tako da vam bo pomagal dojeti sedem najpomembnejših gradnikov vseh dobrih uporabniških vmesnikov:
- Prazen prostor
- Barva
- Kontrast
- Lestvica
- Poravnava
- Tipografija
- Vizualna hierarhija
Tečaj vsebuje kombinacijo predavanj in interaktivnih izzivov kodiranja, kar pomeni, da boste v brskalniku dejansko gradili uporabniške vmesnike. Torej boste pred vpisom potrebovali osnovno razumevanje HTML-ja in CSS-ja.
Če pa šele začenjate, ne skrbite, obstaja odličen tečaj zrušitve HTML-ja in CSS-ja na Scrimbi, ki ga lahko naredite, da določite nekaj osnov.
Kar zadeva začetno nastavitev tega tečaja - ni predpogojev! Tečaj je na Scrimbi, zato lahko med izvajanjem tečaja komunicirate s kodo.
Kliknite tukaj, če želite takoj začeti s tečajem, ali nadaljujte z branjem, če želite razčleniti strukturo tečaja.
1. poglavje: Prazen prostor
V prvi lekciji se boste naučili, kako uporabljati presledek. Prazen prostor je prazen prostor med elementi v vašem uporabniškem vmesniku.

Gary bo pokazal, kako lahko z uporabo samo treh lastnosti CSS padding
, margin
in line-height
lahko znatno izboljšate videz besedila.
Poglavje 2: Poravnava
V tem poglavju Gary prikazuje, kako lahko poravnava izboljša stvari z minimalno kodo. Poravnava je postopek zagotavljanja, da je vsak element pravilno postavljen glede na druge elemente. Spet, s samo 3 lastnosti: margin
, transform
in text-align
.
3. poglavje: Izziv s kartami
Dobrodošli v prvem izzivu tečaja. Ta in naslednji izzivi so zasnovani tako, da kodirate rešitev in se poskušate nekoliko potisniti, Gary pa vam nato pokaže svojo stališče, da ga primerjate.
V tem izzivu vam bo dal nekaj kart, ki jih boste potrebovali za izboljšanje presledka in poravnave.

Ko končate, lahko skočite v igralsko zasedbo in si ogledate Garyjevo rešitev.
Poglavje 4: Kontrast
V tej oddaji zaslona boste spoznali kontrast. Kontrast je opredeljen kot "presenetljivo" drugačno stanje kot kaj drugega. Gary bo opisal "Smernice za kontrast" in kako zagotoviti, da bo vaš dizajn dostopen tistim z motnjami vida.

5. poglavje: Lestvica
Čas je, da se pogovorimo o obsegu. Gary bo pokazal, da lahko z izkoriščanjem obsega različnih elementov močno izboljšate dizajn.

6. poglavje: Popravite grd uporabniški vmesnik
Dobro delo, prišli ste do drugega izziva tečaja. V tem izzivu boste za začetek dobili še bolj grdo obliko.

Doslej ste se naučili 4 osnov oblikovanja: presledek, poravnava, kontrast in lestvica.
Ta ima očitno težavo z vsemi štirimi. Trudite se, da ga popravite in preverite njegovo rešitev za izziv.
7. poglavje: Tipografija

Tipografija zahteva razumevanje drugih osnov, skupaj z nekaj drugimi premisleki. V tej zasedbi bo Gary svetoval, kako učinkovito izbrati pisave, njihovo velikost, razmik in nekaj več.
8. poglavje: Barva
Barva je prva zasnova uporabniškega vmesnika, ki oblikuje uporabniško izkušnjo! Gary pokriva nekaj ključnih premislekov pri izbiri barv za ciljno publiko, nekaj pogostih ne in ne, ter nekaj osnov kombinacije barv.

9. poglavje: Barvni izziv
Ker so barve tako pomemben vidik vašega oblikovanja, boste morali narediti izziv, da utrdite svoje barvne spretnosti. Spodaj boste prejeli zasnovo. Namerno je v lestvici sivine, zato lahko vadite ustvarjanje nekaj modelov z uporabo samo barv v spodnjem desnem kotu.

Poskusite jih imeti več, tako da boste resnično lahko raziskali možne možnosti in kombinacije. Ko boste imeli pripravljenih nekaj možnosti, nadaljujte in primerjajte, če imata z Garyjem kakšno podobno zasnovo pri njegovem reševanju
10. poglavje: Vizualna hierarhija
Vizualna hierarhija je način, kako določite pomembnost elementov v uporabniškem vmesniku. Nekateri elementi so pomembnejši od drugih.

V tem poglavju Gary s preprostim obrazcem za prijavo po e-pošti pokaže, kako lahko izboljšate dokaj nenavaden dizajn, tako da poudarite nekatere njegove ključne vidike in izboljšate njegovo vizualno hierarhijo.
11. poglavje: Izziv vizualne hierarhije
Zdaj vadimo in uporabljajmo svoje znanje. Dobili boste preprosto kartico in edina težava je, da je njena vizualna hierarhija povsod.

Poskusite ga izboljšati, kolikor je le mogoče, in se prepričajte, da preverite Garyjevo odločitev.
12. poglavje: Zadnji izziv
Dobrodošli v našem zadnjem poglavju, izzivu oblikovanja. Imate to postavitev s težavami v vizualni hierarhiji, presledku, barvi in poravnavi. Vaš izziv je, da se lotite teh štirih, da izboljšate to zasnovo, kolikor je le mogoče.

Ko končate, si lahko ogledate, kako Gary sprejema rešitev.
Zaključne misli
Če ste prišli tako daleč: čestitke za zaključek tega tečaja! Lahko ste ponosni nase, saj večina ljudi le začne tečaje, ne da bi jih končala. Zdaj dobro poznate te osnove oblikovanja uporabniškega vmesnika:
- Prazen prostor
- Barva
- Kontrast
- Lestvica
- Poravnava
- Tipografija
- Vizualna hierarhija
Vsi so enako pomembni za pravilno oblikovanje. Če na enem od teh področij manjka zasnove, je res lahko opaziti, da s kakovostjo zasnove nekaj ni povsem v redu.
Zato ne pozabite razmisliti o vseh teh osnovah, ko boste naslednjič morali zgraditi uporabniški vmesnik.
Vso srečo :)