www.slu.cz/opf/cz PRINCIPY GRAFICKÉHO DESIGNU Doc. Ing. Martin Klepek, Ph.D. Mediální marketing – přednáška 1 PROČ SE VĚNOVAT TÉTO OBLASTI? * V dnešní době existuje mnoho nástrojů pro tvorbu vizuální komunikace značek, které nahrazují činnosti, jež jsme před několika málo lety museli zadávat grafikům. * Neznamená to, že by práce profesionálního grafika ztratila hodnotu, nebo že bychom se bez jeho pomoci obešli. Ba naopak. Posun v odvětví umožňuje profesionálům řešit smysluplné projekty s vysokou přidanou hodnotou. * Zpracovat leták na propagační akci, připravit příspěvek na Instagram nebo vytvořit banner pro online reklamní kampaně by si měl každý marketér vyzkoušet aby porozuměl práci grafika. * SLEZSKÁ UNIVERZITA PRINCIPY GRAFICKÉHO DESIGNU 1.Kontrast 2.Opakování 3.Zarovnání 4.Proximita 5. SLEZSKÁ UNIVERZITA C-R-A-P stands for Contrast, Repetition, Alignment, and Proximity. Click here to learn more about CRAP KONTRAST SLEZSKÁ UNIVERZITA Velikost Tvar Odstín Barva Proximita KONTRAST SLEZSKÁ UNIVERZITA ilustrace_07 ilustrace_09 Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu KONTRAST * Kontrast mezi jednotlivými elementy dává prezentaci vyniknout. K ukázce nám nejlépe poslouží opět příklad (předchozí snímek). Prvky na návrhu jsou pěkně seskupeny dohromady, zároveň jsou výrazně zarovnány a dobře použito je i šipek a odrážkového seznamu. SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu KONTRAST * Ačkoliv vidíme dobrou práci s typografií a zajímavého kontrastu máme již docíleno efektivní prací s velikostmi a řezy písma, pro některé účely by mohl být takovýto design poněkud plochý. Přidáním barevného kontrastu učiníme návrh výraznějším a upozorníme na důležité části prezentace. * * SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu KONTRAST * Všimněme si ještě dalšího kontrastu: obě šipky v návrhu směřují k symbolu potvrzení v kruhu, který nám zasílá jednoznačnou vizuální zprávu. Pro přidání ještě většího kontrastu je ideální, aby barva těchto prvků byla také změněna. * * SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu ilustrace_11 PROXIMITA * Proximita, neboli blízkost, znamená seskupování elementů dohromady tak, aby vedly čtenáře k různým aspektům vizuálního sdělení. * * Grafický design může mít mnoho čistého prostoru, avšak když prvky nejsou seskupeny správně, čistý prostor bude mít minimální efekt. SLEZSKÁ UNIVERZITA SLEZSKÁ UNIVERZITA • You will read this first - Graphic Design - Graphic Design Forum PROXIMITA * Tato zásada říká, že související prvky by měly být seskupeny tak, aby byly vnímány jako skupina, a ne jako několik nesouvisejících prvků. * Publikum bude předpokládat, že položky, které nejsou v designu blízko sebe, spolu úzce nesouvisí. Publikum bude mít přirozeně tendenci seskupovat podobné položky, které jsou blízko sebe, do jednoho celku. SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu PROXIMITA SLEZSKÁ UNIVERZITA • ilustrace_01 Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu PROXIMITA * Vizitka vlevo má mnoho čistého prostoru – její elementy jsou organizované a můžeme říct, že vizitka není „přeplácaná“. Prvky na ní však nejsou seskupeny logicky, takže konečný efekt je velmi slabý. Čtenář je nucen vizitku přezkoumat vícekrát. * Oproti tomu má karta napravo mnohem příjemnější provedení. Čtenář letmým pohledem získá veškeré informace. Seskupení elementů na pravé vizitce je logičtější a přehlednější. SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu PROXIMITA SLEZSKÁ UNIVERZITA Obsah obrázku text, snímek obrazovky, vizitka, Písmo Popis byl vytvořen automaticky Obsah obrázku text, snímek obrazovky, Písmo, design Popis byl vytvořen automaticky PROXIMITA SLEZSKÁ UNIVERZITA An example of the proximity principle in Unilever's logo Logo Unilever je dobrý příklad proximity. Logo vnímáme jako celek ne jako jednotlivé individuální tvary. PROXIMITA SLEZSKÁ UNIVERZITA Naše mysl zároveň velmi ráda sleduje určité vzory (patterny) které v našem okolí vidíme. PROXIMITA * Využití prázdného místa (tzv. White Space) bývá často silnou designérskou zbraní. * Záleží samozřejmě vždy na formě prezentace. Všeobecně ale platí, že pokud chceme vytvořit jednoduché, přímé sdělení, je vhodné odlišit se nějakým způsobem od standardu. * V záplavě informací, které můžeme v řadě grafických návrhů v současné době nalézt, je čistý prostor přesně to, co dělá prezentovanou zprávu jasnější a srozumitelnější SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu PROXIMITA * Prázdný prostor poskytuje místo písmu nadpisu, grafickým prvkům i seskupenému textu. * Navíc může být také velmi dobrou formou kontrastu. Jednoduchý závěr zní: Nebojte se prázdného místa ve svém designu. * SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu PRINCIP OPAKOVÁNÍ * Stejně jako použití opakujících se slok v písni, tak i opakující se prvky v grafickém designu jsou přirozeně přitažlivé. * * U příkladu níže je použit jak běžný odrážkový seznam, tak i prvek zaobleného čtverce opakující se napříč designem celého letáku. SLEZSKÁ UNIVERZITA Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu PRINCIP OPAKOVÁNÍ SLEZSKÁ UNIVERZITA ilustrace_05 Zdroj případovky: https://www.shockworks.eu/cz/5-nejdulezitejsich-principu-grafickeho-designu PRINCIP OPAKOVÁNÍ * Opakování těchto geometrických elementů vytváří odvážnější projev. * * Obecně se tedy dá říci, že opakování dodává konkrétním prvkům v designu důraz a přitahuje na ně čtenářovu pozornost. * SLEZSKÁ UNIVERZITA VIZUÁLNÍ IDENTITA ZNAČKY SLEZSKÁ UNIVERZITA * Prvkem bez kterého se žádná značka neobejde je vizuální identita. * Firma musí rozhodnout jaké logo, barvy, obrázky, tvary, písmo, ikony, ilustrace a jiné bude používat při marketingové komunikaci se zákazníkem. * Vizuální identita je jednou ze složek značky jako celku. * * Brand Identity Design - Leigh Williams Design VIZUÁLNÍ IDENTITA ZNAČKY SLEZSKÁ UNIVERZITA * Součástí konceptu vizuální identity jsou také symboly značky, které usnadňují zákazníkům značku rychle a efektivně rozpoznat v konkurenci jiných vizuálních sdělení. * Symboly značky ovšem nejsou pouze grafické povahy. * VIZUÁLNÍ IDENTITA ZNAČKY SLEZSKÁ UNIVERZITA • Obsah obrázku text, snímek obrazovky, Webové stránky, Webová stránka Popis byl vytvořen automaticky SYMBOLY ZNAČKY SLEZSKÁ UNIVERZITA Symboly značky aneb společná řeč výzkumníka s grafikem | by Lumír Kajnar | Medium LOGO SLEZSKÁ UNIVERZITA * Reprezentuje vizuální ztvárnění grafického prvku, který může obsahovat tvary, objekty, text nebo symboly. * Zásadní pro budování identity značky je rozpoznatelnost loga. * Dnes již existují webové stránky, kde tvorbu loga provede umělá inteligence za vás. Na základě parametrů, které zadáte vygeneruje během několika vteřin nové logo. * * • * Inspirace a tip: Brandmark LOGO SLEZSKÁ UNIVERZITA Další inspirace a tip: Hatchful a Tailorbrands BARVY SLEZSKÁ UNIVERZITA Zdroj: https://www.ilincev.com/psychologie-barev-jak-spravne-vybrat-barvu-loga-tlacitka-nebo-reklamy BARVY SLEZSKÁ UNIVERZITA * Inspirace a tip: Huemint * Huemint je generátor barevných schémat, který využívá umělé inteligence. Stačí generovat a případně oblíbenou barvu uzamknout a hledat k ní další komplementární barvy. * * * • * Obsah obrázku jídlo Obsah vygenerovaný umělou inteligencí může být nesprávný. BARVY SLEZSKÁ UNIVERZITA * Výzkum ukázal, že modrá se používá v logu více než 75% značek kreditních karet v logu 20% značek rychlého občerstvení. * Mezi Fortune 500 společnostmi také dominuje modrá a na druhém místě je červená. * * * * • * Obsah obrázku text, snímek obrazovky, Barevnost, Písmo Obsah vygenerovaný umělou inteligencí může být nesprávný. PÍSMO SLEZSKÁ UNIVERZITA * Písmo je dalším důležitým komponentem identity značky. * Budete ho používat na webu, v reklamě, v prezentacích na vizitkách nebo ve výroční zprávě. Všude chcete být konzistentní a budovat jednotnou image značky. * Rozhodnout se budete muset nad tím, zda chcete písmo patkové či bezpatkové. * Bezpatkové je vhodné pro nadpisy a slogany, patkové spíše do souvislého textu jako jsou knihy. • * * * • * PÃsma - patkové vs bezpatkové Zdroj: http://blog.pari.cz/96/patkove-vs-bezpatkove-pismo PÍSMO SLEZSKÁ UNIVERZITA * Inspirace a tip: Fontjoy * Webová stránka Fontjoy je dalším z řady generátorů, které mohou výrazně usnadnit práci při přípravě vizuální identity. * Spojí k sobě tři typy písma pokud potřebujete pro nadpis, podnadpis i text různé fonty. * * * * • * SHRNUTÍ SLEZSKÁ UNIVERZITA * V přednášce jsme si představili základní principy grafického designu. Hovořili jsme o proximitě, tedy blízkosti jednotlivých prvků a jejich uspořádání. Dále o zarovnání, které může mít vliv na celkové vnímání vizuálu. Opakování byl další princip, kterým můžeme grafiku vylepšit a osvěžit své návrhy. Kontrast používáme pro zdůraznění hlavních prvků designu. Může to být odlišením velikosti nebo barvy prvku. * Následně jsme si vysvětlili, co je vizuální identita značky a jak zapadá do celkové koncepce identity značky. Víme, že ji tvoří logo, písmo, barvy, tvary ale také název. • * www.slu.cz/opf/cz DÍKY ZA POZORNOST