Jedním z nejdůležitějších faktorů při vytváření jedinečného a rozpoznatelného designu je barva. Správná volba barevného schématu může rozhodnout o úspěchu nebo neúspěchu webové stránky. Když se návštěvník poprvé podívá na webovou stránku, barvy, které zvolíte, mu pošlou okamžitou zprávu o dané stránce. Naštěstí existuje mnoho nástrojů, které vám pomohou vybrat správné barevné schéma. Zde je pět nejlepších.
1. Chladič
Kuler od Adobe je dlouhodobě uznáván jako nejlepší pomocník profesionálního webdesignéra. Na rozdíl od konkurence je zde velká komunita a můžete sdílet vytvořené palety nebo přebírat barevná schémata jiných lidí a upravovat je tak, aby vyhovovaly vašim potřebám. Chcete-li komunikovat v komunitě, musíte se zaregistrovat a získat Adobe ID. Barvy v Kuler jsou zastoupeny v různých formátech, včetně RGB, CMYK, LAB a HSV.
Inspirace může vzniknout pod vlivem nejneočekávanější příležitosti. Můžete například narazit na krásnou fotografii s atraktivním barevným schématem. Tento generátor barevných palet byl vytvořen právě pro zpracování takových fotografií. Nahrajte soubory ve formátech JPG nebo PNG a získejte podrobné rozvržení klíčových barev. Bez ohledu na to, jakou reakci se snažíte ve svých návštěvnících vyvolat, generátor palety barev může pomoci vytvořit jedinečný vzhled jakékoli webové stránky.
Jednotlivé barvy nikdy nevisí ve vakuu a každý odstín má dopad na své okolí. Nástroj Contrast-A využívá vysoce technický přístup ke konfiguraci palety a poskytuje podrobné informace o poměru jasu a rozdílech v jasu a barvě. Toto je perfektní nástroj, pokud chcete vytvořit minimalistický web s několika barvami, které se vzájemně doplňují.
Tento oblíbený plugin do Firefoxu umožňuje přímo v prohlížeči určit význam jednotlivých barev a změřit mezi nimi rozdíl. Pro výběr jednotlivých barev z předem zvolených sad existuje „prohlížeč barevných schémat“. Plugin ColorZilla, který se snadno používá a je mimořádně bohatý na funkce, je jako švýcarský armádní nůž rozšíření prohlížeče pro webové designéry a umělce.
Na rozdíl od většiny ostatních generátorů barevných schémat „barevného kola“, Colorotate zobrazuje paletu na 3D kuželu. Stejně jako Kuler mohou uživatelé ukládat a upravovat svá barevná schémata a také prohlížet palety vytvořené jinými návrháři. Nástroj je integrován s oblíbenými návrhářskými programy Adobe Fireworks a Photoshop.
Pokud jde o efektivní web design, mluvíme o intuitivním uživatelském rozhraní a rozvržení, ale na barevných schématech záleží stejně, ne-li více. Zde uvedené nástroje by vás měly nasměrovat správným směrem k výběru skvělé palety barev pro váš web na první pokus. Existují další užitečné nástroje, které můžete najít online, ale tyto jsou těmi, se kterými můžete začít, abyste našli dokonalý arzenál, který bude vyhovovat vašemu osobnímu stylu. Hodně štěstí a šťastné navrhování!
Výběr barevné palety je vždy obtížný úkol, ať už jde o návrh webu nebo mobilní aplikace. Barvy byste neměli vybírat nedbale, protože dobře zvolená paleta nastavuje styl pro celý web.
Pokaždé, když je vyvíjen nový webdesign, spousta času se stráví výběrem různých barevných kombinací. Alternativní nástroje palety barev vám mohou v budoucnu ušetřit čas.
Existuje velké množství aplikací pro výběr barevné palety, ale v tomto seznamu jsme vybrali nástroje, které se od standardních programů mírně liší.
Stránka se samozřejmým názvem, kde se shromažďují a podrobně prezentují informace o barvě. Jde spíše o vývojářský nástroj, kde jsou sčítání a odečítání, je k dispozici tvorba přechodů s přesným uvedením barevného kódu ve všech možných barevných prostorech. Tento přístup je vhodný pro ty, kteří mají volný čas, stejně jako nevysvětlitelnou lásku k výpočtům.
Přátelská a vřelá „lampová“ služba, která vás potěší od první minuty setkání s vámi. Logika webu spočívá v tom, že si vyberete „jednu barvu“ a služba pro ni nabízí vhodná řešení: přechod, řadu nejtmavších a nejsvětlejších odstínů, mírně tlumené nebo jasné odstíny vybrané barvy.
Na rozdíl od předchozích služeb tato stránka demonstruje hotové, vybrané palety, které na přiložených fotografiích ukazují, jak se barvy vzájemně ovlivňují. Při pohledu na mořské vlny nebo květiny jste ohromeni tím, jak bohatá je příroda ve svém tvůrčím impulsu a jak špatné jsou naše znalosti barev. Celkově je to cenný zdroj pro ty, kteří začínají chápat barevné kombinace a milují hezké obrázky.
Jak autor popisuje svůj zdroj: „Web 0to255 jsem vytvořil, abych si zjednodušil práci.“ Webdesignéři a lidé podobných profesí pracují s květinami každý den. Při výběru toho, který potřebují, potřebují jeho různé odstíny a pomocí této služby mohou snadno ušetřit čas, aniž by se zatěžovali úpravou hexadecimálního kódu.
Řešení pro ty, kteří rádi nacházejí barvy v obrázcích. Stačí nahrát obrázek a služba zobrazí paletu primárních barev s hexadecimálním kódem.
Kdo může potřebovat aplikaci pro výběr barevných řešení pro tablet? Asi pro ty, kteří s barvou nejen pracují, ale žijí s ní, nebo pro lidi se schopností synestezie. Stránka nabízí podobnou, ale mírně omezenou funkčnost rozhraní navrženou pro tablet. Bohužel stránka má některé nedostatky, například 3D spektrum, které je součástí stránky, se ukazuje jako nepohodlné.
V amerických televizních seriálech často říkají větu „Jen pokud jste byli posledním mužem na zemi“, v našem případě „Pokud nemáte po ruce žádný grafický editor“. Suché, většinou nezajímavé. Není v tom žádné kouzlo ani touha interagovat, produkt nebyl dlouho vyvíjen.
Je těžké nazvat tento web jednoduchým, protože tvůrci zahrnuli vše, co by mohlo být potřeba při práci s barvami. Má vše: velký výběr kolekcí, kanálů, trendů, různé typy nástrojů pro tvorbu vzorů, vyhledávání barev podle obrázku. Obecně vše, po čem vaše srdce touží.
Pojďme si to shrnout:
Navzdory rozmanitosti služeb pro výběr barev lze Adobe Kuler podle názoru našich redaktorů označit za nejlepší, soudě podle možnosti výběru barevných kombinací.
Jednou z hlavních výhod tohoto směšovače barev je možnost uložit si svůj výběr, zobrazit vybrané barvy na celé obrazovce a také sdílet své nálezy a podívat se na ostatní. A pro ty, kteří se již nechtějí s touto službou rozloučit ani na minutu, existuje zásuvný modul pro Photoshop, který vám umožní používat program, aniž byste opustili editor.
Designér v digitálním věku se samozřejmě nemusí omezovat barvami, které lze získat z barev, inkoustů nebo jiných pigmentů, i když z přístupu k barvám ve výtvarných dílech se lze také mnohému naučit. Lidské oko dokáže rozlišit miliony různých odstínů, ale někdy může být náročné i spojení dvou barev.
Úžasné barevné vlastnosti
Je to proto, že výběr odstínů pro design je velmi subjektivní a vyžaduje určité znalosti. Co by tedy měli dělat designéři, kteří chtějí sestavit krásnou barevnou paletu, která může klientovi udělat radost? Ať se vám to líbí nebo ne, nejlepší barevné kombinace přesahují jen osobní preference, protože mají úžasnou schopnost ovlivňovat náladu, emoce a vnímání, přebírat kulturní a osobní význam a přitahovat pozornost – vědomě i podvědomě.
Výzvou pro designéry a obchodníky je vyvážit komplexní funkce odstínů a vytvořit atraktivní a působivou paletu barevných kombinací. Zde se hodí základní pochopení teorie barev. Může vám pomoci pochopit, které tóny spolu dobře fungují (nebo ne) a jaký efekt vytvoří různé kombinace v daném designu.
barevná kombinace
Ve škole se děti tomuto tématu věnují v hodinách výtvarné výchovy, takže jeho svlečenou podobu: červené, žluté a modré základní tóny zná snad každý. Tradiční barevné kolo se skládá z 12 tónů a je často používáno umělci. Toto je jednoduchý vizuální způsob, jak porozumět vztahům barev.
Hlavním úkolem barevného kruhu je kombinace barev. Mícháním základních nebo primárních odstínů (žlutá, modrá a červená) vznikají sekundární odstíny: zelená, fialová a oranžová. Jejich kombinace s hlavním tónem vám umožní získat třetí úroveň kruhu - terciární barvy. Patří mezi ně červeno-oranžová, zeleno-modrá, modrofialová a fialovo-červená. Primární a sekundární tóny jsou součástí viditelného spektra, neboli barvy duhy. Jejich pořadí je snadno zapamatovatelné pomocí mnemotechnické fráze „Každý lovec chce vědět, kde sedí bažant“: červená, oranžová, žlutá, zelená, světle modrá, modrá a fialová.
Tento způsob chápání barev je známý jako subtraktivní model, který zahrnuje míchání pigmentů, jako jsou barvy nebo inkousty, a používá se jak v tradičním barevném kole, tak v systému CMYK používaném v tiskových zařízeních. Liší se od aditivního modelu, který zahrnuje směšování světla různých frekvencí (například na obrazovce počítače nebo televize) skládajícího se z různé sady červené, zelené, modré (RGB).
Grafické editory používají jinou verzi barevného kruhu. Jakýkoli odstín lze vybrat pomocí jeho hexadecimálního kódu.
Terminologie
Před sestavením palet si musíte osvojit terminologii, která vám pomůže porozumět různým typům odstínů:
- odstín je synonymem pro barvu a tradičně odkazuje na jednu z 12 barev;
- jas: stupeň vzdálenosti barevného tónu od černé;
- lehkost: blízkost tónu k bílé;
- sytost - intenzita nebo čistota barvy (čím se odstín blíží šedé, tím je méně sytý).
Nejlepší barevné kombinace
Z barevného kruhu můžeme identifikovat řadu klasických palet používaných umělci v průběhu staletí. U většiny návrhových rozhodnutí by měla být z těchto schémat identifikována jedna dominantní barva - podle množství jejího použití nebo podle jejího výběru z jiných tónů - jeden nebo více akcentů:
1. Monochromatické schéma: použití různého jasu, světlosti nebo sytosti tónů stejné barvy v rozsahu od světlé po tmavou. Příkladem úspěšné monochromatické kombinace je červená s černou a bílou. Toto schéma poskytuje tenký a konzervativní design. Modrá a bílá je klasická kombinace čínského porcelánu z 9. století. a francouzský textil 18. století.
2. Podobné umístěné vedle sebe na barevném kole. Je univerzální a snadno použitelný při vývoji projektů. Příkladem může být kombinace fialové a modrofialové.
3. Doplňkové schéma: používá tóny umístěné na opačných koncích barevného kruhu. Například modrá a oranžová, červená a zelená. Doplňkové barvy mají vysokou intenzitu a kontrast, ale je obtížné je harmonicky a vyváženě aplikovat ve své čisté formě, protože se mohou v designu snadno střetávat.
4. Schéma Split-Complementary: libovolný tón na barevném kole plus dvě barvy ohraničující jeho doplněk. Například žlutá se zelenou a červenofialovou. Toto schéma má také silný vizuální kontrast, i když slabší než předchozí. Poskytuje nejlepší barevné kombinace pro začátečníky v designu, protože je obtížné je zkazit.
5. Triadické schéma: libovolné tři tóny rovnoměrně rozložené na barevném kruhu. Poskytuje poměrně jasné kombinace, i když jsou tóny bledé a desaturované. Pro úspěšné použití je nutné dosáhnout úplné rovnováhy - jedna barva by se měla stát dominantní a další dvě by měly být akcenty.
6. Tetrada neboli dvojitá komplementární: skládá se ze dvou komplementárních párů. Toto schéma je mimořádně atraktivní, ale obtížněji použitelné než jeden pár doplňkových barev, protože více tónů je obtížnější vyvážit. Při použití tohoto schématu byste měli zvolit jednu barvu jako dominantní barvu a upravit sytost, jas a světlost odstínu některých nebo všech tónů tak, aby poskytovaly nejlepší barevné kombinace v různých částech návrhu.
Inspirace
Kromě kombinací barevných koleček příroda nabízí mnoho hotových řešení pro harmonická barevná schémata.
Možnosti spárování barev zahrnují zvážení jejich teploty (horké nebo studené), sytosti (světlé barvy často vypadají mladistvě, zatímco světlé vypadají vintage), nálady (světlé a veselé, tmavé a vážné), tématu (místo, roční období, svátek) a další kvality.
Další skvělou technikou pro hledání barev je hledat inspiraci v různých historických obdobích a uměleckých směrech: v teplých, světlých barvách impresionistů; světlé, nečekané kombinace postimpresionistů; jemné, zemité secesní barvy; světlé, výrazné odstíny pop-artu.
Psychologie barev
Barva nás obklopuje. Ať už si to uvědomujeme nebo ne, hraje velkou roli v našem každodenním životě. Viděli jste dnes na silnici oranžovou nebo žlutou dopravní značku? Z nějakého důvodu upoutal pozornost. Barva má úžasné spojení s našimi náladami a emocemi.
Ale ne každý prožívá barvu stejně. Význam a symbolika, které spojujeme s různými tóny, je velmi závislá na vlivu kulturních a sociálních skupin, ke kterým patříme. Zde jsou některé běžné významy spojené se základními barvami v západní kultuře.
Červený
Tato barva vyjadřuje mnoho různých myšlenek v závislosti na kontextu. Ve spojení s ohněm může symbolizovat teplo nebo nebezpečí. Protože červená je barvou krve, je považována za energický, živý tón, a proto je spojována se srdečními záležitostmi a někdy i násilím.
Alternativní významy: V některých východních kulturách červená symbolizuje štěstí a prosperitu a je to barva, kterou nosí nevěsty v den svatby. Po celém světě je červená spojována s různými politickými hnutími a symbolizuje revoluci.
V brandingu: často označuje sílu, sebevědomí a moc a je velmi viditelný.
Pomerančový
Také barva ohně, oranžová kombinuje teplo červené s veselostí žluté a symbolizuje aktivitu, energii a optimismus. Také spojené se sklizní nebo podzimem.
Alternativní významy: V Indii je šafrán, který má nažloutlý nádech až oranžový, považován za posvátný. V Japonsku barva symbolizuje lásku.
V brandingu: často představuje mládí a kreativitu. Zlato, které je také odstínem oranžové nebo žluté, symbolizuje luxus a vysokou kvalitu.
Žluť
Jako barva slunce často symbolizuje štěstí, veselost, přívětivost a svěžest jara. Kromě toho může v určitých kontextech vysílat varovný signál nebo varovat před opatrností. Některé varianty (zejména ty desaturované a nazelenalé) vypadají nemocně nebo nepříjemně, což není překvapivé, protože historicky žlutá je někdy spojována s nemocí a karanténou.
Alternativní významy: V některých východních a asijských kulturách je žlutá spojována s vysokým narozením nebo postavením. V některých částech Afriky a Latinské Ameriky je tento tón tradiční barvou smutku.
Ve značce: Jasný nebo jasně žlutý tón přitahuje pozornost, ale může být znepokojující nebo dokonce špatně viditelný (jako je bílý text na jasně žlutém pozadí nebo naopak), pokud je používán neopatrně.
Zelený
Je to barva přírody, vegetace a růstu. Často symbolizuje zdraví, svěžest nebo přírodní vlastnosti. Tmavě zelená může představovat bohatství a stabilitu.
Alternativní významy: Mezi islámskými kulturami je zelená barva posvátná. Je také spojován s Irskem, svátkem svatého Patrika a šťastným čtyřlístkem.
V brandingu: Značky nebo produkty uváděné na trh jako „zelené“ (přírodní, zdravé, ekologické, organické atd.) často používají přírodní barvy, jako je zelená a hnědá.
Modrý
Barva moře a nebe často symbolizuje mír a čistotu. Na rozdíl od energičtějších a teplých tónů je modrá vnímána jako uklidňující. V některých případech může představovat smutek nebo depresi.
Alternativní významy: V kulturách Blízkého východu modrá tradičně chrání před zlem. Vzhledem ke svému spojení s oblohou symbolizuje v mnoha kulturách barva nesmrtelnost a spiritualitu.
Ve značce: Modrá je široce používána a je jednou z nejuniverzálnějších barev. Obvykle symbolizuje spolehlivost, bezpečnost a stabilitu. Tón je obzvláště populární v korporátních kontextech, protože je vnímán jako seriózní, konzervativní a profesionální.
Fialový
Tradičně spojováno se šlechtou, velikostí nebo ctí. Má tedy duchovní, mystické nebo náboženské konotace.
Alternativní významy: V mnoha kulturách po celém světě kombinace fialové symbolizuje vznešenost nebo bohatství, nicméně v Thajsku a částech Jižní Ameriky je spojována se smutkem.
Ve brandingu: tmavé odstíny fialové jsou často symbolem luxusu, zatímco světlejší a zářivější odstíny jsou oblíbené u žen a dětí.
Černý
Stejně jako červená má i tato barva mnoho (někdy protichůdných) významů. Může představovat sílu, luxus, sofistikovanost a exkluzivitu. Na druhou stranu černá symbolizuje smrt, zlo nebo tajemství. V oděvu je symbolem formálnosti nebo smutku a smutku (jak se smutek tradičně nosí na pohřbech).
Alternativní významy: V některých asijských a latinskoamerických zemích je černá považována za mužskou barvu. V Egyptě to znamená znovuzrození. V mnoha kulturách je barva spojována s magií, pověrami nebo smůlou, stejně jako s nevysvětlitelným nebo neznámým.
V brandingu: Černá je tak široce používána, že se téměř stala neutrální, i když může symbolizovat výše uvedené v závislosti na kontextu. Mnoho návrhů je prostě černobílých (ať už záměrně, nebo jednoduše proto, aby se ušetřilo na barevném tisku).
Bílý
Bílá jako barva světla a sněhu často symbolizuje čistotu, nevinnost, dobro nebo dokonalost (tradičně ji nosí nevěsty), ale také strohost nebo sterilitu.
Alternativní významy: V Číně je bílá barva smutku. V mnoha kulturách znamená mír – bílá vlajka je univerzálním symbolem příměří nebo kapitulace.
V brandingu: bílá často komunikuje jednoduchost, čistotu nebo modernost. Návrháři hledající minimalistickou estetiku často používají hodně bílé.
Barva v designu
Výběr barevné kombinace je více než výběr dvou nebo tří odstínů a jejich distribuce ve stejných poměrech v celém designu. Jejich efektivní použití má hodně společného s rovnováhou a čím více tónů použijete, tím obtížnější je dosáhnout.
Nejjednodušší způsob, jak implementovat tento koncept, je rozdělení vybraných barev na dominantní a akcentní barvy. Dominantní tón bude v designu nejviditelnější a nejpoužívanější, zatímco jeden nebo více akcentů jej doplní a vyváží. Věnování pozornosti interakci barev - přítomnosti nebo nepřítomnosti kontrastu, jak vypadají sousední tóny, jakou náladu vytváří kombinace barev a odstínů atd. - vám pomůže přesně vybrat ideální paletu pro účely designu.
Obecně uznávaným pravidlem pro použití základní tříbarevné palety je pravidlo 60-30-10. Tento přístup se často používá v interiérovém designu, ale lze jej efektivně použít také pro webový nebo tiskový design. Stačí věnovat 60 % dominantní barvě a zbývajících 30 % a 10 % dát dvěma akcentům. Dobrým příkladem pro vysvětlení tohoto pravidla je pánský oblek: sako a kalhoty tvoří 60 % barvy oděvu, košile zabírá 30 % a kravata zbývajících 10 %. Vše dohromady poskytuje vyvážený, elegantní vzhled.
Dalším způsobem, jak udržet paletu jednoduchou a vyváženou, je použít jas a světlost (nebo světlejší a tmavší verze vámi zvoleného odstínu). Tímto způsobem můžete rozšířit svůj výběr barev, aniž byste zahltili design.
a brandingu
Rozpoznání značky je velmi závislé na barvě. Stačí si vzpomenout na Coca-Colu, Facebook nebo Starbucks a je snadné si zapamatovat tóny, se kterými jsou tyto značky spojeny.
Studie provedená na univerzitě ve Winnipegu zjistila, že prvotní úsudek lidí o produktech je z velké části založen na barvě (60–90 % hodnocení). To znamená, že tón v designu není jen uměleckou volbou, ale také kritickým obchodním rozhodnutím, které ovlivňuje vše od toho, jak spotřebitelé vnímají značku, až po to, jak se produkty prodávají.
Při výběru barevného schématu loga však není nutné držet se tradic, symboliky nebo stereotypů. Neexistují zde žádná jednoduchá ani rychlá pravidla. Důležitější je, jak je tón použit v designu a harmonizuje s tržním kontextem a charakterem značky.
RGB vs CMYK
Při práci na tištěném projektu nemůže monitor vašeho počítače zobrazit barvy tak, jak se zobrazí na papíře. To, co vidíte, není to, co získáte, protože digitální monitory a tiskárny používají dva různé systémy: RGB a CMYK. První se týká malých bodů červeného, zeleného a modrého světla, které se spojují a vytvářejí viditelné barvy na obrazovce; druhý znamená azurové, purpurové, žluté a černé tóny pro vytváření barevných výtisků. Protože RGB používá širší spektrum než CMYK, někteří návrháři zpočátku vytvářejí návrh tisku v RGB, aby si zachovali více barevných možností a před tiskem převedli hotový návrh do CMYK.
Z tohoto důvodu potřebují nástroj, který zajistí barevnou konzistenci napříč oběma systémy – například při návrhu loga pro web a jeho tisku na vizitku. Jedním z takových systémů je Pantone Matching System (PMS). Zde lze tóny sladit na webu a tisku (a na různých typech potištěných povrchů), aby byl zajištěn konzistentní vzhled.
Barva: pochopte, prozkoumejte a milujte to!
Designéři se specializují na studium teorie barev, psychologie nebo neurovědy – komplexní předměty, které leží na průsečíku umění a vědy. Ale to je část toho, co dělá tuto profesi tak zajímavou a tak efektivním nástrojem na trhu. Přestože tato příručka pouze nastiňuje základy, doufáme, že pomůže při informovanějším a efektivnějším výběru barev pro osobní nebo profesionální projekty.
Barvy hrají ve webdesignu obrovskou roli. Chcete-li správně vybrat barevné schéma pro web, existují speciální služby. Jsem si jistý, že každý webdesignér má ve svých záložkách alespoň jednu takovou.
Občas sedíte a přemýšlíte, jaký odstín modré zvolit jako hlavní pro stránky, o něco světlejší nebo o trochu světlejší, nebo možná tmavší... A ještě je potřeba k němu vybrat doplňkové. Můžete to samozřejmě udělat od oka, ale je lepší využít některou ze speciálních služeb.
Nebudu mluvit o teorii barev (to je příliš mnoho informací), ale jednoduše zde zveřejním služby, které mám ve svých záložkách a které využívám.
S tímto nástrojem se přátelím již mnoho let. Nejpohodlnější nástroj pro výběr barev (podle mého názoru). Má mnoho dalších funkcí. Můžete například vidět příklad světlé a tmavé stránky s vybranými barvami.
Je možné vyhodnotit, jak vaše barevné schéma uvidí lidé s barvoslepostí a jinými zrakovými vadami. Můžete si vybrat webové bezpečné barvy.
Adobe Kuler je druhý webový nástroj, který používám poměrně často. Výběr barevných schémat je téměř stejný jako na předchozí stránce, ale to není důvod, proč to miluji. Kromě vytváření barevných schémat sami můžete prohlížet a používat schémata, která vytvořili jiní lidé.
Chcete-li to provést, klikněte na tlačítko v nabídce vlevo nahoře „Sledovat“. A otevře se před vámi galerie všemožných barevných kombinací.
Tento nástroj je trochu podobný Colorscheme, ale má méně funkcí, ale můžete vidět, jak budou barevné bloky vypadat.
Tyto stránky prakticky nepoužívám, ale jelikož je mám v záložkách, rozhodl jsem se je přidat také.
Následující dvě místa vygenerují paletu z obrázku, který vyberete. Je to kouzlo :)
Vyberete si libovolný obrázek, jehož barvy se vám líbí, služba jej analyzuje a poskytne vám barevnou paletu. Jediný rozdíl mezi těmito dvěma weby je v tom, jak poskytují obrázek.
Tato stránka vyžaduje stáhnout obrázek z vašeho počítače.
Velmi pohodlný nástroj pro výběr barev. Založeno na principu „To se mi líbí – nelíbí“.
Jak název napovídá, zde si můžete vybrat barvy pro nyní módní flat design. Stránka je zajímavá, protože jakmile si vyberete paletu, můžete si ji stáhnout pro Corel a Photoshop.
Dalším módním trendem je materiálový design. Tato stránka vám pomůže vybrat barevné kombinace pro uživatelské rozhraní (UI). Kromě toho má stránka velkou sadu ikon.
Barva je jedním z nejdůležitějších prvků v práci designéra. Ale jako koncept může být docela obtížné ho zvládnout: kvůli mnoha kombinacím palet je často obtížné rozhodnout, jak nejlépe navrhnout rozhraní webových stránek a aplikací. Již dříve jsme publikovali recenze vybraných nástrojů a . A dnes chceme téma rozšířit tím, že na blog zveřejníme překlad článku Essential Color Tools for UX Designers od Nicka Babicha.
Poznámka obsahuje seznam nejlepších služeb výběru barev pro weby a UX design, které vám pomohou ušetřit spoustu času. Prostřednictvím těchto projektů se naučíte:
- kde čerpat inspiraci;
- jak vytvořit vlastní paletu;
- jak zpřístupnit design lidem s poruchou barevného vidění.
1. Hledání inspirace
Barvy přírody
Čerpejte ze světa kolem sebe. Stačí se jen rozhlédnout. Módní oblečení, obaly na knihy, interiérový design... je kolem vás tolik úžasných věcí. Ale nejlepší barevné kombinace jsou barvy přírody. Zachyťte krásný okamžik a zkuste si vytvořit vlastní výběr na základě konkrétního obrázku.
Nejlepší barevné kombinace se nacházejí v přírodě. Barevné schéma můžete získat z libovolné fotografie
Behance
V této oblíbené službě najdete zajímavá díla zařazená do nejlepších online portfolií skutečných profesionálů ve svém oboru. Tato stránka je také velkým zdrojem inspirace. Chcete-li zobrazit nové hodné příklady projektů, jednoduše vyberte požadovanou barvu.
Dribble barvy
Dribbble patří k tomu nejlepšímu, co se vám bude hodit při tvorbě uživatelského rozhraní. Pokud chcete vizuálně porozumět tomu, jak ostatní použili určitou barvu, přejděte na stránku dribbble.com/colors a zadejte požadovanou hodnotu.
Při výběru barvy pro stránky zde můžete nastavit její minimální procento – experimentujte, zkuste například nastavit 30% modrou.
Zkuste nastavit minimální procento konkrétní barvy v Dribbble
Designspiration
Designspiration je užitečný nástroj především pro ty, kteří již mají nápady na barevné kombinace a chtějí vidět příklady takových kombinací. Vyberte si z 1 až 5 možností a najdete obrázky, které odpovídají zadaným parametrům.
V Designspiration najdete různé příklady barevných kombinací
Tineye Multicolr
Pomocí služby přizpůsobení barev Tineye Multicolr můžete určit požadované gama obrazu a dokonce nastavit procento každého z nich (poměr). Stránka je integrována s databází 20 milionů fotografií Creative Commons z Flickru. To je rozhodně jeden z nejrychlejších způsobů, jak najít perfektní paletu.
Colorzilla
ColorZilla je rozšíření pro instalaci do prohlížečů Chrome a Mozilla Firefox. Zahrnuje nástroje jako kapátko, procházení palet, vytváření a další.
Rozšíření ColorZilla dostupné v prohlížečích Chrome a Firefox
Shutterstock spektrum
Jedním z nejlepších způsobů, jak si představit, jak bude barevné schéma vypadat, je podívat se na odpovídající obrázky. Většina řešení, která nabízejí výběr barev pro návrhy webových stránek, tuto funkci zahrnuje, ale Shutterstock Spectrum má neuvěřitelně uživatelsky přívětivé rozhraní a náhled, který může být opravdu užitečný.
Navíc nebudete potřebovat předplatné, protože předběžné posouzení obrázku bude stačit (i přesto, že je na něm „vodoznak“).
W3Schools
Nedávno blog recenzoval výběr z W3Schools. Je tam nashromážděno mnoho informací k tématu, počínaje jejich názvy/kódy odstínů, teorií kombinování palet a konče popisem různých formátů: HEX, RGB, CMYK, HWB atd. Najdete zde i jednoduché generátory, konvertory a podobné „minislužby“. Celkově zajímavé sledovat.
2. Vytvořte barevnou paletu
Material Design Color Tool
Nástroj Material Design Color Tool vám umožňuje vytvářet, sdílet barevná schémata a zobrazovat hrubé uživatelské rozhraní pro vaše výběry. Jednou z jeho užitečných funkcí je měření úrovně přístupnosti jakékoli barevné kombinace.
Chladiče
Coolors je stránka pro vytváření vícebarevné palety. Stačí připnout konkrétní barvu a stisknout mezerník. Nástroj je také dobrý, protože získáte více než jeden výsledek, ale změnou pouze počátečních dat můžete vygenerovat několik možností.
Barevné schéma v Coolors na základě fotografie
Adobe Color CC
Služba pro přizpůsobení barev Adobe Color CC (dříve Kuler) je nyní poměrně populární. Je volně dostupný na internetu, existuje však i desektorová verze. S touto webovou aplikací si vytvoříte vlastní paletu pomocí barevného kola:
Nebo můžete získat určitý výsledek z hotového obrázku:
Výběr barev pro web na základě obrázku
Zde jsou stovky hotových kombinací, hledejte je v sekci „Hodinky“:
Pokud používáte verzi pro stolní počítače, můžete exportovat systém barev, který jste vytvořili, do aplikací InDesign, Photoshop a Illustrator jedním kliknutím.
Paletton
Často je srovnáván s předchozím Adobe Color CC, protože návrhy jsou velmi podobné. Jediný rozdíl je v tom, že v Palettonu nejste omezeni na pět parametrů, ale můžete experimentovat s dalšími tóny rozhraní.
Navíc se můžete podívat na. Spolu s ostatními vám aplikace umožňuje pracovat kdekoli, jednoduše pomocí smartphonu. Kromě přímých úkolů vytváření/exportu palet barev zde můžete vybrat konkrétní barvy z obrázků nebo použít základní možnosti.
3. Zpřístupnění palety
V dnešní době jsou poruchy barevného vidění mnohem častější, než si uvědomujeme. Asi 285 milionů lidí na světě má problémy se zrakem. Vždy byste si měli zkontrolovat, zda je vámi vybraný typ dostupný pro takové uživatele.
WebAIM Kontrola kontrastu barev
Některé tóny se k sobě hodí, jiné jsou naopak. Obrovské množství projektů neprojde A/A testem, a to je fakt. Je velmi důležité zkontrolovat vizuální design rozhraní a kontrast tónů, zejména pokud je na stránce mnoho textu. Pro tyto účely použijte při výběru barev webu.
WebAIM Color Contrast Checker je webový nástroj, který kontroluje barevné kódy v hexadecimálních hodnotách.
Chladiče
O této službě jsme se již zmínili výše. Coolors vám mimo jiné také pomůže zkontrolovat barvoslepost vaší vynalezené palety.
Typ barvosleposti v diagramu
Místo normálního režimu vyberte typ problému se zrakem, který chcete simulovat. Díky tomu přesně pochopíte, jak váš návrh uvidí člověk, který nedokáže rozlišit určité barvy.
Takto vidí paletu člověk s protanomálií
NoCoffee Vision Simulator pro Chrome
Pomocí webu NoCoffee Vision Simulator můžete vidět, jak lidé s barvoslepostí nebo slabozrakým budou vnímat určité webové stránky. Pokud například zadáte parametr „Achromatopsia“ v části „Color Deficiency“, webová stránka se zobrazí šedě.
Takto vypadá projekt CNN pro člověka s deuteranopií.
Závěr
Všechny služby barevného přizpůsobení webu a UX designu uvedené v článku vám určitě pomohou při hledání zajímavé a efektivní palety. Ale pamatujte: nejlepší způsob, jak se naučit vytvářet úžasné palety, je hodně cvičit a experimentovat.