Dizajn manuál

Version 1.0

Updated 2025/02/15

Úvod

Toto je manuál vizuálnej identity pre značku Vážky, ktorého cieľom je zaručiť, že vizuálna komunikácia je jednotná naprieč všetkými online aj offline kanálmi. Slúži ako príručka pre zamestnancov aj externých dodávateľov a je dôležité, aby ho dôsledne dodržiavali všetci, ktorí sa podieľajú na príprave vizuálnych materiálov Vážok. Manuál nie je vyčerpávajúcou odpoveďou na všetky otázky a situácie. Obsahuje však pravidlá práce so základnými vizuálnymi elementmi značky.

Podobne ako značku, aj samotný manuál je potrebné pravidelne aktualizovať a prispôsobovať novým potrebám, aby tak dlhodobo spĺňal svoju funkciu pomôcky pre tvorbu nových či úpravu existujúcich vizuálnych formátov.

Manuál vypracovalo Büro Milk.

Fixné elementy značky

Fixné elementy značky sú to, čo značku definuje, reprezentuje a robí nielen spoznateľnou, ale aj nezameniteľnou. Pri fixných elementoch značky sa riadime týmito pravidlami:

• Používame ich vždy, keď je to možné.
• Používame ich výhradne v takej podobe, aká je predpísaná nižšie.
• Používame ich vždy spolu. Na každý formát umiestňujeme aspoň tri elementy.
• Používame ich tam, kde je to vhodné spolu s doplnkovými grafickými elementmi.

Fixné elementy značky sú:

Logo
Logo je základným identifikačným prvkom značky. Používame ho všade, kde je to možné, v predpísanej podobe.

Základná farebnosť
Základná farebnosť slúži k rýchlemu rozpoznaniu značky a dopĺňa logo.

Písmo
Písmo je spolu s logom a farebnosťou dôležité pre identifikáciu značky.

Fixná kotva
Fixná poloha textov „Bývajte vo Vážkach“ a „byvanievazky.sk“ pre digitálne formáty zabezpečuje jednotnosť a pomáha divákovi intuitívne vnímať obsah ako súčasť jednej vizuálnej identity.

Modulárny element značky

Modulárne elementy taktiež reprezentujú značku. Vieme ich používať podľa potreby a doplniť tak fixné elementy značky. Ich používaním robíme značku rozpoznateľnou a komunikáciu pútavou. Modulárnymi elementami značky sú:

Organický tvar odkazujúci na tvar krídla vážky. Jeho veľkosť sa prispôsobuje mriežke (gridu) podľa potreby. Na sociálnych sieťach je však jeho poloha pevne definovaná – od horného okraja má odsadenie 68 px.

Linka odkazujúca na pohyb vážky, ktorou aktívne vstupujeme do vizuálu najmä pri čistom textovom obsahu. Slúži na spájanie informácii do harmonického celku a nenápadne vedie 
oko čitateľa.

Updated 2025/02/15

Farebnosť

Vo vizuálnej komunikácii Vážok na zákazníka je vždy dominantná zelená farba, ktorá môže byť obohatená o doplnkové farby a ich odtiene.

Na použitie v tlači sú určené procesné farby CMYK. Špecifikácie RGB a HTML sa používajú v online komunikácii a poskytujú konzistentný vzhľad.

Základná farebnosť

Základná farebnosť slúži k rýchlemu rozpoznaniu značky a dopĺňa logo.

Green
RGB — 00 99 65
CMYK — 90 36 85 29
HEX — 006341
Pantone — 342 C

Pale lime
RGB — 221 223 148
CMYK — 15 0 53 0
HEX — DDE994
Pantone — 587 C

Ivory white
RGB — 243 243 220
CMYK — 4 1 15 29
HEX — F3F3DC
Pantone — 7499 C

Doplnková farebnosť

Doplnkové farby v plnej sýtosti používame ako highlighty, teda na zvýraznenie potrebnej informácie. Priehľadné doplnkové farby odporúčame používať v slabšej intenzite na pozadiach.

Základné a doplnkové farby je možné použiť v rôznej miere priehľadnosti.

Orange
RGB — 255 99 00
CMYK — 0 75 100 0
HEX — FF6300
Pantone — 165 C

Sky blue
RGB — 163 221 213
CMYK — 34 0 19 0
HEX — A3DDD5
Pantone — 551 C

Black
RGB — 0 0 0
CMYK — 0 0 0 100
HEX — 000000
Pantone — Black

White
RGB — 255 255 255
CMYK — 0 0 0 0
HEX — FFFFFF
Pantone — White

Odporúčané farebné kombinácie

Základné farby a doplnkové farby vždy kombinujeme tak, aby bola vizuálna komunikácia jasne čitateľná a dobre viditeľná.

Updated 2025/02/15

Typografia

Písmo patrí medzi hlavné prvky značky. V rámci našej komunikácie ich používame na vytvorenie uceleného a konzistentného prejavu. Preto je potrebné, aby sme toto písmo používali vždy, kedy je to možné, v jednotnej podobe. Pre udržanie konzistentnej vizuálnej komunikácie odporúčame používať len nižšie spomenuté rezy písiem z týchto písmových rodín.

Základné (titulkové) písmo

Capitana

Základným titulkovým písmom značky je Capitana. Používame ho primárne v nadpisoch a podnadpisoch v reze Bold. Písmo je licencované a je možné si ho stiahnuť na linku nižšie.

Základné (textové) písmo

DM Sans

Písmo DM Sans slúži na zalamovanie perexov a dlhších textov v komunikácii. Toto písmo ponúka viacero rezov, z ktorých používame dve verzie – Regular a Bold. Pre zvýraznenie informácií, používame rez písma Bold. Pre popisky alebo informácie technického charakteru, používame verzálky v reze Regular.

DM Sans Bold
DM Sans Regular

Hierarchia a veľkosti

Updated 2025/05/07

Vizuálny štýl

Základný grid

Gridový systém udržuje konzistentnú vizuálnu identitu. Náš grid pozostáva z ôsmych stĺpcov pre digitálne formáty. Horizontálna mriežka nám uľahčuje prácu s fotografiou. Odporúčame držať sa takto nastaveného gridu v prípade malej zmeny formátu. Ak je zmena formátu výrazná, odporúčame pridať gridové jednotky. Takto nastavený grid nám pomáha definovať systém práce s pozadím, fotografiou a umiestnenie textu na formáte.

Základný grid pre digitálne formáty

Margin

Šírka marginu pre digitálne formáty:

  • Pri rozlíšení 1080 × 1350 je margin 68 px zhora, zdola a po stranách.
  • Pri rozlíšení 1080 × 1920 je margin 136 px zhora, zdola a po stranách.

Pri veľkých formátoch ako billboard, citylight treba pri veľkosti marginu myslieť na technické obmedzenia samotného nosiča.

Modulárny layout s fotografiou

Pri osádzaní fotografie dbáme na umiestnenie a výrez – chceme zobrazovať časti fotografie, ktoré dopĺňajú celok a vizuálne komunikujú potrebnú emóciu alebo informáciu. Pri zalamovaní obsahu do digitálnych formátov pracujeme so systémom na pozadí, ktorý je modulárny a umožňuje pracovať s fotografiou a textom podľa potreby. Pri tomto modulárnom layoute s fotografiou používame farebnú paletu v odtieňoch green a pale lime ako podklad.

Ukážky použitia systému pri rozmere
1080 × 1350

Ukážky použitia systému pri rozmere
1080 × 1950

Umiestnenie obsahu

Pri zalamovní fotografie a textu do digitálnych formátov pracujeme so systémom na pozadí, ktorý je modulárny.

  • A Fotografia
  • B – Fotografia a text. Pri tomto modulárnom gride odporúčame používať vetu
    v jednom riadku.
  • C Fotografia a dlhšia veta.
  • D – Fotografia a dlhší text, ktorý je odporúčaný do troch riadkov.

Modulárny layout s textom a linkou (vpisovanie rukou)

Ďalším modulárnym elementom je linka, ktorá aktívne vstupuje do vizuálu näjma pri čistom textovom obsahu. Slúži na spájanie informácii do harmonického celku a nenápadne vedie oko čitateľa. Dodržujeme pagináciu, ktorá zabezpečuje vizuálnu jednotnosť v digitálnych formátoch. Pri tomto modulárnom layoute s textom a linkou používame farebnú paletu sky blue a green.

S linkou a textovým poľom pracujeme dvoma spôsobmi:

1. spôsob (preferovaný)

Hra s typografiou. Časti textu sú rozdelené do riadkov s dôrazom na ich význam a čitateľnosť. Linky sú umiestnené tak, aby nenarušili čitateľnosť textu, ale zároveň ho dynamicky dopĺňali.

  • A – Práca s kratším textom: linka nevstupuje do textu, ale harmonicky spája slová do jedného celku.
  • B – Práca s dlhším textom: linka nevstupuje do textu. Text je vyvážený tak, aby pôsobil prirodzene a nesústreďoval sa len do jednej časti layoutu.

2. spôsob

Pokiaľ nie je možná hra s typografiou, použiváme druhý spôsob. Časti textu sú umiestnené do stredu formátu so zarovnaním na ľavú zarážku. Linky sú tiež umiestnené tak, aby nenarušili čitateľnosť textu a zároveň ho dynamicky dopĺňali.

  • C – Práca s textom: linka nevstupuje do textu. Text je umiestnený do stredu formátu a zarovnaný na ľavú zarážku, čo vie prispieť k jeho ľahšej čitateľnosti.
  • D – Práca s rozdeleným textom: linka nevstupuje do textu. Text je vyvážený tak, aby pôsobil prirodzene a nesústreďoval sa len do jednej časti layoutu.

Iný typ komunikácie

V prípade, že potrebujeme odkomunikovať dôležitú informáciu alebo oznam, ktorým chceme
upútať pozornosť, snažíme sa ju komunikovať pomocou inej než bežnej farby. Pri tomto spôsobe komunikácie odporúčame použiť farby orange a ivory white.

Updated 2025/02/20

Ukážky komunikácie

Sociálne siete

Príklad postu na sociálne médiá

Príklad instagramového feedu

Príklad web stránky

Príklad billboardu

Príklad citylightu

Firemná komunikácia

Príklad vizitky

Hlavičkový papier

Branding v stavebnom priestore

Ukážka brandingu na plote

Prezentácia

V Powerpointe a vo Worde môžme používať druhú variantu písma:
Arial Bold – Nadpis
Arial Regular – text

Updated 2025/03/30

Na stiahnutie

Logo

Písmo

Social media šablóny

Prezentácia

Vizitka

Technický štandard