Designový token je pojmenovaná společná hodnota, například hlavní barva značky. Změníte ji jednou a všechny prvky, které ji používají, zůstanou sladěné.
Co se naučíte
- Pochopit, proč společné barvy šetří práci.
- Nastavit hlavní barvu, text a pozadí.
- Kontrolovat kontrast a stavové barvy.
- Rozlišit globální token a místní přebarvení.
Jedna hodnota, mnoho použití
Bez tokenů byste museli stejnou modrou zadat zvlášť u tlačítka, odkazu, ikony i aktivní položky menu. Token umožní těmto prvkům odkazovat na společnou hodnotu. Když značku později přebarvíte, upravíte základ a návrh se promítne konzistentněji.
Globální nastavení může zahrnovat hlavní a doplňkové barvy, barvu textu, pozadí a další stavové hodnoty. Přesná nabídka závisí na podporované sadě šablony. Jednotlivý modul může mít vlastní výjimku v inspektoru, ale používejte ji střídmě.
Nastavení základní palety
- Otevřete globální nastavení stylů a najděte část barev či designových tokenů.
- Začněte hlavní barvou značky. Použijte přesnou hodnotu z firemního manuálu, pokud ji máte.
- Nastavte barvu běžného textu a základního pozadí. Dbejte na dostatečný rozdíl světlosti.
- Doplňte sekundární a stavové barvy jen tam, kde je skutečně potřebujete.
- Projděte tlačítka, odkazy, menu, karty a formulářovou ukázku v různých typech stránek.
- Přepněte mobilní náhled a případně také tmavé schéma. Počkejte na automatické uložení.
Barva musí být také čitelná
Pěkná paleta nestačí, pokud na ní návštěvník nepřečte text. U každého důležitého spojení zkontrolujte kontrast: text na pozadí, nápis na tlačítku, odkaz v odstavci a aktivní položku menu. Nespoléhejte jen na to, že dvě barvy vypadají odlišně na vašem monitoru.
Pokud jeden konkrétní prvek potřebuje jinou barvu, vyberte jej a změňte ji v inspektoru. Taková místní hodnota ale může přestat reagovat na budoucí změnu globálního tokenu, proto si výjimky hlídejte.
Začněte třemi barvami
Pro první návrh obvykle stačí hlavní barva, neutrální pozadí a dobře čitelný text. Další odstíny přidávejte až tehdy, když mají jasnou roli.
Rychlý audit celé šablony
Po změně hlavní barvy nehodnoťte jen domovskou ukázku. Přepněte typ stránky s delším textem, seznamem nebo formulářem. Zkontrolujte běžný, aktivní, hover a neaktivní stav tam, kde je náhled ukazuje. Upozornění by nemělo být rozeznatelné pouze červeným odstínem; význam má podpořit také text nebo ikona.
Všímejte si také místních výjimek. Pokud jeden modul zůstal ve staré barvě, může mít uloženou vlastní hodnotu nebo skin. Rozhodněte, zda je výjimka záměrná. Takový audit proveďte po každé větší změně palety, protože tokeny mohou ovlivnit více částí současně.