Psychologie barev: Jak barvy ovlivňují chování návštěvníka
Seznamte se s tím, jak různé barvy evokují emoci a ovlivňují rozhodování uživatelů na webu.
Vytváření soudržné knihovny vzorníků pro váš tým
Jak dokumentovat a sdílet barevné palety tak, aby je všichni v týmu pochopili a dodržovali. Praktické šablony a příklady.
Proč dokumentace barev není luxus
Když začínáte nový projekt, zdá se snadné si prostě pamatovat, která modř se používá na pozadí a která se používá na tlačítka. Ale co se stane, když do týmu přijde nový designer? Nebo když se projekt vrátí za tři měsíce?
Bez dokumentace skončíte s deseti různými verzemi „vaší modré barvy”. Jednotlivé členy týmu budou hádovat. Vývojáři budou prosit o přesné hodnoty. A konzistence – která vám dělala problémy s hraním – zmizí.
Knihovna vzorníků řeší tohle všechno. Je to vlastně primitivní věc – je to jen formalizovaný seznam barev, které používáte. Ale funguje.
Poznámka: Tento průvodce je informační materiál zaměřený na osvětu designérů a týmů o vytváření barevných knihoven. Konkrétní implementace se bude lišit v závislosti na vašich nástrojích, formátech a pracovních procesech. Consulttujte s členy svého týmu na tom, co funguje nejlépe pro vaši konkrétní situaci.
Základní struktura: Primární, sekundární a neutrální
Nejjednodušší struktura knihovny má tři vrstvy. Primární barva je ta, kterou poznáte jako vaši značku – barva loga, tlačítka, akcentů. To je zpravidla jedna barva, někdy dvě.
Sekundární barvy doplňují primární. Jsou použity na místech, kde potřebujete druhý tón – například na druhý set tlačítek, na upozornění, na specifické prvky. Nemusíte jich mít spoustu. Dva až tři sekundární odstíny stačí.
A pak jsou neutrální. To je vaš černá, bílá, šedé. Ty jsou pro text, pozadí, hranice. To je place kde budete trávit asi 70 procent času při designování. Správně zvolené neutrály znamenají, že váš obsah je čitelný a elegantní.
Tip: Při tvorbě neutrálů se zaměřte na to, aby měly správný tón. Chladné šedé (s trochou modře) vypadají profesionálně. Teplé šedé (s trochou oranžové) vypadají příjemněji. Vyberte si tón, který odpovídá vaší značce.
Formáty a nářadí: Vyberte si své zbraně
Existují tisíce způsobů, jak zdokumentovat barevnou knihovnu. Nejjednodušší je tabulka – Google Sheet, Excel, cokoliv. Sloupce pro jméno barvy, HEX hodnotu, RGB, možná poznámku o tom, kde se používá.
Pokud vaš tým používá Figmu, můžete vytvořit knihovnu přímo tam. Figma má vestavěné barvy, které se všichni mohou podívat. To je pohodlné, protože designéři jsou už tam.
Vývojáři si možná budou chtít CSS proměnné. Můžete vygenerovat
CSS soubor s jednotlivými barvami –
--color-primary: #fb7185;
– a pak ho všichni importují. Některé týmy generují CSS, SCSS, i
JSON pro mobil.
Populární formáty:
- Tabulka (Google Sheets, Excel)
- Figma komponenty a knihovny
- CSS proměnné v kódu
- Design systémový nástroj (Zeroheight, Supernova)
- PDF vzorník (starý školní přístup, ale pořád funkční)
Pojmenování barev: Rodej názvy, které mají smysl
To je místo, kde se týmy často hroutí. Někdo říká „modrá 5″, někdo říká „primární”, někdo říká „midnight-blue-shade-2″. Všichni si představují něco jiného.
Nejjednoduší systém je číselný. Primární, sekundární, neutrální – a pak jednotlivé variace. Primární-500, primární-600, primární-700 pro tmavší verze. Je to jasné. Vývojáři to rozumí. Designéři to rozumí.
Pokud se vám líbí popisná jména, buďte konzistentní. Když voláte jednu barvu „sky-blue”, nevolte další barvu „electric-blue-dark”. Zůstaňte u jednoho systému.
Příklad pojmenování:
Primary-600
#fb7185
Neutral-800
#1a0a0e
Secondary-400
#fda4af
Kontrastní povinnosti: WCAG a čitelnost
Nemůžete prostě vybrat barvy a nadělit si. Musíte se ujistit, že text čitatelný. To znamená testovat kontrast.
WCAG AA standard vyžaduje poměr kontrastu alespoň 4,5:1 pro normální text. To znamená, že pokud máte bílý text na tmavé pozadí, měl by být dostatečně tmavý. Pokud máte tmavý text na světlém pozadí, měl by být dostatečně tmavý.
Nejjednoduší cesta? Použijte nástroj. WebAIM Contrast Checker vám řekne přesný poměr. Nebo si vezměte Stark, plugin pro Figmu, který testuje kontrast přímo ve vašem designu.
Ověřovací seznam kontrastu:
- Primární text na primárním pozadí: 4,5:1 nebo vyšší
- Sekundární text (popisky, poznámky): 3:1 nebo vyšší
- Tlačítka a interaktivní prvky: 3:1 pro obrys a text
- Ikony a grafika: 3:1 pokud přenášejí informace
Spuštění: Jak to skončit
Začněte jednoduše. Vyberte si tři až pět primárních barev. Pak přidejte čtyři až šest neutrálů. Dokumentujte je. Sdílejte je.
Budete překvapeni, jak mnoho času to ušetří. Méně hádání. Méně e-mailů se zprávou „jaká přesně je ta modrá?”. Více konzistence.
A když se příště vrátíte k projektu za šest měsíců? Budete mít všechno, co potřebujete. Nebude to nic složitého. Jen systematické.
Související články
