Včera jsem poslouchal podcast a všiml jsem si, že někdo položil otázku a přitom řekl: „Starý fanoušek, volající poprvé.“ Z nějakého důvodu mě to přimělo přemýšlet o Medium. Čtu zde články už dlouho, ale nikdy jsem nevložil své dva centy. Dnes je den, který se změní.

Pro začátek jsem se rozhodl napsat o něčem, co je mi blízké, o vizuálním designu (aka grafickém designu), přesněji o základních principech, s jejichž používáním jsem přišel se zkušenostmi a které považuji za nejdůležitější pro práci moje práce dobře.

Nechci článek nafouknout, proto budu stručný ke každému principu. Tématům, která si zaslouží více podrobností, možná v budoucnu věnuji celý článek.

Tak co, jste připraveni? Všechno to začíná.

#1 Bod, linie a tvar

To jsou základní stavební kameny jakéhokoli designu, bez ohledu na to, jaký. S nimi můžete vytvořit cokoli od jednoduchých ikon až po velmi složité ilustrace, to vše pomocí kombinace těchto jednoduchých prvků.

V geometrii je bod kombinací souřadnic x a y, přidejte osu z a jste ve třech rozměrech, ale pro tento článek se omezíme na dva rozměry.

Bod > čára > tvar

Pokud spojíte dva body, dostanete čáru. Čára složená z nesmírných bodů je trochu jako shluk atomů, které tvoří molekuly, které zase tvoří všechny předměty kolem vás. Pokud pak přidáte třetí bod a spojíte je, získáte tvar, v tomto případě trojúhelník, ale jak již bylo zmíněno dříve, s těmito základními prvky můžete získat téměř vše, co chcete.

Ale pro vaše oči tyto tvary ve skutečnosti neexistují, dokud k nim něco nepřidáte.

#2 Barva

Viditelné barevné spektrum

Lidské oko může vidět přes 10 milionů různých barev od červené po fialovou a od dětství se všichni učíme přiřazovat určitým barvám určité hodnoty nebo významy.

Představte si například semafory. Jsou to jen barvy, ale učíme se, že červená znamená zastavit, zelená znamená jít, žlutá znamená vykročit na koleje, protože to můžete udělat, než se rozsvítí červená. To ukazuje, že děláme velmi odlišné akce jednoduše na základě barvy, někdy aniž bychom si to uvědomovali.

Podle mého názoru je to jednoduše proto, že jsme se tyto věci naučili, ne proto, že barvy mají od přírody svůj vlastní význam. To potvrzuje i fakt, že tyto významy se mění v závislosti na kultuře, kde a kdy jste vyrůstali.

To vše znamená, že můžete přidat význam, účel a tón pouhým výběrem správné barvy, jen se musíte ujistit, že máte jasno v tom, pro koho navrhujete.

Nyní, když vidíte svůj trojúhelník, co takhle ho udělat zajímavějším.

#3 Typografie

Od trojúhelníku k písmenu A

To je velký problém a myslím si, že jeden z nejdůležitějších a nejobtížnějších pro designéra, aby to udělal správně. Nejde jen o to, co píšeš, ale jak to prezentuješ. Typografie je způsob, jakým budou vaše slova vypadat.

Se správným fontem můžete vzít nudný text a učinit jej výkonným. Ale není to jednoduché. Co je snadné, je zcela podkopat silné prohlášení pouhým výběrem špatného písma. Typografie, stejně jako barva, pomáhá definovat tón.

ČTĚTE VÍCE
Jaké ohniště je vybaveno první pecí, do které se vkládá chléb?

Většina písem je navržena pro konkrétní účely, stačí se je naučit a využít ve svůj prospěch. Některá písma jsou vhodná pro velké bloky textu, jiná pro nadpisy. Některé jsou extrémně funkční a super čisté, zatímco jiné jsou jednoduše navrženy tak, aby byly vtipné nebo aby je bylo možné použít ironicky (víte, co tím myslím).

Na výběr jsou tisíce různých písem, ale pokud nepotřebujete něco vymyšleného nebo nevytváříte něco velmi specifického, doporučoval bych vždy zůstat u klasiky. Pokud se však cítíte statečně, můžete si dokonce navrhnout vlastní písmo, i když pokud se to udělá dobře, považuji to za jednu z nejobtížnějších věcí pro návrháře. Ale pokud si myslíte, že jste připraveni na jeden úkol, na který nezapomenete, je to.

#4 Prostor

Způsob, jakým vyvážíte prostor, vytvoří nebo rozbije design, což platí zejména pro typografii.

Musíte zvážit, jak každý prvek/písmeno souvisí s ostatními, a dát jim přesně tolik prostoru k dýchání, kolik potřebují. Obvykle se tomu říká negativní mezera (kladná mezera jsou samotná písmena).

Úprava záporné mezery mezi znaky (aka kerning)

Měli byste přijmout negativní prostor jako součást svého návrhu a používat jej stejným způsobem. Prostor může být mocným nástrojem a může pomoci vést diváka návrhem. Může to být také místo pro odpočinek vašich očí.

Ale používejte to moudře, příliš mnoho místa a váš návrh bude vypadat nedokončený, příliš málo místa a váš návrh bude působit příliš přeplněně.

Pokud se naučíte najít správnou rovnováhu mezi pozitivním a negativním prostorem, můžete vytvořit.

#5 Rovnováha, rytmus a kontrast

To je, když začnete měnit spoustu jednoduchých prvků v něco zajímavého a atraktivního. Pečlivě vyvažte všechny prvky vašeho návrhu s ohledem na jejich vizuální výšku. Velký černý čtverec v pravém horním rohu posune design tímto směrem. Vykompenzujte tuto váhu nebo přesuňte čtverec na jiné místo.

Úprava vizuální váhy slov pro vytvoření rytmu a kontrastu

Způsob, jakým rozmístíte prvky na stránce, je rozhodující, protože těžší prvky pomohou vytvořit kontrast a rytmus, což umožní oku vašeho diváka procházet návrhem elegantně a bez námahy.

Existuje několik věcí, které mohou pomoci vašemu rytmu a rovnováze, a můžete si s nimi také pohrát.

#6 Měřítko

Další krok uděláme úpravou měřítka slov

Scale pomůže vytvořit nejen rytmus, kontrast a rovnováhu, ale také hierarchii. Obvykle ne všechny prvky vašeho návrhu musí mít stejnou důležitost a jedním z nejlepších způsobů, jak to sdělit, je velikost.

Teď to musí splnit svůj účel. Nepropadněte přístupu „udělej mé logo větší“ a zapomeňte na prostor, který jsem zmínil dříve.

Vezměte si například novinovou stránku. Co je na stránce největší?

Nadpisy jsou obvykle krátké. Proč? Tímto způsobem můžete rychle prolistovat stránku a zjistit, zda je tam něco zajímavého ke čtení. Pak tu máme podnadpisy, které jsou menším písmem, ale poskytují více informací o článku, a nakonec je tu samotný článek, který má nejmenší velikost písma, ale nejčitelnější velký kus textu.

ČTĚTE VÍCE
Jakým brusným papírem bych měl obrousit dokončovací tmel před lakováním?

Takže to, co říkáme, je, že velikost by měla sloužit funkci a nikdy nezapomínejte na osobu, která bude konzumovat váš návrh. V případě novin je na čase obnovit nějaký pořádek s.

# 7 Mřížka a zarovnání

Je to jako to zvláštní zadostiučinění, když hrajete Tetris a seřadíte poslední řádek, který zmizí z obrazovky.

Vytvoření určitého spojení mezi prvky tak, aby působily vyváženěji a líbivější

Mají být neviditelné, ale uvidíte je, když otevřete knihu nebo noviny. V každém případě (bez ohledu na to, co navrhujete) přichycení k mřížce vytvoří strukturu vašeho návrhu a učiní jej zábavnějším a snadněji stravitelným.

I když záměrně uděláte chaotický design, v chaosu musí být pořádek.

Zarovnání je důležité zejména pro text, existuje několik způsobů, jak jej zarovnat, ale mým zvykem je zarovnat jej doleva. Samozřejmě je vždy důležité, co a pro koho vytváříte, ale lidé obvykle čtou zleva doprava a shora dolů, takže text uprostřed nebo vpravo se čte mnohem hůře.

#8 Rámování

To je klíčový pojem ve fotografii, ale platí to i pro vizuální design.

Kdekoli použijete obrázek, ilustraci nebo cokoli jiného, ​​zarámujte to správně a uvidíte rozdíl.

Přerámování kompozice pro přidání zajímavosti a dalšího prvku

Zkuste nasměrovat své oko na to, co je důležité, upravte velikost/oříznutí obrázků, aby váš předmět vynikl, nebo aby vaše sdělení posílilo. Nejdůležitější je zde příběh a jak ho správně vyprávět.

Po tom všem, pokud máte pocit, že vám něco zajímavého chybí, můžete si pohrát s.

# 9 Textury a vzory

Testování textury se šumem

Osobně vnímám textury a vzory jako doplňky, nemusíte je používat a můžete se bez nich obejít, ale někdy dokážou téměř tím, že je používají, vytvořit váš design nebo přidat ten kroužek zajímavosti, který chyběl.

Textury dnes nejsou tak módní jako kdysi, ale s nimi můžete svému designu přidat nový rozměr, udělat jej trojrozměrnějším a hmatatelnějším.

Textury nemusí být v samotném návrhu, pokud potřebujete něco vytisknout, vyberte správný papír, přidejte věci jako zkosení, ražbu nebo UV lakování a váš návrh může přejít od nevýrazného v něco krásného. Ale vyberte si jednu, nezblázněte se se speciálním lemováním.

Vzory se vždy zabývají opakováním a lze je téměř považovat za textury, v závislosti na tom, jak je používáte. Věřím, že je lze použít hlavně k zavedení rytmu a dynamiky do plochého designu a jako způsob kompenzace přebytečného negativního prostoru.

V neposlední řadě a skutečně to, co považuji za svatý grál vizuálního designu, je.

#10 Vizuální koncept

Je to myšlenka za vaším designem. Co tím myslíte a jaký je skrytý význam za tímto povrchním obrazem.

:)

Ideální lampa. klišé, já vím

To je to, co odlišuje skvělý design od něčeho, co si můžete stáhnout ze skladu.

Navrhujte s myšlenkou, s cílem a vždy mějte nápad, který spojuje vše dohromady. Pečlivě vybírejte fonty pro tento účel, přemýšlejte o tom, jak každá malá část vašeho návrhu sleduje tento základní koncept. Konzistence je nejdůležitější.

ČTĚTE VÍCE
Jaké typy žárovek existují pro osvětlení bytu?

Pokud je váš koncept silný, budete jej schopni obhájit a prodat nápad klientovi/šéfovi nebo komukoli, komu ho budete ukazovat.

Také promyšlený design vydrží roky. Módní hipsterské věci jsou cool a cool, jako kníry a kostkované košile, ale mají datum spotřeby. Opravdu si myslím, že dobrý design NEsleduje trendy, ale vytváří je.

Nyní je máte, „mých“ 10 zásad pro vytváření dobrého designu. I když si myslím, že #10 je nejdůležitější, měli byste věnovat pozornost všem ostatním zásadám a ujistit se, že jste své umění dotáhli k dokonalosti. Možná máte dobrý nápad, ale myslím, že je také potřeba vědět, jak ho realizovat (nebo znát někoho, kdo to za vás udělá).

Říká se, že nemůžete soudit knihu podle obalu, ale to je to, co většina lidí ve skutečnosti dělá. Pokud není obsah knihy dostatečně dobře zobrazen na obálce, určitě to ovlivní úspěch.

Jako poslední poznámku bych měl zmínit: Jsou samozřejmě i další věci, které v projektu/designu beru v úvahu, jako porozumění publiku a toho, čeho s ním chceme dosáhnout, ale nezařadil jsem je do seznamu principy, protože tato „omezení“ považuji za důležitou součást definování vizuálního konceptu. Nápad může být skvělý, ale pokud nesplňuje požadavky projektu, dříve nebo později selže.

Doufám, že tento seznam shledáte užitečným, i když jste jej již znali. Používám tento soubor principů stejně intenzivně jako Staedlerova pera a bylo pro mě zajímavým cvičením dekonstruovat své návrhy na jakési „stavební bloky“.

Neváhejte a zanechte svůj názor, jsem vždy otevřený zdravé diskusi.

Abychom se naučili design, přihlásili jsme se do kurzu Design 101 na trydesignlab.com. První hodiny byly věnovány vizuální hierarchii. Přeložili jsme jeden z nejlepších článků na toto téma z 99designs.com.

Překlad ze stránky pro začínající podnikatele „Miluji individuální podnikatele“

Nejprve tam byly kamenné tabulky, papyrus a papír. Pak se objevily počítače a tablety. I přes vývoj technologií zůstává úkolem konstruktéra jasná a přesná organizace informací. Ale jaký je nejlepší způsob, jak to udělat??

Tato otázka je aktuální zejména nyní, kdy rozmanitost zařízení nutí designéra přemýšlet o několika stránkách současně. Tváří v tvář obrovskému množství informací a krátkým intervalům pozornosti vyvinuli designéři 6 principů, které nasměrují pohled uživatele na to nejdůležitější.

tito 6 Principy vizuální hierarchie Pomůže vám navrhnout vše od brožur po aplikace a zajistí, že vaši uživatelé budou mít z konzumace obsahu pozitivní zkušenost.

Clay tablet a iPad

1) Vzory skenování stránek

Ve všech kulturách lidé čtou informace shora dolů a ve většině kultur zleva doprava. To je užitečné vědět při vytváření návrhu, ale ve skutečnosti je úkol mnohem složitější.

Nedávné studie ukázaly, že před čtením lidé skenují stránku, aby zjistili, zda je pro ně zajímavá nebo ne. Vzory skenování mají obvykle jeden ze dvou tvarů, „F“ nebo „Z“.

Vzor ve tvaru F platí pro tradiční stránky s velkým množstvím textu, jako jsou články nebo příspěvky na blogu. Uživatel naskenuje stránku shora dolů na levé straně. Pokud najde zajímavá klíčová slova v nadpisech zarovnaných doleva nebo na začátku vět, pokračuje ve čtení zleva doprava. Výsledkem je, že tvar připomíná písmeno “F” (nebo “E” nebo něco s ještě vodorovnějšími čarami, ale výraz “F” je již zaveden).

ČTĚTE VÍCE
Proč dáváte alobalové kuličky do pračky?

Jak to lze uplatnit? Umístěte důležité informace na levou stranu, použijte krátké, zvýrazněné nadpisy, odrážky a další prvky k upoutání pozornosti a oddělení informací.

“Z” vzor používá se ve všech ostatních případech, v reklamě nebo na webových stránkách, kde informace nemusí být nutně prezentovány ve velkých blocích textu. Uživatel skenuje horní část obrazovky, kde se obvykle nacházejí důležité informace. Jeho pohled se poté přesune diagonálně do protějšího rohu a prohlédne spodní část obrazovky.

Návrháři obvykle vytvářejí stránky, které přesně odpovídají tomuto chování, a umisťují nejdůležitější informace do rohů a všeho ostatního podél horní a spodní části obrazovky a úhlopříčky, která je spojuje. Na webu Build Conference 2010 (níže) jsou důležitými prvky logo (levý horní roh), tlačítko „Zaregistrovat se“ (pravý horní roh) a seznam řečníků (dole). Všechny tyto prvky jsou strategicky umístěny v klíčových bodech písmene „Z“.

velikost 2

Tento princip je docela jednoduchý: lidé si nejprve přečtou velký text. Pokud jste si v níže uvedeném příkladu všimli slova „výkon“ místo „praskání“, měli byste kontaktovat specialistu na psychologii vnímání. Pravděpodobně si můžete vydělat pěkné peníze tím, že budete dělat testy jako někdo s velmi vzácnou anomálií.

Tento princip je tak silný, že má přednost před pravidlem shora dolů. V předchozím příkladu slovo „praskání“ převažuje nad „časem jednat“ kvůli své velikosti a poloze vlevo (zde přichází na pomoc pravidlo „zleva doprava“). Ale v níže uvedeném příkladu čteme text „Boj za rovnost na stezce kampaně“ velkým písmem před textem umístěným také přímo nad ním vlevo, „Volby 2012“.

„Volby 2012“ je obecné téma a autor se rozhodl, že název článku je pro čtenáře zajímavější, a proto zvětšil jeho velikost.

3) Prostor a hustota

Dalším způsobem, jak upoutat pozornost, je dát svému obsahu dostatek prostoru k dýchání. Pokud je kolem tlačítka hodně negativního prostoru nebo hodně prokladů v textu, pak si těchto prvků všimnete jako první.

Jak můžete vidět na příkladu níže, prostor může být elegantní alternativou nebo doplňkem využití velikosti. Hlavní fráze „Notre agence vous accompagne. “ je napsána malým písmem, ale je obklopena dostatkem místa, což signalizuje její důležitost. Níže uvedené fráze, „Le Compendre“, „Le Réaliser“ a „Le Partager“, jsou orámovány, takže na bílém pozadí ještě více vyniknou.

Když mluvíme o hustotě z hlediska vizuální hierarchie, mluvíme o celkovém uspořádání prostoru, textu a dalších detailů na stránce. Tento princip dobře ilustruje následující příklad:

Na prvním obrázku má slovo „sport“ silnější vizuální hierarchii než „badminton“, protože je umístěno výše, větší a výraznější. Na druhém obrázku mají tato slova přibližně stejný význam díky černému obdélníku, který zvýrazňuje „badminton“. Na třetím obrázku čmáranice zakrývá slovo „Sport“, ale nikoli „badminton“, což má opačný účinek a „badminton“ se v hierarchii objevuje výše. Takový obrat je těžké předvídat, takže designéři se snaží zaujmout integrovaný přístup k využití prostoru.

ČTĚTE VÍCE
Co je zakázáno při práci s dielektrickými rukavicemi?

4) Typ písma a kombinace písem

Výběr písma má významný vliv na vizuální hierarchii. Hlavními charakteristikami písma jsou váha, tedy tloušťka tahů, které tvoří písmena, a styl, ať už patkový nebo bezpatkový. Důležité jsou i další charakteristiky, jako je kurzíva.

Podívejte se, jak typografie ovlivňuje hierarchii a slovosled na webu The Tea Factory. Hlavní důraz je kladen na frázi „dokonalé čaje, které vás zahřejí“. Ale rozdíl ve stylu písma, použití kurzívy ve frázi, kromě toho, jak jsou slova uspořádána, činí text dynamičtějším. Výzva k akci „Prohlédněte si náš výběr“ se od hlavního textu liší velikostí a okolním prostorem.

V některých případech musíte prezentovat různé informace jako stejně důležité. Pokud jej napíšete písmem stejné velikosti a stylu, můžete dosáhnout ekvivalence, ale design se stane monotónním. Vyhnete se tomu kombinací fontů, jako na obálce magazínu Trendi. Všech pět frází podél okrajů stránky je stejných ve vizuální hierarchii, liší se však dvěma dobře kombinovanými fonty – tučným patkovým a bezpatkovým písmem, ale tenkým a vysokým.

5) Barva a odstín

Tento princip je také jednoduchý: světlé barvy vyniknou proti tlumeným nebo šedým tónům, zatímco světlé odstíny vypadají více „vzdáleně“ a jsou ve vizuální hierarchii níže než tmavé a syté. Where They At vytváří kontrast použitím žluté a barevné fotografie na černobílé mřížce pro nejlepší efekt.

Guggenheim používá barvy na svých webových stránkách ke zvýraznění důležitých informací o umístění muzea, probíhajících výstavách a speciálních projektech.

Naproti tomu web Whitney Museum používá jedno písmo, styl a černou barvu, ale zavádí hierarchii pomocí odstínů šedé. Fráze „Cory Arcangel on Pop Culture“ je ve vizuální hierarchii níže než „New on Whitney Stories“ díky svému umístění a světlejšímu odstínu, který méně vyniká na bílém pozadí.

Barva je zvláště důležitá v mobilním designu, kde malá obrazovka omezuje možnost používat další principy vizuální hierarchie, jako je velikost a prostor. V aplikaci Grainger Industrial Supply je tlačítko „Pokračovat k pokladně“ červené, takže se odlišuje od zbytku stránky. Tlačítko Zúžit výsledky vyhledávání je naproti tomu šedé a je na stejné úrovni jako prvky, jako je vyhledávání a odkazy na produkty.

Design aplikace Grainger (prostřednictvím codrops)

6) Směr

Rozvržení stránky se obvykle vytváří pomocí mřížky svislých a vodorovných čar, což usnadňuje pochopení informací. V takovém systému existuje další způsob, jak ustavit hierarchii – rozbít mřížku. Text umístěný podél křivky nebo diagonálně automaticky vynikne od ostatních prvků umístěných na mřížce a přitáhne pozornost. Tento princip je efektivně využíván v reklamě, jako tento plakát od Frost Design.

* * *
Pokud chcete zlepšit své designové dovednosti, přihlaste se k odběru naší stránky VKontakte. Informace o každé lekci zveřejňujeme na trydesignlab.com pod tagem #design101@iloveip.