igen, tökéletesen meg lehet tanítani magának a webdesignot. Megkérdeztem körül ezen a héten, hogy az emberek hogyan sikerült megszerezni a készségeket, és megpróbáltam emlékezni, hogy mi működött nekem.
három fő módja van annak, hogy megtanítsa magát a webdesignra.
- csinál. Az emberek úgy tanulnak, hogy weboldalakat hoznak létre.
- online források felhasználásával. Mindenki egy bizonyos ponton talál választ az interneten arról, hogyan tervezzen weboldalakat.
- olvasással. Ez meglepett. A legtöbb tervező azt mondja, hogy a webdesignot részben könyvek olvasásával tanulják meg.
tehát menjünk át ezen kategóriák mindegyikén, hogy megtudjuk, hogyan tanítsd meg magad webdesign.
webdesign tanulása
a weboldalak megértésének legjobb módja az, ha megnézi, hogyan állnak össze a meglévő weboldalak, és saját maga készíti el őket.
figyeljük meg, hogyan működnek más weboldalak
kezdetnek a legtöbb internetes oldal legalább részben HTML-ben van írva. Annak érdekében, hogy megtekinthesse az oldalt létrehozó HTML-t, meg kell “Forrás megtekintése” a használt böngészőben. Próbálja meg a Cmd/Ctrl-U (Firefox esetén), a Cmd/Ctrl-Alt/Opt-U (Chrome esetén), és ha Internet Explorert használ, akkor valóban meg kell kérdeznie magától, hogy a webdesign a megfelelő karrierút az Ön számára.
próbálja meg átnézni a HTML-t, hogy lássa, hogyan vannak megjelölve a weboldal különböző elemei. Lehet, hogy bizonyos címkéket azonnal azonosíthat. Például a <p> bekezdés, a <h1,2,3> címsor, a <img> kép stb. Észre fogja venni, hogy ezeknek a címkéknek a többsége párban működik a jelölés kezdetének és végének jelölésére, például az <p>Text here</p> a bekezdéscímke nyitását és zárását mutatja a zárócímke előtti perjelrel ( / ). Más címkék nem működnek párban, például a képcímke self closes <img src = "https://robcubbon.com/images/rob.jpg" /> ez arra utasítja a böngészőt, hogy jelenítsen meg egy képet, amelynek forrása egy adott webcím (src).
egy másik dolog, amit észrevehet a HTML forrásból, az, hogy minden HTML oldal hasonló felépítésű. Mindegyik egy <!DOCTYPE> deklarációval kezdődik, amely megmondja, hogy a HTML melyik verziójában van, majd egy <HTML> deklarációval, majd a dokumentum <head> – jával kezdődik, amely különféle elemeket tartalmaz, beleértve a szkriptekre, stíluslapokra, metainformációkra mutató hivatkozásokat stb. A <head> után jön a <body>, ahol a weboldal elemei meg vannak jelölve.
gyakorlat: Jelölje ki az oldal összes forráskódját egy jegyzettömb (PC) vagy TextEdit (Mac) dokumentumba, majd mentse a számítógépére “teszt.html ” vagy valami. Nyissa meg ezt a fájlt egy böngészőben, és pontosan ugyanúgy kell kinéznie, mint az online verzió. Most kapcsolja ki az internetkapcsolatot, és nézze meg, hogyan néz ki a tesztoldal. Egész más, mi? Próbáld meg kitalálni, miért.
a kereskedelem eszközei
amíg ezt csinálod, bizonyos eszközökre lesz szükséged.
- több böngésző és okostelefonok. Próbálja meg tesztelni saját webhelyeit különböző böngészőkön és telefonokon (itt kezdődik egy régóta fennálló gyűlölet-kapcsolat az Internet Explorerrel).
- szövegszerkesztő. Használhatja az alapvető jegyzettömböt (PC) vagy a TextEdit (Mac), vagy talán a Coda (Mac) vagy a Dreamweaver – ne használja a Dreamweavert vizuális módban, csak dolgozzon a kódon, meg kell értenie, hogyan működik ez a cucc a motorháztető alatt.
- érvényesítő. Ellenőrizze weboldalait a HTML Validator és a CSS Validator segítségével (használjon olyan böngésző plugint, mint a Web Developer for Chrome, hogy gyorsan felhívja őket).
- Chrome Fejlesztői eszközök és Firebug for Firefox. Ezek az eszközök segítenek megérteni a CSS-t és a Javascriptet, amelyek, ha úgy gondolta, hogy a HTML nehéz, némi megértést igényelnek.
- grafikus és képszerkesztők. A webdesign középpontjában olyan képszerkesztők állnak, mint a Photoshop vagy a Fireworks. Ezek meglehetősen drágák,de van GIMP plusz számos online képszerkesztő, ha csak most kezdi.
saját statikus HTML weboldalak létrehozása
míg a HTML, a CSS és a JavaScript megértése növekszik, statikus HTML webhelyeket kell létrehoznia, akár helyben, akár egy webszerveren. Folyamatosan játszani a kódot, hogy megpróbálja csinálni jó dolgokat. Próbáljon meg újra létrehozni bizonyos elemeket más webhelyeken a kód bitjeinek másolásával.
bár az Ön által létrehozott webhelyek valószínűleg nem HTML fájlokból készülnek, fontos, hogy megértse, hogyan hozhat létre statikus HTML webhelyeket, mielőtt elkezdené használni a PHP-t és/vagy a tartalomkezelő rendszereket (CMS) a HTML létrehozásához.
saját webhelyek létrehozása A CMS – sel
a legtöbb webhelyet CMS-sel hozzák létre-olyan szoftverrel, amely HTML-oldalakat hozhat létre meghatározott sablonokon belül. A legjobbak a WordPress, a Joomla és a Drupal, de van egy sor könnyebb, nyílt forráskódú CMS, amellyel kísérletezhet, ezek megtanítják, hogyan használják a PHP-t és más CMS-eket, az ASP-t a weboldalak összerakására.
a MAMP (Mac) vagy a WAMP (Windows) használatával futtassa ezeket a rendszereket helyben, hogy jól megértse működésüket.
képszerkesztők használata
tudnia kell, hogyan kell használni a Photoshopot vagy valami hasonlót. Szüksége lesz erre, hogy grafikákat hozzon létre a webhelyhez, valamint teljes képet nyújtson arról, hogy a webhely hogyan fog kinézni, ha elkészült, hogy segítse a tervezési folyamatot.
Get tervezése
természetesen nem említettem, hogy az így létrejövő weboldalaknak nemcsak érvényesíteniük kell, működniük kell, meg kell találniuk a keresőmotorokat, célt kell szolgálniuk és forgalomba kell hozniuk, hanem … jól kell kinézniük.
a művészi szem javítása érdekében rendszeresen készítsen munkát, majd próbálja meg javítani. Vázlattervek papíron, majd dolgozzon rajtuk a Photoshopban vagy bármilyen grafikus programban. A gyakorlat segít abban, hogy jobb tervezővé váljon. Később további forrásokat fogok ajánlani, amelyek segítenek a tervezési elvekben.
Online források
amikor az emberek válaszokat akarnak, az internetre mennek, és “Google it” – re vagy a YouTube-ra keresnek. A webdesign sem más. Sok erőforrás van, amely segít az interneten. Először is van W3 iskolák, amelyek web tervezők hivatkoznak, mint a legjobb online önálló tanítási forrás, ott is Tizag. Néhány ember ajánlja Lynda.com bár személyesen nem használtam.
blogok
számos nagyszerű design blog létezik. Vannak nagyok, amelyek segíthetnek, mint a SmashingMagazine, a WebDesignerDepot, az 1stWebDesigner és az Envato hálózat.
személy szerint többet kapok a független webtől és a grafikusoktól, akik blogolnak. Vannak azonban olyan terhelések, amelyekből az évek során tanultam, tehát itt csak néhány, és elnézést kérek minden kiváló bloggertől, akiket kihagytam a listáról.
- Chris Colyer CSS trükkök egy nagy látszó reszponzív honlap, hanem nagy web design info és trükkök
- Veerle Pieters nagy Photoshop és Illustrator oktatóanyagok Veerle blogja
- David Airey valaki követtem egy ideig a saját névadó blog, LogoDesignLove és IdentityDesigned. David többek között a szervezetek átfogó identitása iránt érdeklődik.
- Chris Spooner sokat tanított nekem a spoongraphics blogján, valamint a Line25
- Fabio Sasso csodálatosan megtervezett Abduzeedo oldala nagyszerű inspirációt és furcsaságot kínál.
- a Nick La ‘ S N. Design Studio és a WebDesignerWall fantasztikus információkkal és nagyszerű inspirációval rendelkezik.
kérjük, bátran adja hozzá kedvenc tervezési blogjait az alábbi megjegyzésekben.
fórumok
ha dagasztás a fejét egy téglafal fórumok nagyszerű hely, hogy választ. Tegye közzé a probléma leírását és a webcímet, és nagyon gyakran valaki válaszol Önnek a megoldással. Íme néhány kedvenc fórumom.
szeretem Estetica Design fórum, DesignForums.co.uk és tervező, s Talk. Ott, s digitális pont és Sitepoint szélesebb körű lekérdezések, a WordPress fórum kiváló, és ott, s a harcos fórum internetes marketing.
Könyvek
sok webtervező azt állítja, hogy a jó régimódi fizikai könyvek segítettek nekik a webdesign tanításában. Íme néhány a kedvenceim közül, és még néhány, amit ajánlottak nekem. A linkek a következők Amazon.com affiliate linkek.
- Építsd meg a saját honlapján a helyes utat a HTML & CSS 3. (harmadik) kiadás Ian Lloyd egy Sitepoint könyvet olvastam évvel ezelőtt. Abban az időben valóban segített nekem, mivel a webdesign legjobb gyakorlataira összpontosít. Ügyeljen arra, hogy naprakész kiadást vásároljon (jelenleg a harmadik kiadás, amely sokat tartalmaz a HTML5-en).
- CSS: David Sawyer McFarland hiányzó kézikönyve magyarázatokat, példákat és lépésről lépésre szóló oktatóanyagokat tartalmaz. Ez a könyv különösen ajánlott, mivel megadja a CSS hátterét, és sok mindent tartalmaz a CSS3-ról.
- a Principles of Beautiful Web Design, 2.kiadás Jason Beaird, azt állítja, hogy a design egy készség, hogy lehet tanulni, és megtanítja az alapelveket a design.
- Color Design munkafüzet: a Real World Guide to Using Color in Graphic Design by AdamsMorioka (szerkesztő) biztosítja azokat a létfontosságú információkat, amelyek szükségesek a szín kreatív és hatékony alkalmazásához a tervezési munkákhoz.
- Don ‘ t Make me Think: A józan ész megközelítése webes használhatóság, 2nd Edition Steve Krug egy instant klasszikus webes használhatóság, tele betekintést és gyakorlati tanácsokat.
- Getting Real: az okosabb, gyorsabb, könnyebb módja annak, hogy építsenek egy sikeres webes alkalmazás 37 jelek lehet létre webes alkalmazások nem oldalak, de van egy ilyen csodálatos módon egyszerűsítése webes folyamatok, hogy találtam egy ilyen hasznos olvasni.
- ásni WordPress Chris Coyier & Jeff Starr jön erősen ajánlott, mint a nagy WordPress könyv. Elérhető PDF verzióban (praktikus a kód másolásához), valamint fizikai változatban is.
sokkal több könyvet is belefoglalhattam volna, különösen a tervezéselméletről. Ha bármilyen javaslata van olyan könyvekről, amelyek segítettek a webdesignban, kérjük, ossza meg velünk őket a megjegyzésekben.
mit tehetsz
sok tervező azt állítja, hogy a kudarc valójában a legjobb tanár. Lépj ki és tervezz weboldalakat! Amikor, mint kétségtelenül fog történni, akkor találkoznak egy téglafal, akkor használja néhány online források itt, hogy segítsen. És ha már nem tudsz a számítógép képernyőjére nézni, olvashatsz róla egy könyvet!