Plné pochopení kontrastu v designu
Obvykle je předmět kontrastu vyhrazen pro začátečníky. Knihy budou říkat, že "černobílé mají kontrast, červené a oranžové" - ale je toho mnohem víc.
Knihy pro začátečníky se obvykle dotýkají pouze barevného kontrastu, ale co se týká kontrastu velikosti a tvaru? Často nejjednodušší způsob, jak povědět amatérský návrhář od profesionálního, je podívat se na jejich použití kontrastu.
Vytvářením struktury, která je důležitá pomocí velikosti, tvaru a barvy, poskytuje čtenáři stránku náraz a čitelnost.
V tomto příspěvku se podíváme podrobně na kontrast, zkoumáme velkou typografii, funky tvary, jasné rozdíly, snímky a jak se správně hodí dohromady pomocí kontrastu pro dobrý uživatelský zážitek.
Úvod do kontrastu
Kontrast může být definované jako "rozdíl v vizuálních vlastnostech, který činí objekt (nebo jeho reprezentaci na obraze) odlišitelným od ostatních objektů a pozadí." V prosté angličtině, která by mohla být popsána na své nejzákladnější úrovni jako "věci, které se navzájem liší. "
Pro designéry ve všech krocích praxe, ale především webových designérů, je kontrast v koreně téměř všeho. Neustále se snažíme vytvářet hierarchie významu, přitahovat lidi do určitých oblastí stránky a komunikovat jasnou a stručnou zprávu v samém srdci naší práce. Vytváření vztahů mezi různými prvky designu je jen nejdůležitější věcí, kterou můžete udělat. Pravděpodobně jste to již udělali hodně, vědomě nebo ne.
Zřejmé příklady kontrastu jsou černobílé, velké a malé, rychlé a pomalé, silné a tenké. Opozity jsou nejjednodušší způsob, jak pochopit, jaký kontrast je, ale při použití kontrastu s konstrukčními díly to nikdy není tak černé a bílé. Pokud jste se divili, je to pravé místo, z něhož pochází přísloví o situaci, která je "černobílá", což také vede k tomu, že něco znamená "šedá oblast". V designu často porovnáváme věci, které jsou odlišné, ale nikoli opak, například tlačítka H1 a h1 nebo tlačítko "přidat do košíku" a tlačítko "check out". Toto je místo, kde hrají vyšší úrovně kontrastu.
Podívejme se na různé typy kontrastu a některé příklady toho, jak jsou používány při tvorbě webových stránek.
Barevný kontrast
Nejběžnějším příkladem všech je to, že to všechno začíná. Pokud jsou dvě barvy navzájem odlišné (např. Černobílé), mají vysoký kontrast, zatímco pokud jsou velmi podobné (červené a oranžové), mají nízký kontrast.
TekRoc používá velmi jasný barevný kontrast tím, že překrývá jasný a živý obraz na vrcholu velmi tmavého pozadí. Jasně oranžová a modrá jasně vyčnívají a oko je okamžitě přitahováno k nim nad všechny ostatní věci na stránce.
Tim Van Damme skvěle využívá barevného kontrastu v designu webu GoWalla. Nejen, že vícebarevný okraj v horní části stránky vystupuje a vytváří vizuální zájem tím, že se liší od bledého pozadí, ale přidal do textů na tlačítcích také extrémně jemné stíny 1px. Mírně tmavší pomeranč pomáhá vytvářet kontrast mezi bílým textem a oranžovým pozadím.
Envato jsou mistři jemného kontrastu a trend používání 1px hranic pro toto může být pravděpodobně položen na ně více než kdokoliv jiný. Všechny jejich stránky obsahují více okrajů jednotlivých pixelů, které vytvářejí kontrast mezi sekcemi. Na snímku obrazovky nad dvěma obsahovými oblastmi bylo možné rozdělit pouze prostor nebo jediný řádek, avšak pomocí dvou řádků (jednoho tmavého a jednoho světla) vytváří jemný kontrast mezi těmito dvěma částmi, který je mimořádně účinný.
Velikost kontrastu
Další nejběžnější formou kontrastu je použití velikosti. Něco velkého vedle něčeho malého obecně naznačuje, že větší položka je mnohem důležitější. To je pravda, říkáme, že velikost je důležitá!
MadeByWater je designové portfolio Jordana Vitanova. Používá kontrastní velikost s extrémně velkou typografií, aby okamžitě předal citát Bruce Lee, který definuje, proč se rozhodl označit jméno MadeByWater.
28Thiers je atraktivní upmarket bar ve Francii. Jejich webové stránky skvěle využívají kontrastní velikost, aby okamžitě přitáhli pozornost k velké fotografii Martini s různými přísadami, které ji obklopují. Je to okamžitě jasné, že je to nejdůležitější prvek na stránce a designér chce, abyste se na tento obrázek podívali a prodali se tím, že je to mimořádně elegantní zařízení.
SlideScreen na svém webu vícekrát využívá kontrastu velikosti. Kromě toho, že mají svůj produkt zobrazen s velkým snímkem obrazovky, používají také velmi velká tlačítka pro své primární výzvy k akci. Chtějí, abyste sledovali video svého produktu v akci a pak vás chtějí stáhnout. Jedná se o nejdůležitější prvky stránky, takže jsou podstatně větší než ostatní věci, které je obklopují.
Tvar kontrastu
Kontrast tvaru znamená, že se věci vyznačují svým rozdílem ve fyzickém tvaru ve srovnání s jinými věcmi na stránce. Na své nejzákladnější úrovni může být použita ve věcech, jako je přidání zaoblených rohů ke knoflíkům, ale na extrémnější úrovně může přitahovat mnohem větší pozornost.
Anebstar používá tvarový kontrast, aby ukázal tři důležité obrázky v hlavičce. Protože většina věcí na webu je obdélníková, jedním z nejjednodušších způsobů, jak dosáhnout tvarového kontrastu, je použít kruh. Tento příklad má samozřejmě také smíšený kontrast, ale jasně vidíte, jak kruhové prvky vyčnívají ze všech ostatních stránek.
Carbonmade je úžasné místo se skutečnou kombinací nádherných ilustrací a dobře prezentovaného obsahu. Jednoduché přihlašovací tlačítko by zde fungovalo, ale velikost a barevný kontrast by zřejmě nebyly dostatečně odlišné od rušného pozadí. Přidání přátelského chobotnice za tlačítkem opravdu dává tomuto rozdílu ve tvaru, aby nakreslil oko přímo na něj.
WireframePlus využívá jednoduchý, ale velmi efektivní bit kontrastního tvaru, který zvýrazňuje cenu svých služeb. Chtějí, abyste si přečetli jejich obsah, ale především se pokoušejí prodat za skvělou cenu tím, že za sebou umístíte velký kruh.
Pozitivní kontrast
Vytváření kontrastu v polohování je velmi čistý způsob, jak vytvořit hierarchii prvků čistě pomocí různých zarovnání. V poslední době se tato technika stala oblíbenou pro lidi jako Elliot Jay Stocks, kteří ji využívali na svém nejnovějším portfoliu.
Elliot Jay Stocks používá detailní tabulku pro definování zarovnání všech prvků na svém webu. Pozornost je volána na konkrétní oblasti tím, že jsou odsazeny doleva nebo doprava. Na tomto konkrétním snímku úvodní odstavec skutečně vyčnívá, protože je zarovnán nejdále doleva, kde oko nejdřív čte něco. Tento typ zarovnání "inspiroval" mnoho dalších návrhářů za posledních dvanáct měsíců, aby vytvořili návrhy s pozičním kontrastem ve stejném stylu.
SimpleBits je značka, kterou Dan Cederholm pracuje, můžete ho znát z projektů, jako je Dribbble . U prvních zobrazení se zdá, že stránka SimpleBits nemá žádný poziční kontrast, nicméně při spuštění posouvání se vše zřetelně vyřeší. Tam, kde někteří lidé používají pevný obrázek na pozadí, aby vytvořili elegantní stylový efekt, Dan si své logo a navigaci zcela upevnil na pozici, takže bez ohledu na to, kam se pohybujete, zůstávají vždy na stejném místě na obrazovce. To je skvělý příklad nestandardního polohového kontrastu.
SquaredEye je designový obchod provozovaný Matthew Smith a stránky případových studií ve svém portfoliu dělají fantastické využití pozičního kontrastu. Musíte vidět celou stránku, abyste skutečně získali tento nápad, ale v podstatě Matthew pečlivě vytvořil konkrétní umístění pro každou část stránky. To vytváří fantastický kontrast mezi sekcemi a vytváří značné vizuální zájmy pro čtenáře, aniž by vůbec bylo rušivé.
Závěr kontrastu
Existuje mnohem více kontrastu, než jen "světlo a tma" - je to jeden z nejdůležitějších principů designu a téměř nikdy nebudete mít příliš mnoho z toho, za předpokladu, že jej budete používat správně.
Přijíždění vašich návrhů do další úrovně neznamená to, že byste našli další vozový vůz, který by se snažil použít zaoblené rohy a vše pro stojící stíny, jde o nalezení lepších a účinnějších způsobů komunikace zprávy za projektem.
Podrobné prozkoumání kontrastu a využití jeho plného potenciálu je jedním z nejlepších způsobů, jak to udělat.
Co myslíš? Kolik pozornosti zaplatíte na kontrast v rámci svých návrhů? Je to něco, o čem přemýšlíte nebo je to něco, co přirozeně přichází?