Dizajn manuál – pravidlá, ktoré držia značku pokope
Dizajn manuál je dokument, ktorý určuje, ako sa vaša značka smie používať. Definuje logo a jeho varianty, farby, písma, veľkosti a rozostupy – a hlavne pravidlá, kedy sa čo použije. Vďaka nemu vyzerá web, faktúra, leták aj profil na sociálnej sieti ako jedna značka, aj keď na nich pracujú traja rôzni ľudia.
V praxi narazíte na viacero názvov: dizajn manuál, design manual, logo manuál, grafický manuál aj brand manuál. Vo väčšine prípadov ide o ten istý typ dokumentu, líši sa len rozsah – nižšie si ich rozoberieme jeden po druhom.
Značka sa bez neho nerozpadne naraz. Rozpadá sa postupne: jedna prezentácia s iným odtieňom modrej, jeden leták vysádzaný v Arial namiesto firemného písma, jedno logo roztiahnuté do štvorca, lebo sa inak nezmestilo. Po roku už nikto nevie, ktorá verzia je tá správna – a zákazník vidí firmu, ktorá si nedáva pozor na detaily.
Dizajn manuál, logo manuál, brand manuál a design system – aký je rozdiel?
Rozdiel je najmä v rozsahu. Čím vyššie idete, tým viac vecí dokument rieši a tým je drahší – preto sa oplatí vedieť, čo naozaj potrebujete.
Ako sa jednotlivé dokumenty líšia:
- Logo manuál
- najužší dokument. Rieši výhradne logo: jeho varianty, ochrannú zónu, minimálnu veľkosť a zakázané použitia. Vhodný, ak máte hotové logo a potrebujete ho bezpečne odovzdať tlačiarni alebo dodávateľovi.
- Dizajn manuál (grafický manuál)
- logo plus kompletná vizuálna stránka značky: farebnosť, typografia, obrazový štýl a ukážky aplikácií od vizitky po web. Toto je dokument, ktorý má zmysel pre väčšinu firiem.
- Brand manuál
- dizajn manuál rozšírený o nevizuálnu časť značky: positioning, hodnoty, tón komunikácie, príklady formulácií. Rieši, ako značka vyzerá.
- Design system
- digitálna, živá verzia dizajn manuálu. Ide o knižnicu komponentov (tlačidlá, formuláre, karty) vo Figme a v kóde, ktorú dizajnéri aj vývojári používajú priamo pri práci. Dáva zmysel pri väčších weboch a aplikáciách, kde sa dizajn neustále mení.
Malá firma s jedným webom si vystačí s dizajn manuálom. Design system riešte až vtedy, keď máte viac produktov alebo tím, ktorý na dizajne pracuje priebežne.
Čo má obsahovať dizajn manuál
Neexistuje jedna záväzná norma a rozsah sa líši od dvoch strán po sto. Existuje však jadro, ktoré by nemalo chýbať v žiadnom – bez týchto častí sa dokument nedá reálne používať.
Povinné jadro dizajn manuálu:
- Logo a jeho varianty
- základná verzia, horizontálna a vertikálna, jednofarebná, inverzná pre tmavé pozadie a značka bez textu (ikona).
- Ochranná zóna
- minimálny voľný priestor okolo loga, do ktorého nesmie zasahovať text ani iná grafika. Zvyčajne sa odvodzuje od výšky písmena alebo symbolu v logu.
- Minimálna veľkosť
- najmenší rozmer v milimetroch pre tlač a v pixeloch pre obrazovku, pod ktorým už logo prestáva byť čitateľné.
- Zakázané použitia
- konkrétne ukážky toho, čo sa s logom robiť nesmie: neťahať do strán, nemeniť farby, nedávať na rušivé pozadie, neotáčať, nepridávať tieň.
- Farebnosť
- primárne a doplnkové farby v HEX pre web, RGB pre obrazovku, CMYK pre tlač a Pantone pre presnú tlač. Ku každej farbe patrí aj poznámka, kde sa používa.
- Typografia
- nadpisové a textové písmo, ich rezy, typografická škála od H1 po popisky, riadkovanie a náhradné písmo pre prípad, že hlavné nie je dostupné.
- Obrazový štýl
- aké fotografie a ilustrácie k značke patria a aké nie, prípadne pravidlá pre ikony.
- Aplikácie
- ukážky na reálnych nosičoch: vizitka, hlavičkový papier, e-mailový podpis, prezentácia, príspevok na sociálnej sieti, web.
- Zdrojové súbory
- prehľad toho, čo dostávate a v akých formátoch (SVG, EPS, PNG, PDF) a ktorý sa na čo používa.
Logo v dizajn manuáli: ochranná zóna, minimálna veľkosť a zakázané použitia
Toto je časť, ktorú v praxi otvára najviac ľudí – tlačiareň, výrobca reklamných predmetov aj kolega, ktorý robí prezentáciu. Preto by mala byť na začiatku a mala by byť pochopiteľná aj pre človeka, ktorý o dizajne nič nevie.
Ochranná zóna sa najčastejšie definuje pomocou prvku zo samotného loga – napríklad „okolo loga nechajte voľný priestor vo výške písmena N“. Výhoda je, že takto definovaná zóna funguje pri akejkoľvek veľkosti, na vizitke aj na billboarde.
Minimálnu veľkosť uvádzajte vždy dvakrát: v milimetroch pre tlač a v pixeloch pre obrazovku. Ak má logo aj samostatnú ikonovú verziu, má vlastnú minimálnu veľkosť – býva výrazne menšia.
Pri zakázaných použitiach platí, že ukážka funguje lepšie než veta. Namiesto vety „logo sa nesmie deformovať“ dajte na stranu šesť obrázkov s červeným krížikom. Ľudia si ich zapamätajú a nemusia čítať.
Farby a typografia: časť, ktorá rozhoduje o tom, či bude web vyzerať dobre
Firemné farby zapíšte v každom formáte, ktorý budete potrebovať. HEX pre web, RGB pre obrazovku, CMYK pre tlač a Pantone tam, kde ide o presný odtieň – napríklad na potlač textilu. Bez CMYK a Pantone vám tlačiareň odtieň odhadne a výsledok sa nebude zhodovať s webom.
Ku každej farbe pridajte aj rolu: ktorá je primárna, ktorá doplnková, ktorá sa používa na tlačidlá a ktorá len na pozadia. Paleta bez pravidiel použitia je len vzorkovník.
Pri typografii nestačí uviesť názov písma. Doplňte typografickú škálu – konkrétne veľkosti a riadkovanie pre H1, H2, H3 a bežný text – a rezy, ktoré sa smú používať. A vždy určte náhradné písmo: licencované písmo nemusí byť dostupné každému, kto pre vás niečo pripravuje.
Overte si aj kontrast textu voči pozadiu. Kombinácia, ktorá vyzerá dobre na monitore dizajnéra, môže byť na mobile v slnku nečitateľná a nemusí spĺňať pravidlá prístupnosti WCAG. Kontrastný pomer patrí priamo do manuálu, nie do hlavy jedného človeka.
Vzor dizajn manuálu v PDF – vyskladajte si ho zadarmo
Ak hľadáte vzor dizajn manuálu, najrýchlejšou cestou nie je stiahnuť si cudie PDF, ale vyrobiť si vlastný základ. Práve na to slúži náš bezplatný nástroj na web dizajn.
Kliknete na svoj odbor a nástroj vám navrhne dvojicu písiem a dve farby, ktoré k sebe sadnú. Uvidíte ich rovno na ukážkovej stránke, nie na vzorkovníku, a farby si môžete meniť, kým nebudete spokojní. Pri každej vidíte kontrolu kontrastu podľa WCAG.
Výsledok vám pošleme ako dizajn manuál v PDF: písma, typografická škála od H1 po bežný text, obe farby s kontrastom a pravidlá, kde sa čo používa. Zadarmo a bez registrácie – v podstate základný design system pre váš web, s ktorým môže dizajnér okamžite začať.
Vyskladajte si základný design system zadarmo
Písma, farby a typografická škála pre váš web. Bez registrácie, PDF pošleme na e-mail.
Spustiť nástroj web dizajn
Koľko stojí dizajn manuál
Cena sa odvíja od rozsahu. Samotné logo je najlacnejšia položka, pretože rieši jeden prvok. Dizajn manuál stojí viac, lebo okrem loga definuje farebnosť, typografiu, obrazový štýl a ukážky aplikácií – teda dokument, ktorý naozaj používate.
U nás vyjde návrh loga od 120 € a kompletný dizajn manuál na 350 €. Ak potrebujete aj tlačoviny a merch, dopĺňame ich ako samostatnú položku od 50 €.
Pri rozhodovaní pomáha jednoduchá otázka: koľko ľudí bude s vašou značkou pracovať? Ak ste to len vy a váš web, vystačíte si s logom a bezplatným základom z nášho nástroja. Ak máte kolegov, dodávateľov, tlačiareň a agentúru, dizajn manuál sa zaplatí prvým ušetreným kolom opráv.
Potrebujete dizajn manuál na mieru?
Pripravíme logo, farebnosť, typografiu aj ukážky aplikácií – v jednom dokumente, ktorý viete odovzdať komukoľvek.
Branding a dizajn manuál
Kedy dizajn manuál naozaj potrebujete – a kedy ešte nie
Dizajn manuál nie je povinná jazda pre každého. Má zmysel vo chvíli, keď sa značky dotýka viac ľudí než jeden, alebo keď sa značka objaví na viac než jednom mieste.
Dizajn manuál potrebujete, ak…
- zadávate prácu externým dodávateľom
- prezentácie vám robí niekto iný než ten, kto robil web
- tlačíte na viacerých miestach
- plánujete pobočky alebo predaj licencie na váš koncept.
- prechádzate rebrandingom a chcete, aby zmena prebehla naraz a všade
Ešte ho nepotrebujete, ak…
- ste jednočlenná firma s jedným webom
- všetko si robíte sami
- značka zatiaľ nevystupuje nikde inde než na webe
V druhom prípade začnite základom – logo, dve písma, dve farby a pár pravidiel – a manuál dorobte, keď pribudne prvý človek, ktorý bude s vašou značkou pracovať.