Ukázka použitých UI prvků pro moderní průmyslový web
Tato stránka je systematicky seřazená dokumentace komponent. Každý blok ukazuje konkrétní pattern, doporučené použití a konzistentní vizuální styl.
Obsah stránky prvků
Rychlé odkazy na jednotlivé kapitoly knihovny. Odkazy směřují na reálné sekce níže.
Jak tuto knihovnu používat
- Každá sekce ukazuje praktický typ prvku.
- Texty uvnitř bloků popisují účel komponent.
- Interaktivní části mají připravené demo chování.
- Vizuální styl zůstává jednotný napříč komponentami.
- Sekce lze kopírovat jako stavební bloky do projektu.
- Obsah níže je řazený podle typu použití.
⚙️ Poznámka: Cílem stránky je rychle vybrat vhodný prvek a rovnou vidět jeho ukázku, strukturu i vizuální chování.
Úrovně použití komponent
Tyto tři kategorie pomáhají při návrhu stránky držet konzistenci a správné tempo obsahu.
Základní textové prvky
Typografie, odstavce, odrážky a štítky. Vhodné pro informační obsah, články a sekce se čtením.
Interaktivní a datové prvky
Akce, tabulky, grafy, FAQ nebo kotvy. Vhodné tam, kde má uživatel klikat, porovnávat nebo se rozhodovat.
Ceník spolupráce
Ukázkové balíčky práce v našem stylu. Níže je orientační rozsah činností, měsíční cena a doporučený rozsah práce.
Správa kampaní
Obsahuje:
- Nastavení a strukturu kampaní.
- Pravidelnou optimalizaci výkonu.
- Měsíční reporting a doporučení.
Audit účtu
Obsahuje:
- Kontrolu struktury a měření.
- Odhalení slabých míst účtu.
- Akční plán prioritních kroků.
Konzultace
Obsahuje:
- Strategické vedení a směr.
- Prioritizaci kroků pro růst.
- Q&A a expertní doporučení.
Knihovna prvků
Další UI komponenty vycházející z industriálního stylu pro použití na webu.
Typografie a textové prvky
H1: Hlavní titul sekce s nejvyšší prioritou
H2: Klíčový sekční nadpis s výrazným akcentem
H3: Podsekce pro členění obsahu
H4: Nadpis menšího obsahového bloku
H5: Doplňkový nadpis v rámci komponenty
H6: Mikro nadpis nebo štítek
Typografie je základ orientace. Používejte jasnou hierarchii nadpisů, konzistentní délku odstavců a dostatek kontrastu vůči pozadí.
- Výchozí zarovnání: vlevo pro většinu textových bloků.
- Centrované varianty: pouze u bloků, které to vyžadují funkčně (např. hero, statistiky, ikony).
Defaultní práce s mezerami
- Mezi hlavními sekcemi: větší vertikální spacing pro jasné oddělení tematických bloků.
- Pod sekčním nadpisem H2: střední mezera před prvním obsahem sekce.
- Po velkých vizuálních blocích: extra mezera před dalším nadpisem pro lepší čitelnost.
- Uvnitř ukázek typografie: kompaktní režim, aby byly velikosti nadpisů dobře porovnatelné.
Textové boxy
Jemný obsahový box
Neutrální varianta pro delší vysvětlující text, který má být čitelný a vizuálně klidný.
Vhodné pro: úvody sekcí, kontext, delší odstavce.Zvýrazněný box
Varianta pro důležitou informaci, kterou má uživatel rychle zaznamenat při skenování stránky.
Vhodné pro: klíčový benefit, upozornění, rozhodovací bod.Signální box
Kontrastnější varianta pro krátké sdělení, které má být vidět hned při prvním skenu stránky.
Vhodné pro: klíčové upozornění, rychlé doporučení, důležitý kontext.Čistý strukturovaný box
Minimalistická varianta bez silné výplně. Drží text kompaktně bez rušivých efektů.
Vhodné pro: checklisty, stručné instrukce, shrnutí.Mikroprvky (fajfky, odrážky, štítky, mini patterny)
Varianty odrážek
Tečky
- Rychlé zvýraznění důležitých bodů.
- Jemný glow ladí s tématem stránky.
- Dobře čitelné i na mobilu.
Pomlčky
- Vhodné pro stručné argumenty.
- Neutrálnější vzhled než klasická tečka.
- Působí čistě a technicky.
Checkboxy
- Checklist kroků nebo benefitů.
- Jednoznačné vizuální potvrzení bodu.
- Dobře funguje pro onboarding sekce.
Štítky
Zvýraznění textu
⚙️ Tip: Jedna myšlenka na odstavec drží text přehledný i při delším obsahu.
Postup krok za krokem
- Vyberte typ komponenty podle cíle sekce.
- Zkopírujte odpovídající HTML pattern.
- Nahraďte ukázkový obsah reálným obsahem projektu.
Ukázkový blok pro kód
.micro-list-check li::after {
content: "✓";
color: #f4d79f;
text-shadow: 0 0 8px rgba(230, 168, 69, 0.55);
}
.micro-inline-chip {
border-radius: 999px;
padding: 6px 12px;
}Doporučená emoji paleta (industriální/cyber)
Pracovitost a výkon
Nástroje a řemeslo
Směr a strategie
Expertiza a autorita
Statistiky
Postup spolupráce
Definice cíle sekce
Nejprve určete, zda má blok edukovat, přesvědčit, navigovat nebo uzavírat akci. Od toho se odvíjí volba komponenty.
Výběr správného patternu
Zvolte vhodný prvek z knihovny (např. testimonial, tabulka, galerie), doplňte obsah a zachovejte jednotné názvosloví.
Ladění a validace
Po nasazení ověřte čitelnost, interakce a rozestupy mezi sekcemi. Teprve poté uzavřete finální verzi stránky.
Reference klientů
Loga firem podle segmentu
Časté dotazy
Tlačítka
Tým
Odpovídá za konzistenci design systému, pravidla komponent a konečné UX směrování.
Ikony
Obrázek + text
Komponenta pro vysvětlení kontextu
Kombinace obrázku a textu je vhodná pro sekce, kde potřebujete propojit vizuální ukázku s vysvětlujícím obsahem.
Nejčastější použití: případové studie, detail funkcionality nebo popis workflow kroků.
Zrcadlová varianta pro rytmus stránky
Otočené rozložení pomáhá rozbít monotónnost dlouhých stránek a držet pozornost při scrollování.
Ideální je střídat tuto variantu s předchozí verzí při každé další podsekci.
Samostatný obrázek
Samostatný obrazový blok pro zvýraznění vizuálu mezi sekcemi.
Sloupce (2 / 3 / 4)
A) Boxové: dva sloupce
Obsahový sloupec
Vhodné pro kombinaci dvou stejně důležitých bloků, například benefity vs. postup.
Druhý obsahový sloupec
Nejpřehlednější varianta pro běžné landing sekce, která drží jasný rytmus čtení.
B) Boxové: tři sloupce
Služba
Stručná karta s jedním jasným sdělením.
Proces
Krátké vysvětlení kroku nebo fáze spolupráce.
Výstup
Zvýraznění výsledku nebo konkrétního přínosu.
C) Boxové: čtyři sloupce
Audit
Vstupní kontrola dat a struktury.
Strategie
Nastavení směru podle cíle stránky.
Realizace
Implementace vybraných komponent.
Optimalizace
Průběžné ladění pro vyšší výkon obsahu.
D) Neboxové: tři sloupce s oddělovačem
Proces
Jasně popsané kroky, které na sebe logicky navazují bez rušivých boxů.
Data
Stručné metriky a kontext výkonu, oddělené jen tenkou vertikální linkou.
Směr
Doporučení dalšího kroku v sekci s důrazem na čitelnost a rychlé skenování.
E) Neboxové: čtyři sloupce
Audit
Kontrola základů před nasazením.
Strategie
Nastavení priorit podle cíle stránky.
Realizace
Převod návrhu do funkčního obsahu.
Růst
Ladění podle dat v opakovaných cyklech.
Video
Představení služby ve videu
Tento blok je ideální pro vložení krátkého vysvětlujícího videa, kde rychle ukážete hodnotu služby a hlavní benefity.
Případová studie ve videu
Vhodné pro referenci klienta, ukázku výsledků nebo walkthrough postupu. Vizuálně drží styl stránky a funguje i na mobilu.
Oddělovače
Jemná zlatá linka se září
Industriální linka s „nýty“ po stranách
Tech styl – přerušovaná linka
Linka s centrálním glowing bodem
Dvojitý fade přechod pro jemné oddělení sekcí
Centrální kovová „plate“ varianta
Obsah s kotvami
Tabulky
| Typ sekce | Priorita | Složitost | Čas implementace | Dopad na UX |
|---|---|---|---|---|
| Hero | Vysoká | Střední | 1 den | 5/5 |
| Datové bloky | Střední | Vyšší | 2-3 dny | 4/5 |
| Sociální důkaz | Vysoká | Střední | 1-2 dny | 5/5 |
| Doplňkové layouty | Střední | Nízká | 0.5-1 den | 3/5 |
Grafy
Line Chart – Vývoj konverzí
Sloupcový graf – Segmenty
Donut Chart – Podíl kanálů
Area Chart – Trend engagementu
Galerie
A) Rovnoměrná galerie
B) Dynamická mozaika
C) Feature + náhledy
D) Horizontální pás galerie
Citát
„Marketing se pohybuje v cyklech: mění se kanály, formáty i nástroje, ale jádro zůstává stejné – porozumět člověku, nabídnout hodnotu a opakovaně doručit správné sdělení ve správný čas.“
Hero varianty
Ukázka použitých UI prvků pro moderní průmyslový web
Tato hero varianta kombinuje klíčové sdělení, primární akci a podpůrný vizuál. Hodí se pro úvod dokumentace i produktové landing pages.
Textová hero varianta s checklistem benefitů
Tato varianta je vhodná pro stránky, kde je priorita rychlé sdělení a jasné body hodnoty bez potřeby doprovodného vizuálu.
- Funguje i bez ilustračních obrázků.
- Checklist pomáhá se skenovatelností obsahu.
- Silný CTA řádek drží konverzní směr.