a Webdizájn alapjainak megtanulása még mindig szerepel a “valamikor” listán? Miért nem kezdted még el? Összeállítottunk 30 tippet és erőforrást, hogy segítsünk ebben a hónapban elkezdeni a Webdizájn tanulását (és talán még új karrierutat is találhatsz magadnak!)

a grafikai tervezőknek, nyomtatótervezőknek és kreatívoknak, akik valami újat szeretnének tanulni, vagy betörni a weboldalra, abba kell hagyniuk a halogatást. Minden nap, amikor nem teszed meg ezt az első lépést, egy nappal tovább marad mindenki mögött!

kövesse az alábbi lépéseket, hogy megtanulja, hogyan lehet létrehozni az első webhelyet, az iparág legjobb gyakorlatait, és még sok mást—mindezt 30 nap alatt!

kezdjen el egy weboldalt

a webdesign tanulásának legjobb módja az, ha elkezdi csinálni. Ez David Kadavy, a Design szerzője <mert> hackerek.

azt javaslom, hogy indítson el egy blogot. Elkezdtem egy blog csak azért, hogy egy web design játszótér, 7 évvel később, elindítottam egy bestseller könyv a témában. Miután egy személyes projekt, mint például a blog, ad egy hely, ahol meg lehet próbálni az új dolgokat, és a főnök nem rúgni, ha elrontani.

nem kell masszív weboldallal vagy őrült tervezéssel kezdenie; kezdje kicsi. Játssz a honlapon, kitalálni, mi teszi a dolgokat a munka. (Győződjön meg róla, hogy ellenőrizze a kódot, így elkezdheti megismerni, hogy mi teszi a webhely működését.)

szeretne gyorsan elindulni? Egy website builder, mint a Wix segíthet, hogy kapsz egy előnyt egy elegáns website design, ahogy kezdődik, hogy megtanulják a fogalmak, építőkövei, hogy mi megy a honlapon.

olvassa el mindent, amit tud

kezdjen el olvasni. Mivel Ön ebben a blogban van, valószínűleg hozzászokott ahhoz, hogy nyomon kövesse, mi történik a tervezés világában. Olvass tovább.

olvassa el mindent, amit tud a weboldal tervezéséről, trendjeiről, technikáiról és bevált gyakorlatairól. Kövesse a közösségi médiában csodált tervezőket.

Végy egy széles hálót a weboldal tervezési olvasásához is. Olvassa el az alapokat, hogy megtanuljon néhány kódot, olvassa el a tervezési elméletet, olvassa el az oktatóanyagokat és az aktuális cikkeket.

légy hatékony kommunikátor

Ha nem vagy a leginkább artikulált ember, ecsetelje ezeket a készségeket. A weboldal tervezésének nagy része a kommunikáció.

a weboldal tervezőinek rendszeresen kommunikálniuk kell az ügyfelekkel, hogy rájöjjenek, milyen problémát kell megoldaniuk a tervezésnek; kommunikálniuk kell ezeket a megoldásokat, és azokat is implementálniuk kell.

iratkozzon fel a Tuts+& Envato Elements

fontolja meg az Envato Elements előfizetését, amely hozzáférést biztosít a kiváló Tuts+ tanulási erőforráshoz.

Tuts + rendszeres kurzusokat tesz közzé a grafikai és webdizájnról, az alapvető technikáktól kezdve a legújabb fejlett megközelítésekig és fejlesztésekig. Teljesen önálló tempójú, szakértő oktatók tanítják. Hozzáférést kap az Envato elemekhez is, ami nagyszerű forrás a grafika, sablonok megtalálásához, valamint még több, hogy csatlakozzon a Webdizájn munkájához.

Think in HTML

HTML, vagy hypertext markup language, is a cornerstone of website design. A HTML az a csontváz, amely segít létrehozni egy weboldal szerkezetét, és miután elolvasta a nyelvet, a weboldaltervezés világa sokkal értelmesebb lesz.

W3Schools van egy nagy HTML starter bemutató több száz HTML példákat, hogy lehet játszani a képernyőn, hogy mi történik, és pontosan hogyan működik. (Lehet, hogy intuitívabbnak találja, mint gondolná.)

Játssz a kóddal a Codeacademy

míg a HTML jó kezdet, szinte bármilyen programozási nyelvet megtanulhat a Codeacademy-től. Az ingyenes eszközkészlet megtanít kódolni interaktív tevékenységek, játékok segítségével.

akkor vedd fel a Codeacademy természetesen, ahol és amikor szükség van rá, és indítsa el, és hagyja abba, ha szükséges. Válasszon ki egy tantárgyat a tanuláshoz-Webfejlesztés, programozás, Adattudomány – vagy nyelv, amelyre összpontosíthat – HTML & CSS (remek hely a kezdéshez), Python, Java, SQL, Ruby stb.

Ismerje meg a CSS

CSS, vagy lépcsőzetes stíluslapok megértését, határozza meg a HTML-ben vagy XML-ben vagy SVG-ben írt dokumentum bemutatását.

A Mozilla által meghatározott

CSS leírja, hogyan kell az elemeket megjeleníteni a képernyőn, papíron, beszédben vagy más adathordozón.

Mozilla is van egy nagy gyűjteménye CSS források az induláshoz, egy szilárd bevezetése, hogyan működik a CSS, beleértve a szelektorok és tulajdonságok, írás CSS szabályok, alkalmazása CSS HTML, hogyan kell meghatározni hossza, színe, és más egységek CSS, kaszkád és öröklés, box modell alapjai, és hibakeresés CSS. Ezután a modulok továbblépnek, hogy elmagyarázzák a szövegeket és a dobozokat.

alkalmazza tervezési készségeit az Interneten

Ha már kreatív vagy grafikai tervezési területen dolgozik, gondoljon azokra a dolgokra, amelyekről már tudja, hogy a weboldal tervezésére is alkalmazható. Azok az elvek, amelyek valami vizuálisan vonzóvá teszik, nem változnak a médium alapján, és minden, ami a tervezési elmélet hasznos lesz a digitális térben is.

míg az olyan elemek, mint a tanulási kód, nem érzik magukat természetesnek, a tervezési háttér hatalmas bónusz. Mire jó egy gyönyörűen kódolt weboldal, ha nem akar kapcsolatba lépni vele?

figyeljen a szeretett webhelyekre

vegye figyelembe a szeretett webhelyeket. Mi van velük vonzó az Ön számára? (És Hogyan tanulhatod meg lemásolni ezeket az elemeket?) Figyelni, hogy:

• Tipográfia
• Navigáció
• a képek használatára tér
• Design formái
• Animáció lehetőséget, majd lapozzunk hatások
• Színek

Rajzolj egy Vázlatra

Wireframing egy web designer ez a brainstorming.

a legtisztább formában a drótváz egy vázlat arról, hogy mi lesz a weboldal. Ez nem esztétikai elemek vázlata, hanem a weboldal tervrajza. A drótváz rajzolása nem igazán a design megjelenéséről szól, hanem az ott található információs struktúráról.

nem biztos benne, hogyan lehet létrehozni egy drótvázat? Digitális telepátia van egy útmutató a legjobb gyakorlatokat, hogy segítsen tanulni.

szánjon egy kis időt, hogy megtanulják vázlat

vázlat egy vektor-rajz eszköz Mac, amely megkönnyíti, hogy hozzon létre tervezési elemek. Sok tervező fordul a vázlathoz, hogy UI elemeket hozzon létre, és megismételje a tervezési blokkokat.

Ez tele van plugins és lehetővé teszi, hogy export kódot a könnyű használat és a hozzáférés. Ez az egyik legerősebb és legnépszerűbb eszköz az Adobe kreatív csomagja óta, és megéri az idejét.

Legyen naprakész a technológiával

AI, VR, AR, 360 fokos videó, botok.

nehéz lehet lépést tartani annyi új technológiával és trenddel. De meg kell, hogy egy pont, hogy maradjon a tetején ezek a változások.

egyszerre kezelje őket, és kezdje olyan technológiákkal, amelyek a leginkább közvetlenül kapcsolódnak az Ön által végzett munkához. Ha van egy weboldal online csevegéssel, kezdje a botok megismerésével. Vagy ha sok videotartalmat használ, játsszon körül 360 fokos videóval.

az olyan elemek, mint a mesterséges intelligencia vagy a virtuális vagy a kibővített valóság, még összetettebbek, de valószínűleg a weboldal tervezési tájának integrált részévé válnak az úton. Legalább tudnia kell, hogy mik azok, és milyen lehetséges felhasználási lehetőségek lehetnek.

Kényelmes SEO

bár sok webes tervezők hiszem, hogy egy SEO szakember tud kezelni, hogy egy kész weboldal a keresők olvasni, sok tervezési munka, amely csatlakoztatva van a SEO.

a képek feltöltésének módjából olyan tiszta kód létrehozása, amely gyorsan beilleszti a metaleírásokat az oldalakra és elemekre, a tervezőnek bele kell foglalnia a keresési gondolkodást a munkafolyamatba.

Szabadúszók, ez létfontosságú az Ön számára is. A legtöbb ügyfél hozzáértés ahhoz, hogy kérjen egy SEO-optimalizált honlapon. Ha egyedül dolgozik, elég tudnia kell ahhoz, hogy szilárd keretet hozzon létre, amelyet a Google el tud olvasni (és ha több munkát kell végezni, akkor az ügyfelet SEO szakemberhez kell utalnia).

Játssz a honlap készítő

egy honlap készítő lehet egy nagyszerű módja annak, hogy kényelmes a legjobb gyakorlatokat, és hogyan kell kezdeni az épület tervezése honlapok.

ezeknek az eszközöknek a többsége rengeteg sablonnal rendelkezik, amelyek lehetővé teszik az elemek testreszabását, sőt kódrészletek hozzáadását is. Az egyszerű oldalak, sok honlap építők is van egy ingyenes terv, ahol létrehozhat egy személyes portfólió oldal vagy alapvető honlapján, amely arra szolgál, mint egy játszótér az Ön számára.

ezután vegye szét a darabokat a weboldal készítőjén belül. Nézd meg, hogyan vannak kialakítva, kódolt, hogy egy érzés, hogyan jön össze minden. Meg fog lepődni, hogy mit lehet kitalálni, csak szedés másik design egymástól.

Keressen egy mentort

van valaki, akivel dolgozik, akit webes tervezőként csodál? Vidd őket ebédelni, és szedd össze az agyukat az iparról.

felbecsülhetetlen értékű lehet egy olyan mentor megtalálása, aki hajlandó veled dolgozni, és segít a területen gondolkodni, valamint a webdesign elsajátításában. És bár valószínűleg talál egy mentor egy online közösség, semmi sem jobb, mint egy élő személy, hogy meg tud felelni szemtől-szembe rendszeresen. (Talán érdemes online és személyes mentorokkal is rendelkezni.)

csatlakozzon a CodePen közösséghez

– t miután elkezdett kényelmessé válni valamilyen kóddal és programozással, csatlakozni szeretne a CodePen közösséghez. A nyílt forráskódú közösség lehetővé teszi a kódrészletek megosztását és szerkesztését egyfajta közösségi hálózatban.

itt van még egy kicsit a webhely alapítóitól: “a CodePen egy társadalmi fejlesztési környezet. A szíve, ez lehetővé teszi, hogy írjon kódot a böngészőben, majd látni az eredményeket, ahogy építeni. Hasznos és felszabadító eszköz bármilyen készségfejlesztő számára,és különösen a kódolást tanuló emberek számára. Elsősorban az olyan front-end nyelvekre koncentrálunk, mint a HTML, CSS, JavaScript és előfeldolgozó szintaxisok, amelyek ezekből alakulnak ki.”

vegyen egy osztályt

néhány tanuló számára a formálisabb osztálytermi beállítás a legjobb.

van egy csomó osztályok elérhető-személyesen és online-az Ön számára, hogy megtanulják web design alapjait. Kezdje egy helyi Főiskolával vagy online tanulási csomópontokkal, például Udemy vagy Coursera. Vedd fel az osztályt a jelenlegi képességed szintjén, és csak haladj előre.

szeretne valamit csinálni? Google It

a nem túl hagyományos tanuló számára Keresse meg a választ a webes tervezési problémára a Google-on. Olyan sok oktatóanyagok, videók állnak rendelkezésre, hogy végigvezeti szinte bármilyen probléma-megoldás.

a kulcs az, hogy pontosan mit kell tudni, és nézd meg, hogy egy jó hírű forrás a választ. Itt van egy másik tipp, amikor útmutatók, videók-újabb tartalom valószínűleg kapsz egy jobb, teljesebb, relevánsabb választ. (Ne feledje, néhány ilyen dolog gyorsan változik.)

ügyeljen a felhasználói élményre

semmi sem hozhat vagy törhet meg egy olyan webhelyet, mint a felhasználói élmény kialakítása. Meg kell tervezned és meg kell értened.

így írja le az Interaction Design Foundation az UX designt:

felhasználói élmény (UX) a design olyan termékek létrehozásának folyamata, amelyek értelmes és személyesen releváns tapasztalatokat nyújtanak. Ez magában foglalja mind a termék használhatóságának gondos kialakítását,mind pedig a fogyasztók örömét a használatából. A termék beszerzésének és integrálásának teljes folyamatával foglalkozik, beleértve a márkaépítés, a tervezés, a használhatóság és a funkció szempontjait is.

Ehhez egy UX tervező megfontolja, hogy miért, mit, hogyan használja a terméket.

figyeljen a tervezési trendekre

hogyan néz ki egy modern weboldaltervezés? Ez nem trükk kérdés. A modern weboldalak és felhasználói élmények megtervezéséhez tudnia kell, hogy mit akarnak a felhasználók, és hogyan lépnek kapcsolatba vele. Ha legutóbb 2016-ban töltött le egy alkalmazást, vagy nézett egy webhelyet a telefonján, akkor sok helyet kell pótolnia.

létrehozása honlap tervez, hogy a modern érinti, trendek integrálva a design segít a projektek látszanak. Honnan tudod, mi a trend? Olvassa tovább az ilyen webhelyeket, és figyeljen arra, amit más tervezők csinálnak. Vegye figyelembe azokat a színeket, stílusokat és funkciókat, amelyek szerepelnek a gyakran meglátogatott webhelyeken.

Create without Color

indítsa el minden design szín nélkül. Egy nagyszerű tervező egyszer azt mondta nekem, hogy ha a design fekete-fehérben működik, akkor hibátlan színű lesz.

lehet, hogy nem mindig tart, de ez egy nagyszerű kiindulási pont.

a fekete-fehér minták létrehozásával láthatja, hogy az elemek hol kontrasztosak, és hogyan játszanak együtt. Eltávolítottál minden érzelmi kapcsolatot a szín vagy a szemmozgással, ami ennek köszönhető. Ez a legegyszerűbb tervezési forma ötletet ad Önnek, ha valami koncepcióként működik, mielőtt továbblépne annak véglegesítésére.

Tanulj meg szeretni a Google betűtípusokat

a Google Fonts a barátod.

függetlenül attól, hogy mit érzel a Google-lal kapcsolatban, fontos a böngészés, a rendezés és a betűtípusok kiválasztása, amelyekről tudod, hogy működni fognak a webhelytervezésben. Nem kell gondolkodnia a licencelésről, vagy ha a betűtípusok kompatibilisek bizonyos böngészőkkel, vagy sem.

a korlátozás az,hogy csak a Google betűkészletek könyvtárában kell dolgoznia. De ha megpróbálsz találni valamit, ami szinte minden projekthez illeszkedik. Hosszú távon sok időt takarít meg.

válasszon ki egy UI-készletet

töltse le a felhasználói felületet vagy az ikonkészletet, majd válassza szét.

ahogy ellenőrizheti a webhely kódját, nézze meg, hogyan készülnek a tervezési elemek az interneten. Vegye figyelembe a skálát és a rácsot, nézze meg a színkeverékeket és a fájlok rendezésének módját a Photoshop vagy az Illustrator programban.

Keressen egy letölthető készletet, amely több formátumú elemeket tartalmaz a nagy felbontású kijelzőkhöz. (Egy csomó JPEG letöltése nem fog ilyen jól szolgálni.)

ezután próbáljon meg létrehozni vagy testreszabni egy vagy két elemet.

legyen tipográfus

a Modern weboldaltervezés nagy hangsúlyt fektet a tipográfiára … jó tipográfia . A hős fejlécek óriás szavakkal rétegeket a szöveg, hogy felhívja a felhasználót a design, hogy megértsék az elveket, hogyan kell párosítani típusú elemek és construct vonzó szöveges blokkok elengedhetetlen.

kezdje Ellen Lupton gondolkodásával a típussal. (Van egy azonos nevű könyv is.) Lupton a tipográfiával foglalkozó hatóság, és az ő információi alapján hamar tipográfusként fog gondolkodni.

Jump into JavaScript

amikor kezd nagyon jól érezni magát a webdesign használatával kapcsolatban, kihívja magát újra, hogy megtanulja a Javascriptet. A HTML és a CSS után ez a web legfontosabb nyelve.

A JavaScript egy olyan eszköz,amely lehetővé teszi a tervezők számára, hogy bonyolult dolgokat hajtsanak végre a weboldalakon. Ez teszi a csúszkát vagy a parallax animációt animálni.

Learn JS egy interaktív bemutató, hogy segítsen az induláshoz.

frissítse portfólióját

a webdesign tervezésének megkezdése után feltétlenül frissítse portfólióját webdesign projektekkel. Ez az egyszerű akció segít megmutatni magának … és másoknak … hogy a Webdizájn a repertoárod része.

egy frissített Portfólió segíthet a potenciális ügyfeleknek látni, hogy néz ki a” stílusod”. Győződjön meg róla, hogy bemutassa elrendezések, színek, tipográfia, valamint a különböző technikák, amelyek megmutatják, mit lehet csinálni.

kihívja magát

oly sok parancsikonnal és kódrészletekkel, hogy segítsen szinte minden webhely problémájának megoldásában, ne lusta. Ne feledje, hogy kihívást magad folyamatosan tanulni az új készségek, új technológiák és folyamatosan javítja a web design játék.

az egyetlen dolog ebben a mezőben az, hogy folyamatosan változik; mindig van valami új tanulni vagy kipróbálni.

maximalizálja tapasztalatait

kifelé és tervezzen. Meg kell kezdeni weboldalak tervezése, hogy egy web designer.

kezdje kicsi, de vegye fel a projekteket másokkal. Kérje meg, hogy csatlakozzon egy projekthez egy munkahelyi csapattal. Kezeljen egy kis weboldalt egy barátjának. Minél több tapasztalattal rendelkezik weboldalak építésében, annál jobb és gyorsabb lesz.

mire vársz? Ne késlekedj.

kérjen visszajelzést

használja a hálózatot, hogy visszajelzést gyűjtsön a webhely tervezési projektjeiről, függetlenül attól, hogy milyen kicsinek gondolja őket. Hallgassa meg ezt a visszajelzést – akkor is, ha nem tetszik, hogy mit lehet tanulni.

a vizuális preferencia mellett a visszajelzést nyújtó személy javaslatokat tett a weboldal jobb működéséhez? Könnyen megérthetik a tervezés célját? Kapcsolódtak az üzenetküldéshez?

tanuljon új dolgokat

nagyszerű weboldal-tervezőnek lenni, csak új dolgokat kell játszania, kipróbálnia és tanulnia. Hogy egy pont, hogy a hálózat és kommunikálni másokkal a területen, így marad a tetején a technikák és a vizuális változások, amelyek a kereslet.

Ha meg akarja tanulni a weboldal tervezését, akkor ez valószínűleg már olyan, amit rendszeresen csinál. De ez egy fejlődő terület, és szinte minden nap változik. Csak kérdezd meg bárkit, aki csinálja.