Takto hodnotili designeři mou přednášku na Brno Bold 2022, kterou v aktualizované verzi shrnuji v tomto článku:
„Skvělé ve všech ohledech, ani jsem nevěděla jak skvěle, prakticky i úhledně může manuál vypadat! Pokaždé vidím jen PDF verze a určitě bych ocenila v praxi vidět brand manuál tak krásně vytvořený!“
Co se v tomto článku dozvíte
- Proč je dobré mít online brand manuál
- PDF vs. cloud řešení grafických manuálů
- Má zkušenost s cloudovými platformami
- Stinná stránka akcelerace SaaS (Software jako služba)
- Architektura brand management platforem
- Předplatné vs. jednorázová platba (ukázka nástrojů)
- Praktické tipy pro lepší online grafické manuály
- Logopack a názvosloví formátů log
- Jak chránit loga pomocí časových razítek
- Jak pracovat s písmy v online manuálech
- Jak tvořit vzorníky barev a připravovat .ASE soubory ke stažení
- Proč používat subdoménu klienta
- Ukázky online grafických manuálů českých značek
Proč je dobré mít online brand manuál?
Zde je několik důvodů, proč je dobré mít online brand manuál:
- Konzistence značky: Online brand manuál definuje specifické prvky vaší značky, jako jsou logo, barvy, typografie a grafické prvky. Umožňuje zajistit konzistenci těchto prvků v jakékoliv komunikaci, což pomáhá vytvářet jednotný a rozpoznatelný dojem. Pomáhá zabránit nekonzistentním a nesourodým prezentacím značky.
- Profesionální vzhled: S online brand manuálem můžete zajistit, že všechny materiály spojené se značkou budou vypadat profesionálně a kvalitně. To zvyšuje důvěryhodnost a zvyšuje hodnotu značky.
- Usnadnění spolupráce: V případě, že pracuje více lidí nebo týmů na online obsahu, máte jasný návod, jak správně používat vizuální prvky a komunikovat online. To usnadňuje spolupráci a minimalizuje možné nedorozumění.
- Lepší komunikace s cílovou skupinou: Konzistentní vzhled značky a komunikace napomáhají budovat důvěru a vytvářet silné spojení s cílovou skupinou. Lidé mohou snáze identifikovat vaši značku a lépe si ji pamatovat.
- Efektivní marketing: Online brand manuál je cenným nástrojem pro marketéry, kteří potřebují rychle vytvořit a distribuovat obsah na různých online kanálech. Usnadňuje vytváření vizuálně atraktivního a konzistentního obsahu.
Jiří Chlebus
Přechod od PDF ke cloudu
Do roku 2013 jsem tvořil výhradně PDF manuály. V roce 2013 jsem je díky cloudovým řešením považoval prakticky za mrtvé. K mému velkému překvapení David Airey v knize Identity Designed vyzpovídal přední brand studia a ty ve většině případů pro svůj brand manuál i v roce 2019 uváděly statické PDF jako výchozí formát.
PDF je komplikace
Grafický nebo brand manuál nevydrží navěky. Je sice pravdou, že zásahy do brand manuálů se nedějí až tak často, ovšem v měřítku celého života značky se tomu několikrát určitě nevyhnete.
Pak nastává komplikace v tom, že na různých místech existují různé verze brand manuálu. Změnili jste odstín firemní barvy? Pak dost možná tu starou někdo stále používá, protože svou lokální verzi PDF považuje za aktuální.
Cloud brand manuál jako řešení
Když se v roce 2013 začaly objevovat cloud brand management nástroje, byla to revoluce. Najednou měl každý k dispozici aktuální data, netvořily se neaktuální kopie PDF manuálů a přístup byl možný odkudkoliv.
Začal jsem proto ihned tvořit online grafické manuály na OpenBrandu (již neexistuje) a Frontify. Frontify byl (a je) svou cenou dostupný pouze pro opravdu velké značky, proto jsem dával přednost českému OpenBrandu.
OpenBrand ukončil v roce 2019 činnost
Šestnáct grafických manuálů se pro mě i mé klienty během několika měsíců stalo nedostupných, protože OpenBrand ukončil svůj provoz.
Pro mě byla tato zkušenost velkým impulsem pro tvorbu vlastního řešení Visualbook, které nyní používají značky jako Notino, Portu, statutární město Olomouc a dalších téměř 70 značek.
Jiří Chlebus
Akcelerace SaaS nástrojů
Od té doby se na thru objevila celá řada platforem, mezi nimiž je například i úspěšný český BrandCloud.
Tyto nástroje od určité velikosti musí někdo platit
Ten někdo jste buď vy jako designer / grafické studio, nebo klient. A také musíte věřit, že daná služba bude existovat i za pár let. Kdybych neměl vlastní zkušenost, kdy zanikla služba, kterou jsem používal 3 roky, nevěřil bych, že se to může stát.
Může.
Architektura běžné brand management platformy
Veškerá data leží na vzdáleném serveru, ke kterému se připojujete.
Architektura Visualbooku
Visualbook nemá centrální server, jeho výstup je statický export webu ve formě online manuálu, který funguje z vašeho umístění – tedy klidně tam, kde funguje váš web, takže jeho provoz nemá žádné měsíční výdaje, protože využívá hosting vašeho hlavního webu.
A celou funkční a živou zálohu projektu máte u sebe také. Můžete svůj manuál upravovat a rozvíjet, i kdyby platforma Visualbook v budoucnu vůbec neexistovala.
Nástroje s předplatným vs. jednorázovou platbou
Aby mohl Visualbook fungovat, je postaven na nástroji Bootstrap Studio, který můžete velmi levně pořídit za jednorázovou cenu a exportovat neomezené množství webů (zkuste si na jejich webu online demo).
Hotový brand manuál tedy kromě funkčního exportu odevzdávám jako projekt, kde je celý Visualbook editovatelný a můžete ho rozšiřovat a upravovat. Vše je v jednom souboru.
Alternativnou k Bootstrap Studio je dnes dobře známé Webflow, kde ale musíte za každý takto vytvořený brand manuál platit vy nebo klient měsíční poplatek.
Je to podobné jako u Adobe a Afinity
Čím dál více uživatelů začíná využívat profesionální software od Afinity, aby se vymanili ze „zajetí“ Adobe impéria a jejich poplatků.
Nejde jen o poplatky, ale i občasné úlety
Tak například vzorníky Pantone byly v Adobe produktech standardně snad již odjakživa. Ale po nedávném sporu Pantone a Adobe nyní musí uživatel platit za to, na co byl roky zvyklý.
TIP: na YouTube najdete návody, jak to obejít.)
3 možosti jak postavit online brand manuál:
- Využijete již hotové řešení třetí strany, například brandcloud.pro
- Postavíte si od píky vlastní řešení (doporučuji na bootstrapstudio.io)
- Necháte si do 5 dnů postavit brand manuál na míru skrze visualbook.pro, zaplatíte jednorázově a získáte data k neomezené editaci, která byste svépomocí stavěli stovky hodin.
Tipy pro vaše (online) grafické manuály
V následujících řádcích se dozvíte, jak lépe předávat loga, písma a barvy.
Rozcestník pro stažení loga musí být přehledný
Podívejte se na formu, jak předává Ostrava své logo. Aby se v tom někdo vyznal a zorientoval, musí si vzít v práci sick day.
Takto to může vypadat v praxi
Ukazujte uživatelům přehledně všechny varianty loga. Nejnovější varianta stránky pro stažení loga pro inspiraci je tady v tomto demu.
Jsou i značky, kde vám ani sick day nepomůže...
V tomto rozcestníku jsem se regulérně ztratil. a trochu tipuju, že 6280 uživatelů na tom bylo podobně.
Po stažení logopacku na vás vyskočí zajímavost ze všech stran:
Pojďme raději zpět k praktickým tipům...
Používejte správné formáty loga
Není potřeba logo exportovat jako CDR nebo TIF. Industry standard formáty jsou:
RGB: .svg, .png, .ai
CMYK: .pdf, .eps, .ai
JPG formát v logopacku nedoporučuji, může mít vyšší kompresi a vzhledem k tomu, že není transparentní (JPG vždy obsahuje pozadí), je tam vyšší riziko nesprávného použití a tím i poškození dané značky.
Rozdělte logopack na digitální a tisková data
Většina uživatelů přichází na váš online manuál s konkrétním požadavkem. Usnadněte jim práci a připravte jim balíčky formátů s logem do logických celků.
- verze pro obrazovky
- verze pro tisk
Zapisujte verze log srozumitelně
Například:
- XY-logo-na-svetle-pozadi-rgb
- XY-logo-na-tmave-pozadi-rgb
Nebo:
- XY-logo-cervene-rgb
- XY-logo-bile-rgb
- XY-logo-cerne-rgb
Někteří grafici říkají, že je to v pohodě. Že běžný uživatel s přehledem ví, na jaké pozadí dané logo použít:
— Jiří Chlebus (@jirichlebus) September 22, 2022
• XY-logo-neg@2x
• XY-logo_inverz
• XY-logo-negativni-rgb
• XY-logo-pozitiv
• XY-logo-inverted-cmyk
Jak to vidíte vy?
Také samotné složky s logy pojmenujte jednoduše
Například:
Brno Bold logo na délku – verze pro obrazovky
- Bílá verze
- Černá verze
- Červená verze
Ukazujte, jaké verze loga lze používat na konkrétních pozadích
A také k danému pozadí napište jeho barvu, aby uživatel přesně věděl, o jaký odstín barvy se jedná.
Nechte si naprogramovat generátor loga
Máte-li tak komplexní značku, jako třeba Skaut. Dává smysl nechat si vyrobit generátor loga, který vám usnadní práci. Podívejte se, co si dokázali sami vyrobit:
Chraňte loga (nebo skicy) časovým razítkem
U případného sporu o logo jde většinou o to, kdo používal daný motiv dříve. Máte-li důkaz, že jste daný motiv používali dříve, můžete daný spor snáze vyhrát a ochránit tak vaše logo (nebo cokoliv jiného).
V tomto článku se věnuji časovým razítkům, ale nezapomínejte ani na ochranné známky. Těm se věnuji v tomto článku:
Jiří Chlebus
Návod, jak na časové razítko ve třech krocích:
1) Když si stáhnete SVG logo Brno Bold, najdete v jeho kódu ID vlastníka autorských práv: © 2022 Vít Rýznar, vit@bloomfield.cz
I vy si můžete do vašeho SVG návrhu loga napsat vlastníka autorských práv (nebo jakoukoliv jinou informaci, třeba hash vaší vizitky, kterou odtajníte až v případě sporu).
2) Získejte důkaz pravosti. Tomuto SVG logu patří unikátní SHA256 hash: 3f93ebf870547b17388dd3bc26dd6ce7a6864f792a82e70cdec3a5194bc6f031
Tento hash jednoduše vytvoříte na této stránce přetažením souboru loga do animovaného políčka: https://www.blockproof.eu/
3) Vložením loga do Blockproof se automaticky jeho unikátní SHA256 hodnota zobrazí a uloží do bitcoinového blockchainu, takže vy díky vygenerovanému .OTS časovému razítku budete mít důkaz, že:
- logo v daném tvaru a barvách (a třeba i vaším podpisem) zastupuje unikátní SHA256 hash
- daný SHA256 hash, který patří tomuto logu a ničemu jinému (!) na světě, bylo v konkrétní den nesmazatelně vloženo do bitconového blockchainu.
Nevěřte, ověřujte
Miliony nápadů byly za nemalé poplatky ukládány do centralizované databáze WIPO Proof. V roce 2022 tato organizace ukončila provoz. Servery se zápisy log, skic a dalších materiálů, které si u nich tvůrci chránili, budou v roce 2027 vymazány.
Uložit unikátní hash vašeho loga, ilustrace, znělky nebo jiného symbolu značky trvá dvě vteřiny. Zkuste to hned teď zdarma na https://www.blockproof.eu/
Mám informaci z Úřadu průmyslového vlastnictví, že digitální OTS razítka lze použít jako důkazní materiál v případě sporu.
Chraňte a předávejte písma profesionálně
Písmo je základní brand code každé značky. Některá písma byla vytvořena exkluzivně pro daný brand, nebo jsou komerční a není možné je volně používat.
Proto je potřeba tato písma chránit, aby se k nim nedostala neoprávněná osoba.
Po kliknutí na tlačítko ke stažení písma je uživatel vyzván k zadání hesla. Možná si říkáte, že zaheslovat nějaký obsah umí kdejaká cloud platforma. Tady je ale dobré znovu připomenout, že je to v rámci nezávislého statického exportu webu, který máte na vlastní doméně.
Na Visualbook není napojena žádná služba, knihovna ani plugin třetí strany. Funguje zcela autonomně a heslo je zašifrováno přímo v odkazu linklocku, takže není ani nikde uloženo v databázi hesel.
Definujte řezy písma
téměř žádná značka nepoužívá všechny dostupné řezy jedné rodiny písma. Dnešní písma obsahují i 16 různých řezů písma a běžný laik nedovede rozlišit, jak je správně používat.
Proto definujte, které řezy písma daná značka opravdu ve své komunikaci používá.
Nenuťte uživatele přemýšlet
Nebo dokonce vymýšlet, kde jaký řez zrovna oni budou používat.
Nepoužívané řezy ve výstupu balíku písem jednoduše nedávejte.
Práce s barvami v online manuálu
U online manuálu platí stejná pravidla, jako u webu. Musí se načítat rychle a informaci musíte najít taky rychle. Cokoliv, co uživateli ušetří jednu vteřinu života, se počítá.
Umožněte kopírování barev na jedno kliknutí
Zrychlíte uživateli práci a zvýšíte pravděpodobnost, že se pro správnou barvu příště vrátí a navíc eliminujete riziko špatného přepisu.
Tvořte ASE vzorníky barev ke stažení
ASE vzorník je jednoduše řečeno seznam HEX barev, které můžete naimportovat do Adobe, Figmy nebo Sketche. V nástorji coolors.co si ho jednoduše vytvoříte a vyexportujete zdarma.
Používejte subdoménu klienta
Vlastní subdoména je vysoce zapamatovatelná. Web vaší firmy si pamatujete za každých okolností. Před tento web stačí zvolit libovolné slovo (například „design“) a máte manuál vždy po ruce. Tak jako Brno Bold:
Web: brnobold.cz
Brand manuál: design.brnobold.cz
Ukázky dalších online brand manuálů na vlastních doménách klientů:
Brand manuál na vlastní subdoméně se také rychleji zaindexuje ve vyhledávači a uživatelé vaše logo najdou skrze tento manuál. Tím mnohonásobně zvýšíte pravděpodobnost, že dané logo použijí správně.
A tím udržíte značku déle v dobré kondici:)
Shrnutí
- Logopack musí být srozumitelný (tisk/obrazovky)
- Chraňte loga přes open-source blockproof.eu
- Do exportu písem vložte pouze používané řezy
- Chraňte písma (a jiný obsah) přes LinkLock
- Umožněte uživatelům kopírovat barvy na jeden klik
- Exportujte barevné palety jako .ASE vzorník pomocí coolors.co
- Směřujte váš grafický manuál na doménu klienta
- Používejte nezávislé nástroje jako visualbook.pro :)
Přemýšlíte o Visualbooku, ale máte dotazy?
Pojďme to nezávazně probrat na callu. Vyberte si termín.
Uvidíme se na Brno Bold 2023?
Diskuze členů