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í:
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.
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í.
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.
ZÁHLAVÍ PRO REFERENCI
Team leasing project pro GK Software
Miliardy transakcí se 100% dostupností pro projekt německé fiskalizace
zpracovaných transakcí
Up-time
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.
Návrh UX/UI naplňující
očekávání uživatelů.
Nejnovější technologie pro vaše business potřeby.
Implementace do existujícího IT ekosystému firmy.
Vývoj komplexních mobilních i webových aplikací.
OBSAHOVÉ BLOKY DO STRÁNEK
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.
Transformace zavedených produktů a služeb.
Nové možnosti s webovými a mobilními aplikacemi.
Technologie pro rozšíření stávající nabídky.
Vyšší efektivita, konkurenční výhoda a atraktivita.
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.
Digitalizace procesů
Klíč k vyšší efektivitě
a 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í.
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.
Zajištění iniciativ
pro firemní inovace.
Lean metoda
budování MVP pro validaci.
Technologická analýza
pro proof of concept.
