pokud jste odhodláni naučit se web design sami, jste na správném místě.
je pravda, že webový design může být docela složitý a skličující, ale s vývojem technologií a pronikáním na internet se rozrostl do epických rozměrů. Není divu, že stát se webdesignérem se v současné generaci stalo populárním trendem.
v tomto článku vás provedu výukou webového designu se zdroji a tipy. Pro začátečníky, kteří se chtějí vydat touto cestou, můžete tento článek sloužit jako průvodce.
Krok 1: Make up your mind and make plans
Learning web design je dlouhodobý úkol, který je plný výzev. Musíte se vážně vyzvat. Rozhodněte se právě teď a vytvořte plány na základě učebních průvodců, které uvádíme v tomto článku. Nezapomeňte, že to uděláte sami, pokud se začnete učit webdesign prostřednictvím praxe. Takže buďte připraveni!
Krok 2: Získejte základní znalosti o webdesignu
„jak se mohu začít učit webdesignu?“To je otázka ve vaší mysli. Chcete-li se důkladně naučit webdesign, měli byste pochopit odpovědi alespoň na následující 2 otázky:
co je webdesign?
lidé často nepochopí význam webového designu.
no, co přesně je web design?
Visual + interaction = web design
Web design je především o řešení problémů. Zahrnuje všechny aspekty webové stránky – umění, dovednosti, věda, a technologie budování vzhledu a funkčnosti webové stránky, stejně jako způsoby, jakými uživatelé interagují s webovými stránkami.
mnoho mladých návrhářů často nepochopí koncept webdesignu s konceptem vývoje.
nezapomeňte: web design je o designu, ne o kódování a front-end nebo back-end vývoj.
samozřejmě je lepší, pokud znáte některé kódovací jazyky (HTML, CSS, Java atd.), ale neměli byste se dostat hluboko do vývoje front-end nebo back-end, pokud chcete být zaměřeným webdesignérem. To není jádro webdesignu.
jaký je proces návrhu webu?
webdesign není jednoduchý úkol. Je docela náročné, ale zajímavé vytvořit prázdnou stránku na kompletní web. Jak to můžeš udělat?
musíte sledovat hlavní fáze procesu návrhu webu. Jsou to:
- nastavení cíle
Určete, jaký typ webu navrhnete. Je to pro elektronický obchod, podnik, propagaci nových produktů nebo projekt aktivit?
pokud nemáte tušení, začněte blogem. Pro nové studenty je budování blogu lepší volbou než vytváření jiných typů komplikovaných webových stránek.
- vytvoření plánu
vytvoření časové osy pro navrhování stránek. Přiřaďte úkoly všem, kteří se podílejí na projektu navrhování webu.
- vytvoření souboru Sitemap a wireframing
brainstorming. Proměňte nápady v drátěný rám s perem nebo drátěnými nástroji. Musíte převést své myšlenky na něco hmatatelného, abyste je mohli brzy ověřit.
- vytváření obsahu
přidejte obsah s designovými prvky, vizuály, kopiemi a interakcemi. Toto je fáze, kdy využijete všechny své dovednosti v oblasti designu a vývoje. V této fázi převedete prázdnou stránku na hotový web.
- testování
Otestujte své webové stránky a získejte užitečnou zpětnou vazbu. Udělejte to, dokud maximalizujete kvalitu uživatelského prostředí, a pak buďte připraveni ke spuštění.
- spuštění
zpřístupněte své webové stránky návštěvníkům a vylepšete je na základě shromážděné zpětné vazby.
můžete získat komplexnější pochopení procesu webového designu tím, že projde tento 43 minut Web Design kurzu.
Krok 3: Začněte se učit
jakmile se nastavíte a pochopíte základy designu webových stránek, můžete začít procházet praktickými učebními zdroji a tipy.
webový design zahrnuje jak vizuální vzhled, tak funkční design. To znamená, že se musíte naučit 2 hlavní věci:
- jak si vytvořit webové stránky vypadá dobře?
- jak si vytvořit webové stránky funguje dobře?
budete se muset naučit navrhovat rozhraní (typografie, navigace, obrázky, prostor, animace, barvy atd.), jak je kódovat v jazyce pro vývoj webových aplikací (HTML, CSS, Python, SQL, Ruby nebo JavaScript) a optimalizovat vaše webové stránky pro vyhledávače.
číst web design učení knihy
jedním z nejlepších způsobů, jak se naučit web design je prostřednictvím čtení knih. Zde jsou 5 z nejlepších web design knihy, které jsou užitečné pro ty, kteří se chtějí naučit web design na vlastní pěst.
- HTML a CSS: Design a vytváření webových stránek
- učení webdesignu: průvodce pro začátečníky
- nenuťte mě přemýšlet: Zdravý rozum přístup k Web použitelnost
- učení web design
- navrhování s webovými standardy
Přečtěte si web design blogy
pokud nejste knihomol a najít čtení zdlouhavý úkol, můžete sledovat některé nejlepší web design blogy, aby se váš mozek krmena. Použijte blogy jako alternativu a přihlaste se k odběru svých oblíbených, abyste nic nezmeškali.
- Smashing Magazine
- Mockplus blog
- Webdesigner Depot
- Webdesignledger
- WEB DESIGN LIBRARY
- Hacking UI
- 1stwebdesigner
- WEBAPPERS
Učte se s obsahem PDF
některé opravdu užitečný obsah je k dispozici ve formátu PDF ke stažení zdarma. Můžete jej použít k učení webového designu krok za krokem. Toto je několik příkladů, které stojí za váš čas.
- Web design-handbook
- Learning Web Design třetí vydání-Sémantic Scholar
- Web design 101-MIT
- Sestavte si svůj vlastní Web správným způsobem pomocí HTML & CSS – X-Files
- Kompletní průvodce Web Design.pdf – online Křesťanská knihovna
Učte se od profesionálů
Sledujte webové designéry, od kterých se chcete učit na sociálních sítích, jako jsou Twitter, Dribbble, Behance, Github a další platformy, kde jsou aktivní. Přečtěte si jejich příspěvky, klikněte na tlačítko like pro ty, které oceníte, a komentujte, pokud chcete přidat bod nebo položit otázku . Pokud budete mít štěstí, najdete si mentora v online komunitě nebo skupině. Ale nerušte je a jejich pomoc považujte za samozřejmost.
webové designéry můžete sledovat:
- Ethan Marcotte
- Chris Coyier
- Ethan Marcotte
- Jeffrey Zeldman
- Luke Wroblewski
Učte se z Web design video tutoriálů
existuje spousta videí Youtube k dispozici online. Zkraťte svůj čas sledováním zábavných věcí a pomocí Youtube se naučte web design. Zde doporučuji 5 z nejpopulárnějších video tutoriály. Užijte si sledování.
- začátečník Web Design Tutorial Pro 2018-Část 1 z 2
- výukový program pro vývoj webových stránek pro začátečníky 2018 / 2019-jak vytvořit web
- výukový program pro návrh webových stránek pro začátečníky
- HTML CSS Tutorial pro začátečníky-návody pro vývoj webových aplikací pro začátečníky
- kompletní HTML a CSS Web Design návody pro začátečníky
Učte se z online kurzů
bezplatné online kurzy mohou být jedním z nejlepší zdroje. Můžete také diskutovat s ostatními studenty.
- Třída central
Naučte se vývoj webových aplikací s bezplatnými online kurzy a MOOC z Johns Hopkins University, University of Michigan, KU Leuven University, University of California, Berkeley a dalších špičkových univerzit po celém světě.
- Coursera
skvělá webová stránka pro začátečníky, kteří se učí webdesignu. Můžete si vybrat kurz z požadované univerzity a zjistit, kolik lidí se to učí. S prezentovanými údaji máte při výběru kurzu spoustu možností.
- Edx
uvádí mnoho zdrojů pro budování vašich návrhových dovedností a rozvoj vaší kariéry. Můžete se naučit Témata Krok za krokem s různou úrovní v krocích podle obtíží.
- W3Schools
užitečné pro výuku základních kódovacích jazyků, jako jsou HTML a CSS.
- Univerzita kódu Google
Naučte se kódovat od vývojářů Google.
- kód Avengers
obzvláště se mi líbí tento učební web, protože je to jako velké dobrodružství, které vám umožní účastnit se programů kódování výzev a lovu chyb.
více míst pro web design online kurzy：
- Treehouse
- Lynda
- Udemy
- Coursera
- Webdesign.tutsplus
Naučte se základy HTML a CSS
možná se ptáte, proč bych se měl učit HTML? Obecně platí, že použití aplikace pro webový design, jako je Dreamweaver, je v pořádku. Ale v současné době, většina webových stránek jsou citlivé HTML5 založené, a CSS je kůže webové stránky. Moderní design webových stránek není možný bez CSS. Učení základů HTML a CSS vám pomůže pokročit ve webdesignu.
zdroje pro výuku HTML a CSS：
- 30 dny se učit HTML a CSS
- průvodce pro začátečníky k HTML & CSS
- nebojte se Internetu
- 8 nejlepších bezplatných responzivních šablon webových stránek CSS
můžete se také připojit ke komunitě CodePen. Jedná se o komunitu s otevřeným zdrojovým kódem, která Vám umožňuje upravovat úryvky kódu a sdílet je s ostatními.
Naučte se JavaScript
kromě HTML a CSS je JavaScript důležitým jazykem webu, který se můžete naučit. Jedná se o nástroj, který vám umožní vytvářet pokročilé uživatelské interakce, jako jsou paralaxové efekty a výkonné webové aplikace.
zdroje pro učení JavaScriptu:
- 32 z nejlepších míst se naučit JavaScript pro vývoj webových začátečníků
- Horní 37 JavaScript knihy pro začátečníky a zkušené programátory v 2019
další informace o web design elements
pokud jste dobří v pozorování, zjistíte, že většina atraktivních moderních webových stránek má dobré uspořádání základních prvků webových stránek, jako jsou:
1） typografie
typografie je klíčem k vynikajícímu webdesignu. Zajišťuje čitelnost obsahu a přímo ovlivňuje uživatelský dojem. Typografie je významným aspektem všech moderních webových stránek, protože svým návštěvníkům nabízí estetiku i funkčnost.
zdroje pro výuku webové typografie:
- 17 Nejlepší typografie Design webové stránky & Návody
- 30 kreativní webové stránky s nádhernou typografií & barevná schémata
2）animace a transformace
přechody a transformace přinesou návštěvníkům vašeho webu vylepšené interakce uživatelů. Jedním z nejlepších způsobů, jak vytvořit jednoduché animace, jsou přechody a transformace CSS. Kromě toho jsou efekty paralaxy scroll a horizontální scroll skvělou volbou pro webové stránky.
3）barevné schéma
barevné kombinace webových stránek odrážejí estetické preference / styl webového designéra a přímo ovlivňují vnímání diváka. Musíte se naučit, jak používat barvu v UI designu moudře vytvořit perfektní UI rozhraní.
4）písma
personalizovaná písma mohou být zábavná nebo expresivní, ale nejsou vždy praktická. Pokud chcete, aby byl web čitelný a profesionální, vyberte pro něj nejvhodnější písmo. Zkontrolujte 20 nejlepších webových písem Google pro vynikající webový Design. Jsou zdarma k použití!
5）Layout
Web layout design se zaměřuje na průsečík mezi technologií a umění. Web layout design odkazuje na kombinaci vizuálních prvků, jako je text a obrázky, aby stránka vypadala krásně a snadno se v ní pohybovala. Je důležitou formou vizuální komunikace a nedílnou součástí webdesignu. Tady jsou 9 nejlepších příkladů a nápadů Rozvržení webových stránek.
6）grafika
obrázky dávají lidem vizuální dojem, který je intenzivnější než text. Mohou zvýšit šance na přilákání pozornosti uživatelů.
7）responzivní design
responzivní web design je sbírka technik pro vytváření webových stránek, které pracují na více velikostech obrazovky. Naučte se to s tímto 47minutovým kurzem CSS.
Naučte se základy wireframing/prototyping
Wireframing / prototyping je důležitým krokem k položení základů pro vaše webové stránky v celém procesu návrhu a vývoje webových stránek. Umožňuje vám brainstorming, vytvořit plán a získat jasnou představu o struktuře webu.
nezaměňujte různé termíny. Projděte si základní UI / UX konstrukčních konceptů: rozdíly mezi Wireframe, prototyp, a maketa
Naučte se web design nástroje
Photoshop-UI design tool
může být použit k vytváření a vylepšování fotografií, ilustrací, 3D kresby, design webových stránek a mobilních aplikací; upravovat videa, simulovat real-life obrazy; a další. Můžete se naučit, jak používat prostřednictvím některého z 22 nejlepší zdarma krok za krokem Adobe Photoshop Tutoriály pro začátečníky.
Dreamweaver-nástroj pro vývoj webových aplikací
může být použit k vytváření dynamických webových stránek pro více platforem a prohlížečů. „Dreamweaver umožňuje svým uživatelům navrhovat, kódovat a spravovat webové stránky, stejně jako mobilní obsah. Dreamweaver je nástroj integrovaného vývojového prostředí (IDE).“(Wikipedia). Začněte s průvodcem pro začátečníky k Dreamweaveru.
Mockplus-prototyping tool
Mockplus je jedním z nejlepších prototypování nástrojů pro webové designéry vytvořit interaktivní webové makety. Komponenty můžete přetahovat a vytvářet webové stránky a prohlížet je v HTML nebo jiných formátech. K bezplatnému spuštění prototypování potřebujete pouze 10 minut.
Učte se s website builder
počínaje Website builder vám může rychle pomoci porozumět osvědčeným postupům při vytváření a navrhování webových stránek. S předem navrženými šablonami a sadami uživatelského rozhraní můžete jednoduše přizpůsobit prvky nebo přidat úryvky kódu a vytvořit web, který návštěvníci obdivují.
stavitelé webových stránek, můžete zkusit:
- Web Host recenze
- Wix
- ConstantContact
- SITE123
- Jimdo
- WordPress
Naučte se SEO
je dobré mít SEO specialistu, který se bude zabývat věcmi vyhledávače. Ale design je docela spojen se SEO, protože obsah na vašem webu je čten vyhledávači a hraje roli v hodnocení. Pokud chcete navrhnout web optimalizovaný pro SEO, je nutné znát základy SEO. Alespoň byste měli vědět o meta popisech na stránkách a prvcích.
Naučte se trendy designu
trendy designu se rychle mění. Chcete-li navrhnout moderní web, musíte si být vědomi nejnovějších trendů v designu a technologií vývoje webových stránek. Můžete jednoduše projít 10 nejlepších trendů a příkladů webového designu v roce 2019 pro inspiraci.
Krok 4: Začněte s drátěným rámem
spusťte proces návrhu webových stránek pomocí drátového rámu. Wireframing pomáhá webovým designérům v brainstormingu a ověřování jejich myšlenek brzy. Začněte wireframing s 10 praktické tipy pro skicování drátových modelů.
Krok 5: Použijte to, co jste se naučili navrhnout webové stránky
nyní je čas vyzkoušet, co jste se naučili v kroku 3. Musíte se naučit web design tím, že to uděláte. Pak budete vědět, čemu rozumíte a co ne. pak se učte a pokračujte.
Krok 6: požádejte o zpětnou vazbu a proveďte vylepšení
pokud jste vytvořili blog nebo jakýkoli jiný web, měli byste na něj pozvat lidi. Pokuste se získat co nejvíce zpětné vazby, jak můžete provést vylepšení.
FAQ učení web design：
jak dlouho trvá naučit web design?
Web design učení je kontinuální proces, ale to může být naučil v měsících. Obvykle vám bude trvat 5 měsíců, než se naučíte HTML, CSS a základy JavaScriptu. Musíte také trávit čas na návrhových nástrojích, jako jsou Photoshop, Sketch a Mockplus.
kromě toho byste měli rozumět webovým standardům, principům návrhu, designu UX/UI, kompatibilitě mezi prohlížeči a citlivosti. Učení všech z nich vám zabere 3 až 4 měsíce.
a nejdůležitější je, že se právě chystáte vstoupit do oblasti webdesignu po všech těchto lekcích. Design se mění, technologie se mění, takže se musíte neustále učit.
mohu se stát webdesignérem bez titulu?
můžete se stát webdesignérem bez titulu. Chcete-li být web designer, titul není nutností, co musíte mít, je zájem o programování, znalost vizuálního designu a kódování v jazyce vývoje webu, stejně jako další dovednosti v navrhování webu. Ale stupeň může zvýšit vaše šance na získání najal ve většině případů.
Co mohu dělat po absolvování kurzu webového designu?
po dokončení kurzu webdesignu můžete zahájit živý projekt, poté se najmout ve společnosti pro webový design nebo být na volné noze a hledat projekty a klienty sami.
má web design budoucnost?
žijeme v digitálním světě, který je plný webových stránek. Budoucnost je docela slibná.
podle Průvodce platy Creative Group 2019 je front-end web developer jedním z nejlépe placených pracovních míst v oblasti kreativity a marketingu, spolu s designéry UX, výzkumníky uživatelských zkušeností, copywritery atd. Podle Glassdoor, weboví vývojáři dostat zaplaceno mezi $ 41.6 k-78.3 k ročně a podle PayScale jsou nabízeny $ 16.4 k-34.6 k ročně. Průměrný plat web designer je kolem $ 49,693.
je web design snadné?
na začátku se to může zdát jednoduché, protože se můžete naučit základy HTML & CSS za několik měsíců. Ale jak postupujete v tomto odvětví, může to být náročnější. Musíte se neustále učit nové technologie, abyste udrželi krok se všemi změnami. Ale pokud máte zájem o vytváření webových stránek a webových aplikací, pak web design může být pro vás snadné.
závěr
pokud se chcete naučit web design sami, výše uvedené informace mají vše, co potřebujete ke spuštění. Přestat ztrácet čas na Facebook nebo Twitter „hledá odpovědi“. Ačkoli na těchto platformách můžete vytvořit designovou komunitu, nemůžete být webdesignérem tím, že trávíte čas bezcílně. Tak, shrbte se a začněte se učit. Nikdy se nevzdávejte učení a hodně štěstí!