učí se základy webdesignu stále na vašem seznamu „jednoho dne“? Proč jste ještě nezačali? Sestavili jsme 30 tipů a zdrojů, které vám pomohou začít se učit web design Tento měsíc (a možná si dokonce najít novou profesní dráhu!

grafici, tiskoví designéři a kreativci, kteří se chtějí naučit něco nového nebo proniknout do webových stránek, musí přestat odkládat. Každý den, kdy neuděláte ten první krok, vás nechává o den dále za všemi ostatními!

postupujte podle těchto kroků a začněte se učit, jak vytvořit svůj první web, osvědčené postupy v oboru a mnoho dalšího-vše za 30 dní!

Začátek Stránky

nejlepší způsob, jak začít učení web design, je začít to dělat. To je rada od Davida Kadavy, autora designu < pro> hackeři.

doporučuji začít blog. Začal jsem blog, jen mít web design hřiště, a o 7 let později, jsem zahájila nejprodávanější knihu na toto téma. Mít osobní projekt, jako je blog, vám dává místo, kde můžete vyzkoušet nové věci, a váš šéf vás nevyhodí, pokud se pokazíte.

nemusíte začínat masivním webem nebo bláznivým designem; začněte v malém. Hrajte si s webem, zjistit, co dělá věci fungují. (A ujistěte se, že zkontrolovat kód, takže můžete začít seznámit s tím, co dělá vaše webové stránky fungují.

Chcete začít rychle? Tvůrce webových stránek, jako je Wix, vám může pomoci začít se stylovým designem webových stránek, když se začnete učit koncepty a stavební kameny toho, co jde do webových stránek.

Přečtěte si vše, co můžete

začněte číst. Protože jste na tomto blogu, jste pravděpodobně zvyklí sledovat, co se děje ve světě designu. Čti dál.

Přečtěte si vše o designu webových stránek, trendech, technikách a osvědčených postupech. Sledujte designéry, které obdivujete na sociálních médiích.

Cast širokou síť pro vaše webové stránky design čtení stejně. Přečtěte si o základech, abyste se naučili nějaký kód, přečtěte si o teorii designu a přečtěte si návody a aktuální články.

buďte efektivní komunikátor

Pokud nejste nejvíce artikulovaný člověk, oprášit tyto dovednosti. Velkou součástí designu webových stránek je komunikace.

návrháři webových stránek musí pravidelně komunikovat s klienty, aby zjistili, jaký problém musí design vyřešit; musí tato řešení komunikovat a implementovat je také.

Přihlásit se na Tuts+ & Envato Prvků

Zvažte předplatné Envato Prvky, které získá také přístup k vynikající Tuts+ zdroj učení.

Tuts + publikujte pravidelné kurzy grafického a webdesignu, od základních technik až po nejnovější pokročilé přístupy a vývoj. Je to úplně samo-chodil, učil odbornými instruktory. Budete také získat přístup k Envato Prvky, což je skvělý zdroj pro nalezení grafiku, šablony, a více zapojit do vašeho web design práce.

myslet v HTML

HTML, nebo HyperText markup language, je základním kamenem designu webových stránek. HTML je kostra, která pomáhá vytvářet strukturu webových stránek a jakmile si můžete přečíst jazyk, svět designu webových stránek bude mít mnohem větší smysl.

W3Schools má skvělý HTML startovací tutoriál se stovkami příkladů HTML, se kterými můžete hrát na obrazovce, abyste viděli, co se stane a jak přesně to funguje. (Možná to bude intuitivnější, než jste si představovali.)

Hrát s Kódem na Codeacademy

Zatímco HTML je dobrý začátek, můžete se naučit téměř jakýkoliv programovací jazyk od Codeacademy. Bezplatná sada nástrojů vás naučí kódovat pomocí interaktivních aktivit a her.

můžete si vyzvednout kurz Codeacademy, kde a kdy ho potřebujete, a začít a zastavit podle potřeby. Vyberte předmět k učení – vývoj webových aplikací, programování, data science – nebo jazyk, který chcete zaměřit na – HTML & CSS (skvělé místo pro start), Python, Java, SQL, Ruby a další.

Naučte se Rozumět CSS

CSS, nebo kaskádových stylů, definovat prezentaci dokument napsaný v HTML, nebo XML a SVG.

podle definice Mozilla

CSS popisuje, jak mají být prvky vykresleny na obrazovce, na papíře, v řeči nebo na jiných médiích.

Mozilla má také velkou sbírku CSS zdrojů, aby mohli začít, s pevnou úvod, jak CSS funguje, včetně selektorů a vlastností, psát CSS pravidla, použití CSS do HTML, jak určit délku, barvu, a další jednotky v CSS, kaskáda a dědičnost, box model základy, a ladění CSS. Pak moduly přejít na vysvětlit styling text a políčka.

aplikujte své designové dovednosti na Web

Pokud již pracujete v oblasti kreativního nebo grafického designu, přemýšlejte o věcech, které již víte, že můžete použít i pro design webových stránek. Principy, které dělají něco vizuálně přitažlivého, se nemění na základě média a vše, co teorie designu přijde vhod i v digitálním prostoru.

zatímco prvky, jako je učební kód, se nemusí cítit přirozeně, mít designové pozadí je obrovský bonus. K čemu je krásně kódovaný web, pokud s ním nikdo nechce komunikovat?

věnujte pozornost webům, které máte rádi

Vezměte na vědomí weby, které máte rádi. A co je pro vás přitažlivé? (A jak se můžete naučit tyto prvky replikovat?) Věnovat pozornost:

• Typografie
• Navigace
• Využití obrazů a prostoru
• Design formulářů
• Animace a scroll efekty
• Barva

Nakreslit Wireframe

Wireframing je web designer je brainstorming.

ve své nejčistší podobě je drátěný model náčrtem toho, co bude web. Není to nástin estetických prvků, spíše plán webové stránky. Kreslení drátěného rámu není ve skutečnosti o vzhledu tohoto designu, je to o informační struktuře v něm.

nejste si jisti, jak vytvořit drátěný model? Digitální telepatie má průvodce osvědčenými postupy, které vám pomohou učit se.

Trvat Nějaký Čas se Učit Skici

Skica je vektorové kreslení nástroj pro Mac, který umožňuje snadno vytvářet designové prvky. Mnoho návrhářů se obrací k náčrtu, aby vytvořili prvky uživatelského rozhraní a opakovali konstrukční bloky.

je nabitý pluginy a umožňuje exportovat kód pro snadné použití a přístup. Je to jeden z nejsilnějších a nejoblíbenějších nástrojů, které se objevují od Creative Suite společnosti Adobe a stojí za váš čas.

Zůstaňte v obraze s technologií

AI, VR, AR, 360stupňové video, roboty.

může být těžké držet krok s tolika novými technologiemi a trendem. Ale musíte udělat bod, abyste zůstali na vrcholu těchto změn.

řešte je jeden po druhém a začněte s technologiemi, které přímo souvisejí s prací, kterou děláte. Pokud máte web s online chatem, začněte tím, že se dozvíte o botech. Nebo pokud používáte hodně videoobsahu, Hrajte si s 360stupňovým videem.

prvky, jako je umělá inteligence a virtuální nebo rozšířená realita, jsou ještě složitější, ale pravděpodobně se stanou integrovanými součástmi krajiny designu webových stránek po silnici. Minimálně byste měli vědět, co jsou a jaké by mohly být potenciální využití.

Získejte Pohodlné s SEO

Zatímco mnoho webové designéry, že SEO specialista může zvládnout se webové stránky připravené pro vyhledávače číst, je tam spousta projekčních prací, které souvisí se SEO.

od způsobu nahrávání obrázků k vytvoření čistého kódu, který je rychlý k zahrnutí meta popisů na stránkách a prvcích, by měl návrhář začlenit vyhledávací myšlení do svého pracovního postupu.

nezávislí pracovníci, to je pro vás také životně důležité. Většina klientů je dostatečně důvtipná, aby požádala o web optimalizovaný pro SEO. Pokud pracujete sami, musíte vědět dost, abyste vytvořili solidní rámec, který Google dokáže číst (a být schopen odkázat klienta na odborníka na SEO, pokud je třeba udělat více práce).

Hrajte s Website Builder

tvůrce webových stránek může být skvělý způsob, jak se pohodlně s osvědčenými postupy a jak začít vytvářet a navrhovat webové stránky.

většina z těchto nástrojů má spoustu šablon a umožňuje vám přizpůsobit prvky a dokonce přidat úryvky kódu. Pro jednoduché weby má mnoho tvůrců webových stránek také bezplatný plán, kde si můžete vytvořit osobní stránku portfolia nebo základní web, který slouží jako hřiště pro vás.

pak vyberte kousky v nástroji website builder. Podívejte se, jak jsou navrženy a kódovány, abyste získali pocit, jak se to všechno spojuje. Budete ohromeni tím, co můžete zjistit pouhým výběrem jiného designu.

Najděte mentora

je tu někdo, s kým pracujete a obdivujete ho jako webdesignéra? Vezměte je na oběd a vyberte si jejich mozek o průmyslu.

nalezení mentora, který je ochoten s vámi pracovat a pomůže vám přemýšlet o oboru a o tom, jak se naučit webdesign na vlastní pěst, může být neocenitelné. A i když pravděpodobně najdete mentora v online komunitě, nic není lepší než živá osoba, se kterou se můžete pravidelně setkávat tváří v tvář. (Možná stojí za to mít online a osobní mentory.)

Připojit CodePen Společenství

Jakmile začnete dostat pohodlně s nějakým kódem a programování, který chcete připojit CodePen společenství. Komunita s otevřeným zdrojovým kódem umožňuje sdílet a upravovat úryvky kódu v sociální síti svého druhu.

zde je něco více od zakladatelů webu: „CodePen je prostředí sociálního rozvoje. Ve svém srdci Vám umožňuje psát kód v prohlížeči a vidět jeho výsledky při vytváření. Užitečný a osvobozující nástroj pro vývojáře jakékoli dovednosti, a zejména posílení pro lidi, kteří se učí kódovat. Zaměřujeme se především na front-end jazyky jako HTML, CSS, JavaScript a předzpracování syntax, které se promění v tyto věci.“

vezměte třídu

pro některé studenty je nejlepší formálnější nastavení učebny.

k dispozici je spousta tříd – osobně i online-pro vás, abyste se naučili základy webového designu. Začněte s místní vysokou školou nebo online výukovými centry, jako je Udemy nebo Coursera. Vyzvedněte si třídu na aktuální úrovni schopností a pokračujte v pohybu vpřed.

chcete něco udělat? Google it

pro ne tak tradiční studenty najděte odpověď na problém s webovým designem na Googlu. Existuje tolik výukové programy a videa k dispozici, které vás mohou projít téměř jakýkoli problém – a řešení.

klíčem je hledat přesně to, co potřebujete vědět, a hledat odpověď na seriózní zdroj. Zde je další tip, pokud jde o výukové programy a videa – novější obsah vám pravděpodobně poskytne lepší, úplnější a relevantnější odpověď. (Pamatujte, některé z těchto věcí se rychle mění.)

věnujte pozornost uživatelské zkušenosti

nic nemůže vytvořit nebo rozbít web, jako je návrh uživatelské zkušenosti. Musíte to naplánovat a pochopit.

Zde je, jak Interakce Design Nadace popisuje, UX design:

Uživatelské zkušenosti (UX) design je proces vytváření produktů, které poskytují smysluplné a osobně relevantních zkušeností. To zahrnuje pečlivý design jak použitelnosti produktu, tak potěšení, které spotřebitelé budou mít z jeho použití. Zabývá se také celým procesem získávání a integrace produktu, včetně aspektů značky, designu, použitelnosti a funkce.

UX návrháři nebo designéři, kteří jsou si vědomi proces utváření zkušeností, se snaží vytvořit a tvar faktory ovlivňující proces záměrně. Chcete-li to provést, návrhář UX zváží proč, Co a jak používat produkt.

věnujte pozornost trendům designu

jak vypadá moderní design webových stránek? To není chyták. Pro návrh moderních webových stránek a uživatelské zkušenosti, musíte vědět, co uživatelé chtějí a jak jsou interakci s ním. Pokud jste naposledy stáhli aplikaci nebo se podívali na web v telefonu v roce 2016, Máte spoustu důvodů, abyste se vyrovnali.

vytváření návrhů webových stránek, které mají moderní prvky a trendy integrované do designu, pomůže vašim projektům vyniknout. Jak víte, co je trendy? Pokračujte ve čtení takových webů a věnujte pozornost tomu, co dělají ostatní návrháři. Vezměte na vědomí barvy a styly a funkce, které jsou součástí webových stránek, které často navštěvujete.

vytvořit bez barvy

Začněte každý design bez barvy. Skvělý designér mi jednou řekl, že pokud váš design funguje černobíle, bude bezchybný v barvě.

to nemusí vždy držet, ale je to skvělý výchozí bod.

vytvořením návrhů v černé a bílé barvě můžete vidět, kde prvky kontrastují a jak spolu hrají. Jste zbaven jakékoli emocionální asociace s barvou nebo pohybem očí, že se stane, protože to. Tato nejjednodušší forma designu vám dá představu, pokud něco funguje jako koncept, než se přesunete k jeho dokončení.

Naučte se milovat písma Google

Google Fonts je váš přítel.

bez Ohledu na to, jak se cítíte o Google, schopnost procházet, třídit a vyberte písma, že víte, bude pracovat v návrhy webových stránek je důležité. Nemusíte přemýšlet o licencování nebo o tom, zda jsou písma kompatibilní s konkrétními prohlížeči nebo ne.

omezení spočívá v tom, že máte k dispozici pouze to, s čím můžete pracovat v knihovně písem Google. Ale pokud se pokusíte, můžete najít něco, co se hodí téměř ke každému projektu. To vám ušetří spoustu času v dlouhodobém horizontu.

Vyberte si sadu UI

Stáhněte si uživatelské rozhraní nebo sadu ikon a vyberte ji od sebe.

stejně jako si můžete prohlédnout kód webové stránky, podívejte se, jak jsou konstrukční prvky konstruovány pro web. Vezměte na vědomí měřítko a mřížku, podívejte se na barevné mixy a na to, jak jsou soubory organizovány ve Photoshopu nebo Illustratoru.

vyhledejte sadu ke stažení, která obsahuje prvky ve více formátech pro displeje s vysokým rozlišením. (Stahování spoustu JPEG nebude sloužit vám všechno tak dobře.)

pak zkuste vytvořit nebo přizpůsobit prvek nebo dva vlastní.

Staňte se typografem

moderní design webových stránek se silně zaměřuje na typografii … dobrou typografii. Od hrdiny záhlaví s obří slov vrstvy textu, které čerpají uživatele do designu, pochopení principů, jak spárovat typ prvků a vytvořit poutavé textové bloky, je životně důležité.

začít s Ellen Lupton myšlení s typem. (Existuje také stejnojmenná kniha.) Lupton je autorita v typografii a její informace vás přimějí myslet jako typograf v žádném okamžiku.

přejít do JavaScriptu

Když se začínáte cítit docela dobře o fušování s web design, Vyzvěte se znovu naučit JavaScript. Po HTML a CSS je to nejdůležitější jazyk webu.

JavaScript je nástroj, který umožňuje návrhářům implementovat složité věci a interakce na webových stránkách. To je to, co dělá posuvný snímek nebo animaci paralaxy.

Learn JS má interaktivní návod, který vám pomůže začít.

Aktualizujte své Portfolio

jakmile začnete navrhovat pro web, nezapomeňte aktualizovat své portfolio pomocí projektů webového designu. Tato jednoduchá akce vám pomůže ukázat sobě … a ostatním … že web design je součástí vašeho repertoáru.

aktualizované portfolio může potenciálním klientům pomoci zjistit, jak vypadá váš „styl“. Nezapomeňte předvést rozvržení, barvy, typografii a různé techniky, které ukazují, co můžete udělat.

Vyzvěte se

s tolika zkratkami a úryvky kódu, které vám pomohou vyřešit téměř jakýkoli problém s webem, který máte, nebuďte líní. Nezapomeňte se neustále vyzývat, abyste se naučili nové dovednosti, nové technologie a neustále zlepšovali svou hru pro webový design.

jedna věc na tomto poli je, že se neustále mění; vždy je něco nového, co se můžete naučit nebo vyzkoušet.

Maximalizujte své zkušenosti

Dostaňte se tam a navrhněte. Musíte začít navrhovat webové stránky být web designer.

Začněte v malém, ale přijímejte projekty s ostatními. Požádejte o zapojení do projektu s týmem v práci. Řešte malý web pro přítele. Čím více zkušeností máte při vytváření webových stránek, tím lépe a rychleji získáte.

na co čekáš? Přestaň odkládat.

požádejte o zpětnou vazbu

Použijte svou síť ke shromažďování zpětné vazby na projekty návrhu webových stránek, bez ohledu na to, jak malé si myslíte, že jsou. Poslechněte si tuto zpětnou vazbu-i když se vám nelíbí a uvidíte, co se můžete naučit.

kromě vizuální preference nabídla osoba poskytující zpětnou vazbu návrhy na zlepšení funkce webu? Mohli by snadno pochopit cíl návrhu? Spojili se se zprávami?

neustále Učit Novým Věcem

skvělé webové stránky designer, jen musíte hrát dál, zkoušet a učit se nové věci. Udělejte si místo v síti a komunikujte s ostatními v terénu, abyste mohli zůstat na vrcholu technik a vizuálních změn, které jsou požadovány.

Pokud se chcete naučit design webových stránek, pak je to pravděpodobně již něco, co pravidelně děláte. Ale toto je rozvíjející se pole, a neustále se mění téměř každý den. Zeptejte se kohokoli, kdo to dělá.