hogyan lehet megtanulni a webdesignot (9 lépésben)
értsd meg a vizuális tervezés kulcsfogalmait
sor
minden betű, szegély és osztás egy elrendezésben olyan sorokból áll, amelyek nagyobb struktúrát alkotnak. A webdesign tanulása azt jelenti, hogy megértjük a vonalak alkalmazását a rend és az egyensúly megteremtésében az elrendezésben.
alakzatok
a vizuális tervezés három alapvető alakja Négyzet, Kör és háromszög. A négyzetek és téglalapok a tartalomblokkokhoz, a körök a gombokhoz, a háromszögek pedig gyakran a fontos üzenetet vagy cselekvésre ösztönzést kísérő ikonokhoz használhatók. A formáknak is van érzelemérzetük, a négyzetek az erővel társulnak, a körök harmóniával és kényelemmel, a háromszögek pedig fontossággal és cselekvéssel.
textúra
textúra reprodukál valamit a Való Világban. A textúra révén képet kapunk arról, hogy valami durva vagy sima-e. Textúrák látható az egész web design. A papírszerű hátterektől a Gauss-elmosódás színes Wisp-jéig, tisztában kell lennie a különböző textúrákkal, amelyek érdekesebbé tehetik a terveket, és a testiség érzetét adhatják nekik.
Color
ahhoz, hogy olyan mintákat hozzon létre, amelyek nem szemtörzsek, meg kell oktatnia magát a színelméletben. A színkerék, a kiegészítő színek, a kontrasztos színek és az érzelmek megértése, amelyekhez a különböző színek kötődnek, jobb webdesigner lesz.
rácsok
a rácsok gyökerei a grafikai tervezés legkorábbi napjaiban vannak. Olyan jól működnek, hogy képeket, szövegeket és más elemeket hoznak létre a webdesignban. Ismerje meg, hogyan strukturálhatja webes elrendezéseit rácsok segítségével.
Ismerje meg a HTML alapjait
a Hypertext markup language (HTML) útmutatást nyújt arra vonatkozóan, hogy a webhely tartalma, képei, navigációja és egyéb elemei hogyan jelenjenek meg valaki webböngészőjében. Bár nem kell szakértőnek lennie a HTML-ben, mégis segít, ha ismeri a működését, még akkor is, ha olyan vizuális alapú tervezési platformot használ, mint a Webflow.
a HTML-címkék azok az utasítások, amelyeket a böngésző használ a webhely létrehozásához. A címsorokat, bekezdéseket, hivatkozásokat és képeket ezek a címkék vezérlik. Különösen azt szeretné tudni, hogy a H1, H2 és H3 címkéket hogyan használják a tartalomhierarchiában. Amellett, hogy befolyásolja az elrendezés szerkezetét, a fejléccímkék fontosak abban, hogy a webbejárók hogyan osztályozzák a terveket, és befolyásolják, hogyan jelennek meg az organikus keresési rangsorban.
ha többet szeretne megtudni a HTML alapfogalmairól (van egy szakasz a CSS-ről is), nézze meg ezt a leckét, amelyet a Webflow Egyetemen állítottunk össze.
a CSS megértése
a CSS (vagy cascading style sheets) stílusokat és további utasításokat tartalmaz arra vonatkozóan, hogy egy HTML elem hogyan fog megjelenni. Olyan dolgok elvégzése, mint a betűtípusok alkalmazása, a kitöltés hozzáadása, az Igazítás beállítása, a színek kiválasztása, sőt a rácsok létrehozása is lehetséges a CSS-en keresztül.
a CSS működésének ismerete megadja a készségeket egyedi megjelenésű webhelyek létrehozásához és a meglévő sablonok testreszabásához. Nézzük át a CSS néhány kulcsfogalmát.
CSS osztályok
a CSS osztály olyan attribútumok listája, amelyek egy egyedi elem formázásakor jönnek össze. Valami olyasmi, mint a törzsszöveg, lehet, hogy a betűtípus, a méret és a szín egyetlen CSS osztály része.
CSS kombinált osztályok
a kombinált osztály egy meglévő alaposztályra épül. Örökli az összes olyan tulajdonságot, mint a méretezés, a szín és az igazítás, amelyek már a helyükön vannak. Az attribútumokat ezután meg lehet változtatni. A kombinált osztályok időt takarítanak meg, és lehetővé teszik egy osztály variációinak beállítását, amelyeket bárhol alkalmazhat egy webdesignban.
a CSS működésének ismerete elengedhetetlen a webdesign tanulásához. Amint azt a HTML-ről szóló szakaszban említettük, javasoljuk, hogy menjen át a Webflow egyetemre, hogy többet megtudjon a CSS működéséről.
Ismerje meg az UX alapjait
az UX az a varázslat, amely életre kelti a weboldalt, átalakítva az elemek statikus elrendezéséből olyanná, amely összekapcsolódik annak érzelmeivel, ha valaki végiggörgeti.
a színséma, a tartalom, a tipográfia, az elrendezés és a látvány együttesen szolgálja a közönséget. A felhasználói élmény kialakítása a pontosságról és az érzések felidézéséről szól. Nemcsak zökkenőmentes utazást kínál valakinek, hanem olyan élményt is, amely összeköti őket a webdesign mögött álló entitással vagy márkával.
Íme néhány UX elv, amit tudnod kell.
felhasználói személyek
a webdesign a végfelhasználók megértését jelenti. Meg kell tanulnia, hogyan kell felhasználói kutatást végezni, és hogyan lehet felhasználói személyeket létrehozni. Ezenkívül tudnia kell, hogyan használhatja fel ezeket az információkat az igényeikhez optimalizált kialakítás létrehozásához.
információs architektúra
világos szervezés nélkül az emberek összezavarodnak és ugrálnak. Az információs architektúra és a tartalom leképezés egy tervet nyújt arra vonatkozóan, hogy a weboldal és az egyes szakaszok hogyan működnek együtt az ügyfelek egyértelmű utazása érdekében.
felhasználói folyamatok
a felhasználói folyamatok felépítése akkor jöhet szóba, ha szélesebb körű tervezési projektekhez dolgozik, de a jövőben jobb lesz, ha elkezd gondolkodni ezeken, és a korai tervekhez építi őket. A felhasználói áramlások kommunikálják, hogy az emberek hogyan mozognak egy terven. Segítenek a legfontosabb szakaszok rangsorolásában, és biztosítják, hogy az emberek hozzáférhessenek hozzájuk.
drótvázak
a drótvázak azt mutatják, hogy a weblap fejlécei, szövegei, látványai, űrlapjai és egyéb elemei hol lesznek elhelyezve. Még akkor is, ha egy egyszerű, egyoldalas webdesignot épít, a drótváz feltérképezése szilárd útmutatót ad a munkához. Ahogy továbblépsz a bonyolultabb weboldalakra, a drótvázak elengedhetetlenek a következetes élmény megteremtéséhez, az elrendezések strukturálásához, és nem hiányoznak semmi, amit bele kell foglalni.
prototípuskészítés
a prototípusok különböző szintű hűséggel rendelkezhetnek, de egy működő terv ábrázolásaként működhetnek. A képek, az interakciók, A tartalom és más fontos elemek mind a helyükön vannak, és megismétlik a valós dizájnt. A prototípusokat arra használják, hogy visszajelzést kapjanak és finomhangolják a tervet a folyamat során.
ismerkedjen meg az UI-val
a felhasználói felület olyan mechanizmus, amely egy technológiát működésbe hoz. A kilincs egy felhasználói felület. Az autórádió hangerőszabályzója, amellyel a másik jelentős személy nem hagyja abba a rendetlenséget, egy felhasználói felület. A billentyűzet, amelybe beírja a PIN-kódját egy ATM-ben, egy felhasználói felület. Csakúgy, mint a gombok és más mechanizmusok a valós világban lehetővé teszik, hogy valaki kölcsönhatásba lépjen a gépekkel, a webhely felhasználói felületének elemei lehetővé teszik, hogy valaki mozgásba hozza a műveleteket.
tekintsünk át két kulcsfontosságú UI alapelvet: intuitív tervezés és egyszerűség.
Hogyan hozzunk létre intuitív interfészeket
a weboldallal való interakciónak következetesnek kell lennie, és ismételhető mintákat kell követnie. A webhelyre érkező embereknek azonnal meg kell érteniük azokat a rendszereket, amelyek a navigálásban vannak.
a felhasználói felület egyszerűvé tétele
a felhasználói felület a használhatóság optimalizálása érdekében létezik. Ez azt jelenti, hogy a kezelőszervek könnyen kezelhetők, valamint nyilvánvalóak a funkcionalitásukban. Függetlenül attól, hogy minimalizálja a navigációs lehetőségek számát, gyorsabbá teszi a fizetési folyamatot, vagy más interaktív elemeket integrál, amelyek növelik a hozzáférhetőséget, a felhasználói felület megértése segít egyszerűsíteni valakinek a weboldallal való interakció során szerzett tapasztalatait.
természetesen az UI egy hatalmas téma, amelyet nem lehet csak néhány bekezdésben rögzíteni. Javasoljuk, hogy nézze meg a “10 alapvető felhasználói felület (felhasználói felület) tervezési tipp” blogbejegyzést, mint a felhasználói felület alapozóját.
kapcsolódó olvasmányok: UX vs UI: főbb különbségek minden tervezőnek tudnia kell
értse meg az elrendezések létrehozásának alapjait
a szemünk automatikusan ragaszkodik bizonyos tervezési mintákhoz, így könnyű utat biztosít a webdesignon keresztül. Ösztönösen tudjuk, hol keressük, mert ugyanazokat a mintákat láttuk újra és újra, ahogy életünk során fogyasztottuk a médiát. A tervezési minták ismerete segít olyan webhelyek létrehozásában, amelyek zökkenőmentesen áramlanak a tartalomhoz és a látványhoz. Két általános webes elrendezési minta, amelyekről tudnia kell, a Z-minták és az F-minták.
Z-pattern
a szavak és képek gazdaságosságával és nagy mennyiségű negatív térrel rendelkező elrendezések esetében a Z-pattern hatékony módja annak, hogy egy weboldalon keresztül utazzon. Amikor elkezd figyelni arra, hogy a szeme hol megy keresztül egy terven, azonnal felismeri, ha a Z-minta a helyén van.
F-minta
a szövegre nehezedő minták, például egy online kiadvány vagy egy blog esetében, gyakran különálló F-mintát követnek. A képernyő bal oldalán megjelenik a cikkek vagy bejegyzések listája, az oldal fő törzsében pedig a kapcsolódó információk sorai láthatók. Ezt a mintát úgy optimalizálták, hogy minden szükséges információt megadjon az embereknek, még akkor is, ha gyorsan átpillantanak rajta.
kapcsolódó olvasmányok: weboldal layout: weboldal anatómia minden tervezőnek meg kell tanulnia
Tudjon meg többet a tipográfiáról
a betűtípusok különböző hangokat vagy érzelmeket kölcsönözhetnek, valamint befolyásolhatják az olvashatóságot. Ha a webdesignról tanul, elengedhetetlen a tipográfia használatának ismerete.
a tipográfia számos célt szolgál a webdesignban. Először is a tartalom olvashatóvá tételének haszonelvű célját szolgálja. De dekorációként is szolgálhat, a stilizált tipográfia ízléses használata pedig növelheti az Általános esztétikát.
itt van három alapvető tipográfiai fogalom, amelyet tudnia kell.
Serif
a Serif betűtípusok apró sorokat tartalmaznak, amelyek minden betűt megtisztítanak. Ez a tipográfiai stílus a nyomtatáshoz vezethető vissza.
Sans serif
ahogy a neve is mutatja, a sans serif betűtípusokból hiányoznak a serif betűtípusok azonosító sorai. Ezek a típusok a weboldalak és alkalmazások digitális birodalmán keresztül találhatók meg.
kijelző
a megjelenítési betűtípusokat gyakran használják a címsorokhoz, és lehetnek nagyok és hatásosak, vagy éles, vékony vonalakból készülhetnek. Általában kifinomult betűformákkal rendelkeznek, és arra szolgálnak, hogy megragadják valaki figyelmét.
kapcsolódó olvasmányok: tipográfiai tervezés: betűtípusok és források a tervezők számára
tedd tudásodat cselekvésbe és építs valamit
meg lehet nézni oktatóanyagok, olvasni blogbejegyzések, beiratkozik az online tanfolyamok, és elnyeli az összes elmélet és információ akkor a web design, de az egyetlen módja annak, hogy legyen egy web designer kezdeni web tervezése.
Kezdje egy egyszerű projekttel. Lehet, hogy valaki, akit ismer, segítségre van szüksége egy portfólió létrehozásában, vagy olyan oldalsó nyüzsgéssel rendelkezik, amelyből hiányzik bármilyen webes jelenlét. Ajánlat, hogy tervezzen nekik valamit ingyen.
a blog is egy nagyszerű kezdő projekt. Ez ad gyakorlati tervezési tapasztalat a tanulás, hogyan kell használni a dolgokat, mint a CMS, valamint amely egy kirakat az íráskészség.
weboldal készítése hamis vállalat vagy vállalkozás számára egy másik szórakoztató kreatív gyakorlat a tervezési szeletek fejlesztésében. Ráadásul hozzáadhatja a portfóliójához.
Szerezz mentort
a mentorok azért értékesek, mert ott voltak, ahol vagy — a legelején—, és vágyakoztak arra, hogy segítsenek a nehezen megszerzett leckékben, amelyeket megtanultak. Mély szakértelemmel és tudással rendelkeznek. Ők egy nagy forrás abban, hogy visszajelzést a munkát, és megtalálni, mit csinálsz jól, és mit kell javítani.
a megfelelő mentor keresésekor győződjön meg róla, hogy talál valakit, aki az Ön által csodált formatervezést végzi, és specializálódott arra, amit meg akar tanulni. A mentorok egyértelmű utat adhatnak a területen töltött évekből, így nem kell megbotlania a webdesign tanulásában.
egyetlen kód sem nyújt könnyű belépést a webdesignba
volt idő, nem is olyan régen, amikor a HTML és a CSS mély megértésével kellett rendelkeznie ahhoz, hogy manuálisan írja a kódot a webdesign mögé. Ma, olyan kódeszközök nélkül, mint a Webflow, lehetséges összeállítani egy weboldalt, és rövid idő alatt elindítani. Ami napokig vagy hetekig tartott, most órákban történhet.
természetesen annyira megy létre egy jó web design. A vizuális tervezés alapjainak, az UI és az UX alapjainak megtanulása, valamint annak ismerete, hogy a front end és a back end funkció hogyan fog jobban lekerekített tervezővé válni.
akár csak most kezdi, akár szakértő, a Webflow intuitív vizuális alapú platformot kínál, amely felhatalmazza Önt kreativitásának megvalósítására. A webhelyek elindításának könnyen használható módja mellett a Webflow egy egész közösséggel rendelkezik, amely tanácsot ad Önnek, és segít a készségek szintjének növelésében. Bízunk benne, hogy látni fog dolgozni a mi kirakat.