V tomto článku si povíme, co je to dobrá kompozice, jak ji vytvořit a podle jakých kritérií ji hodnotit.
K čemu je složení? Proč by to pro nás mohlo být důležité?
Představte si, že jste v centru neznámého města a potřebujete najít hotel bez navigátoru. Jste úplně zmatení, jejich jazyk je pro vás nesrozumitelný, každý ukazuje jiným směrem.
Co dělat? Jak najít místo na noc? Stres.
Nyní si představte, že na náměstí vidíte obrovský červený transparent s názvem hotelu a cedulí. Úplně jiná situace, souhlas! Jdete ve směru šipky od transparentu a vidíte další znamení, pak další a po 15 minutách jste již u cíle! Voila! Jste v bezpečí, máte dobrou náladu, dojmy z města budou nádherné.
Ale nebýt transparentu, řekli byste všem, že je to nechutné místo s hrubými lidmi a špatnou službou. A to vše kvůli stresu, který mě přepadl při hledání hotelu.
Studium webu, časopisu, manuálu, reklamního banneru nebo navigační tabule je stejně dobrodružství jako hledání hotelu. Jen ne vždy s touto úrovní stresu. Někdy ale spěcháte na letiště 15 minut před koncem odbavení a v panice hledáte svůj let, pak vám tabule pomůže najít cestu. Ten stres bude podle mě ještě silnější.
Co je dobré složení
V encyklopedickém významu je kompozice složením prvků. Pouhé skládání prvků nám ale vyloženě nevyhovuje. Chceme je poskládat tak, aby řešily naše problémy. Aby to bylo přehledné, pohodlné a dokonce krásné. Tomu chci věnovat sérii článků o složení. Aby uživatel mohl snadno najít, co potřebuje, aniž by ztrácel čas a úsilí.
Jazyk, kterým mluví naše podvědomí
Designéři to musí pochopit. A jak na to? Design je podle mě čistá věda. Proto budeme složení zvažovat z tohoto hlediska. Začněme naším vnímáním.
Náš mozek čte informace podle určitého algoritmu. A to je srovnatelné s jazykem, kterým mluvíme. Je přece mnohem jednodušší naučit se jazyk s rodilým mluvčím (se mnou), než tančit s tamburínou a zapojit se do dekódování metodou pokus-omyl. Jaká je pravděpodobnost, že vám Francouz bude rozumět, když budete mluvit rusky?
Některými neverbálními znaky, gesty, mimikou dokáže odhadnout, co potřebujete. Ale nebude to úplný kontakt. Stejné je to s naším mozkem.
Trest za špatné rozložení
Mozek spotřebovává přibližně 20 % naší celkové energie, i když tvoří asi 2 % tělesné hmotnosti. A jakmile se mozek setká s náročným úkolem, kde hrozí ztráta velké energie, začne vzdorovat a uvolňovat noradrenalin, což vede k zastavení vnímání informací. Jeden nebo dva neopatrné kroky při sestavování kompozice, které vedou ke zbytečnému stresu na mozek, a je to pryč! Ztratili jsme uživatele. A pokud jsme to hned neztratili, pak mozek kvůli takové zátěži uvalil negativ na obsah, který vnímáme. A to je ještě horší, než kdyby právě odešel.
Krása je objektivní pojem
Vím, jak vytvořit horor!)) Myslím, že touha zvládnout kompoziční dovednost je nyní ještě silnější. A to nejen pokud jde o krásu vaší práce. Navíc je krása objektivním pojmem pro mozek. Podle jedné hypotézy dává mozek buket hormonů v podobě pocitu krásy, když se setká s něčím, co ho nesmírně srozumitelným a příjemným způsobem vzrušuje (o tom budu mluvit v následujících článcích).
Zabít dvě mouchy jednou ranou
Z toho vyvozujeme závěr! Když vytvoříme funkční kompozici pro řešení uživatelských problémů, vše se stane „jasným a srozumitelným“ a pohodlným, protože mozek se může snadno orientovat a nevynakládá prakticky žádnou energii na analytickou práci. Také jako odměna za takové setkání dává uživateli pocit krásy. No není to pohádka? Doufám, že jsem vás zaujal! Nechám tě s tím!
A brzy zveřejním další díl s praktickými ukázkami tvorby dobré kompozice. Odebírejte nás na Instagramu (i když je to v Ruské federaci zakázáno)! Je zde samostatný blok relevantních informací o složení.
A pokud chcete úplné ponoření do tématu kvalitního, fungujícího designu se spoustou praxe pro své portfolio, přijďte na kurz „Kompozice a mřížky“. Na škole „Science of Design“ si zdokonalily své dovednosti tisíce studentů, přidejte se k nám, počet míst je omezený. V případě jakýchkoli dotazů pište do chatu na webu nauka-dsgn.ru.
Můžete pro svůj web navrhnout skvělé logo, vybrat si kvalitní ilustrace, napsat brilantní texty, ale všechny tyto prvky nevyužijí svého plného potenciálu, pokud web nebude mít správnou kompozici. Co to je a jak udělat design webu příjemný na pohled, na to se podíváme v tomto článku.
Co znamená složení?
Kompozice ve webdesignu je harmonické uspořádání všech prvků webu na obrazovce tak, aby byl jejich obsah maximálně odhalen.
Cílem kompozice je zajistit, aby všechny designové prvky byly vnímány holisticky a tvořily jeden obraz. Za tímto účelem umisťuje návrhář nejdůležitější předměty do středu pozornosti uživatele. Toho lze dosáhnout pomocí úhlu, barvy, kontrastu a dalších technik, které podrobněji probereme níže.
Obecně platí, že úspěšná kompozice by měla být přirozená a sloužit účelu návrhu: zvýraznit blok na obrazovce, vést uživatele k požadované akci, přenést jeho pozornost z jednoho bloku do druhého atd. To znamená, že by měl být nejen vizuálně atraktivní, ale také funkčně účinný.
Špatné složení okamžitě přitahuje pozornost, bolí oko a způsobuje podráždění. Dobrý zůstává ve stínu, člověk nevěnuje pozornost designu, ale prostě se dívá na obsah.
Aby byl design harmonický a lahodil oku uživatele, dodržujte základní principy a pravidla kompozice.
Principy kompozice v grafickém a webdesignu
Úspěšná kompozice se skládá z kombinace několika prvků: barva, rozložení, akcenty atd. Podívejme se, jaké by měly být.
Barva
Barva hraje důležitou roli v kompozici. Barevné schéma určuje, jakou náladu design nastaví, v jakém světle je produkt zobrazen a jaké asociace vyvolává.
Pokud je barevné schéma jasné, vytváří náladu veselosti a energie. Teplé tóny jsou spojeny s klidem, relaxací a spolehlivostí. Studené – s inovací, přísností. Rozhodněte se, jaké asociace chcete, aby vaše stránky a produkt vyvolávaly, a na základě toho zvolte barevné schéma.
Při práci na svém designu věnujte zvláštní pozornost kontrastu. Kontrast pomůže zvýraznit potřebné sekce, například tlačítka objednávky, registrační formuláře, informace o ceně. Jiné bloky lze naopak ztmavit: tlačítko odmítnutí, omezení podmínek propagace atd.
Při výběru barevného schématu vám pomůže tzv. barevné kolečko – paleta všech barev. Protilehlé barvy v kruhu ostře kontrastují, blízké barvy jsou si podobné a dobře se k sobě hodí. Stoprocentní možností, ve které rozhodně neuděláte chybu, je vybrat si barevné schéma ze tří barev umístěných v rozích rovnoramenného trojúhelníku vepsaného do tohoto kruhu.
Nezapomeňte určit hlavní barvu a další. Nastavte role pro každého z nich. Jedna je pro rozhraní, druhá je pro obsah, třetí je pro tlačítka atd.
Modulární mřížka
Tato technologie přišla do webdesignu z tisku a ukázala se jako vynikající při vývoji webových stránek a aplikací. Podstatou modulární mřížky je, že prvky obrazovky jsou organizovány podle jasné struktury – mřížky. Má řádky a sloupce a každý jednotlivý blok je ve své vlastní buňce: texty, nadpisy, tlačítka, ilustrace atd.
Modulární mřížky se však ve webdesignu vyvinuly. Na rozdíl od tisku není web vždy statický: má nabídku, rozevírací seznamy a další dynamické prvky, které se spouštějí, když na ně kliknete nebo na ně najedete myší. Tyto vlastnosti je také třeba vzít v úvahu při vytváření mřížky, aby dynamické bloky nenarušily její rovnováhu.
Modulární mřížka je potřebná v kompozici, aby uspořádala informace na obrazovce, zjednodušila jejich vnímání pro návštěvníka webu a vytvořila spojení a hierarchii mezi různými částmi stránky. Mřížky mohou být jednoduché, jako tabulka s několika řádky a sloupci, nebo mohou být složité, s různými vzdálenostmi mezi buňkami a různými velikostmi samotných buněk.
Směr pohledu uživatele
Úspěšná kompozice v designu vám umožňuje ovládat pozornost osoby a nasměrovat ji na potřebné sekce. Existují dva typy složení: ve tvaru Z a ve tvaru F. Předpokládá se, že pohled čtenáře nebo návštěvníka stránek se obvykle pohybuje po trajektorii těchto písmen.
V případě Z – zleva doprava, pak šikmo dolů a znovu zleva doprava. V případě F – nejprve svisle shora dolů a poté zleva doprava podél čar.
Tato trajektorie pohledu je pro uživatele přirozená, a to je třeba vzít v úvahu při vytváření kompozice. Klíčové sekce tak mohou být umístěny v klíčových bodech trajektorie tak, aby se oko zastavilo přesně tam, kde to konstruktér potřebuje.
Tímto způsobem můžete vytvořit celou uživatelskou cestu přes web, založenou například na marketingovém modelu AIDA: pozornost, zájem, touha, akce. Na začátek umístěte prvek, který upoutá pozornost, poté obsah, který uživatele zaujme, dále hlavní výhody produktu, aby ho návštěvník chtěl a na konec – tlačítko pro objednávku nebo výzvu k akci.
K nasměrování čtenářovy pozornosti ke kompozici lze použít očividnější techniky. Nikdo například nezrušil klasickou „šipku“, která se pohybuje z jedné sekce do druhé a vede návštěvníka. Dalším způsobem je číslování bloků. Pohled osoby bude nejprve přitažen k bodu „1“ a poté se bude pohybovat po seznamu.
Ke stejnému účelu jsou vhodné i ilustrace. Například fotografie osoby s nataženou paží označující registrační formulář. Toto je zjednodušený příklad, ale princip je jasný.
Pravidlo třetin
Dalším způsobem, jak vytvořit úspěšnou designovou kompozici, je použití pravidla třetin, zjednodušené verze zlatého řezu. Používá se v grafickém a webdesignu, fotografii a malbě.
Jeho podstata je následující. Rozdělte obrazovku pomocí dvou svislých a dvou vodorovných čar na devět stejných částí. Nyní věnujte pozornost průsečíku těchto čar. Z pravidla třetin vyplývá, že právě na tato místa se soustředí pozornost diváka/čtenáře.
Proto je logické umístit na průsečík těchto linií nejdůležitější bloky: klíčové informace, výzvu k akci, tlačítko objednávky nebo registrace.
Zároveň, pokud máte na obrazovce jeden objekt, je lepší jej umístit na levou stranu obrazovky. Pokud je objektů více, umístěte ten nejdůležitější do pravé dolní části.
Volný prostor
V kompozici hrají důležitou roli nejen objekty samotné, ale i prázdný prostor mezi nimi. Neměli byste svůj design zaneřádit mnoha bloky a sekcemi na jedné obrazovce, které oslní vaše oči. V tomto případě návštěvníka stránek pouze otravujete a ztěžujete mu uživatelskou zkušenost. Je pro něj těžké najít potřebné informace, je těžké si vybrat, je těžké to číst.
Abyste tomu zabránili, přidejte do svého návrhu „vzduch“ – volný prostor. Ale také se ujistěte, že se zobrazuje správně na všech zařízeních. Bude nepříjemné, pokud se na mobilním telefonu rozhraní přesune mimo stránku a bude vidět pouze prázdné pozadí.
Hierarchie bloků
V dobré kompozici je na první pohled jasné, kde je hlavní blok stránky, kde vedlejší blok a kde hledat tlačítka. Hierarchie to pomáhá ukázat
K vytvoření vizuální hierarchie se používají různé metody. Například barva a kontrast. Zesvětlete hlavní objekt a ztmavte nebo zprůhledněte vedlejší.
Písma také pomohou zdůraznit hierarchii. Toto téma jsme probrali podrobněji v článku „Jak vybrat písma pro web“. Různé fonty pro nadpisy, rozhraní, tlačítka a texty pomohou vytvořit logickou hierarchii obsahu.
Zůstatek
Rovnováha je dalším klíčem k úspěšné kompozici v grafickém a webovém designu. Existují dva typy elementární rovnováhy: symetrické a asymetrické.
V případě symetrické rovnováhy je vše zřejmé: bloky musí být umístěny v přísné symetrii. To organizuje informace, činí je strukturovanými a zjednodušuje vnímání. Symetrické vyvážení však ponechává malý prostor pro kreativitu v designu. Proto se často používá jiný typ – asymetrický.
Při asymetrickém uspořádání objektů lze pomocí pomocných metod dosáhnout rovnováhy. Například pravidlo třetin, modulární mřížka, již výše zmíněná hierarchie. Mimochodem, asymetrické vyvážení pomáhá vytvářet vizuální hierarchii objektů, protože může nastavit a zdůraznit specifickou váhu každého objektu.
Abyste získali asymetrický design, můžete vytvořit různé objekty ve stejném stylu: nakreslit je v podobném barevném schématu, vytvořit všechny ilustrace během jednoho focení atd.
— Úspěšná kompozice v grafickém a webdesignu určuje, jak příjemný bude web nebo tisk pro oči uživatelů. Abyste toho dosáhli, dodržujte základní pravidla kompozice při výběru barev, uspořádání objektů a vytváření hierarchie. Při dobré kompozici plní design svou funkci a vede uživatele po požadované cestě a plynule jej vede k cílové akci.
