Brand színpaletta készítése: logótól a teljes digitális rendszerig
Ne öt tetszőleges színt válassz. Indulj a márka karakteréből, válassz fókuszszínt, építs neutrális és funkcionális réteget, majd teszteld valódi UI-ban.
Röviden
Egy használható brand paletta nem néhány egymás mellé tett swatch, hanem szerepek rendszere: primary, neutrálisok, accentek, szöveg-, surface- és állapotszínek, ellenőrzött kontraszttal.
Mini brand paletta builder saját color pickerrel
Ne csak nézd — manipuláld
Kiinduló brand szín
Picker megnyitása ↗
MIT GENERÁLUNK BELŐLE?
Egy világos surface-változatot, egy erősebb primary lépcsőt és egy távolabbi accent-javaslatot. Ezek csak kiindulópontok: a végleges palettát szerepek és kontraszt alapján kell validálni.
1. Válassz egy karakteres kiindulópontot
A főszínnek nem kell egyedül elmesélnie a márkát. Sokkal fontosabb, hogy megkülönböztethető legyen a kategóriában, működjön digitális felületen és legyen belőle használható világos-sötét skála.
2. Építs neutrális gerincet
A legtöbb pixel nem a brand színből fog állni. Határozd meg a background, surface, text, muted és border lépcsőket. Ettől lesz a felület olvasható és nyugodt.
3. Adj accentet csak indokolt szerepre
Ha kell secondary vagy accent, a színkör adhat kiindulópontot, de a döntést a funkció és az arány véglegesítse. Nem cél, hogy minden választott szín folyamatosan látszódjon.
Ha több kiinduló kombinációt szeretnél összehasonlítani, a ByBence színpaletta-gyűjteményében több ezer palettából indulhatsz ki.
4. Teszteld komponenseken
- primary és secondary gomb
- űrlapmező és fókuszállapot
- success / warning / danger visszajelzés
- kártya surface és divider
- hosszabb szöveg és muted metadata
- light és szükség esetén dark téma
5. A paletta akkor kész, ha szerepekben működik
Ha egy színt csak azért tartasz meg, mert jól néz ki a palettaképen, de nincs funkciója a felületben, valószínűleg nincs rá szükség. A jó paletta egyszerűen használható döntési rendszer.
A paletta nem dekorációs készlet. A paletta interfész-szabályrendszer.
Mielőtt színt választasz, írj egy rövid vizuális briefet
A palettakeresés sokkal gyorsabb, ha előre megfogalmazod, mit kell a rendszernek tudnia. Például: 'modern B2B szolgáltatás, magas bizalom, kevés dekoráció, világos felület, egy erős CTA-szín'. Ez sokkal használhatóbb kiindulás, mint az, hogy 'valami szép kéket szeretnék'.
A briefből következhet a telítettség, a hőmérséklet, a neutrális rendszer és az accent gyakorisága. Így a paletta nem ízlésverseny lesz, hanem tervezési döntés.
A paletta validálása: öt valódi képernyő
- hero vagy landing oldal, ahol látszik a brand karakter
- űrlap, ahol fókusz-, hiba- és success állapotok is vannak
- adat- vagy tartalomkártya, ahol sok neutrális réteg dolgozik együtt
- mobil nézet, ahol kisebb felületen koncentrálódnak a színek
- dark mode, ha a termék ténylegesen támogatja
A saját paletta összeállításához és inspirációhoz nyisd meg a színpaletta eszközt és gyűjteményt, majd a kiválasztott színeket ne swatchként, hanem komponenseken értékeld.
Ha egy konkrét árnyalat részletes adatait keresed, a színek oldalán külön színoldalak között böngészhetsz.
Nézd meg a kategóriát, mielőtt megkülönböztető színt választasz
Egy brand szín nem vákuumban létezik. Ha egy iparágban minden versenytárs ugyanazt a sötétkéket használja, a kék továbbra is lehet megfelelő, de érdemes tudatosan eldönteni, hogy beleolvadsz a kategóriakódba vagy eltérsz tőle.
A megkülönböztetés nem feltétlen radikálisan más hue-t jelent. Lehet eltérés a saturationben, neutral rendszerben, accentben, tipográfiában vagy képi világban is. A színpaletta a teljes vizuális identitás egyik rétege.
Brand színek és funkcionális státuszszínek legyenek külön kezelve
A brand paletta célja az identitás, a success/warning/danger színek célja pedig a funkcionális kommunikáció. Ha a brand primary zöld, attól még nem minden zöld elem jelent sikert, és a success állapotnak lehet külön tokenje.
Ez a szétválasztás csökkenti a szemantikus ütközést. A felhasználó gyorsabban tanulja meg a rendszer jelzéseit, a fejlesztés pedig tisztábban kezeli a brand és state rétegeket.
A paletta átadása fejlesztésnek: ne csak HEX-listát adj
Egy jól átadható paletta tartalmazza a tokenneveket, szerepeket, fontos kontrasztpárokat és állapotokat is. Írd le például, melyik token a page background, surface, primary action, primary hover, body text és muted text.
Ezzel a design döntései nem vesznek el a fejlesztési folyamatban. Ha csak öt swatchot adsz át, a komponensenkénti felhasználást újra és újra ki kell találni, ami következetlenséget szül.
A technikai tokenstruktúrát a szerepalapú színrendszer leckében tudod továbbvinni.
Gyakori kérdések
Hány szín kell egy brand palettába?
Nincs univerzális szám. Egyetlen karakteres brand hue, erős neutrális skála és néhány állapotszín sok termékhez elég. A szerepek száma fontosabb, mint a swatchok száma.
Palettagenerátorból érdemes kész brand palettát átvenni?
Kiindulópontnak igen, végleges rendszernek nem. A generált színeket saját brand-, kontraszt-, hierarchia- és komponensigények szerint kell szerepekhez rendelni és finomhangolni.
Gyakorold tovább
Használd a saját szín- és palettaeszközöket
Az elmélet akkor rögzül, amikor konkrét árnyalatokon és kombinációkon is kipróbálod. Ezek a kapcsolódó ByBence oldalak ugyanennek a tananyagnak a gyakorlati folytatásai.
Források és további olvasnivaló
A webes színmodelleknél és accessibility részeknél szabványokra és elsődleges dokumentációra támaszkodj. A konkrét palettadöntéseket pedig mindig a saját felületeden, valódi komponenseken teszteld.