Corporate Design

Corporate Design: Co tvoří Manuál vizuálního stylu?

1. Základní stavební kameny identity

• Logo a jeho varianty – definujte primární logo, sekundární verze (vertikální, horizontální), verzi pro světlý a tmavý podklad, ikonu (favicon, app ikonu) a ochrannou zónu. Uveďte jasné příklady, co se nesmí s logem dělat (deformace, změna barev, doplňování vlastních prvků).
  • favicon []
  • logo na bílém na šířku []
  • logo na černém na šířku []
  • logo na bílém square []
  • logo na černém square []
• Barevná paleta – primární barvy (1–3), sekundární barvy (pro podpůrné prvky, pozadí, zvýraznění). Ke každé barvě uveďte kódy: CMYK (tisk), RGB/HEX (web), Pantone (přesný odstín). Doplňte tabulku kontrastu pro přístupnost (WCAG 2.1).
  • paleta barev (podle pinterest nástěnky)
    1. #338C26 – zelená
    2. #DF0A21 – červená
    3. #E0E0E0 – šedá
    4. #000000- černá
    5. #
    6. #
    7. #
    8. #
• Typografie – hlavní firemní písmo (pro web i tisk), záložní systémová písma (např. Arial, Helvetica). Definujte hierarchii: nadpisy H1–H6, mezititulky, běžný text, popisky, tlačítka. Uveďte velikosti, řezy (tučné, kurzíva) a řádkování.
  • Slogany – Rubik (800 extratučné).
  • Nadpisy – Rubik (600 středně tučné), h1 je 30 pt, h2 je 26 pt, h3 je 24pt,  h4 je 20 pt).
  • Text je Rubik 16pt, normal.

2. Rozšířený vizuální jazyk

• Ikonografie – styl ikon (linkové, plné, handdrawn, geometrické), tloušťka čáry, zaoblení rohů. Uveďte, zda se používají vlastní ikony nebo knihovny (Font Awesome, Material). Doplňte pravidla pro velikosti a umístění.
  • Ikony výhod []
  • Ikony aplikací []
  • Elementy  stránek []
• Fotografie a ilustrace – žánr (lifestyle, produktové, portrétní), barevná úprava (teplota, saturace, filtry). Pokud používáte ilustrace, definujte jejich styl, linii a barevnost. Uveďte, jak se zachází s tvářemi lidí, retuší a etickými pravidly.
  • video pozadí na mobil
  • pozadí bannerů na mobil
  •  
• Bannery a upoutávky
  • Bannery na mobil (se šipkami)
  • Square reklamy do sloupce pod blogem
• Motion design & animace – pro digitální prostředí definujte, jak se animuje logo, tlačítka, přechody stránek, rollover efekty. Uveďte rámcově dobu trvání a křivky zrychlení (ease-in, ease-out).

3. Šablony pro marketing

Manuál by měl obsahovat vyplnitelné šablony nebo jejich vizuální reprezentace pro tyto nejčastější výstupy:

• Newsletter a e-mailing: hlavička s logem, tlačítka, typografie, zápatí s kontaktem – vše responzivní.
  • e-mail podpis (HTML + plain text),
  • obrázky do HTML emailu [šipky 4 x png jako maska]
  • hlavička webu []
  • patička webu []
  • „lidský obsah emailu“ v plain text“
  • „generovaný obsah emailu“ (příklady):
    • upozornění na chybu na webu
    • SEO audit
    • GEO audit
    • …
    • [a další části výzkumu leadu]
  • Profil výzkumu leadu [*.HTML]
  • Mustr nabídky DP [*.HTML]
  • e:\_code\diversity-promotion.cz\html-sablony\

4. Digitální specifika a přístupnost

• Responzivita: pravidla pro zobrazování loga, navigace a hlavních prvků na mobilech, tabletech a desktopu.
• Přístupnost (WCAG 2.1 na úrovni AA): minimální kontrast textu (4,5:1), dostatečná velikost tappable prvků (44×44 px), popisky ikon pro screen readers.
• UX/UI principy: styl tlačítek (primární, sekundární, vypnutý), formulářových polí, chybových hlášek, hover a focus stavů.

5. Tón hlasu v designu (propojení s komunikací)

Do vizuálního manuálu patří také základní vazba na tón komunikace – např. „pokud je náš tón hlasu přátelský a hravý, používáme v designu více zaoblených tvarů a ilustrací. Pokud je profesionální a strohý, volíme ostré hrany a fotografie bez lidí.“ Uveďte 2–3 konkrétní příklady propojení slova a obrazu. zdroj https://www.airops.com/blog/maintain-brand-voice-ai-content 

6. Jak manuál strukturovat a spravovat

• Online verze (doporučeno): interní wiki, Figma, Zeroheight, Frontify – snadno se aktualizuje a vyhledává.
• Verzování: každá změna se zapisuje do changelogu (datum, autor, co se změnilo).
• Zodpovědná osoba: brand manager nebo marketingový ředitel, který manuál udržuje a schvaluje odchylky.

7. Příklady chybného použití (Galerie „NE“)

Nejpraktičnější část manuálu: ukažte na ukázkách, co se nesmí – deformované logo, nepovolené barvy, špatný kontrast, nesprávné umístění loga přes fotografii, kombinace dvou primárních barev na pozadí apod. Tím předejdete nejčastějším prohřeškům.