Připravili jsme pro Vás velký článek o UX/UI designu.
14.12.2021
Jak udělat UX design emocionálním pomocí ilustrace
Ilustrace jsou pro lidstvo nepostradatelným prostředkem komunikace. Zhruba před 45 000 lety vznikly ve formě skalních maleb a dodnes se používají k zobrazení různých předmětů a konceptů.
Obrázky nejsou zatíženy omezením v podobě jazykové bariéry ani úrovní vzdělání člověka. Ilustrace pomáhají lépe porozumět nebo vyjádřit složité nálady a pocity, které se jen těžko vyjadřují slovy. Vzpomeňte si na to, když jste byli malí a neuměli číst. Díky ilustracím v dětských knížkách bylo možné pochopit mnoho zajímavých příběhů.
V kontextu moderních informačních technologií je ilustrace zčásti ozdobou a zčásti emocionálním signálem, který pomocí vložené metafory pomáhá působit na uživatele uceleným dojmem.
Proč používat ilustrace na webu?
Ilustrace jsou cenným prostředkem pro sdělení nálady, tónu nebo prezentace značky.
Nepleťte si ale ikony a ilustrace jen proto, že jsou to obrázky. Ikony jsou symboly, které nejčastěji potřebují stylově odpovídat ilustracím. Symbol je zjednodušená reprezentace předmětu, myšlenky nebo akce. Například taková akce jako „hledání“ je obvykle označena lupou.
Ilustrace nám zprostředkovávají mnohem složitější koncepty a dokáží vyvolat emocionální vazbu s publikem. Ilustrace také skvěle sdělují význam bez nutnosti přidávat text. Při správném použití dodávají osobitost i těm nejzákladnějším a nejpraktičtějším webovým stránkám.
Oblíbené typy ilustrací na webu
Existuje mnoho rozmanitých stylů ilustrací. Od jednoduchých obrysů až po detailní, plnobarevné, realistické obrázky. Výhodou je, že počet různých ilustrací použitých na stránce není omezen.
Každý styl vyvolává určité emoce a odezvy, proto je velmi důležité volit styl ilustrace vědomě. V první řadě byste měli myslet na účel stránky a na to, jaký charakter jí chcete dát.
Můžete prozkoumat trh a zjistit, který typ ilustrací nejlépe vystihuje váš produkt. To teď vlastně uděláme společně. Podíváme se, jak se designérům daří efektivně využívat ilustrace ve čtyřech kategoriích.
Finance a firemní weby
Finanční služby, fintech, firemní aplikace a velké firemní weby nejčastěji používají ilustrace jako způsob, jak se více přiblížit lidem.
Tyto organizace udržují minimalistický styl, používají jednoduché formy webu a málo ilustrací.
Úvodní obrazovka společnosti Acorns používá jednoduchý motiv dubových listů v kombinaci s logem Acorns. Zbytek ilustrací je proveden v zelených barvách stejně jako logo této korporace.
Design webu v nás vyvolává pocit toho, že jde o novou společnost (Acorns byla založena v roce 2014) a podobně vypadá mnoho webových značek ve finančním oboru.
Inovativnější i tradiční organizace používají ilustrace pro stejné účely. Oblasti použití ilustrací mohou být však omezené, jako je tomu u Danske Bank. Design zdůrazňuje dostupnost produktu ilustracemi v sekcích „About us“ (O nás) a „Sustainability“ (Udržitelnost).
I Visa je při používání ilustrací v konkrétních oblastech omezena. Design sekce Visa Direct je ale trošku jiný, díky čemuž nová služba vyčnívá ze všeho, co Visa nabízí.
Dalším přístupem, který v této kategorii získává na popularitě, je abstraktní grafika. Abstrakce jsou zvláště užitečné, když je obtížné ukázat, co stránka zákazníkovi vlastně nabízí. Například Instabase k vyvolání zájmu využívá kompozice geometrických tvarů. Ty jsou vyrobeny ve stejné barevné paletě jako favicon.
Jedním z klíčových aspektů použití ilustrací na tomto typu stránek je najít rovnováhu mezi dojmem přátelským, lidským, přístupným a zároveň seriózním, spolehlivým a bezpečným. Pokud se přikloníte směrem k přehnané hravosti, potenciální klienti vás nebudou brát vážně. V sekci „Enterprise“ na Github je pouze několik ilustrací v poměrně tlumených barvách. Na rozdíl od úvodní stránky, kde je na první obrazovce výrazný maskot a jasnější ilustrace.
Jídlo a pití
V jídle a pití je to trochu volnější. Styly jsou mnohem rozmanitější a obraz může být výraznější a osobitější. Někteří stále preferují jemné zpestření ilustrací, s důrazem na aspekty, jako je barva a typ. Jiné stránky v této kategorii dělají z ilustrací mnohem významnější část designu.
Palais Kitchen a Caleño se řídí první strategií a používají čárovou grafiku, která odpovídá značce.
Animované ilustrace My Drink ve vintage stylu nahrazují fotografie a vyvažují text na domovské stránce.
Na stránkách Melopeion Honey je málo ilustrací, ale mnoho dalších vizuálních prvků.
Monkey47 lze vnímat jako koncepční web, kde ilustrace hrají klíčovou roli. Každá sekce webu je díky nim prostě okouzlující.
Hotelnictví a volný čas
V této kategorii chtějí uživatelé vidět více fotografií, ale i ilustrací. Fotografie pouze ukazuje, jak něco vypadá, zatímco ilustrace dokáže zprostředkovat emoce spojené s potenciálním zážitkem.
Protos Car Rental používá několik pěkných a jednoduchých ilustrací ke zvýraznění slavnostního aspektu vlastního brandu.
Comptoir Libanais kombinuje fotografie s ilustracemi, čímž vytváří výraznou osobitost.
Web Hotelu Frida má také velmi charakteristický vzhled a fantastické viktoriánské ilustrace zvířat dodávají značce výrazně originální charakter.
Highcourt používá zjednodušené a stylizované ilustrace, které poskytují ucelenější obraz interiéru budovy než kdyby byly použity jen samotné fotografie.
Web Neverlands používá vektory a celá jejich grafická konstrukce je pohlcující zážitek založený na ilustracích.
Vědomý web design
Webové stránky propagující ekologicky odpovědné společnosti, přírodní produkty v péči o pleť, přírodní nebo bio potraviny a nápoje, veganské produkty, společenskou odpovědnost a další mají tendenci spoléhat na ilustrace, zvláště pokud jde o relativně novější weby.
Docela často se používá design s rostlinami, které lehce naznačují přírodu. Ilustrace se navíc často používají pro seznámení s informacemi, protože lidé je díky ilustracím nevnímají jako formální přednášku.
Wild Souls se vyhýbá jakýmkoli náznakům ekologické orientace a své ilustrace umisťuje tak nějak náhodně.
Superfood Gin využívá ve svém designu mnoho ilustrací rostlin, a protože se jedná o rostlinné ingredience, jde o velmi úspěšný koncept.
Domovská stránka Capsul'in není nijak zvlášť pozoruhodná, ale pro produkt Zero Impact byla vytvořena samostatná sekce s ilustracemi, které demonstrují jeho jedinečnost.
Donate Responsibly používají ilustrace k tomu, aby lidem vysvětlili, že i dobré úmysly mohou způsobit nezamýšlenou škodu. Ilustrace jsou zde především informativní a poměrně neutrální.
Mnoho značek pro děti používá ilustrace, i když cílí na dospělé a ne děti. Little Yawn Collective kombinuje přístup vstřícný k dětem s ilustracemi spících zvířat a přírodním produktem.
Použití ilustrací na webových stránkách
Ilustrace může být mocným nástrojem v návrhářském arzenálu, ale většinou je obtížné ji správně nastavit. Ilustrace totiž vyvolává emoce a emoce jsou subjektivní.
Stejně jako s písmem nebo barvou je třeba s ilustrací zacházet správně a opatrně. Pamatujte, že méně je někdy více. Stává se, že i nesprávné umístění vynikající ilustrace může vést k nežádoucímu efektu.
Toto je pouze malá ukázka široké škály stylů a kategorií, které můžete využít při tvoření i vy. Doufáme, že vám naše informace pomohou při používání ilustrací učinit ta správná rozhodnutí ve všech vašich budoucích projektech!