Barvy a typografie v moderním webovém designu
Nauč se, jak správně vybrat barvy a fonty pro svůj web. Praktické tipy, které udělají tvůj design profesionálnějším a více přitažlivým.
Číst článekJak začít s webovým designem – kompletní průvodce
Chceš vytvořit svůj první web, ale nevíš, kde začít? Tento průvodce ti ukáže všechno, co potřebuješ vědět o barvách, typografii a rozvržení stránky. Bez zbytečné technické terminologie.
Proč je design webu důležitý?
Web design není jen o tom, aby stránka vypadala hezky. Je to kombinace toho, jak vypadá a jak funguje. Když návštěvník přijde na tvůj web, prvních pět sekund rozhoduje, zda zůstane nebo odejde. To je realita.
Dobrý design řeší reálné problémy. Lidé snadno najdou, co hledají. Text je čitelný. Barvy nejsou chaotické. A co je nejdůležitější — web funguje stejně dobře na mobilu jako na počítači. To není luxus, je to nutnost. Dneska přes 70 procent návštěvníků přichází právě z mobilů.
Barvy — první rozhodnutí, které uděláš
Barvy nejsou jen estetika. Každá barva komunikuje něco. Modrá znamená důvěru a profesionalitu. Proto ji používají banky. Červená vyvolává urgenci a energii — ideální pro výprodeje. Zelená je asociovaná s přírodou a zdravím.
Když si vybíráš barvy pro svůj web, mušíš myslet na kontrast. Světlý text na tmavém pozadí je čitelný. Tmavý text na bílém pozadí také. Ale bílý text na světle žluté? To není možné. Kontrast musí být silný — alespoň poměr 4,5:1 podle standardů přístupnosti.
Dobrý web obvykle používá tři hlavní barvy: jednu dominantní, jednu doplňkovou a jednu akcentní pro tlačítka. Zbytek jsou odstíny šedé. To není nudné — je to elegantní.
Typografie — jak psaní změní všechno
Font není jen декоративní prvek. Je to hlasitost tvého webu. Některé fonty vypadají moderně, jiné konzervativně. Některé jsou čitelné, jiné obtížné na čtení — zvlášť na malých obrazovkách.
Profesionální web používá dva fonty maximálně. Jeden pro nadpisy (často s vyšší osobitostí), jeden pro běžný text (bez zdobení, vysoce čitelný). Sans-serif fonty jako Roboto nebo Open Sans fungují dobře na webu. Jsou čisté a jasné. Pro nadpisy si můžeš dovolit být kreativnější, ale nesmí to být na úkor čitelnosti.
Velikost textu také záleží. Běžný text by měl být alespoň 16 pixelů na počítači. Nadpisy? Ty mohou být větší — třeba 32 až 48 pixelů. A řádkový odstup? Ten by měl být kolem 1,5 násobku velikosti textu. Dává to textu prostor k dýchání.
Rozvržení — architektura tvého webu
Rozvržení určuje, jak návštěvník vnímá informace. Když otevře tvůj web, jeho oko se automaticky pohybuje zleva doprava, shora dolů. To není náhoda — je to způsob, jak čteme. Nejdůležitější informace proto patří nahoru a doleva.
Jednoduchý, účinný layout má obvykle tuto strukturu: záhlaví s logem a navigací nahoře, pak velký obrázek nebo banner, pak obsah rozdělený do sekcí, a nakonec zápatí s kontaktem. Neklád všechno na jednu stranu. Použij bílý prostor — to není vesmír, je to vzduch, který dává designu dýchat.
Na mobilních zařízeních se layout mění. To se jmenuje responzivní design. Sloupce se stanou jedním sloupcem. Nabídka se schová do hamburger menu. Obrázky se zmenší. Tvůj web musí být stejně funkční na telefonu jako na monitoru. To není volba — je to standardní praxe od roku 2020.
Jak začít prakticky
01
Sbírej inspiraci
Prozkoumej weby, které se ti líbí. Co ti na nich přijde hezké? Jaké mají barvy? Jak je organizován obsah? Vytvoř si Pinterest nebo záložky. Inspirace je tvůj nejlepší učitel.
02
Nakreslí si skicu
Vezmi papír a tužku. Nakresli, jak by měl tvůj web vypadat. Kde bude logo? Kde obsah? Nemusí to být dokonalé — je to jen náčrt. Ale pomůže ti to myslet jasně.
03
Vyberi si barvy
Použij nástroj jako Coolors.co nebo Adobe Color. Vytvoř si paletu tří barev. Zapiš si jejich kódy. Tyhle barvy budeš používat konzistentně po celém webu.
04
Vyber fonty
Google Fonts je zdarma a má tisíce možností. Vyberi si jeden font pro nadpisy a jeden pro text. Zkus je spolu — musí si vzájemně dělat dobrou společnost.
Nástroje, které budeš potřebovat
Figma
Zdarma a v prohlížeči. Ideální pro začátečníky. Můžeš navrhovat web bez instalace čehokoli.
Coolors.co
Generátor barevných palet. Stiskni mezerník a získej novou inspiraci. Jednoduché a efektivní.
Google Fonts
Bezplatné fonty pro web. Kvalitní, čitelné a připravené pro použití. Bez zbytečné složitosti.
Unsplash
Profesionální fotografie zdarma. Všechny obrázky můžeš používat na svém webu bez obav.
VS Code
Editor pro psaní kódu. Zdarma, jednoduchý a používaný profesionály po celém světě.
Lighthouse
Testovací nástroj přímo v Chrome. Řekne ti, kde můžeš web zlepšit v rychlosti a přístupnosti.
Shrnutí — co si zapamatovat
Webový design není věda, je to dovednost. A jako každou dovednost ji můžeš ovládat tím, že budeš cvičit. Nezačínej s tím, aby byl tvůj web dokonalý — začni s tím, aby fungoval.
Vyber si tři barvy a drž se jich
Použ dva fonty — není třeba víc
Text musí být čitelný (alespoň 16px)
Web musí fungovat na mobilu
Používej bílý prostor — není to marnivost
Teď už víš, kudy začít. Vezmi si papír, nakreslí si svůj web a začni stavět. Svět potřebuje tvoje nápady.
Důležité upozornění
Tento průvodce obsahuje obecné informace o webovém designu a není právním či profesionálním poradenstvím. Každý projekt je unikátní a jeho specifické požadavky se mohou lišit. Doporučujeme konzultovat s profesionálním webovým designérem pro tvůj konkrétní případ. Informace v tomto článku jsou poskytovány jen pro vzdělávací účely.
Související články
