jak se naučit web design (v 9 krocích)

porozumět klíčovým konceptům vizuálního designu

řádek

každé písmeno, ohraničení a rozdělení v rozvržení se skládá z řádků, které tvoří jejich větší strukturu. Učení webdesignu znamená pochopení aplikací linek při vytváření pořádku a rovnováhy v rozvržení.

tvary

tři základní tvary ve vizuálním designu jsou čtverce, kruhy a trojúhelníky. Čtverce a obdélníky pracují pro bloky obsahu, kruhy pracují pro tlačítka a trojúhelníky se často používají pro ikony, které doprovázejí důležitou zprávu nebo výzvu k akci. Tvary mají také smysl pro emoce, se čtverci spojenými se silou, kruhy s harmonií a pohodlím a trojúhelníky s významem a akcí.

textura

textura replikuje něco v reálném světě. Prostřednictvím textury získáme představu o tom, zda je něco drsné nebo hladké. Textury lze vidět v celém webdesignu. Od papírového pozadí po barevné pramínky Gaussova rozostření si uvědomte různé druhy textur, díky nimž mohou být vaše návrhy zajímavější a mohou jim dát pocit fyzičnosti.

Barva

Chcete-li vytvořit návrhy, které nejsou namáháním očí, měli byste se vzdělávat v teorii barev. Pochopení barevného kolečka, doplňkových barev, kontrastních barev a emocí, s nimiž jsou různé barvy spojeny, z vás udělá lepšího webdesignéra.

mřížky

mřížky mají své kořeny v nejranějších dnech grafického designu. Fungují tak dobře při vytváření pořádku s obrázky, texty a dalšími prvky ve webdesignu. Naučte se, jak strukturovat rozvržení webu pomocí mřížek.

znát základy HTML

Hypertext markup language (HTML) poskytuje pokyny pro to, jak se obsah, obrázky, navigace a další prvky webové stránky zobrazují ve webovém prohlížeči někoho. I když nemusíte být odborníkem na HTML, stále vám pomůže seznámit se s tím, jak to funguje, i když používáte vizuální designovou platformu, jako je Webflow.

HTML tagy jsou pokyny, které prohlížeč používá ke generování webové stránky. Nadpisy, odstavce, odkazy a obrázky jsou ovládány těmito značkami. Zvláště budete chtít vědět, jak se značky záhlaví, jako jsou značky H1, H2 a H3, používají pro hierarchii obsahu. Kromě ovlivnění struktury rozvržení jsou značky záhlaví důležité v tom, jak webové prohledávače klasifikují design a ovlivňují, jak se zobrazují v hodnocení organického vyhledávání.

Chcete-li se dozvědět více o základních pojmech HTML (je zde také část o CSS), podívejte se na tuto lekci, kterou jsme dali dohromady na Webflow University.

rozumět CSS

CSS (nebo kaskádové styly) poskytuje styling a další pokyny, jak se bude prvek HTML zobrazovat. Dělat věci, jako je použití písem, přidání polstrování, nastavení zarovnání, výběr barev a dokonce i vytváření mřížek, je možné prostřednictvím CSS.

vědět, jak funguje CSS, vám dá dovednosti vytvářet jedinečné vypadající webové stránky a přizpůsobovat stávající šablony. Podívejme se na několik klíčových konceptů CSS.

třídy CSS

třída CSS je seznam atributů, které se spojují ve stylingu jednotlivého prvku. Něco jako text těla může mít písmo, velikost a barvu všech součástí jedné třídy CSS.

třídy CSS combo

třída combo je postavena na existující základní třídě. Zdědí všechny atributy, jako je velikost, barva a zarovnání, které již mohou být na svém místě. Atributy lze poté změnit. Combo třídy vám ušetří čas a umožní vám nastavit varianty třídy, které můžete použít kdekoli potřebujete ve webdesignu.

vědět, jak CSS funguje, je nezbytné při učení webdesignu. Jak je uvedeno v části o HTML, doporučujeme, abyste se vydali na Webflow University, kde se dozvíte více o tom, jak CSS funguje.

Naučte se základy UX

UX je kouzlo, které oživuje web a přeměňuje jej ze statického uspořádání prvků na něco, co se zabývá emocemi někoho, kdo jím prochází.

barevné schéma, obsah, typografie, rozvržení a vizuální prvky se spojují, aby sloužily vašemu publiku. Design uživatelské zkušenosti je o přesnosti a vyvolávání pocitů. Nabízí někomu nejen hladkou cestu, ale zážitek, který je spojuje s entitou nebo značkou za webdesignem.

zde je několik principů UX, které potřebujete vědět.

uživatelské personas

Web design znamená porozumění koncovým uživatelům. Měli byste se naučit, jak provádět uživatelský výzkum a jak vytvářet uživatelské personas. Kromě toho budete potřebovat vědět, jak tyto informace využít při vytváření návrhu, který je optimalizován pro jejich potřeby.

informační architektura

bez jasné organizace se lidé zmatí a odrazí. Informační architektura a mapování obsahu poskytují plán, jak bude web a každá sekce spolupracovat při poskytování jasné cesty zákazníkům.

uživatelské toky

vytváření uživatelských toků může přijít do hry, když se propracujete k rozsáhlejším projektům, ale v budoucnu budete lépe, pokud o nich začnete přemýšlet a budovat je pro své rané návrhy. Uživatelské toky komunikují, jak se lidé budou pohybovat designem. Pomohou vám upřednostnit nejdůležitější sekce a zajistit, aby k nim lidé měli přístup.

Wireframes

Wireframes ukazují, kde na webové stránce nadpisy, text, vizuály, formuláře a další prvky budou umístěny. I když vytváříte jednoduchý jednostránkový webový design, mapování drátového modelu vám poskytne solidní průvodce, ze kterého můžete pracovat. Jak přejdete na složitější webové stránky, drátové modely jsou nezbytné při vytváření konzistentního zážitku, strukturování rozvržení, a nechybí nic, co je třeba zahrnout.

prototypování

prototypy mohou mít různé úrovně věrnosti, ale fungují jako reprezentace fungujícího návrhu. Obrázky, interakce, obsah, a další důležité prvky jsou na místě a replikují design v reálném světě. Prototypy se používají k získání zpětné vazby a doladění návrhu v průběhu celého procesu.

seznamte se s uživatelským rozhraním

uživatelské rozhraní je mechanismus, který uvádí do činnosti technologii. Klika je uživatelské rozhraní. Ovládání hlasitosti na autorádiu, které váš významný jiný nepřestane pohrávat, je uživatelské rozhraní. A klávesnice, do které zadáte PIN v bankomatu, je uživatelské rozhraní. Stejně jako tlačítka a další mechanismy v reálném světě umožňují někomu komunikovat se stroji, prvky uživatelského rozhraní na webu umožňují někomu uvést akce do pohybu.

podívejme se na dva klíčové principy uživatelského rozhraní: intuitivní design a jednoduchost.

jak vytvořit intuitivní rozhraní

interakce a interakce s webovými stránkami by měly být konzistentní a měly by se řídit opakovatelnými vzory. Lidé přistávající na webu by měli okamžitě porozumět systémům, které jsou zavedeny při navigaci.

Make UI simple

UI existuje pro optimalizaci použitelnosti. To znamená, že ovládací prvky jsou snadno použitelné a jsou zřejmé z jejich funkčnosti. Ať už minimalizujete počet navigačních možností, zrychlíte proces pokladny nebo integrujete další interaktivní prvky, které zvyšují Přístupnost, porozumění UI vám pomůže zefektivnit něčí zkušenosti s interakcí s webem.

samozřejmě, UI je obrovský předmět, který nelze zachytit v několika odstavcích. Doporučujeme vám podívat se na blogový příspěvek „10 essential UI (user interface) design tips“ jako základ pro UI.

související čtení: UX vs UI: klíčové rozdíly každý návrhář by měl vědět

porozumět základům vytváření rozvržení

naše oči se automaticky upínají k určitým návrhovým vzorům, což usnadňuje cestu prostřednictvím webového designu. Intuitivně víme, kde hledat, protože jsme viděli stejné vzorce znovu a znovu, jak jsme konzumovali média po celý život. Znalost návrhových vzorů vám pomůže vytvořit webové stránky, které mají hladký tok obsahu a vizuálů. Dva běžné vzory rozvržení webu, o kterých potřebujete vědět, jsou z-vzory a F-vzory.

Z-pattern

pro rozvržení s ekonomikou slov a obrázků a velkorysým množstvím negativního prostoru umožňuje Z-pattern efektivní způsob plavby přes webové stránky. Když začnete věnovat pozornost tomu, kde vaše oči procházejí designem, poznáte hned, když je na místě Z-vzor.

F-pattern

vzory těžké na text, jako pro online publikaci nebo blog, často sledují odlišný F-vzor. Na levé straně obrazovky se zobrazí seznam článků nebo příspěvků a v hlavní části stránky se zobrazí řádky souvisejících informací. Tento vzor je optimalizován tak, aby lidem poskytoval všechny informace, které potřebují, i když je rychle prohlédnou.

související čtení: rozvržení webové stránky: anatomie webových stránek každý návrhář se musí naučit

další informace o typografii

písma mohou přenášet různé tóny nebo emoce a také ovlivnit čitelnost. Pokud se učíte o webdesignu, je nezbytné vědět, jak používat typografii.

typografie slouží ve webdesignu několika účelům. Za prvé, slouží utilitárnímu účelu, aby byl obsah čitelný. Ale může také sloužit jako dekorace a vkusné použití stylizované typografie může přidat k celkové estetice.

zde jsou tři základní typografické pojmy, které byste měli znát.

Serif

Serif písma mají nepatrné čáry známé jako patky, které zdobí každé písmeno. Tento typografický styl lze vysledovat zpět k tisku.

bez patek

jak název napovídá, bez patkových písem chybí identifikační řádky patkových písem. Tyto typy se nacházejí v digitální sféře webových stránek a aplikací.

displej

zobrazovací písma se často používají pro titulky a mohou být buď velká a působivá, nebo jsou vyrobena z ostrých tenkých čar. Obvykle mají sofistikované letterforms a jsou určeny k upoutat něčí pozornost.

související čtení: Typografický design: styly písma a zdroje pro designéry

Dejte své znalosti do akce a vytvořte něco

můžete sledovat výukové programy, číst blogové příspěvky, zapsat se do on-line kurzů, a absorbovat všechny teorie a informace, které můžete o webdesignu, ale jediný způsob, jak se stát web designer je začít web design.

začněte jednoduchým projektem. Možná někdo, koho znáte, potřebuje pomoc při vytváření portfolia nebo má vedlejší ruch, který postrádá jakoukoli přítomnost na webu. Nabídněte jim něco navrhnout Zdarma.

blog je také dalším skvělým projektem pro začátečníky. To vám poskytne praktické zkušenosti s designem při učení, jak používat věci, jako je CMS, a také poskytnout vitrínu pro vaše psaní.

vytváření webových stránek pro falešnou společnost nebo firmu je další zábavné kreativní cvičení při vývoji Vašich designových kotlet. Navíc jej můžete přidat do svého portfolia.

získejte mentora

Mentoři jsou cenní, protože byli tam — kde jste – na samém začátku – a mají touhu vám pomoci prostřednictvím těžce vydělaných lekcí, které se naučili. Mají hlubokou studnu odborných znalostí a znalostí. Jsou skvělým zdrojem pro získání zpětné vazby o vaší práci a nalezení toho, co děláte správně a co je třeba zlepšit.

při hledání vhodného mentora se ujistěte, že najdete někoho, kdo dělá typ designu, který obdivujete, a specializuje se na to, co se chcete naučit. Mentoři vám mohou dát jasnou cestu z let strávených v oboru, takže se nemusíte potýkat s učením webového designu.

žádný kód neposkytuje snadný vstup do webdesignu

byly doby, ne tak dávno, kdy jste museli mít hluboké znalosti HTML a CSS, abyste ručně psali kód za webdesignem. Dnes, bez kódových nástrojů, jako je Webflow, je možné sestavit web a spustit jej v krátkém čase. To, co trvalo dny nebo týdny, se nyní může stát v hodinách.

samozřejmě, tolik jde do vytváření dobrého webového designu. Naučit se základy vizuálního designu, základy UI a UX, a vědět, jak funkce frontend a back end z vás udělá přehlednějšího návrháře.

ať už právě začínáte nebo jste odborníkem, Webflow nabízí intuitivní vizuální platformu, která vám umožní realizovat vaši kreativitu. Spolu se snadno použitelným způsobem spouštění webových stránek má Webflow celou komunitu, která vám poradí a pomůže vám zvýšit úroveň vašich dovedností. Těšíme se, až vás uvidíme v naší vitríně.