Ondřej Dušek Zjistit, zda se hodíme

Principy webdesignu: 5 principů pro lepší webdesign

Webdesign Aktualizováno: 2 min čtení
Ondřej Dušek
Ondřej Dušek Webdesigner & UX konzultant · 8+ let praxe
Video: Principy webdesignu: 5 principů pro lepší webdesign ▶ Video návod · YouTube
Obsah článku
  1. Navigace
  2. Barvy a kontrast
  3. Vizuální hierarchie
  4. Symetrie a harmonie
  5. Texty na webu

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.

Webová navigace
Zdroj: orbitmedia.com

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.

Význam barev - Psychologie barev
Zdroj: https://www.blipbillboards.com/courses/small-business-marketing-course/lessons/branding-basics/topic/choosing-brand-colors/

Barvy a kontrast

Kontrast slouží k tomu, aby jednotlivé elementy a text nesplývaly se zbytkem webu.

12 Visual Hierarchy Principles Non-Designers Needs to Know

Příklad užití vizuální hierarchie. Zdroj: https://visme.co/blog/visual-hierarchy/

Nezávazně a na rovinu

Vydělávej webdesignem & AI, i když začínáš od nuly

Baví tě to? Zjisti během dvou minut, jestli se hodíš.

Zjistit, jestli se hodíš

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 asimetrie v designu
Zdroj: https://www.interaction-design.org/literature/article/symmetry-vs-asymmetry-recalling-basic-design-principles

Symetrie a harmonie


Viz video v čase 10:35 .

Typografie na webu
Zdroj: https://rei.github.io/rei-cedar-docs/components/text/

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:

cs2.wiki