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 2020

Gary je v zadnjih 20 letih oblikovalec uporabniškega vmesnika in front-end razvijalec, vodi pa tudi zelo priljubljen YouTube kanal DesignCourse.

Nadomestno besedilo

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.

Nadomestno besedilo

Gary bo pokazal, kako lahko z uporabo samo treh lastnosti CSS padding, marginin line-heightlahko 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, transformin 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.

Izziv 1

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.

Nadomestno besedilo

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.

Primer lestvice

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.

Izziv 2

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

Nadomestno besedilo

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.

Nadomestno besedilo

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.

Barve izziv

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.

Nadomestno besedilo

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.

Izziv vizualne hierarhije

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.

Izziv zadnjega poglavja

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 :)