Základy webového designu a tvorby webů
Nauč se vytvářet moderní, funkční weby. Kompletní průvodce pro začátečníky i pokročilé tvůrce.
Co je webový design?
Webový design není jen o tom, aby web vypadal hezky. Jde o to, aby fungoval správně.
Webový design kombinuje estetiku s funkčností. Vytváříme weby, které jsou přitažlivé, snadno se používají a dosahují svých cílů. Ať už jde o e-shop, blog nebo firemní stránku — design musí být propracovaný.
Dnes není stačí jen koukat na to, jak web vypadá na počítači. Musíš myslet na mobily, tablety a různé velikosti obrazovek. To se jmenuje responzivní design — a je to důležité.
V našich průvodcích se naučíš:
- Základní principy designu (barvy, typografie, rozvržení)
- Jak vytvořit web, který funguje na všech zařízeních
- Praktické tipy a triky od zkušených designérů
- Nástroje a software, které budeš potřebovat
Základy webového designu a tvorby webů
Začni tady. Každý článek ti vysvětlí jednu důležitou část webového designu.
Jak začít s webovým designem – kompletní průvodce
Zjisti, jaké základní principy potřebuješ znát, než začneš s tvorbou svého prvního webu. Zahrnuje barvy, typografii a rozvržení stránky.
Čti článek
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ěláš tvůj web atraktivnějším a čitelnějším.
Čti článek
Responzivní design – web pro všechna zařízení
Zjisti, proč je responzivní design důležitý a jak vytvořit web, který bude vypadat dobře na mobilu i počítači. Skutečné příklady a tipy.
Čti článekZákladní principy designu
Když pochopíš tyhle věci, všechno se ti bude lépe dělat.
Barvy a kontrast
Správná kombinace barev dělá web přitažlivý a čitelný. Kontrast mezi textem a pozadím musí být dostatečný, aby si všichni mohli přečíst, co tam je.
Typografie
Fonty nejsou jen pro hezké písmo. Správná typografie dělá web čitelnější a profesionálnější. Nepoužívej příliš mnoho různých fontů.
Rozvržení a spacing
Prostor kolem prvků je stejně důležitý jako samy prvky. Dobré rozvržení dělá web pěkný a lehký na čtení.
Responzivita
Tvůj web se musí zobrazit správně na mobilu, tabletu i počítači. To není volitelné — je to nutnost. Uživatelé často brouzdají z mobilu.
Uživatelská zkušenost
Když se někdo na tvůj web podívá, měl by pochopit, co se tam dělá. Navigace by měla být jasná, a vyhledávání věcí by mělo být jednoduché.
Výkon
Web se musí načítat rychle. Když čeká uživatel déle než 3 sekundy, často odejde. Optimalizace obrázků a kódu je zásadní.
Jak se web vytváří
Webový design není náhodný. Má to logický postup.
Plánování a výzkum
Nejdřív si ujasníme, co chceme web dělat. Kdo ho bude používat? Co chceme, aby uživatelé na webu udělali? Jaké informace tam mají být?
Wireframing a návrh
Vytváříme skici a návrhy. Jak bude web vypadat? Kde budou jednotlivé prvky? Jaké budou barvy a fonty? To vše se řeší v této fázi.
Kódování a vývoj
Designer a vývojář si vezou design a udělají z něj živý web. Píší kód (HTML, CSS, JavaScript), který web opravdu funguje a vypadá správně.
Testování a optimalizace
Web se testuje na různých zařízeních a prohlížečích. Kontrolujeme, zda všechno funguje správně. Optimalizujeme výkon a uživatelskou zkušenost.
Potřebné nástroje
Na tvého webdesignového cestě budeš potřebovat pár dobrých nástrojů.
Grafické editory
Adobe XD, Figma, Sketch — tady vytváříš návrhy. Figma je teď nejpopulárnější a je i zdarma v základní verzi.
Editory kódu
Visual Studio Code, Sublime Text, WebStorm — v nich píšeš HTML, CSS a JavaScript. VS Code je zdarma a je nejlepší volba.
Inspirace a reference
Behance, Dribbble, Pinterest — tady vidíš, co dělají ostatní designéři. Je to super místo na inspiraci a nápady.
Fonty a ikony
Google Fonts (zdarma), Font Awesome (ikony) — tady si vezmeš kvalitní fonty a ikony pro svůj web bez placení.
Obrázky a fotografie
Unsplash, Pexels, Pixabay — kvalitní fotografie zdarma. Pokud potřebuješ něco specifičtějšího, Shutterstock nebo Getty Images jsou placené.
Mockup generátory
Mockup.photos, Placeit — tady vidíš, jak by tvůj design vypadal v reálném světě. Užitečné pro portfolia.
Co si myslí naši čtenáři
Reálné ohlasy od lidí, kteří se učili z našich průvodců.
“Nevěděl jsem, kde začít s webdesignem. Tyhlety články mi moc pomohly pochopit, jak to všechno funguje. Teď už vím, co dělat dál.”
“Jsem grafička a chtěla jsem se naučit víc o webovém designu. Články jsou srozumitelné a praktické. Líbí se mi, že nejsou moc složité.”
“Vytvářím weby pro svoje klienty a tyto průvodce jsem doporučil i jim. Pomáhá to, když lidem vysvětlím, proč věci dělám tak, jak je dělám.”
Připraven začít?
Máš otázky nebo potřebuješ poradit? Neváhej se na nás obrátit. Rádi ti pomůžeme s tvým webdesignovým projektem.
Kontaktuj nás