Tanulja meg a felhasználói felület tervezésének alapjait ezzel az egy órás ingyenes tanfolyammal

Örömmel jelentem be, hogy most indítottuk el ezt az ingyenes Scrimba tanfolyamot a felhasználói felület tervezésének alapjairól, Gary Simon.

Tanfolyam indítása: Ismerje meg a felhasználói felület tervezésének alapjait?

Úgy gondoljuk, hogy minden front-end fejlesztőnek rendelkeznie kell alapvető felhasználói felület-készítési ismeretekkel. Tehát ebben? természetesen a @designcoursecom erre tanít. Mindezt semmilyen tervező eszköz, csak HTML és CSS nélkül.

Az RT-k értékelik? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba) 2020. január 28

Gary az elmúlt 20 évben felhasználói felület-tervező és front-end fejlesztő, emellett a tömegesen népszerű YouTube-csatornát, a DesignCourse-t is vezeti.

Alt szöveg

Csak egy óra alatt Gary feljavítja felhasználói felületének tervezési készségeit azáltal, hogy segít megérteni az összes jó felhasználói felület hét legfontosabb építőelemeit:

  • fehér űr
  • Szín
  • Kontraszt
  • Skála
  • Igazítás
  • Tipográfia
  • Vizuális hierarchia

A tanfolyam előadások és interaktív kódolási kihívások keverékét tartalmazza, vagyis valójában felhasználói felületeket épít a böngészőben. Tehát a regisztráció előtt meg kell ismernie a HTML és a CSS alapismereteit.

Azonban, ha csak most indul, ne aggódjon, van egy remek összeomlási tanfolyam a HTML-n és a CSS-en a Scrimba-n, amelyet megtehet néhány alapmunka elkészítéséhez.

Ami a kurzus kezdeti beállítását illeti, nincsenek előfeltételek! A tanfolyam a Scrimbán van, így a tanfolyam előrehaladtával kölcsönhatásba léphet a kóddal.

Kattintson ide a tanfolyam azonnali megkezdéséhez, vagy folytassa az olvasást, ha részleteket szeretne kapni a tanfolyam felépítéséről.

1. fejezet: Fehér tér

Az első leckében megtanulja a szóköz használatát. A fehér tér az üres felület az Ön felhasználói felületének elemei között.

Alt szöveg

Gary megmutatja, hogyan használja mindössze 3 CSS tulajdonságok padding, marginés line-heightakkor jelentősen javítja a megjelenését a szöveget.

2. fejezet: Igazítás

Ebben a fejezetben Gary bemutatja, hogy az igazítás miként javíthatja a dolgokat minimális kóddal. Az igazítás az a folyamat, amely biztosítja, hogy minden elem helyesen legyen elhelyezve a többi elemhez képest. Ismét csak 3 tulajdonságok: margin, transformés text-align.

3. fejezet: A kártya kihívása

Üdvözöljük a tanfolyam első kihívásában. Ez és a következő kihívások úgy vannak megtervezve, hogy kódolsz egy megoldást, és megpróbálod kicsit lökdösni magadat, Gary pedig utána megmutatja a felvételét, hogy összehasonlítsd.

Ebben a kihívásban ad néhány kártyát, amelyekre szükséged lesz a szóköz és az igazítás javításához.

1. kihívás

Ha végzett, nyugodtan ugorjon be a stábba, és nézze meg, hogy Gary felveszi a megoldást.

4. fejezet: Kontraszt

Ebben a képernyõben megismerheti a kontrasztot. A kontrasztot úgy definiálják, hogy valami "feltűnően" más állapotban van. Gary kitér a „Kontraszt irányelvekre” és arra, hogy miként biztosíthatja, hogy a terv hozzáférhető legyen a látássérültek számára.

Alt szöveg

5. fejezet: Méretarány

Ideje beszélni a méretarányról. Gary megmutatja, hogy a különböző elemek skálájának kihasználásával jelentősen javíthatja a tervezést.

Példa méretarányra

6. fejezet: Ronda felhasználói felület javítása

Jó munka, eljutottál a tanfolyam második kihívásába. Ebben a kihívásban egy kezdetektől még csúnyább dizájnt ad.

2. kihívás

Eddig 4 tervezési alapismeretet tanultál meg: fehér tér, igazítás, kontraszt és méretarány.

Ennek egyértelműen problémája van mind a néggyel. Próbáljon meg mindent megjavítani, és feltétlenül nézze meg a kihívás megoldását.

7. fejezet: Tipográfia

Alt szöveg

A tipográfia megköveteli más alapok megértését, néhány más szempont mellett. Ebben a szereplőgárdában Gary tanácsokat fog adni a betűtípusok, méretük, távolságuk és néhány további hatékony kiválasztásához.

8. fejezet: Szín

A szín az első alapvető felhasználói felület-tervezés, amely formálja a felhasználói élményt! Gary néhány kulcsfontosságú szempontot ismertet a célközönség színeinek megválasztásakor, néhány gyakori javaslatot és tilalmat, valamint néhány színkombinációs alapot.

Alt szöveg

9. fejezet: A színek kihívása

Mivel a színek olyan fontos szempontok a tervezésben, kihívást kell tennie a színtudás megszilárdítása érdekében. Megkapja az alábbi tervet. Szándékosan szürkeárnyalatos, így gyakorolhat néhány rajz létrehozását a jobb alsó sarokban található színek használatával.

A színek kihívást jelentenek

Próbáljon több is lenni, így valóban felfedezheti a lehetséges lehetőségeket és kombinációkat. Ha készen áll néhány lehetőségre, menjen előre, és hasonlítsa össze, hogy Ön és Gary esetében van-e hasonló megoldás a megoldásról

10. fejezet: Vizuális hierarchia

A vizuális hierarchia segítségével megállapíthatja az elemek fontosságát a felhasználói felületen. Egyes elemek fontosabbak, mint mások.

Alt szöveg

Ebben a fejezetben Gary egy egyszerű e-mailes regisztrációs űrlappal mutatja be, hogyan javíthat egy meglehetősen nyájas dizájnon, kiemelve annak néhány kulcsfontosságú aspektusát és javítva annak vizuális hierarchiáját.

11. fejezet: Visual Hierarchy Challenge

Most gyakoroljuk és alkalmazzuk tudásunkat. Kapsz egy egyszerű kártyát, és az egyetlen probléma, hogy vizuális hierarchiája mindenhol jelen van.

Visual Hierarchy Challenge

Próbáljon minél többet fejleszteni, és feltétlenül nézze meg Gary megoldását.

12. fejezet: Az utolsó kihívás

Üdvözöljük az utolsó fejezetkihívásunkban, egy tervezési kihívásban. Ezzel az elrendezéssel rendelkezik a vizuális hierarchia, a szóköz, a szín és az igazítás kérdéseivel. Az Ön kihívása az, hogy foglalkozzon ezzel a 4-el, hogy minél jobban javítsa ezt a kialakítást.

Végső fejezet kihívás

Ha kész, megnézheti, ahogy Gary megoldást vállal.

Záró gondolatok

Ha idáig eljut: gratulálok a tanfolyam befejezéséhez! Büszke lehetsz magadra, mivel a legtöbb ember csak úgy kezdi a tanfolyamokat, hogy nem fejezi be őket. Mostantól alapvető ismerete van a felhasználói felület ezen alapjairól:

  • fehér űr
  • Szín
  • Kontraszt
  • Skála
  • Igazítás
  • Tipográfia
  • Vizuális hierarchia

Mindannyian egyformán fontosak a tervezés megfelelő kialakítása érdekében. Ha az egyik ilyen területen hiányzik a tervezés, akkor nagyon könnyű észrevenni, hogy valami nem egészen megfelelő a tervezés minőségével.

Tehát mindenképpen gondoljon ezekre az alapokra, amikor legközelebb felhasználói felületet kell építenie.

Sok szerencsét :)