Design webu

Výběr hlavní fotky a ikon

Bez kvalitní fotky krásný web prostě neuděláš. Pokud klient nemá dobrou fotky od fotografa, použij nějakou z databáze fotek. Skvělou volbou je freepik.com, kde najdeš spoustu fotek zdarma i bez nutnosti koupit si členství. Ale dávej si pozor na licence. V kurzu poznáš i další možnosti fotobank. V praxi uvidíš kontrast dobře a špatně zvolené fotky, možnosti úprav fotek i různé druhy ořezů. Zkrátka vše, co je potřeba pro špičkovou úvodní fotku.

No, a taky zjistíš, že mockup není druh kávy. Do obrázku počítače či tabletu si vložíš svoji fotku. Až si budeš vytvářet své portfolio, tohle ti tvůj web rozhodně pozvedne na vyšší level.

Volba nadpisového a textového písma

Dozvíš se, jak vybrat správný font. Na web dávej dva, maximálně tři fonty. Nezapomínej, že čeština potřebuje vždy font z kategorie Latin Extended. Na Google fontech se rovnou můžeš podívat, jak bude vypadat na konkrétním textu. Poznáš i nástroje na vložení fontu.

Zjistíš, kde je lepší využít písmo patkové, bezpatkové či display. Ať už zvolíš jakékoli písmo, nikdy ho nestínuj. Rozestup mezi písmeny používej jen v nadpisu. Proč? Nejen to se dozvíš na kurzu. Tyto tipy ti ušetří spoustu času a nervů.

Základní a doplňkové barvy

Volba písma a barvy jde ruku v ruce. Musí korespondovat s celkovou myšlenkou webu i úvodní fotkou. Pokud nemáš cit pro kombinaci barev, můžeš použít některý z nástrojů pro práci s barvami. Magdin oblíbený nástroj je online barevná paleta coolors.co. Nemusíš být designový expert, a přesto vytvoříš funkční a barevně sladěný web. A zjistíš, že nejlepší barva pro tvorbu webu je bílá. Překvapení, že?

Základní pravidla webdesignu

Mřížka
Rozdělte obrazovku pomocí mřížky, držte se jejich sloupců a mezer mezi sloupci. DIVI v tomto velmi pomáhá.

Zarovnání
Prvky v jedné sekci zarovnávejte stejně (doleva, na střed). Nemixujte to.

Vizuální hierarchie
Když jsou všechny prvky stejně velké, návštěvník webu neví, kam zaměřit svou pozornost. Zvýrazněte důležitý prvek větší velikostí.

Blízkost
Prvky, které spolu souvisí, dejte k sobě blíž. Jejich blízkost toto spojení vyjádří.

Kontrast
Kontrast věci zdůrazňuje, může se jednat o: velikost a řez písma nebo barevný kontrast.

Nejčastější typografické prohřešky

Řádkování textu
Dávejte dostatečně velké rozestupy řádků. U nadpisů 1.2–1.4, u textových bloků 1.7.

Zarovnání do bloku
Na webu nezarovnávejte do bloku, na menších obrazovkách se objeví v textu obrovské mezery.

Výrazný stín
Kolem modulů používejte jen jemný stín (zdroj CSS kódů pro stín).

Sloupec přes celou šířku obrazovky
Široké sloupce textu se špatně čtou. Mnohem lépe působí užší sloupce.

Příliš malá velikost písma
Nepoužívejte na webu malá písmena. Lidi je musí být schopni přečíst bez námahy.

Slabý kontrast písma a pozadí
Mezi pozadím a textem musí být dostatečný kontrast, jinak se text špatně čte.

Nedostatek místa kolem prvku
Kolem textových bloků nešetřete místem. Web má být vzdušný. Ideální barva na volný prostor je bílá nebo jiná světlá.