Vizuální identita firmy: jak sladit web, logo, barvy a písmo

Logo na dveřích je zelené, na webu modré, vizitky tiskl kamarád v úplně jiném písmu a jídelní lístek vypadá, jako by patřil vedlejšímu podniku. Každá věc zvlášť je v pořádku, dohromady ale firma působí nahodile. Vizuální identita firmy je to, co tyhle věci spojuje: stejné logo, barvy, písmo a styl všude, kde se s vámi zákazník setká. V článku vysvětlíme, co vizuální identita obsahuje, proč ji potřebuje i malá firma a jak s ní sladit web.

Co je vizuální identita firmy

Vizuální identita je soubor pravidel, jak firma vypadá. U velkých značek ji popisuje tlustý manuál, malé firmě stačí pár základních věcí:

Logo – a jeho varianty pro různé použití.
Barvy – dvě tři hlavní barvy, přesně definované.
Písmo – jedno nebo dvě, která používáte všude.
Styl fotek – světlé nebo tmavé, s lidmi nebo bez, přirozené nebo aranžované.
Tón komunikace – tykáte, nebo vykáte? Píšete vážně, nebo s nadsázkou?

Nejde o to mít drahé logo od agentury. Jde o to, aby všechno, co zákazník od vás vidí, vypadalo, že k sobě patří.

Proč jednotný vzhled potřebuje i malá firma

Lidé vás poznají. Zákazník, který vás viděl na Googlu, na webu a pak na výloze, by měl mít pocit, že vidí pořád tutéž firmu.
Působíte profesionálně. Jednotný vzhled říká, že na detailech vám záleží. Nahodilý vzhled říká opak – i když vaše práce je skvělá.
Budujete důvěru. Lidé mají raději to, co znají. Opakované barvy a styl pomáhají, aby si vás zapamatovali.
Šetříte čas. Když jsou pravidla jednou daná, nová tiskovina, příspěvek na sociální sítě nebo stránka webu se nemusí pokaždé vymýšlet znovu.

Kde všude se identita potkává

Vizuální identita se neodehrává jen na webu. U restaurace nebo provozovny ji zákazník vidí na mnoha místech:

Online	Offline
web a jeho podstránky	vývěsní štít a výloha
profil na Googlu a Firmy.cz	vizitky a letáky
sociální sítě	jídelní lístek a stojánky na stolech
e-maily a potvrzení rezervací	účtenky a obaly jídla s sebou
ikona webu v záložce prohlížeče	QR kódy, oblečení obsluhy, auto

Čím víc těchto míst ladí, tím silnější dojem. Jak udělat dobrý profil na Googlu, popisujeme v článku Google firemní profil a Firmy.cz. QR kódům na stolech a dveřích se věnuje článek QR kód pro restauraci.

Základní sada pro malou firmu

Pokud identitu teprve skládáte nebo ji chcete uklidit, tohle je minimum:

Logo ve vektorovém formátu (SVG, PDF nebo AI) – aby šlo zvětšit na štít i zmenšit na ikonu bez rozmazání. Logo jen jako malý obrázek z Facebooku nestačí.
Varianty loga – barevné, černobílé, pro tmavé pozadí a malou ikonu (třeba jen symbol nebo iniciály) pro záložku prohlížeče a sociální sítě.
Barvy s přesnými kódy – pro web (HEX nebo RGB) i pro tisk (CMYK, případně Pantone). „Taková tmavě zelená“ vypadá u každé tiskárny jinak.
Jedna výrazná barva pro akce – tlačítka „Rezervovat“, „Objednat“, „Zavolat“. Nepoužívejte ji na nic jiného, aby vždy vyčnívala.
Písma – jedno na nadpisy, jedno na text, nejlépe taková, která jde použít na webu i v tisku.
Jednostránkový přehled – všechno výše na jedné stránce. Pošlete ho tiskárně, grafikovi i tvůrci webu a nikdo nebude hádat.

Tip: Pokud nemáte logo ve vektoru, zeptejte se toho, kdo vám ho kdysi navrhl. A pokud nevíte, kdo to byl, je to dobrý důvod logo nechat překreslit – jednou provždy a ve všech variantách.

Jak se identita propíše do webu

Web je místo, kde se identita uplatní nejvíc, a zároveň místo, kde se nejsnáz rozbije. Na dobře postaveném webu jsou barvy, písma, zaoblení rohů i podoba tlačítek definované jednou, na jednom místě, a celý web je z nich jen skládá. Odborně se tomu říká design systém. Pro vás to znamená tři věci:

Nová stránka vypadá stejně jako ty staré. Nikdo nevybírá barvu podle oka, použije se ta daná.
Změna je jednoduchá. Když upravíte odstín firemní barvy, změní se na celém webu najednou, ne stránku po stránce.
Obsah, který přidáváte vy, ladí automaticky. Článek, banner nebo denní menu převezmou barvy a písmo webu, i když je nevybíráte.

Barevná harmonie: jak barvy sladit

Firemní barvy nemají jen ladit s logem, ale i mezi sebou. Pár osvědčených pravidel:

Pravidlo 60-30-10. Zhruba 60 % plochy tvoří neutrální základ (bílá, světle šedá, tmavé pozadí), 30 % hlavní firemní barva a 10 % výrazná barva pro akce. Výsledek působí klidně a to důležité vyčnívá.
Méně sytých barev. Syté, zářivé barvy patří na malé plochy – tlačítka, ikony, zvýraznění. Celé sytě červené nebo zelené pozadí unaví oči.
Vyberte si, jak barvy kombinovat. Odstíny jedné barvy (tmavě modrá, modrá, světle modrá) jsou bezpečná a elegantní volba. Sousední barvy na barevném kruhu (modrá a tyrkysová, oranžová a žlutá) působí přirozeně. Protilehlé barvy (modrá a oranžová) jsou výrazné – hodí se, když má akcentní barva opravdu vyčnívat.
Neutrální barvy vyberte s citem. Čistá černá a šedá působí tvrdě. Šedá lehce do teplého nebo studeného tónu podle firemní barvy dodá celku jednotu.
Pomozte si nástrojem. Bezplatné generátory barevných palet, třeba Adobe Color nebo Coolors, k vaší barvě navrhnou ladící kombinace podle uvedených pravidel.

Kontrast: aby se text dal přečíst

Krásné barvy jsou k ničemu, když se na nich nedá číst. Světle šedý text na bílém pozadí, bílý text na žluté nebo červený na zelené může na monitoru v kanceláři vypadat elegantně, ale na mobilu na slunci nebo pro staršího návštěvníka je nečitelný.

Kontrast se dá změřit. Vyjadřuje se poměrem, třeba 4,5 : 1. Mezinárodní doporučení pro přístupnost webu (WCAG) požadují u běžného textu aspoň 4,5 : 1 a u velkých nadpisů aspoň 3 : 1.
Změřte si ho zdarma. Stačí zadat dvě barvy do online kontroly kontrastu, například WebAIM Contrast Checker. Nástroj Lighthouse, o kterém píšeme v článku Rychlost webu, v kategorii přístupnost na nízký kontrast sám upozorní.
Firemní barva nemusí být barvou textu. Pokud je vaše barva světlá, třeba žlutá nebo pastelová, použijte ji na pozadí, rámečky a ikony a text nechte tmavý.
Text nikdy přímo přes rušnou fotku. Pod text dejte jednobarevný podklad nebo fotku ztmavte, jinak se písmena ztratí.
Rychlý test: převeďte stránku nebo návrh do černobílé. Co je i černobíle dobře čitelné a co nejdůležitější stále vyčnívá, má dobrý kontrast.

Tip: Dobrý kontrast nepomáhá jen lidem se slabším zrakem. Ocení ho každý, kdo čte web na mobilu venku, s nižším jasem displeje nebo ve spěchu.

Nejčastější chyby

Každá věc v jiném stylu. Web od jednoho, letáky od druhého, štít od třetího – a nikdo nikomu nedal pravidla.
Šablona v cizích barvách. Web ze šablony, která má vlastní barvy a písma, a logo do ní jen vložené. Výsledek nevypadá jako vy, ale jako tisíce dalších webů se stejnou šablonou.
Příliš barev a písem. Pět barev a čtyři písma nepůsobí bohatě, ale chaoticky.
Nízký kontrast. Elegantní šedý text, který si nikdo nepřečte.
Logo v nízkém rozlišení. Rozmazané logo na webu nebo na štítu je to první, čeho si zákazník všimne.
Nové logo jen napůl. Firma změní logo, ale na Googlu, na Facebooku a na účtenkách zůstane staré.

Web na míru podle vaší identity

V Puretech weby neskládáme ze šablon. Každý web programujeme na míru, takže vychází z vaší identity – z vašich barev, písma a stylu, ne z cizí šablony. Barvy, písma a styl prvků máme v kódu webu definované jednou pro celý web, takže každá nová sekce vypadá jako zbytek webu.

Obsah, který si spravujete v Puretech CMS – články, denní menu, bannery, pozvánky na akce, fotogalerie –, se na webu zobrazí ve stejném stylu, aniž byste cokoli nastavovali. Jak správa obsahu funguje, popisujeme v článku Správa obsahu webu, kterou zvládne každý. A jak by měla vypadat úvodní stránka, která identitu představí jako první, najdete v článku Úvodní stránka webu.

Časté otázky

Potřebuji kvůli webu nové logo?

Ne nutně. Pokud máte logo, které se vám líbí a máte ho ve vektoru, web se postaví kolem něj. Nové logo dává smysl, když to současné je zastaralé, nečitelné v malé velikosti nebo nemáte jeho zdrojová data.

Kolik barev má firma mít?

Obvykle stačí jedna až dvě hlavní barvy, k nim neutrální (bílá, šedá, černá) a jedna výrazná barva pro tlačítka a důležité prvky.

Musí web vypadat přesně jako tiskoviny?

Nemusí být stejný, ale má být zjevně „od stejné firmy“ – stejné logo, barvy a písmo. Web navíc musí počítat s mobilem a čitelností na obrazovce, viz Responzivní web.

Co když se identita v budoucnu změní?

Pokud jsou barvy a písma na webu definované na jednom místě, změna se promítne do celého webu najednou. U webů poskládaných stránku po stránce se musí přepisovat všechno ručně.

Shrnutí

Vizuální identita firmy není jen pro velké značky. Logo ve vektoru, dvě tři barvy, které spolu ladí a mají dostatečný kontrast, jedno nebo dvě písma a jednotný styl fotek stačí, aby vás zákazníci poznali na webu, na Googlu i na výloze. Sepište si to na jednu stránku a dejte to každému, kdo pro vás něco tvoří. A web stavte tak, aby identitu dodržoval sám – i když do něj budete roky přidávat nový obsah.

Chci web podle své identity→