Obsah
Úplný průvodce základy vizuálního designu.
Otázka za milion dolarů: jaké je tajemství dobrého designu?
Můžeme o tom filozofovat, ale obecně řečeno, příslovečné "tajemství" dobrého designu spočívá ve způsobu, jakým uspořádáte vizuální prvky ve vztahu k plátnu a mezi sebou navzájem. V podstatě jsme právě popsali design rozvržení. Který, když se nad ním zamyslíte, je všude, kam se podíváte.
Vezměme si například rozvržení časopisů. Jejich design se řídí klasickým mřížkovým systémem (za chvíli se o mřížkách dozvíme vše). Vše je obvykle zarovnáno vlevo, vpravo a dole. Zejména sloupce mají výrazné zarovnání na šířku (justified), díky němuž je stránka nejen vizuálně přitažlivá, ale také snadno čitelná a autoritativní. Velké nadpisy přitahují pozornost diváka.pozornost, zatímco podnadpis je kontrastní a vytváří vizuální hierarchii informací.
Linda Gaom, Behance
Díky všem těmto vlastnostem je design stránky čistý, strukturovaný a snadno čitelný a je v souladu s tipy, o kterých budeme mluvit příště. Nejprve si však řekněme více o samotném designu rozvržení.
Co je návrh rozvržení?
Návrh layoutu se týká uspořádání grafických prvků s cílem upoutat pozornost čtenáře a předat mu určité sdělení vizuálně přitažlivým způsobem.Nemluvíme tu tedy o designu loga, ale o designu tiskovin, jako jsou noviny, časopisy, plakáty a jejich digitální protějšky, stejně jako o designu webu, aplikací nebo UX/UI.
Slovo "layout" nám napovídá mnohé. Znamená uspořádání předem určených prvků na stránce.
Když je rozvržení efektivní, vypadá dobře a vede diváka k pochopení sdělení, které se design snaží předat. Porozumění rozvržení je proto klíčem k vytváření poutavých, efektivních, uživatelsky přívětivých a příjemných kompozic.
Pokud rozvržení nepředává publiku dobře své sdělení, jinými slovy, "nečte se dobře", bude design neúčinný bez ohledu na to, jak módně vypadá. V oblasti designu rozvržení je obsah nadřazen trendům a trikům.
Účel návrhu rozvržení
Rychlé předání zprávy
To je klíčové. Návrh rozvržení vytváří vztah mezi grafickými prvky, aby bylo dosaženo plynulého pohybu očí pro maximální účinnost a dopad.
Vytvoření rovnováhy
Používání principů rozvržení je nejjednodušší způsob, jak vytvořit pocit rovnováhy a symetrie ve vašich designových projektech, aniž by se staly nudnými.
Vytvoření soudržnosti
Rozvržení vám pomůže uspořádat mnoho prvků vašeho návrhu snadno stravitelným, soudržným a logickým způsobem.
Vytvářet krásu
Vyváženost a struktura přirozeně vytvářejí krásu. Pokud je návrh rozvržení proveden správně, stane se pro diváka automaticky vizuálně přitažlivým. Čím méně úsilí musí divák vynaložit, aby sdělení pochopil, tím atraktivnější se mu váš návrh bude zdát.
Designér Frank Philippin pro svou knihu "I Used to Be a Design Student: Then - Now." Zdroj: DesignBoom
Prvky návrhu rozvržení
Text
To se týká nejen těla textu nebo odstavců, ale také nadpisů, podnadpisů, záhlaví a zápatí. Výběrem typografie, barvy a velikosti dosáhnete různých efektů, které ovlivní to, jak se vaše rozvržení přenese na vaše publikum.
Obrázek
Nejčastějšími typy obrázků jsou fotografie, ilustrace nebo infografiky.
Tvary
Tvary mohou být geometrické, které jsou velmi hranaté, nebo organické, napodobující svět přírody. Mohou být také abstraktní. Abstraktní tvary jsou v posledním roce velmi módní, protože je weboví designéři začleňují do složitých a rozlehlých kompozic.
Tvary mohou nahradit obrázek. Nebo je lze použít k přidání grafických prvků na stránku, zvýraznění textu nebo vymezení prostoru mezi jinými vizuálními prvky.
Viz_také: Jak odstranit pozadí ve PhotoshopuBílý prostor
Každý návrh rozvržení bude obsahovat určitý prostor, který umožní vašim prvkům dýchat a vyniknout.
Zlaté zásady návrhu rozvržení
Všimněte si, že zásady návrhu rozvržení se v mnohém řídí základními principy designu, jako je používání barev určitým způsobem, typografie, opakování, kontrast, hierarchie a vyváženost.
Zásada č. 1. Používejte mřížky
Mřížky pomáhají návrhářům umístit různé prvky designu, jako je text a obrázky, tak, aby vypadaly souvisle a snadno se sledovaly.
Poskytují pocit pořádku, zabraňují tomu, aby se prvky navzájem přebíjely, a co je nejdůležitější, mřížky také korigují zarovnání. Vaše práce tak působí čistěji a profesionálněji.
Zdroj: hgmlegal.com
Anatomie mřížek
Možná si myslíte, že jde jen o svislé a vodorovné čáry, ale mřížka se skládá z několika částí. Ve skutečnosti z mnoha. Zde je nejdůležitější terminologie, kterou potřebujete znát v základní mřížce:
- Formát je celá plocha vašeho konečného návrhu. Pokud tedy navrhujete něco pro tisk, formátem je stránka, a pokud jste webový designér, formátem je webová stránka nebo okno prohlížeče.
- Marže jsou záměrné prázdné prostory mezi formátem a designem.
- Průtočná potrubí jsou vodorovné čáry, které rozdělují vaše rozvržení na paralelní části. Flowlines pomáhají s čitelností vašeho návrhu a vedou čtenáře ke správnému sledování obsahu.
- Moduly jsou bloky, které tvoří vodorovné čáry a svislé průběžné čáry jakékoli mřížky. Když se nad tím zamyslíte, jsou to stavební kameny jakékoli mřížky. Všechny vaše svislé moduly tvoří vaše sloupce, zatímco všechny vaše vodorovné mřížky tvoří vaše řádky.
- Regiony jsou skupiny propojených modulů, ať už vertikálních, nebo horizontálních. Neexistují žádná pravidla, jak se rozhodnete je uspořádat.
Zdroj: Radversity
Typy mřížek
Rozvrhovací mřížky byly poprvé použity k uspořádání rukopisu na papíře.
Vznikly již ve 13. století, kdy francouzský umělec Villard De spojil systém mřížek se zlatým řezem, aby vytvořil rozvržení tištěných stránek s okraji. S tímto systémem mřížek se můžete setkat dodnes, což dokazuje většina rozvržení tištěných knih a časopisů. Vydavatelé, redaktoři a designéři dávají přednost používání standardních mřížek nejen proto, že dobře vypadají, ale také proto, že si čtenáři zvykli naočekávat, že určité prvky designu budou na určitém místě.
Mřížky lze navrhnout dvěma způsoby: symetrické nebo asymetrické. Symetrické mřížky sledují osovou linii, přičemž svislé a vodorovné oblasti jsou navzájem stejné a sloupce mají stejnou šířku.
V asymetrická mřížka , jak název napovídá, okraje a sloupce nejsou všechny stejné.
Na základě této klasifikace existuje pět hlavních typů rozvrhovacích mřížek používaných po celém světě, na které se můžete spolehnout:
Mřížky rukopisů jsou nejběžnějším druhem mřížky pro dokumenty. Oddělují záhlaví, zápatí a okraje a v podstatě vytvářejí obdélník uvnitř formátu (nebo stránky), který poskytuje hranice vašemu textu. Jsou základem pro časopisy, noviny a knihy. Je to tedy pravděpodobně rozvržení, které znáte nejlépe.
Zdroj: UXplanet
Zdroj: Radversity
Sloupcové mřížky jsou další oblíbenou metodou při vydávání časopisů. Typické rozvržení časopisu používá sloupcové mřížky k rozdělení textu do snadno čitelných oddílů. Jsou však velmi oblíbené i pro webové stránky. Můžete použít dvě až šest mřížek. Je jich možné použít i více, ale není to běžné. Velmi důležitou věcí u sloupcových mřížek je, že rozestupy mezi sloupci, neboli žlábky, jsou od sebe stejně vzdálené.ostatní.
Symetrická sloupcová mřížka se používá například v novinách, zatímco asymetrická sloupcová mřížka se upřednostňuje při návrhu webových stránek.
Zdroj: UX Planet
Zdroj: Radversity
Modulární mřížky jsou podobné sloupcové mřížce, ale zohledňují také vodorovné průběžné čáry. Tento typ mřížky je potřeba, když je třeba uspořádat různé prvky v rozvržení a sloupcová mřížka jednoduše nestačí.
Modulární mřížky mají stejně velké moduly, což velmi usnadňuje vizualizaci prostorových zón různými způsoby.
Zdroj: UX Planet
Zdroj: Radversity
Základní mřížky Základní čára je čára, na které spočívá text při psaní, a vodící čára je mezera mezi dvěma základními čarami. Zajímá vás, jak velký by měl být váš nadpis nebo podnadpis?
Základní mřížky vám pomohou dodat textu plynulý rytmus.
Zdroj: UX Planet
Zdroj: Fragaria
Hierarchické mřížky vypadají méně jako mřížka než všechny jejich protějšky. Přesto jsou velmi užitečné při uspořádání prvků designu podle jejich důležitosti. Hierarchické mřížky mohou být založeny na modulárních mřížkách, nebo si můžete vytvořit i vlastní. Webové stránky tuto mřížku často využívají, zejména digitální časopisy a noviny se při přechodu na hierarchické mřížky spoléhají spíše na mřížky sloupcové než na mřížky sloupcové, které se stávajídigitální.
Zdroj: UX Plane
Zásada č. 2. Používejte negativní prostor
Často si myslíme, že prázdnota, ticho nebo nedostatek barev jsou špatné. Neuvažujeme však o tom, jak jsou pevným základem kontrastu.
Negativní prostor, kterému se také říká bílý prostor, je ta oblast v designu, která neobsahuje žádné skutečné prvky. Je to oblast, která zůstává prázdná. Nejenže obklopuje vaše prostředky, ale také vytváří potřebné vazby mezi nimi. Z tohoto důvodu je negativní prostor právoplatným prvkem designu a má obrovský vliv na to, jak efektivní je váš návrh rozložení.
Dobrý a špatný negativní prostor
Negativní prostor pomůže oddělit různé oblasti v designu a zároveň umožní rozvržení dýchat. Pomáhá s vizuální hierarchií a vizuální rovnováhou, zaměřuje pozornost uživatele na hlavní prvky, snižuje míru rozptýlení a v neposlední řadě dodává designu styl a eleganci.
Nezkušení designéři mohou mít tendenci zaplnit co největší část plátna zmenšením textu nebo zvětšením loga či obrázku. Pokud však dáte svým prvkům prostor, divák si bude moci rychleji a pohodlněji všímat určitých informačních signálů.
Pokud vše křičí, abyste upoutali pozornost diváka, nic není slyšet.- Aaron Walter, "Design pro emoce
Jednoduchý způsob, jak určit negativní prostor, je použít modulární mřížku. Když ji umístíte na návrh, můžete si snadno představit, které moduly mohou zůstat prázdné a které by měly být vyplněny.
Designér: Brunswicker, Zdroj: Codesignmag.com
Zásada č. 3. Zvolte si jeden ústřední bod
Požádal vás někdy klient, abyste zvětšili logo? A pak ještě více zvětšili titulek?
Nemůžete zdůrazňovat všechno. To by se vymykalo smyslu dobrého designu. Stejně jako čas je i zaměření relativní. Aby jeden prvek vynikl, musí jiný sloužit jako pozadí. Některé prvky musí dominovat nad jinými, aby váš design zobrazoval vizuální hierarchii.
Ústřední bod v designu je prvek s největší vizuální vahou. Je to prvek, který přitahuje pohled jako první, více než cokoli jiného ve vašem rozvržení.Ústřední bod oznámí vašemu publiku, kde začíná jeho cesta za zobrazením vašeho návrhu. Je to tedy začátek příběhu, který vyprávíte.
Toho lze obvykle dosáhnout použitím velkého obrázku nebo velkého zdroje typografie. Všimněte si, jak účinný je níže uvedený ústřední bod.
Navrhl Braulio Amado pro Bloomberg Businessweek, Zdroj: Je hezké, že
Ústřední bod sice přitáhne pozornost publika, ale další pravidlo ho pomůže usměrnit.
Zásada č. 4. Myslete na blízkost a tok informací
Princip blízkosti je jednoduchý. Zajistěte, aby prvky, které spolu souvisejí, byly umístěny společně.
Viz_také: Nejlepší trendy v designu webových stránek pro rok 2022 Blízkost znamená, že vizuální prvky jsou propojeny a tvoří jeden vizuální celek, který pomáhá uspořádat rozvržení.Proto shlukujte pouze ty prvky designu, které spolu souvisejí, a používejte informační kapsy v designu, abyste své publikum navedli k relevantnímu obsahu, který potřebuje zkonzumovat. Tomu se také říká princip toku.
Zdroj: Satori Graphics
Design s dobrým průběhem povede oko diváka snadno po celém rozvržení, od prvku k prvku. Vaše ústřední body budou přitahovat oko a stanou se místem odpočinku, zatímco ostatní prvky budou udávat směr.
Jednoduchý způsob, jak to pochopit, je například na příkladu našich webových stránek. Grafika je zřetelně oddělena od textu, stejně jako výzvy k akci, takže pozornost diváka přechází od jednoho shluku informací k druhému.
Zásada č. 5. Používejte kontrast
Ujistěte se, že je váš design dostatečně kontrastní.
Kontrast pomáhá uspořádat design, vytváří potřebnou hierarchii a klade důraz na to, co je důležité.Dobré použití kontrastu navíc dodá vašemu designu vizuální zajímavost. Přiznejme si, že rozvržení, kde je vše stejně velké, má stejný tvar nebo barvu, bude vypadat nudně. Kontrast vše okoření.
Jako první vás možná napadne barevný kontrast, například teplý versus studený, tmavý versus světlý, modrý versus oranžový. Ale zatímco barva je velmi důležitým principem kontrastu, existují také kontrasty písma, zarovnání a velikosti. A nezapomeňte, že kontrast je také relativní. Má význam pouze v kontrastu s jinými prvky.
Zde je několik příkladů rozvržení, která toto pravidlo využívají chytrým a krásným způsobem. Všimněte si kontrastu typografie, barev a dokonce i kontrastu velikosti jednotlivých prvků.
Zdroj: Akční plán IAG pro sladění
Zásada č. 6. Opakování, vzor, rytmus
Když myslíme na opakování, myslíme na stále stejný prvek.
V designu je to ale jinak. Rozhodně to není taková nuda. Když se opakování správně použije, může váš design skutečně posílit.
Snažte se určit a opakovaně používat motiv v celém rozvržení, aby se různé oblasti cítily propojené a byly součástí stejné kompozice. Pomůže to vašemu designu mít téma. Opakováním prvků nejenže dodáte podle očekávání svého publika, ale také zlepšíte uživatelský zážitek. Díky konzistentnosti se uživatelé cítí pohodlněji.
Můžete to udělat tak, že budete opakovat tvary nebo symboly. Nebo dokonce barevné schéma, písmo a obecně stejný styl.
Dobrým zvykem je používat písmo s velkou rodinou. Omezte různý počet vzorů, vah/stylu čar a barev a opakujte je v celém rozsahu. Snažte se také udržet stejný styl obrázků a grafiky. Používejte například ilustrace od stejného autora.
Zdroj: Thepentool.co
To je vše. Toto je šest zásad, které vám pomohou uspořádat design a dosáhnout čistšího, profesionálnějšího a vyváženějšího rozvržení.
Tím však vaše cesta nekončí. Grafický design není exaktní věda a neměl by se omezovat na tipy a zásady. Stejně jako ve všech oblastech tvorby, ani zde neexistuje žádné pevné pravidlo. Vybočení z těchto tipů jemnými způsoby dodá vašim návrhům hloubku a rozmanitost.
Přesto jsou skvělým výchozím bodem a doporučujeme vám, abyste je vyzkoušeli. A dejte nám vědět, jak se osvědčily!
Stáhněte si Vectornator a začněte
Posuňte své návrhy na vyšší úroveň.
Stáhnout soubor
