V dnešním videu si ukážeme, jak v praxi aplikovat základní principy webdesignu. Ty často rozhodují o tom, jestli web bude vypadat profesionálně, nebo jestli bude vypadat chaoticky a amatérsky.
Navigace
Navigace je klíčovou součástí každého webu. Díky webové navigaci si návštěvnící mohou udělat rychlou představu o tom, jaké stránky a obsah web vůbec obsahuje a jakým způsobem jsou uspořádány. Navigace na webu také umožňuje uživatelům přecházet na různé stránky webu. Každá dobrá navigace by měla uživatele informovat o tom, kde se na webu momentálně nachází. Zkrátka slouží k tomu, aby člověk věděl, kde na webu je (Podobně jako GPS 😉 ). Promyšlená navigace je kritickou součástí každého uživatelsky přívětivého webu.
Barvy a kontrast
Kontrast slouží k tomu, aby jednotlivé elementy a text nesplývaly se zbytkem webu.
Příklad užití vizuální hierarchie. Zdroj: https://visme.co/blog/visual-hierarchy/
Vizuální hierarchie
V designu uživatelských zkušeností a designu chování, jako je design webových stránek, se vizuální hierarchie používá k upřednostnění navigačních struktur a obsahu, aby se diváci zaměřili na prvky, které usnadňují používání systému nebo zvyšují šanci, že si všimnou obsahu který obsahuje psychologické šťouchy. Barva je jedním z mnoha faktorů používaných při návrhu vizuální hierarchie a klíčovým faktorem kvůli vysoké charakteristice vnímání barev.
Symetrie a harmonie
Viz video v čase 10:35 .
Texty na webu
Text na webu je důležitý. Lidé na webu však nečtou slovo od slova, ale skenují obsah. Na stránce přečtou cca 20 % obsahu. Čtou navíc jen části, které jim pomůžou se zorientovat a pasáže, které je zajímají. Často takto čtou na přeskáčku.
- Snažte se omezit délky nadpisů na cca 5 slov
- Nepoužívejte u textu stínové efekty
- Dbejte na velikost písma (mobil 14-16px, desktop 16-22px podle velikosti monitoru). Mějte na paměti, že různé fonty = různé míry velikosti
- Šířku řádku držte někde mezi 45-80 znaky vč. mezer
- Výška řádku: Vezměte velikost písma a zkuste vynásobit koeficientem 1,4 až 1,6. Měla by vám vyjít optimální výška řádku.
Zdroje: