Principy webdesignu – 5 principů pro lepší webdesign

18/03/2022

TOP 5 PRINCIPŮ PRO LEPŠÍ WEBDESIGN - Tvorba webu pro začátečníky

 

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

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/

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

Potřebujete pomoct s webem?

Pojďme společně probrat i váš projekt. Třeba u šálku dobré kávy!

ondrej dusek webdesigner praha