Grafický manuál – verze 7/2024

3. 12. 202412 min

Grafický manuál slouží jako průvodce aktuálního vizuálu společnosti. Najdete zde logo, barvy a základní instrukce pro vizuální tvorbu. Tato stránka je interaktivní a klíčové části obsahují odkazy na open data.

Logo

Varianta barevná

Primární varianty loga jsou barevné s fialovým GT v rohu. Varianty jsou dvě, a to pro užití na světlém, nebo naopak tmavém pozadí. Tyto varianty lze použít pouze tehdy, pokud je pozadí dostatečně kontrastní k fialové barvě GT.

Varianta černobílá

Sekundární varianty loga jsou černobílé a lze je použít na libovolném dostatečně kontrastním pozadí.

Barvy

Základní barvy

Jsou nejdůležitější barvy, které reprezentují společnost. Tyto barvy by se měly používat vždy, pokud v tom nebrání nedostatečný kontrast, pokud není potřeba významově a tím pádem i barevně odlišit produkty, nebo pokud nejde o výčet témat z různých segmentů. V takových případech je vhodné použít spíše barvy sekundární a segmentové.

---

Sekundární barvy

Slouží k vytvoření kontrastu v kombinaci se základními barvami, které by měly být ve vizuálech dominantní. Zvýrazňují klíčové informace ve vizuálu a umožňují tvořit „dravé“ příspěvky zejména v přesyceném konkurenčním prostředí placených reklam. Sekundární barvy lze použít i jako hlavní barvu vizuálu, pokud to okolnosti vyžadují = pokud je potřeba odlišit od sebe jednotlivé případy, ale nelze jednoznačně přiřadit segment (například propagace po sobě jdoucích konferencí). Pokud je sekundární barva hlavní barvou vizuálu, je nutné s větší opatrností dbát na zachování klíčových znaků a textur společnosti – POZOR! Umístění loga nestačí.

---

Segmentové barvy

Slouží k rozlišení segmentů jednotlivých příspěvků/vizuálů. Typicky se tato sada používá u tiskovin, na sociálních sítích (uvnitř karuselů, nebo pro významové odlišení po sobě jdoucích příspěvků), nebo v placených reklamách. Jde spíše o doplňkovou sadu barev.

---

Speciální doplňkové barvy

Tato sada barev má velmi úzké a specifické užití, a to pouze v konkrétních případech. Pokud je to možné, je potřeba tyto barvy vždy nahrazovat základní, nebo sekundární sadou barev.

Modrá MS Office je brandová barva primárně určená pro nadpisy a prvky pro tištěné a online dokumenty MS Word. Je kompromisem mezi základní modrou a fialovou tam, kde modrá není na bílém pozadí dostatečně vidět a fialová není dostatečně rozlišitelná od černých nadpisů. A zároveň povaha dokumentů neumožňuje použít vizuál s gradientem základních barev

Barva speciálního užití je jakákoliv doplňková barva, která je kontrastní k jedné z barev tohoto manuálu. Účelem barvy je nabídnout kontrastní variantu tam, kde je potřeba akcentovat různorodost daného případu odlišit jednotlivé případy od sebe. Typicky jde například o sadu barev tlačítek na homepage webu VOX, kde by se barvy segmentů ztratily a nebyly by dostatečně kontrastní k pozadí, nebo pokud by bylo více po sobě jdoucích příspěvků z jednoho segmentu.

---

Fragment

Fragment je klíčovým identifikačním prvkem pro vizuál brandu VOX. Tvoří jej písmena loga a zpravidla se stává součástí pozadí vizuálů. Jako fragment je možné použt jednotlivé znaky loga i logo celé se znaky „VOX“. Vždy se u fragmentu pracuje s průhledností a není možné znaky fragmentu používat se 100% intenzitou (výplní) bez průhlednosti. Cílem fragmentu není suplovat logo a nepatří k němu „GT“.

Fragment je možné umístit ve standardní vodorovné poloze, s 90 stupňovým pootočením, nebo zrcadlově se záporným 90 stupňovým pootočením. Jiné úhly náklonu nejsou možné.

S průhledností je nutné pracovat dle barev aktuálního vizuálu tak, aby fragment zcela nezanikal a zároveň tak, aby nebyl zcela dominantním prvkem vizuálu. Zpravidla jde o 5 až 80 % výplně.

Pokud je vizuál příliš jednoduchý, nebo pokud je potřeba zlepšit čitelnost písma v popředí, je možné použít lineární gradient pro masku výplně a vytvořit tak efekt „do ztracena“, kdy gradient plynule přechází z jedné strany znaku na druhou. Na jedné straně tím vzniká výplň 90% až 100% a na opačné druhé straně 0%.

Vizualizace – užití fotografií

K vizualizaci jsou použity vždy výhradně fotografie, 3D modely ve fotografické kvalitě, nebo AI vygenerované vizuály ve fotografické kvalitě. Cílem je sjednotit vizuální linku v komunikaci a držet se konceptu používání fotografií na všech místech.

CO NEPOUŽÍVAT – malby, kresby, další styly

Malby, kresby, 3D grafiky a další grafické zpracování jiných stylů nepřipadají v této verzi grafického manuálu v úvahu. Jedním stylem kresby od jednoho autora není možné pokrýt veškerou vizuální komunikaci a docházelo by k používání více grafických stylů různých autorů (viz příklady níže). Proto je lepší držet se fotografií. Jedinou výjimkou jsou ikony, které je potřeba kopírovat z minulosti, nebo zavést jednu graficky sjednocenou sérii ikon. Aktuálně kromě e-shopu není stanovený žádný set ikon.

Písmo

Texty tvoří velkou část marketingové komunikace. Je proto nutné prioritizovat informace, vkládat do vizuálů co nejkratší texty, a pokud významově oddělujeme informace použitím jiného řezu písma (prostý text/tučné písmo/jiné řezy fontu), tak je potřeba používat co nejméně řezů v jednom vizuálu. Pokud je to možné, tak je potřeba k významovému oddělování jednotlivých částí využívat i barvy, rozdělení do odstavců, a hlavně udržovat vizuály co nejjednodušší. Nikdo nechce číst leták s 1000 různými zvýrazněními a různými řezy fontů, který vypadá jako leták ze supermarketu.

Základní písmo – Poppins

Písmo pro nadpisy a důležité informace. Zpravidla se nepoužívá pro psaní souvislého textu a odstavců.

Sekundární písmo – Open Sans

Písmo pro psaní souvislých textů, odstavců a informací nižší priority.

Záložní písmo – Arial

Pro případy, kde nefunguje základní font, ani sekundární font – typicky v dokumentech office, uživatelské zobrazení emailového newsletteru apod.

Grafický manuál v praxi

Podpisový a mailový banner

Banner Facebook – základní barvy

Banner Facebook – barvy segmentové (manažerské kurzy)

Banner Facebook – barvy segmentové (daně a účetnictví)

Banner karuselový placený FB

Banner Ivitera

Úzké formáty bannerů jsou atypické svým příliš malým prostorem pro grafiku. Je vhodné zde držet písmo co největší a vkládat co nejméně prvků – bannery se zobrazují ještě v menším zobrazení než ilustračně zde na webu Educity.

Homepage VOX

Letáky segmentové 99x210mm

Pozadí se zde blíží barvám segmentů, nejde ale o 100% shodu. Díky tomu je ale zachován fotografický vzhled ilustrací na pozadí a objekty vypadají reálně a uvěřitelně.

Plakát 800x680mm

Práce s barvami pro speciální užití

V grafické tvorbě je možné se opřít o pravidla grafického manuálu, ale jsou i výjimky, kde dochází ke kompromisu mezi pravidly a potřebami dané věci. Hlavně v těchto otázkách by měl velmi citlivě rozhodovat a vizuály schvalovat správce grafického manuálu.

Typicky jde například o potřebu rozlišit od sebe jednotlivé části produktu, nebo produktové řady. Například moduly daňového profesionála mají svůj vlastní neukotvený set barev. Zde je prioritou potřeba vizuálně oddělit významově rozdílné prvky tak, aby se zjednodušila pro klienty čitelnost.

Trend střídání barev bez ohledu na manuál je typický zejména pro digitální marketing v případech, které obsahují příliš dlouhé části textu a je potřeba barvami stanovit určité milníky. Ty příliš dlouhý text rozdělí do kratších a stravitelnějších segmentů.

Nestandardní použití barev

Placený karusel pro FB kromě barev segmentů zapojuje i základní barvy a sekundární barvy v rámci jedné série. Cílem je opět významově oddělit dva různé prvky (zde semináře), které ale patří do jednoho segmentu.

Pokud je potřeba publikovat totožnou informaci víckrát, změna barvy může pomoct uživateli pochopit, že nejde o duplicitní příspěvek, zejména pokud mezi příspěvky není dostatečně velký odstup.

Pro placené bannery jsou použity segmentové barvy (obr. zcela vlevo) – uživateli se bannery mohou zobrazit i pár vteřin po sobě a je potřeba rozlišovat zdůraznit významový rozdíl mezi aktuálně zveřejněnými bannery. Pro neplacený příspěvek jsou nejdůležitější základní barvy (obr. uprostřed) – příspěvky jsou publikované s časovým odstupem od sebe, nezobrazují se uživatelům najednou a obsahově i graficky se po sobě jdoucí příspěvky liší, není tedy potřeba odlišovat barevně. Pro případ potřeby dalšího odlišení je varianta zapojení sekundárních barev (obr. vpravo).

Alternativní grafiky pro sociální sítě

Šablona newsletteru

David Herel | 4. 12. 2024