Ano, je naprosto možné naučit se web design. Tento týden jsem se zeptal, jak se lidem podařilo získat dovednosti, a snažil jsem se vzpomenout si, co pro mě fungovalo.
existují tři hlavní způsoby, jak se můžete naučit web design.
- tím, že dělá. Lidé se učí tím, že skutečně vytvářejí webové stránky.
- pomocí online zdrojů. Každý v určitém okamžiku najde odpovědi online o tom, jak navrhnout webové stránky.
- čtením. Tenhle mě překvapil. Většina návrhářů říká, že se učí web design, částečně, čtením knih.
pojďme tedy projít každou z těchto kategorií a zjistit, jak se naučit webdesign.
učení webdesignu tím, že dělá
nejlepší způsob, jak začít chápat webové stránky je podívat se, jak jsou stávající webové stránky dát dohromady a vytvořit sami.
sledujte, jak fungují jiné webové stránky
Chcete-li začít, většina webových stránek na internetu je napsána alespoň částečně v HTML. Chcete-li zobrazit HTML, který vytváří tuto stránku, musíte v prohlížeči, který používáte, Zobrazit zdroj. Zkuste jít Cmd / Ctrl-U (pro Firefox), jít Cmd / Ctrl-Alt / Opt-U (pro Chrome) a pokud používáte Internet Explorer, opravdu se musíte zeptat sami sebe, zda je web design pro vás tou správnou Kariérní cestou.
zkuste se podívat do HTML a zjistit, jak jsou různé prvky na webové stránce označeny. Můžete být schopni identifikovat určité značky ihned. Například <p> je pro odstavec, <h1,2,3> jsou nadpisy, <img> je pro obrázek atd. Všimnete si, že většina těchto značek pracuje ve dvojicích, aby označila začátek a konec značky nahoru, například <p>Text here</p> ukazuje otevření a zavření značky odstavce lomítkem (/) předcházející značce uzavření. Jiné značky nefungují ve dvojicích, například značka obrázku se sama zavře <img src = "https://robcubbon.com/images/rob.jpg" /> to dává prohlížeči pokyn k zobrazení obrázku s konkrétní webovou adresou jako zdrojem (src).
další věc, kterou si můžete všimnout ze zdroje HTML, je, že všechny stránky HTML mají podobnou strukturu. Všechny začínají deklarací <!DOCTYPE>, která říká, ve které verzi HTML je, následovanou deklarací <HTML>, následovanou <head> dokumentu, který je kontejnerem různých prvků včetně odkazů na skripty,styly, meta informace atd. Po <head> přichází <body>, kde jsou prvky webové stránky označeny.
cvičení: Vyberte veškerý zdrojový kód této stránky do dokumentu Poznámkový blok (PC) nebo TextEdit (Mac) a uložte jej do počítače jako “ test.html “ nebo tak něco. Otevřete tento soubor v prohlížeči a měl by vypadat přesně stejně jako online verze. Nyní vypněte připojení k internetu a podívejte se, jak vypadá testovací stránka. Docela jiné, co? Zkuste zjistit proč.
nástroje obchodu
zatímco to děláte, budete potřebovat určité nástroje.
- více prohlížečů a chytrých telefonů. Zkuste otestovat své vlastní stránky na různých prohlížečích a telefonech (zde začnete s Internet Explorerem dlouhodobou nenávistnou aféru).
- textový editor. Můžete použít základní Poznámkový blok (PC) nebo TextEdit (Mac), nebo možná Coda (Mac) nebo Dreamweaver – nepoužívejte Dreamweaver ve vizuálním režimu, stačí pracovat na kódu, musíte pochopit, jak to funguje pod kapotou.
- validátor. Ověřte své webové stránky pomocí HTML validátoru a CSS validátoru (k rychlému volání použijte plugin prohlížeče, jako je Web Developer for Chrome).
- nástroje pro vývojáře Chrome a Firebug pro Firefox. Tyto nástroje vám pomohou pochopit CSS a JavaScript, které, pokud jste si mysleli, že HTML bylo obtížné, trochu porozumět.
- grafické a obrazové editory. Ústředním bodem webdesignu jsou editory obrázků, jako je Photoshop nebo ohňostroj. Jsou to poměrně drahé, ale pokud právě začínáte, existuje GIMP plus řada online editorů obrázků.
vytváření vlastních statických webových stránek HTML
zatímco vaše chápání HTML, CSS a JavaScriptu roste, měli byste vytvářet statické weby HTML, lokálně nebo na webovém serveru. Neustále hrát s kódem, aby se pokusili dělat skvělé věci. Pokuste se znovu vytvořit určité prvky na jiných webech kopírováním bitů kódu.
ačkoli webové stránky, které nakonec vytvoříte, pravděpodobně nebudou vytvořeny ze souborů HTML, je důležité, abyste pochopili, jak nejprve vytvořit statické weby HTML, než začnete používat PHP a / nebo systémy pro správu obsahu (CMS) k vytvoření HTML.
vytváření vlastních webových stránek pomocí CMS
většina webových stránek je vytvořena softwarem CMSs, který dokáže vytvářet HTML stránky v rámci zadaných šablon. Nejlepší z nich jsou WordPress, Joomla a Drupal, ale existuje celá řada lehčí, open source CMS můžete experimentovat s, ty vás naučí, jak PHP, a s dalšími CMS, ASP, se používají k poskládat webové stránky.
použijte MAMP (Mac) nebo WAMP (Windows) v počítači ke spuštění těchto systémů lokálně, abyste mohli dobře porozumět tomu, jak fungují.
pomocí editorů obrázků
budete potřebovat vědět, jak používat Photoshop nebo něco podobného. Budete to potřebovat k vytvoření grafiky pro web a k poskytnutí kompletních vizuálů o tom, jak bude web vypadat po dokončení, aby pomohl procesu návrhu.
získejte návrh
samozřejmě jsem nezmínil, že výsledné webové stránky budou muset nejen ověřit, pracovat, najít vyhledávače, sloužit účelu a být uváděny na trh, ale také … musí vypadat dobře .
Chcete-li zlepšit své umělecké oko, pravidelně vytvářejte práci a snažte se ji zlepšit. Návrhy skic na papíře pak na nich pracují ve Photoshopu nebo v jakémkoli grafickém programu, který máte. Praxe vám pomůže stát se lepším designérem. Později doporučím další zdroje, které vám pomohou s principy návrhu.
online zdroje
když lidé chtějí odpovědi, jdou na internet a „Google it“ nebo vyhledávají YouTube. Web design se neliší. Existuje mnoho zdrojů, které vám pomohou online. V první řadě je W3 školy, které webové designéry odkazují na jako nejlepší on-line samouk zdroj, tam je také Tizag. Někteří lidé doporučují Lynda.com i když jsem to osobně nepoužil.
blogy
existuje řada skvělých designových blogů. Existují velké, které vám mohou pomoci jako SmashingMagazine, WebDesignerDepot, 1stWebDesigner a síť Envato.
osobně dostávám více od nezávislých webových a grafických designérů, kteří blogují. Existují, nicméně, zatížení, ze kterých jsem se za ta léta naučil, takže zde je jen několik a omlouvám se všem vynikajícím blogerům, které jsem ze seznamu vynechal.
- Chris Colyer CSS Tricks je skvěle vypadající responzivní web, ale má také skvělé informace o webovém designu a triky
- Veerle Pieters má skvělé výukové programy Photoshopu a Illustratoru na blogu Veerle
- David Airey je někdo, koho jsem chvíli sledoval na svém vlastním stejnojmenném blogu, LogoDesignLove a IdentityDesigned. Davida zajímá mimo jiné zastřešující identita organizací.
- Chris Spooner mě hodně naučil tutoriály na svém blogu na SpoonGraphics a plus informace a inspirace na Line25
- Fabio Sasso nádherně navržený web Abduzeedo nabízí velkou inspiraci a podivnost.
- Nick La ‚ S N. Design Studio a WebDesignerWall mají některé fantastické informace a velkou inspiraci.
neváhejte přidat své oblíbené designové blogy do komentářů níže.
fóra
když mlátíte hlavou o cihlovou zeď fóra jsou skvělá místa pro získání odpovědí. Pošlete popis vašeho problému a webovou adresu a velmi často se vám někdo ozve s řešením. Zde jsou některé z mých oblíbených fór.
Líbí se mi Estetica Design Forum, DesignForums.co.uk, a návrhář, mluvit. Tam, s Digital Point a Sitepoint pro širší dotazy, fórum WordPress je vynikající a tam, je válečnické fórum pro internetový marketing.
knihy
mnoho webových designérů tvrdí, že staré dobré fyzické knihy jim pomohly naučit web design. Zde je několik mých oblíbených a některé další, které mi byly doporučeny. Odkazy jsou Amazon.com affiliate odkazy.
- Vytvořte si vlastní webové stránky správným způsobem pomocí HTML & CSS 3th (třetí) vydání Ian Lloyd je kniha Sitepoint, kterou jsem četl před lety. V té době mi to opravdu pomohlo, protože se zaměřuje na osvědčené postupy webového designu. Ujistěte se, že si koupíte aktuální vydání (v současné době třetí vydání, které obsahuje hodně na HTML5).
- CSS: chybějící příručka Davida Sawyera McFarlanda obsahuje vysvětlení, příklady a podrobné návody. Tato kniha je zvláště doporučena, protože vám dává pozadí CSS a obsahuje hodně o CSS3.
- principy krásného webového designu, 2. vydání Jasona Beairda, tvrdí, že design je dovednost, kterou lze naučit, a naučí vás základní principy designu.
- sešit barevného designu: průvodce skutečným světem pro použití barev v grafickém designu AdamsMorioka (editor) poskytuje důležité informace nezbytné pro kreativní a efektivní aplikaci barev při navrhování.
- Don ‚ t Make Me Think: Zdravý rozum přístup k Web použitelnost, 2nd Edition Steve Krug okamžitá klasika na web použitelnost, naloženo s postřehy a praktické rady.
- získání Real: chytřejší, rychlejší a jednodušší způsob, jak vytvořit úspěšnou webovou aplikaci 37 signály mohou být o vytváření webových aplikací, nikoli webů, ale má tak úžasný způsob, jak zjednodušit webové procesy, které jsem považoval za užitečné čtení.
- kopání do WordPress Chris Coyier & Jeff Starr je vysoce doporučeno jako Velká kniha WordPress. K dispozici ve formátu PDF (užitečné pro kopírování kódu), stejně jako fyzické verzi.
existuje mnoho dalších knih, které jsem mohl zahrnout zejména o teorii designu. Pokud máte nějaké návrhy knih, které vám pomohly s webdesignem, dejte nám o nich vědět v komentářích.
co můžete udělat
mnoho návrhářů tvrdí, že selhání je ve skutečnosti nejlepší učitel. Tak se tam dostat a navrhnout webové stránky! Když, jak se nepochybně stane, narazíte na cihlovou zeď, můžete zde použít některé z online zdrojů, které vám pomohou. A když se už nemůžete podívat na obrazovku počítače, můžete si o tom přečíst knihu!