DESIGN MANUÁL

Jak používat knihovnu šablon a přehled sekcí

Zde je stručný popis, co na stránce najdete. Napravo je vždy obrázek.

Ideální cesta pro vznik stránek je výběr již existující strany s vyhovujícím layoutem a její duplikace a nahrazení obsahu a nastavení viz confluence.

Pravidla vzhledu a struktury stan a článků/referencí:

Příklady konkrétních sekcí:

Hlavní stránka business řešení ukazuje růst a inovace pro úspěch vaší firmy.

Pravidla vzhledu a nastavení

Detailní popis logiky užívání základních prvků pro tvorbu sekcí a stran.

Logika nadpisů


Nadpis nadpis H1

Nadpis H1 je vždy technický a krátký, klíčové slovo pro stránku,
nezvětšený, bold

Každá strana má POUZE ale VŽDY jeden H1 nadpis.

H1 může mít dvě podoby:

  • KAPITÁLKY (velká písmena) – pokud se jedná o stránku, která je viditelná v menu

  • Pouze první písmeno velké – Pokud se jedná o stránku, která je dále ve struktuře, nebo je nadpis příliš dlouhý

Nadpis nadpis H2

Nadpis H2 je velmi podobný vzhledem i fcí H1, používá se v případě, že na straně již H1 je.

(Např: Stránka Business solution (H1) má podstránky Digitální produkty, Digitalizace procesů,... (H2)

Nadpis nadpis H3

Používá se jako optický nejhlavnější nadpis, "claimový". Základní řez velmi tenký a bold vyznačuji klíčová slova.

Ve zvětšené verzi se používá hned v záhlaví každé stránky a jeho náhledu.
(Např: stránka Business solution (H1), Vaše cesta k digitální dokonalosti (H3).)
– Pokud je nadpis příliš dlouhý, mohu použít nezvětšenou variantu
– Snažím se maximálně omezit výskyt jednoznakovek na konci řádku použítím nedělitelné mezery (Win: alt+0160/ Mac: Opt+mezerník)

V nezvětšené verzi se používá pro dílčí podnadpisy na stránce, pokud se nejedná o podstránku, u které dojde na přesměrování do detailu.
(Např: str. DIGITÁLNÍ PRODUKTY (H1) Zaručte svým zákazníkům digitální zážitek (H3 zvětšený) → Digitalizace
produktů a služeb (H3 nezvětšený)

Nadpis nadpis H4

Používá se jako nadpisy do karet a boxů. Ve zvětšené i zmenšené verzi – dle délky.

Hlavní stránka business řešení ukazuje růst a inovace pro úspěch vaší firmy.

Tlačítka

Nejčastěji používaná velikost: M

Styl "Výchozí" – Toto tlačítko slouží k přechodu na další podstránku.

Styl "Primární" – Toto tlačítko slouží jako CTA prvek, který vede na kontakty.

Styl "Inverzní" – Toto tlačítko slouží pro výraznou CTA akci, např. "Přihlásit se na kurz".

Pokud potřebuji použít dvě tlačítka, vkládám je do layoutu s následujícím nastavení:

CTA prvky a formuláře

Na konci každé strany by měla být CTA akce.

  • box přesměrovaný do kontaktů

  • box s konkrétním mailem na příslušnou kompetenci

  • registrační formulář

  • výpis na další/související články/reference

Máte nějaké dotazy? 

Pokud máš nějaké otázky, ozvi se nám prostřednictvím mailu akademie@inventi.cz a do předmětu uveď typ akademie.

Rozložení, mezery a barevnost sekcí

Rozložení:

Každá strana se skládá z připravených záhlaví s obrázkem a obsahových sekcí s dalším obsahem a končí CTA prvkem/formulářem.

Všechen textový obsah vkládám do sekcí, které mají úměrnou šířku bloku (vždy se snažím o blok do 90 znaků na šířku).
Toho mohu docílit několika způsoby v následujícím preferovaném pořadí:

  • vložením obrázku vlevo/vpravo

  • ručním zúžením bloku zprava/zleva

  • vložením mezery do horizontálního rozložení

Používám již přednastavené sekce z knihovny, pokud si nejsem jistý, nebo potřebuji layout rozšířit/upravit, kontaktuji marketing@inventi.cz

Používám sekce pro logické dělení obsahu napříč stránkou. Snažím se, aby každý logický celek byl ve vlastní sekci.

Používání fce mezer:

  • fci mezera vkládáme především na konec a začátek sekcí, pokud je potřeba vzhled stránky více "provzdušnit" a nastavení použité sekce z knihovny není dostatečné.

  • vždy kontroluji zobrazování i na telefonu a velikost pro mobil přizpůsobuji.

  • při použití mezery mezi obsahovými bloky v horizontálním směru je potřeba nastavit případné skrytí pro mobilní navigaci – toto platí především při užití mezery ve fci "layout"

Barevnost sekcí:

Všechny obsahové strany začínají barvou pozadí #efeff4. Následně střídám barevnost pro logické celky s bílým pozadím #ffffff.

Blog/reference jsou výhradně s bílým pozadím #ffffff.

Používám barevnost z nastavení tak, aby se případně mohlo dosáhnout globálních úprav.


Přehled sekcí z knihovny

ZÁHLAVÍ

ZÁHLAVÍ S ROZCESTNÍKEM

BUSINESS ŘEŠENÍ

Vaše cesta k digitální dokonalosti

Každé odvětví má vlastní odlišnosti, které vyžadují specifický přístup.
Umět je dávat do souvislostí je klíčem k úspěchu v digitálním prostředí.

Hlavní stránka business řešení ukazuje růst a inovace pro úspěch vaší firmy.

ZÁHLAVÍ BEZ ROZCESTNÍKU

DIGITÁLNÍ PRODUKTY

Zaručte svým zákazníkům digitální zážitek

Budujte jejich loajalitu, odlište se od konkurence a položte základy pro úspěšnou budoucnost. Spojte se s námi a společně přeneseme vaše podnikání do digitálního světa, kde se otevírají nové možnosti a inovace.

Digitální produkty propojují technologie s potřebami firem a přinášejí nové možnosti růstu.

ZÁHLAVÍ PRO REFERENCI

Team leasing project pro GK Software

Miliardy transakcí se 100% dostupností pro projekt německé fiskalizace

30mld.

zpracovaných transakcí

100%

Up-time

200tis.+

připojených zdrojů


ZÁHLAVÍ PRO ČLÁNEK

REKAPITULACE: BLOG

Jaký pro nás byl rok 2024?

Rok 2024 byl pro INVENTI rokem transformace a inovací, kdy jsme se úspěšně adaptovali na globální technologické změny a podpořili klíčové projekty, které formují naši budoucnost. Připojte se k našemu pohledu na uplynulý rok očima manažerů, kteří sdílejí své zkušenosti, úspěchy a plány pro rok 2025. Zjistěte, jak nám partnerství s Atlassian Gold a podpora nových startupů otevírají cestu k dalšímu růstu.


Posuň se na vyšší úroveň s Java technologiemi, které firmy opravdu používají

Chceš se stát pokročilým Java vývojářem a ovládnout technologie jako Spring, REST API, Docker nebo Git? Přidej se do naší Java akademie 2025 a nauč se vše od seniorních vývojářů z praxe. Čeká tě vlastní projekt, reálné scénáře i práce s nejnovějšími nástroji. Získej certifikaci a nakopni svou kariéru správným směrem. Místa jsou omezená – přihlas se ještě dnes!

TERMÍN

9. září–17.října 2025

MÍSTO

INVENTI
Táborská 31, Praha

CENA KURZU

8.000 Kč
Early bird: 6.000 Kč *

* Využij akční cenu. Registruj se do 31. července a získej slevu 25 %.


POD ZÁHLAVÍM


V těchto odvětvích jsme jako doma

V těchto oblastech jsme získali nejvíce zkušeností
a úspěšně v nich vytváříme přidanou hodnotu pro naše zákazníky.

UX/UI design naplňuje očekávání uživatelů v digitálních produktech a business řešeních.

Návrh UX/UI naplňující 
očekávání uživatelů.

Nejnovější technologie v digitálních produktech rozšiřují možnosti business řešení pro firmy.

Nejnovější technologie pro vaše business potřeby.

Ikona rychlejšího procesu vývoje a nasazení softwarových řešení na míru

Implementace do existujícího IT ekosystému firmy.

Vývoj komplexních mobilních a webových aplikací posiluje digitální produkty a business řešení.

Vývoj komplexních mobilních i webových aplikací.

OBSAHOVÉ BLOKY DO STRÁNEK

Digitální rozhraní se symbolem ozubeného kola a propojenými uzly vystihuje digitalizaci produktů.

Digitalizace
produktů a služeb

Svět se mění rychlostí světla – nenechte svůj business zaostávat.

Modernizujte a vylepšujte své produkty a služby, využijte sílu nejnovějších technologií. S naším týmem expertů to půjde snadno a rychle. Přidejte se k lídrům trhu a společně prozkoumejme neomezené možnosti digitální transformace.

Ikona hvězdy doprovází text o transformaci zavedených produktů a služeb, business řešení a digitální produkty.

Transformace zavedených produktů a služeb.

Nové možnosti s webovými a mobilními aplikacemi přinášejí inovace v business řešeních a digitálních produktech.

Nové možnosti s webovými a mobilními aplikacemi.

Technologie pro rozšíření stávající nabídky pomáhají firmám růst v rámci business řešení a digitálních produktů.

Technologie pro rozšíření stávající nabídky.

Vyšší efektivita, konkurenční výhoda a atraktivita jsou cílem našich business řešení a digitálních produktů.

Vyšší efektivita, konkurenční výhoda a atraktivita.

Sekce Digitální produkty - digitalizace je klíčem k inovaci, efektivitě a trvalému růstu vašeho podnikání.

Digitální produkty

To není trend,
ale nutnost

Bez digitalizovaných produktů a služeb se dnes neobejde nikdo, kdo chce u zákazníků uspět. Digitalizace je klíčem k inovaci, efektivitě a trvalému růstu vašeho podnikání.

  • Návrh UX/UI naplňující očekávání uživatelů.

  • Vývoj komplexních mobilních i webových aplikací.

  • Nejnovější technologie pro vaše business potřeby.

  • Implementace do stávajícího IT ekosystému firmy.

Logo Patron Go s propojenými tvary, moderní a jednoduchý styl.
Strafos business řešení podporuje moderní podnikání s důrazem na spolehlivost a inovace.
Erwin Hymer Group nabízí spolehlivá business řešení pro růst a stabilitu vaší firmy.

Digitalizace procesů

Klíč k vyšší efektivitě
nižším nákladům

Vaše firma si zaslouží efektivní procesy. Využijte technologie, které posouvají optimalizaci na novou úroveň, zvyšují produktivitu a snižují náklady.

  • Od analýzy potřeb po kompletní realizaci.

  • Využití pokročilých IoT komponent.

  • Implementace na jakoukoliv infrastrukturu.

  • Řešení na míru pro všechna IT zařízení.

Logo Elkamet v elegantním stylu, digitalizace procesů.
Logo GK s moderním designem pro digitalizaci firemních procesů.
Logo ZF v modrém kruhu symbolizuje digitalizaci firemních procesů.
Sekce Digitalizace procesů podporuje business řešení a digitalizaci procesů ve firmách.

Tvorba nových
digitálních produktů

Překročte hranice a přineste své nápady k životu.

Objevte neomezené možnosti nejnovějších technologií. Rozvíjejte své nápady a vstupte na nové trhy. Ať už jste startup nebo korporace, pomůžeme vám inovovat a růst.

Flexibilní tvorba nových produktů a služeb je klíčem k úspěchu v oblasti business řešení a digitálních produktů.

Flexibilní tvorba
nových produktů a služeb.

Zajištění iniciativ pro firemní inovace podporuje vývoj business řešení a digitálních produktů.

Zajištění iniciativ
pro firemní inovace.

Lean metoda budování MVP pro validaci umožňuje rychlý vývoj v business řešeních a digitálních produktech.

Lean metoda
budování MVP pro validaci.

Technologická analýza pro proof of concept je důležitou součástí úspěšných business řešení a digitálních produktů.

Technologická analýza
pro proof of concept.

Tvorba nových digitálních produktů nabízí business řešení zaměřená na digitální produkty.