ha elhatározta, hogy önállóan tanulja meg a webdesignot, akkor a megfelelő helyen jár.
igaz, hogy a webdesign meglehetősen összetett és ijesztő lehet, de a technológia és az internet penetráció fejlődésével epikus méreteket öltött. Nem meglepő, hogy a webdesignerré válás a jelenlegi generáció népszerű trendjévé vált.
ebben a cikkben bemutatom a webdesign tanulását erőforrásokkal és tippekkel. Azoknak a kezdőknek, akik ezt az utat szeretnék megtenni, ezt a cikket útmutatóként szolgálhatja.
1.lépés: döntsön és tervezzen
a webdesign tanulása hosszú távú feladat, amely tele van kihívásokkal. Komolyan kell kihívnia magát. Döntsd el most, és készíts terveket az ebben a cikkben bemutatott tanulási útmutatók alapján. Ne feledje, hogy akkor teszi a saját, ha elkezdi tanulni web design gyakorlaton keresztül. Tehát készen áll!
2. lépés: szerezzen alapvető ismereteket a webdesignról
” hogyan kezdhetem el a webdesign tanulását?”Ez a kérdés a fejedben. A webdesign alapos megtanulásához meg kell értenie legalább a következő 2 kérdés válaszait:
mi a webdesign?
az emberek gyakran félreértik a webdesign jelentését.
Nos, mi is pontosan a web design?
vizuális + interakció = webdesign
a webdesign a problémák megoldásáról szól. Ez magában foglalja a weboldal minden aspektusát – a weboldal megjelenésének és funkcionalitásának felépítésének művészetét, készségeit, tudományát és technológiáját, valamint azt, hogy a felhasználók hogyan lépnek kapcsolatba a weboldalakkal.
sok fiatal tervező gyakran félreérti a webdesign fogalmát a fejlesztés fogalmával.
ne feledje: a webdesign a tervezésről szól, nem pedig a kódolásról és a front-end vagy a back-end fejlesztésről.
természetesen jobb, ha ismer néhány kódolási nyelvet (HTML, CSS, Java stb.), de nem szabad mélyen belemerülnie a front-end vagy a back-end fejlesztésbe, ha koncentrált webdesigner szeretne lenni. Ez nem a webdesign lényege.
mi a webdesign folyamata?
a webdesign nem egyszerű feladat. Ez elég nehéz, mégis érdekes, hogy egy üres oldalt egy teljes honlap. Hogy teheted?
be kell, hogy kövesse a főbb szakaszai a web design folyamat. Ezek:
- cél beállítása
határozza meg, hogy milyen típusú weboldalt tervez. E-kereskedelemre, vállalkozásra, új termék promócióra vagy tevékenységi projektre vonatkozik?
ha nincs ötlete, akkor kezdje el egy bloggal. Az új tanulók számára a blog építése jobb választás, mint bármely más típusú bonyolult weboldal létrehozása.
- ütemterv készítése
idővonal létrehozása az oldalak tervezéséhez. Rendeljen feladatokat mindenkinek, aki részt vesz a webtervezési projektben.
- Webhelytérkép létrehozása és wireframing
ötletelés. Kapcsolja be az ötleteket drótvázba tollal vagy drótvázas eszközökkel. Le kell fordítania gondolatait valami kézzelfoghatóvá, hogy korán érvényesíthesse őket.
- tartalom létrehozása
tartalom hozzáadása tervezési elemekkel, látványelemekkel, másolatokkal és interakciókkal. Ez az a szakasz, ahol minden tervezési és fejlesztési készségét felhasználhatja. Ebben a szakaszban egy üres oldalt kész webhelyré konvertál.
- tesztelés
tesztelje webhelyét és gyűjtsön hasznos visszajelzéseket. Addig tegye, amíg maximalizálja a felhasználói élmény minőségét, majd készen áll az indításra.
- a
elindítása tegye elérhetővé webhelyét a látogatók számára, és javítsa azt az összegyűjtött visszajelzések alapján.
a 43 perces webdesign tanfolyamon keresztül átfogóbb megértést kaphat a webdesign folyamatáról.
3. lépés: kezdje el a tanulást
Miután beállította magát, és megértette a weboldal tervezésének alapjait, elkezdheti a gyakorlati tanulási forrásokat és tippeket.
a webdesign magában foglalja mind a vizuális megjelenést, mind a funkcionális tervezést. Ez azt jelenti, hogy meg kell tanulnod 2 fő dolog:
- hogyan csinál egy weboldal jól néz ki?
- hogyan lehet, hogy egy weboldal jól működik?
meg kell tanulnia az interfészek tervezését (tipográfia, navigáció, képek, tér, animációk, színek stb.), hogyan kell kódolni őket egy webfejlesztő nyelven (HTML, CSS, Python, SQL, Ruby vagy JavaScript), valamint optimalizálja webhelyét a keresőmotorok számára.
olvassa el a webdesign tanulási könyveket
a webdesign tanulásának egyik legjobb módja a könyvek olvasása. Íme 5 a legjobb web design könyvek, amelyek hasznosak azok számára, akik szeretnék megtanulni web design a saját.
- HTML és CSS: weboldalak tervezése és építése
- tanulás Web Design: kezdő útmutató
- ne kelljen gondolkodnom: A józan ész megközelítése webes használhatóság
- tanulás web design
- tervezés webes szabványok
olvassa web design blogok
ha nem egy könyvmoly, és megtalálja olvasás unalmas feladat, akkor kövesse néhány legjobb web design blogok tartani az agy táplált. Használja a blogokat alternatívaként, és iratkozzon fel kedvenceire, hogy ne hagyjon ki semmit.
- Smashing magazin
- Mockplus blog
- Webdesigner Depot
- Webdesignledger
- WEB DESIGN könyvtár
- Hacking UI
- 1stwebdesigner
- webappers
Tanulj PDF tartalommal
néhány igazán hasznos tartalom PDF formátumban ingyenesen letölthető. Tudod használni, hogy megtanulják web design lépésről lépésre. Íme néhány példa, amely megéri az idejét.
- Web design – handbook
- tanulás Web Design harmadik kiadás – szemantikus tudós
- Web design 101 – MIT
- Építsd meg a saját honlapján a helyes utat a HTML & CSS – X-Files
- a teljes útmutató Web Design.pdf-online Keresztény Könyvtár
Tanuljon szakemberektől
kövesse azokat a webes tervezőket, akiktől tanulni szeretne olyan közösségi oldalakon, mint a Twitter, a Dribbble, a Behance, a Github és más platformok, ahol aktívak. Olvassa el a hozzászólásaikat, kattintson a Tetszik gombra azok számára, akiket értékel, és kommentáljon, ha pontot szeretne hozzáadni vagy kérdést feltenni . Ha szerencséd van, mentort találhat magának egy online közösségben vagy csoportban. De ne zavarja őket, és vegye magától értetődőnek a segítségüket.
Web designerek, akiket követhetsz:
- Ethan Marcotte
- Chris Coyier
- Ethan Marcotte
- Jeffrey Zeldman
- Luke Wroblewski
tanulj a webdesign oktatóvideókból
rengeteg Youtube-videó elérhető online. Csökkentse a vicces dolgok megtekintésének idejét, és használja a Youtube-ot a webdesign tanulásához. Itt ajánlom az 5 legnépszerűbb video oktatóanyagot. Élvezze a nézést.
- A kezdő Web Design bemutató 2018-1. rész 2
- webfejlesztési bemutató kezdőknek 2018 / 2019 – hogyan készítsünk weboldalt
- webdesign bemutató kezdőknek
- HTML CSS oktatóanyag kezdőknek-webfejlesztési oktatóanyagok kezdőknek
- a teljes HTML és CSS Web Design oktatóanyagok kezdőknek
tanulni online tanfolyamok
ingyenes online tanfolyamok lehet az egyik a legjobb források. Beszélhet más tanulókkal is.
- class central
Ismerje meg a webfejlesztést ingyenes online tanfolyamokkal és MOOC-kkal a Johns Hopkins Egyetemen, a Michigani Egyetemen, a KU Leuven Egyetemen, a Kaliforniai Egyetemen, a Berkeley-n és a világ más vezető egyetemein.
- Coursera
a nagy honlap kezdőknek tanulni web design. Választhat egy kurzust a kívánt egyetemről,és megnézheti, hogy hány ember tanul. A bemutatott adatokkal sok választási lehetősége van a tanfolyam kiválasztásakor.
- Edx
rengeteg erőforrást sorol fel a tervezési készségek kiépítéséhez és a karrier előmozdításához. Meg lehet tanulni témák lépésről lépésre különböző szintű lépéseket nehézségek.
- W3Schools
hasznos az alapvető kódolási nyelvek, például a HTML és a CSS tanulásához.
- Google Code University
Ismerje meg, hogyan kell kódolni a Google fejlesztőitől.
- Code Avengers
különösen szeretem ezt a tanulási weboldalt, mert olyan, mint egy nagy kaland, amely lehetővé teszi, hogy részt vegyen a kódolási kihívásokban és a hibakeresésben.
további helyek webdesign online tanfolyamokhoz：
- faház
- Lynda
- Udemy
- Coursera
- Webdesign.tutsplus
Ismerje meg a HTML alapjait és a CSS-t
felteheti a kérdést, Miért kellene megtanulnom a HTML-t? Általában egy olyan webdesign alkalmazás használata, mint a Dreamweaver, rendben van. De jelenleg a legtöbb webhely érzékeny HTML5 alapú, a CSS pedig egy webhely felszíne. A Modern weboldaltervezés CSS nélkül nem lehetséges. A HTML alapok és a CSS elsajátítása segít a webdesign fejlesztésében.
források a HTML és CSS tanulásához：
- 30 Days to Learn HTML and CSS
- A Beginner ‘ s Guide to HTML & CSS
- ne félj az Internettől
- 8 legjobb ingyenes reszponzív CSS weboldal sablonok
Ön is csatlakozhat a CodePen közösséghez. Ez egy nyílt forráskódú közösség, amely lehetővé teszi a kódrészletek szerkesztését és megosztását másokkal.
Learn JavaScript
a HTML és a CSS mellett a JavaScript is fontos nyelv a weben, amit meg lehet tanulni. Ez egy olyan eszköz, amely lehetővé teszi olyan fejlett felhasználói interakciók létrehozását, mint a parallaxis effektek és a hatékony webes alkalmazások.
források a Javascript tanulásához:
- 32 A legjobb helyek tanulni JavaScript Webfejlesztés kezdőknek
- Top 37 JavaScript Könyvek kezdőknek és tapasztalt programozók 2019
Tudjon meg többet a web design elements
ha jó a megfigyelés, azt találjuk, hogy a legtöbb vonzó modern weboldalak Van egy jó elrendezése az alapvető honlap elemek, mint például:
1 db tipográfia
tipográfia a legfontosabb, hogy kiváló web design. Biztosítja a tartalom olvashatóságát és közvetlenül befolyásolja a felhasználói élményt. A tipográfia minden modern weboldal jelentős aspektusa, mivel esztétikát és funkcionalitást kínál látogatóinak.
források a webes tipográfia tanulásához:
- 17 legjobb tipográfia design weboldalak & oktatóanyagok
- 30 Kreatív weboldalak gyönyörű tipográfia & színséma
2）Animation and transforms
a Transitions and transforms fokozott felhasználói interakciókat eredményez a webhely látogatói számára. Az egyszerű animációk létrehozásának egyik legjobb módja a CSS transitions and transforms. Ezenkívül a parallaxis görgetési effektusok és a vízszintes görgetés nagyszerű választás a webhelyek számára.
3 ons színösszeállítás
a weboldal színkombinációi tükrözik a webdesigner esztétikai preferenciáját/stílusát, és közvetlenül befolyásolják a néző észlelését. Meg kell tanulnia, hogyan kell okosan használni a színt a felhasználói felület kialakításában, hogy tökéletes felhasználói felületet hozzon létre.
4 különben betűtípusok
a személyre szabott betűtípusok lehetnek szórakoztatóak vagy kifejezőek, de nem mindig praktikusak. Ha azt szeretné, hogy egy weboldal olvasható és professzionális legyen, válassza ki a legmegfelelőbb betűtípust. Ellenőrizze 20 a legjobb Google Web Fonts kiváló Web Design. Ezek szabadon használható!
5 különben layout
Web layout design középpontjában a metszéspont a technológia és a művészet. A Web layout design a vizuális elemek, például a szöveg és a képek kombinációjára utal, hogy az oldal szép és könnyen navigálható legyen. Ez a vizuális kommunikáció fontos formája és a webdesign szerves része. Íme a 9 legjobb weboldal-elrendezési példa és ötlet.
6 különben grafika
a képek a szövegnél intenzívebb vizuális benyomást keltenek az emberekben. Növelhetik a felhasználók figyelmének felkeltésének esélyét.
7 6db reszponzív tervezés
reszponzív Webdizájn technikák gyűjteménye weboldalak építésére, hogy a munka több méretben kapható. Tanulja meg ezt a 47 perces CSS tanfolyamot.
Ismerje meg a wireframing/prototyping alapjait
a Wireframing/prototyping fontos lépés ahhoz, hogy megalapozza webhelyét a teljes weboldal tervezési és fejlesztési folyamatban. Ez lehetővé teszi, hogy ötleteljen, készítsen tervet, és világos képet kapjon a webhely szerkezetéről.
ne keverje össze a különböző kifejezéseket. Menjen végig az alapvető UI / UX tervezési koncepciókon: különbségek a drótváz, a prototípus és a makett között
Ismerje meg a webdesign eszközöket
Photoshop – UI design tool
használható fényképek, illusztrációk, 3D-s grafikák, webhelyek és mobilalkalmazások tervezésére és javítására; videók szerkesztése, valós festmények szimulálása; és így tovább. Meg lehet tanulni, hogyan kell használni a 22 legjobb ingyenes lépésről lépésre Adobe Photoshop oktatóanyagok kezdőknek.
Dreamweaver – webfejlesztő eszköz
dinamikus weboldalak létrehozására használható több platformon és böngészőben. “A Dreamweaver lehetővé teszi a felhasználók számára a weboldalak, valamint a mobil tartalmak tervezését, kódolását és kezelését. A Dreamweaver egy integrált fejlesztői környezet (IDE) eszköz.”(Wikipedia). Kezdje a Dreamweaver kezdő útmutatójával.
Mockplus – prototípus eszköz
Mockplus az egyik legjobb prototípus eszközök webes tervezők, hogy hozzon létre egy interaktív web makett. Tudod drag and drop alkatrészek építeni egy honlapot, és előnézeti HTML vagy más formátumban. Csak 10 percre van szüksége a prototípus készítésének ingyenes megkezdéséhez.
tanuljon egy weboldal készítővel
a weboldal készítővel kezdve gyorsan segíthet megérteni a webhelyek építésének és tervezésének legjobb gyakorlatait. Az előre megtervezett sablonokkal és felhasználói felület-készletekkel egyszerűen testreszabhatja az elemeket, vagy kódrészleteket adhat hozzá, hogy olyan webhelyet készítsen, amelyet a látogatók csodálnak.
weboldal készítők, kipróbálhatja:
- Web Host Review
- Wix
- Állandókapcsolat
- SITE123
- Jimdo
- WordPress
Ismerje meg a SEO-t
jó, ha van egy SEO szakember, aki foglalkozik a keresőmotor dolgaival. De a design nagyon kapcsolódik a SEO-hoz, mert a webhely tartalmát a keresőmotorok olvasják, és szerepet játszik a rangsorban. Ha SEO-optimalizált weboldalt szeretne tervezni, akkor a SEO alapjainak ismerete elengedhetetlen. Legalább ismernie kell a meta leírásokat az oldalakon és az elemeken.
Ismerje meg a tervezési trendeket
a tervezési trendek gyorsan változnak. A modern weboldal tervezéséhez tisztában kell lennie a legújabb tervezési trendekkel és webfejlesztési technológiákkal. Egyszerűen átmegy a Top 10 Must-Know Web Design trendeken és példákon 2019-ben inspirációért.
4.lépés: kezdje drótvázzal
indítsa el a weboldal tervezési folyamatát drótvázzal. A Wireframing segít a webes tervezőknek az ötletgyűjtésben és a gondolataik korai érvényesítésében. Indítsa el a drótkerítést a 10 gyakorlati tipp a Drótkeretek vázlatához.
5. lépés: Használja azt, amit megtanult egy weboldal tervezéséhez
itt az ideje, hogy tesztelje a 3.lépésben megtanultakat. Meg kell tanulni web design csinálja. Akkor tudni fogod, mit értesz meg, és mit nem.
6.lépés: kérjen visszajelzést és javítson
ha létrehozott egy blogot vagy bármely más weboldalt, akkor meg kell hívnia az embereket. Próbálj meg annyi visszajelzést kapni, amennyit csak tudsz, majd javításokat végezhetsz.
GYIK a tanulásról webdesign GmbH & lt; 7831 & gt;
a webdesign tanulás folyamatos folyamat, de hónapok alatt megtanulható. Általában 5 hónapot vesz igénybe a HTML, a CSS és a JavaScript alapjainak megtanulása. Időt kell fordítania olyan tervezőeszközökre is, mint a Photoshop, A Sketch és a Mockplus.
ezenkívül meg kell értenie a webes szabványokat, a tervezési elveket, az UX/UI tervezést, a böngészők közötti kompatibilitást és a válaszkészséget. Mindezek megtanulása 3-4 hónapot vesz igénybe.
és a legfontosabb dolog az, hogy éppen belépsz a webdesign területére mindezen leckék után. A tervezés változik,a technológia változik, ezért folyamatosan kell tanulnia.
lehetek webdesigner diploma nélkül?
akkor lesz egy web designer nélkül diplomát. Ahhoz, hogy egy web designer, diplomát nem kell, mit kell egy érdeke programozás, a tudás a vizuális tervezés és kódolás azt a nyelvet a webfejlesztés, valamint egyéb készségek web tervezése. De egy bizonyos fokú növelheti az esélyét, hogy bérelt a legtöbb esetben.
Mit tehetek egy webdesign tanfolyam elvégzése után?
miután befejezte a webdesign tanfolyamot, felvehet egy élő projektet, majd felvehet egy webdesign céget, vagy szabadúszóként kereshet projekteket és ügyfeleket.
van-e jövője a webdesignnak?
digitális világban élünk, amely tele van weboldalakkal. A jövő nagyon ígéretes.
a Creative Group 2019 Fizetési útmutatója szerint a front-end webfejlesztő az egyik legjobban fizetett munkahely a kreatív és marketing területén, az UX tervezőkkel, a felhasználói élmény kutatóival, a copywriterekkel stb. A Glassdoor szerint a webfejlesztők évi 41,6 ezer-78,3 ezer dollár között fizetnek, a PayScale szerint pedig évi 16,4 ezer – 34,6 ezer dollárt kínálnak nekik. Az átlagos web designer fizetés körül $49,693.
könnyű a webdesign?
kezdetben egyszerűnek tűnhet, mert néhány hónap alatt megtanulhatja a HTML & CSS alapjait. De ahogy előre ebben az iparágban, előfordulhat, hogy nagyobb kihívást jelent. Folyamatosan meg kell tanulnia az új technológiát, hogy lépést tartson az összes változással. De ha érdekel a weboldalak és webes alkalmazások építése, akkor a webdesign könnyű lehet az Ön számára.
következtetés
ha önállóan szeretné megtanulni a webdesignot, a fenti információk mindent tartalmaznak, amire szüksége van. Ne pazarolja az idejét a Facebook vagy a Twitter “keresi a választ”. Bár ezeken a platformokon tervezői közösséget építhet, nem lehet webdesigner, ha céltalanul tölti az idejét. Szóval, hunker le, és elkezd tanulni. Soha ne add fel a tanulást és sok szerencsét!