Jak získat profesionální vzhled s barvou
Co dělá design vypadá koordinovaně, plánovaně a profesionálně? Odpověď zní: "barva" .
Ne každý projekt potřebuje nevýrazné firemní modré, aby vypadal profesionálně. Plánování barvy znamená vytvoření rámce, který popisuje, které barvy je třeba použít a jak je používat.
Barva je nejmuchřejší konstrukční prvek. "Dobrá" barva je tak úzce spojená s nepolapitelnými věcmi, jako je osobní chuť a intuice, stejně jako technické úvahy, jako je kontrast a kalibrace monitoru.
Barva je však pro obsah důležitá . Pokud považujete web dostatečně důležitý k tomu, abyste trávili čas vylepšováním, pak čtenáři pravděpodobně budou považovat za dostatečně důležitý na to, aby trávili čas čtením. Dobrá volba barev umožňuje.
V tomto článku přezkoumáme některé techniky k dosažení krásných barevných palet pro vaše webové návrhy.
Nejlepší způsob, jak vytvořit webové stránky neplánovaně, je volba náhodných barev.
Dokonce i když návštěvníci poprvé vykreslují domovskou stránku webu, barvy ovlivňují jejich postoj k obsahu . Je tato stránka vzrušující? Uklidňující? Odvážný? Bland? Politický? Formální?
Barva ovlivňuje, jak lidé interpretují to, co vidí, stejně jako typografie.
Hledání správných barev není snadné, ale proces může být systematický.
Dobrá strategie návrhu zahrnuje barevné schéma (tj. Paletu barev vybraných pro komunikaci nálady nebo zprávy) a uspořádání této schématu.
Řekněme, že jste požádáni o vytvoření profesionální webové stránky. (A to by se mohlo hodně změnit na pitnou hru: střílejte pokaždé, když klient používá slovo "profesionální", "čistý" nebo "moderní." Dvě výstřely pro "Líbí se mi tato další webová stránka.
Barevná schéma bude záviset na konkrétní povaze webových stránek. Například obě banky a květinářství mohou mít profesionálně vyhlížející webové stránky.
Lidé však mohou být méně náchylní kupovat květiny z webových stránek, které jsou společné modré a oceánově šedé. A představte si webové stránky Bank of America v lilach a žlutozelené.
"Profesionální" design říká návštěvníkům, že našli webovou stránku, která brát svůj předmět vážně, a to i v případě, že je tento předmět lehký. Bez ohledu na odstíny a hodnoty, "profesionální" znamená koordinované, plánované a promyšlené .
Přejít do stupně šedi
Nejlepší způsob, jak pracovat s barvou, je začít s žádným.
Odstranění barvy z designu odhaluje zásadní problémy, které je třeba řešit dříve, než se obáváte, který odstín chartreuse funguje nejlépe. Pokud se návrh necítí v černé a bílé barvě, je čas provést změny.
Má každá stránka jasný účel? Obsahuje průvodce čtenáři designem? Je obsah zajímavý, inspirativní nebo informativní? Jsou nadpisy jasné? Souvisí odkazy s druhým textem? Barva zlepšuje tyto efekty, ale problémy s uspořádáním, typem a organizací nelze vyřešit pouze barvou .
Chcete-li provést redesign, nejdříve vydejte barvu. Jednoduchý úkon vymývání nadměrně nasycených primárních prvků skutečně ukazuje, kde stojí webová stránka. (Ve skutečnosti byste měli skutečně začít redesign přehodnocováním vašich cílů a obsahu, ale to je další příběh.)
Někdy odstranění barvy je řešení samo o sobě .
Kdysi jsem pracovala s firmou pro návrh webových stránek a navrhla tak své vlastní webové stránky. Majitelé byli o projektu osobní a chtěli to správně. Ale pokud si myslíte, že navrhování pro sebe je obtížné, zkuste to udělat výborem. Konečně jsme se všichni tři dívali na obrazovku devátého návrhu po několika hodinách na pár nápojů.
Prudce jsem zploštil vrstvy Photoshopu a stiskl "Desaturate" a obrátil živý meď a námořní design do odstínů šedé. Každému překvapilo, že to fungovalo.
Do konce týdne jsme měli "teplý" šedý design s červenými akcenty. Věděli jsme, že máme vítěze, když jim předchůdci dopomohli k novému vzhledu, a od potenciálních klientů přicházely další hovory.
Analyzujte své barevné schéma pomocí testu Photoshop "squint" :
- Získejte screenshoty alespoň tří stránek z vašeho webu. Otevřete je ve Photoshopu.
- Duplikovat vrstvu pozadí v každém snímku obrazovky ( Vrstva → Duplicitní vrstva nebo Příkaz + J na počítači Mac nebo Ovládání + J na systému Windows).
- Použijte Gaussovo rozostření asi 10 pixelů na nové vrstvy.
- Přejděte na položku Image → Adjustments → Posterize . Použijte 8 až 12 úrovní nebo přejděte na Filtr → Pixellate → Mozaika . Použijte 15 až 30 pixelů.
To ukazuje, které barvy jsou skutečně dominantní. Čím více barvy dominuje, tím víc se schéma vtiskne do mysli návštěvníka.
Jakmile uspořádání a organizace webové stránky fungují bez barvy, je na čase vybrat paletu. Ale který z nich? A kolik se používá?
Zarovnejte odstíny
Barva má tři vlastnosti: odstín, sytost a hodnotu (někdy nazývaná lehkost).
Sytost je tak bohatá jako odstín: neonové barvy jsou velmi nasycené, zatímco pastely jsou méně nasycené.
Hodnota označuje, jak jasně (tj. Jak blízko k černé nebo bílé) je barva.
Hue se odkazuje na kterou část duhy patří barva, jako je červená nebo zelená; to je vlastnost, kterou lidé vyrazí.
Nic nezabije barevné schéma, jako je střetnutí barev. Návrh může mít sto odstínů jednoho odstínu, od pastelových až po neonové, a stále se plánuje podívat. Pokud se však barvy smíchají špatně, schéma se rozpadne.
Jedním ze způsobů, jak se vyhnout střetávání odstínů, je oddělit je třetí barvou. Černá, šedá nebo bílá vyrovnávací paměť je nejbezpečnější, protože odstíny šedé jsou neutrální: můžete libovolnou část duhy koordinovat černou, bílou a šedou barvou.
Druhým řešením je použití odstínů v různých poměrech . Pokud má barevná schéma například fialovou a hnědou barvu, pak může mít design mnoho odstínů hnědé s několika jasně fialovými vrcholy.
Další možností je měnit hodnoty. Čistě modrá a jasná azurová činí takzvanou kombinaci, ale tmavě modrá (námořnictvo) a světle azurová (modrá nebe) jsou dostatečně kontrastní, aby se navzájem oddělily. Červená a fialová mohou být natolik odlišná, že se nesoustředí, ale jsou dostatečně blízko, aby nevypadaly úmyslně. Světlá červená (růžová) a tmavě fialová rozlišují.
Bohužel, vyhýbání se špatné barvě kombinace není stejná věc jako výběr dobrého. Farební schéma není úspěšné, pokud jste spokojeni, ale když se vaše publikum cítí dobře.
Objevte skvělé schémata
Odkud pocházejí skvělé barevné schémata? Se stovkami barev a tisíců kombinací, jak se rozhodnete?
Návrháři malých statických webových stránek by měli z obsahu čerpat barvu . To obvykle znamená fotky.
Design osmistránkové webové stránky, které jsem nedávno postavil, bylo doplněno propracovaným kovovým lešením proti indigové obloze. Když jsem nastavil nástroj pro kapátko Photoshopu na průměru 5 × 5, odebral jsem nejtemnější a nejlehčí části oblohy a dal pár bočních okrajů, spojů, záhlaví a zápatí.
Když se klient zeptal, jak jsme byli schopni navrhnout webové stránky tak dobře - a tak rychle - naše odpověď byla: "To je to, co děláme." Ale barva už byla. Musel jsem ho jen hledat.
Zatímco fotografické fotografie fungují pro rychlé webové stránky, návrháři větších a dynamičtějších webových stránek by se měli snažit o inspiraci od svých diváků .
Vynikajícím ukazatelem, které barvy jsou pro vaše publikum atraktivní, je denní oblečení. Zjistěte, jak se vaše návštěvníci nosí, a vy budete vědět, jaké barvy jsou pohodlné. Pokud vaše webové stránky obsahují, například, sportovní ligy, zjistěte, co lidé nosí na hry, spíše než jejich denní práce.
Pokud máte dostatek štěstí, abyste získali fotografie svého cílového publika, podívejte je hromadně; chcete průměrného davu. Pokud však fotografie nejsou k dispozici, nakupujte.
Oblečení návrháři, kteří jsou schopni zůstat v podnikání mají vynikající barevný smysl pro každou náladu a životní styl. Nemusí to být 5th Avenue haute couture. Vyhledávání Google pro "kempy," "dětské oblečení", "lyže a plavky" a "příležitostné bydlení" odhalí mnoho dobrých barevných kombinací.
Lidé nosí oblečení podle svého vkusu. Používáte-li barvy, které se jim líbí, budou se na vašem webu cítit pohodlněji.
Použijte textury
Mírné změny odstínu, sytosti nebo hodnoty vytvářejí textury .
Monochromatické textury (tj. Textury pouze s jedním odstínem) a vzory poskytují jemný rozměr většiny webových stránek bez konfliktu.
Jednoduché textura, zejména pozadí, se snadno staví:
- Vyfotografujte vnitřní stěnu nebo něco holého, ale drsného.
- Otevřete jej ve Photoshopu.
- Duplikovat vrstvu pozadí a nazvat ji "textura 1."
- Vyplňte vrstvu pozadí barvami z barevného schématu.
- Nastavte režim míchání vrstvy "textury 1" na "měkké světlo" a jeho opacitu na 30%.
- Vyzkoušejte to na svém webu. Pokud to nevypadá správně, hrajte s opacitou vrstvy.
Název vrstvy je záměrný. Můžete si zahrát s více než jednou fotkou, ale vyhýbat se tomu, aby se názvy vrstev označovaly jako "textura zdi" nebo "textura papíru". Chcete se zaměřit na efekt na vašem webu, ne od místa, odkud pochází.
Vytvoření dobrého schématu
Dobrá barevná schéma má určité vlastnosti. Přemýšlejte o tom jako o rámce nebo sadu pokynů, aby byl návrh konzistentní. Režim by měl:
- Seznam dvou až pěti odstínů, které dobře spolupracují,
- Popište, jak daleko se může od těchto odstínů lišit,
- Účtování odstínů jednotlivých odstínů,
- Pracujte dobře proti černobílé.
Zde je příklad:
Návrhář začal výběrem převážně teplých odstínů, které se cítily správně. Neexistovala žádná logika, jen neurčitý cíl "podzimu" a její intuice.
Ve Photoshopu byly dvě vrstvy opatřeny odstíny černé a bílé. Režim kombinace jednotlivých vrstev byl nastaven na "Měkké světlo". Čistá černá barva byla příliš tmavá pro pravou barvu, takže opacita černé vrstvy byla upravena.
Chcete-li sjednotit barvy, vytvořila se nová vrstva a naplnila se čistě červenou barvou. Režim přechodu byl nastaven na "Barva" a jeho opacita byla na 40%. (Poznámka: Pořadí vrstev je velmi důležité. Barvy se změní, pokud je vrstva "tónování" nastavena pod černobílé vrstvy.)
To dalo návrháři 15 barev, ze kterých si můžete vybrat. Vybrala čtyři, která měla řadu tónů a odstínů. Zde jsou barvy nastaveny na bílou barvu.
Variance jsou důležité, takže návrhář experimentoval. Jak vypadají barvy na černé barvě? Co se stane, když je trochu zastíníme?
Co když jsme je zcela změnili? Použití Image → Adjustments (Nastavení) → Hue / Saturation na vrstvě "tint" vytváří výrazně podzimní pocit, ale barvy jsou stále koordinovány. Snad tato paleta může být použita pro Velikonoce.
Konečným výsledkem je barevné schéma: odkaz, který poskytuje různé (ale ne příliš odlišné) odstíny a rozsah odstínů, které dobře spolupracují. Stáhněte ukázkový soubor.
Použijte rámec
Budou zítra grafika, fotografie a ikony pracovat s dnešním barevným schématem? Jaké obrázky budou potřebovat webové stránky během šesti dnů, šesti týdnů nebo šesti měsíců? Je těžké říci, ale obsah je součástí vašeho barevné schéma .
Tento problém můžete vyřešit buď tím, že se vaše snímky budou řídit barevnou schémou, nebo budou barevné schéma sledovat vaše obrázky.
Vynucení vašeho barevné schéma, a to i s fotografiemi, je skvělý způsob, jak dosáhnout jednotného pohledu na všechny stránky .
Nejjednodušším řešením je najít obrázky, které odpovídají vašemu schématu. Nezapomeňte, že barevná schéma umožňuje procházet místnostmi: pokud se objeví velké odstíny obrazu, obraz by měl fungovat. Mnoho webových stránek s fotografiemi fotografií vám umožňuje vyhledávat podle barev (což znamená odstín: většinou primární jako červená, zelená a modrá).
Pokud obraz neodpovídá vaší barevné schémě, udělejte mu odstín:
- Otevřete obrázek ve Photoshopu.
- Vytvořte novou vrstvu. Nastavte režim prolnutí na hodnotu "Barva".
- Tuto vrstvu naplňte jednou z barev z palety, nejlépe ta, která nejvíce odpovídá obrazu.
- Nastavte opacitu barvy vrstvy na 50%.
- Zahrajte si s opacitou, dokud nebudete mít dobrou rovnováhu mezi původní barvou obrázku a barevnou paletou vašeho webu.
- Tato technika funguje na fotografiích, ilustracích a ikonech - bez ohledu na velikost pixelů. (Pokud nevlastníte obraz, ujistěte se, že jste získali povolení před tím, než jej změníte. Možná jste se zlepšil jeho vzhled na vašich webových stránkách, ale pořád máte svobody s někým jiným uměním.)
Hledáte profesionální
Žádná sada barev nevypadá jako "profesionální" sama o sobě. Musíte spíše postupovat, abyste dosáhli koordinovaného, plánovaného pocitu.
Nezáleží na tom, na čem je webová stránka, publikum bude vědět, že se brát vážně.
Tipy
- Když si myslíte, že máte dobrou barevnou schéma, vyzkoušejte to alespoň po dobu jednoho týdne. Hodnocení barvy vyžaduje intuici, která staví v průběhu času. Dejte si čas, abyste plně absorbovali osobnost schématu.
- Když si myslíte, že máte dobrou barevnou schéma, nenechte to zanechat. Vaše chutě návštěvníků, stejně jako vaše, se časem mění. Udělejte si poznámku k revizi barev po čtyřech měsících. Pak se zeptat, jsou stále vhodné? Pokud ne, co se změnilo? Jaké faktory ovlivní vaši úpravu?
- Používejte brilantní barvy šetrně. Stříknutí něčeho ihned přitahuje návštěvníky tam, ale když to všude uvidí, budou bezcílně procházet.
- Někteří lidé si myslí, že barevné schémata mají úzký rozsah. Umožněte určitou volnost, aby vaše návrhy zvýšily hloubku.
- Vyvarujte se čistých primárních prvků, jako je červená, zelená, modrá a žlutá. Dejte jim nádech na skutečný charakter: červená, ale lehce fialová, modrá s nádechem zelené, "teplé" žluté s oranžovým odstínem.
- Ujistěte se, že vaše barvy fungují při vyblednutí. Pokud zvolíte červenou barvu, uvědomte si, že světle červená může být ženské a tmavě červená může vypadat jako rez nebo krev. Žlutá běží od vybledlého slunečního světla k tmavě hnědé. Tmavě modrá je tajemná a světle modrá je klidná - nebo elektrická, pokud ji překryjete.
- Uživatelé Mac nastavte obrazovku. Přejděte na "Systémové předvolby" a klikněte na "Univerzální přístup". Nastavte displej na hodnotu "Používejte stupně šedi". Také se hodí, když máte náladu na filmový noir.
- Bez ohledu na to, jak chcete, aby váš web cítil aktivní, použijte neutrální pozadí. Černá, bílá a šedá pracují dobře s téměř každým odstínem.
- Pokud chcete, aby malý text (například 14 bodů nebo méně) odpovídal velkému poli barvy, vytvořte text několik odstínů tmavších než obvykle. Tím se vyrovnají počitadla světla uvnitř znaků.
- Používejte více odstínů s méně odstíny.
- Co vypadá dobře, je intuitivní. Ale intuice je bitva mezi vaším egem, vášnivostí diváků a autoritou lidí, kteří financují projekt.
- Použijte tlumené pozadí, abyste vyložili obsah:
Napsáno výhradně pro WDD Ben Gremillion . Je nezávislým webovým designérem, který se dozvěděl, že nepružnost termínu je nepřímo úměrná počtu požadovaných funkcí na poslední chvíli.
Jak vytvoříte úspěšné barevné schémata? Co funguje a co pro vás nefunguje?