Použití ilustrace v návrhu webu
Ilustrace je neuvěřitelně všestranný nástroj, který může najít mnoho různých použití v designu. A pokud jde o návrh webových stránek, můžeme najít extrémně širokou škálu implementací.
Dnes se chci zabývat některými klíčovými způsoby, jak tento nástroj nasadil do práce, abychom mohli čerpat nové nápady, které by inspirovaly a napadaly návrhy, které vyrábíme.
Začněme někde, co zřídkakdy dělám, se základní definicí: Ilustrovaná: 1) Zjistit, 2) Ujasnit se tím, že je uvedeno nebo slouží jako příklad nebo instance; 3) Poskytnout vizuální prvky určené k vysvětlení nebo zdobení .
Zdá se, že v reálném světě webového designu má ilustrační tendenci k provádění obou funkcí najednou. Je to zkrášlující, zatímco to objasňuje. A pokud se jedná pouze o jedno z nich, možná se budete muset ptát sami sebe proč. Možná, že uvedením ilustrace do práce, která splňuje obě role, je způsob, jak skutečně využít designový prvek pro všechny, které stojí za to.
To samozřejmě neznamená, že návrh nemůže být úspěšný, pokud se jedná pouze o jeden nebo druhý; rozhodně to může. Ale abychom co nejlépe využili naši práci, zjistil jsem, že výzva k našemu myšlení je vždy užitečná. Jako obvykle se podíváme do několika seskupení vzorků, abychom zjistili, co lze s tímto vizuálním zařízením provést. Podél cesty zvažte, zda každý přístup poskytuje jasnost nebo dekoraci, nebo obojí.
Tematická ilustrace
První přístup k ilustraci, který bych chtěl zahrnout, je použití tohoto stylu k vytvoření celkového tematického přístupu. V této situaci jsou práce zaměřeny na vytvoření celkového tématu. Stoupáme po horách, navštívíme vesmírnou stanici nebo prozkoumeme kancelář společnosti?
Zatímco tento přístup nás nemusí dostat na místo, často to dělá. V jiných situacích styl pouze stanoví celkový motiv, který následuje.
Důvodem, proč o to máme zájem, je, že je používán k radikálnímu řízení celkového návrhu. Obrázek není malý podpůrný prvek. Místo toho je nejvýznamnějším konstrukčním prvkem a ovládá celé rozložení.
Získejte svého šéfa do Severního mysu
V tomto vzorku by přístup nebyl jasnější. Návrh místa jasně odráží jeho nejzákladnější účel. Na obrázku je vizuální odkaz na to, co bude dělat. A pokud jde o definici ilustrace, umělecká díla na stránce poskytuje dekoraci a krásu.
V tomto případě téma pevně stanovuje účel webu a pomáhá uživateli zakoupit koncept.
Spouštěcí sada
Tématický přístup nemusí být natolik tupý. Někdy může být přirozenější součástí více typicky strukturovaného místa. V tomto případě je web má ve svém uspořádání mírně unikátní a téma nevynucuje některé rozhraní nahoře nahoře založené na raketových lodích.
Namísto toho je téma vtaženo do návrhu takovým způsobem, že sděluje své dekorativní prvky, aniž by zasahovalo do obsahu. Zde ilustrační slouží k ozdobení, ale to není příliš jasné. To vůbec není překvapující a samozřejmě ukazuje, že neexistuje žádný vzorec, který by následoval.
Atelier Anonyme Design
V jiných situacích, jako je tato, tematická ilustrace doslova představuje místo. Není to podpůrný prvek, ale spíše se zcela stává samotným designem.
Zde použití ilustrace jasně hraje vyznamenání roli. Ale já bych tvrdil, že to také poskytuje velkou úroveň jasnosti návštěvníka. Toto je webová stránka pro návrhovou agenturu. Návrh a povaha tohoto webu komunikuje s návštěvníky. Jako takový jsem si jistý, že slouží jako masivní filtr pro svou klientskou základnu. Budete buď přitahováni a milovat jejich hravý a tvůrčí přístup, nebo budete zcela vypnuty tím. Takže v tomto bodě myslím, že poskytuje velkou jasnost ohledně agentury a její mentality.
Allure Graphic Design
Na tomto webu hraje i ilustrace jasný tematický přístup. Ačkoli se místo řídí některými standardními formulemi rozvržení, celý návrh je zabalen do tematického uspořádání. Tyto prvky pohánějí nejen design stránek, ale spojí se s hlavním logem a kopií použitým na webu. Téma je ponořující a řídí celou zprávu, kterou web prezentuje.
Další tematické vzorky
Zde je několik dalších stránek, které využívají tematických ilustrací k vytvoření prostředí nebo tématu pro web.
Chipmunk
Drift Boys
Iutopi
Chandu4u
Maskoty
Jak mohu pokrýt myšlenku používat ilustrace bez přezkoumání jednoho z nejzřetelnějších: maskotů? S tímto vizuálním prvkem mají designéři tendenci personifikovat místo, jeho produkt nebo účel charakterem. Nejen, že se implementace takového prvku liší, ale i moc a uvažování, které stojí za ním.
inkFinder
V tomto provedení ilustrovaný maskot hraje poměrně jasnou roli. Vymažte tím, že označí název produktu. Neposkytuje jen určitý život pro design, ale přináší to tvář. Tímto způsobem má diváci něco trochu unikátnějšího, aby se v jejich mozku dostali pryč. Doufejme, že maskot pomáhá vytvořit nezapomenutelnější a jedinečnější zážitek, který pomůže produktu vyniknout.
Možná je to nejsilnější cíl za maskotem, který pomůže něco vyniknout. Skvělá věc, která se týká ilustrovaného maskota, je, že může být zcela jedinečný a specifický pro tento produkt. Za předpokladu, že byl vyroben na zakázku pro tento design, mělo by být jediným místem, kde existuje přesná ilustrace.
The Evnt
Paradoxně najdeme zde další ilustrovaný chobotnicový maskot (co je trojnohý mořský tvor)? V tomto případě je maskot samozřejmě mnohem větší krok od reality: robotní trojnohá stvoření s mozkem v bublině.
Zatímco to může být zvláštní volba, poskytuje krásný rozlišovací prvek události. Tento jedinečný maskot poskytuje chladný vizuální prvek, který se připojí k události. Trvá na svém životě a skutečně spojuje lidi s něčím konkrétním. Předpokládám, že právě toto je účel maskota.
Design tohoto webu je krásný, ale zvážíte, jak nudné by to bylo bez tohoto bláznivého maskota na místě. Vytvoření takového prvku není snadné, ale v této situaci je velmi efektivní.
Kreativní Big Eye
Pro příklad maskota založeného na non-octopusu se podívejte na Kreativní Big Eye stránky. Zde maskot nehraje tolik převládající role v designu. Přidává však k němu hodně osobnosti. Je zřejmé, že ostatní ilustrace a celkový styl stránky přispívají k méně formální prezentaci. Ale maskot v logu je přítomen na celém webu. To zaručuje, že jejich lehkostní styl proniká designem.
Další ilustrace na maskot
Zde je několik dalších vzorů maskotů v práci v designu. Včetně dalšího chobotnice; zdá se, že je populární, kterou je třeba použít.
Správa záznamů společnosti Pioneer
Argyle Octopus
Coucou
Konsebt
Ilustrovaná výzdoba
Další typ použití, který bych chtěl zvážit, je to, o čem mluvím jako tématickou výzdobu. Toto je, když je ilustrační práce dělána dekorativním způsobem, který ve skutečnosti neposkytuje konkrétní fyzický odkaz. Například nejčastěji ilustrace zahrnuje obrázky lidí, zvířat, objektů nebo míst. Ale v tomto případě ilustrace nereprezentuje tolik reálné věci, ale spíše poskytuje dekoraci, aby zkrášloval design tak, jak jen ilustruje. Jako vždy, objasňme to pomocí některých vzorků.
1000 WP témat
Pro náš první příklad zvažte 1000 WP témat webová stránka. Na tomto webu použití ilustrace poskytuje základní rámec a styl pro stránky. Ale to dělá v tom, co je nejvíce čistě dekorativní. Celkový styl se cítí jako ilustrace a přesto nemá typické humanistické prvky.
Teď se chci totálně vyvrátit. Myslím, že styl je převážně dekorativní. Ale mohu skutečně vidět, jak bychom mohli tvrdit, že to poskytuje úroveň objasnění místa. Styl, který návrh používá, se spojí s určitým publikem. Uvádí něco o stylu místa a tématech, které mohou produkovat. V mnoha ohledech kvalita zobrazeného rozvržení demonstruje kvalitu práce, kterou můžete očekávat prostřednictvím této stránky. Tímto způsobem je objasnění snad ještě jemnější a méně v obličeji, ale přesto je přítomno.
Historie společnosti Coca-Cola
Na této webové stránce najdeme jiný design řízený ilustrací. Zde jsou některé ilustrované prvky, které demonstrují skutečné věci, ale většina tematického přístupu se zakládá na čisté výzdobě. Tento příklad nejen demonstruje přístup, ale také ukazuje, že téměř žádná technika není použita puristicky. Pravdou je, že tyto prvky pravděpodobně sloučíte různými způsoby.
Metaphiziků
V tomto posledním příkladu pro dekorativní ilustrace najdete některé vynikající podkladové prvky. Některé z nich jsou hmatatelnější než jiné, ale celkově jde spíše o stylistické podpůrné prvky než cokoli jiného. Je pozoruhodné, jak krásné takové jednoduché čárové výkresy mohou být v kombinaci s krásným textem, dobře vybranými barvami a jednoduchými ikonami. Konečný výsledek je fantastický a pozoruhodně krásný.
Další návrhy s ilustrovanou výzdobou
Zde je několik dalších vzorků, které zachycují tento typ ilustrace v designu.
Moo's Cupcakes
Tech práce
Pixel Stadium
Vlastní tašky HQ
Ilustrovaný text
Ručně vykreslený text určitě není nový koncept a je to něco, na co jsem se zabývala mnohokrát předtím . Nicméně takový přístup jsem nikdy nepovažoval za ilustrační.
Text ručního vykreslování je jednou z populárních variant ilustrovaného textu a skvělé řešení pro mnoho kreativ. Za prvé, je to skvělý způsob, jak dát vše, co praktický výcvik umělecké školy pracuje. Za druhé, je to skvělý způsob, jak vyrobit něco jedinečného. Koneckonců, pokud ruku uděláte nějaký text, bude to 100% jedinečné. Dokonce i když načrtnete existující písmo, stává se zřetelným vytvořením.
Rangus
To je dokonalý příklad ilustrovaného typu. Styl je mimořádně nádherný, zcela jedinečný a velmi příjemný. Ale to tam nezastaví. Ručně vykreslený typ skutečně demonstruje talenty jednotlivců. Ukazuje, že vytváří umělecké dílo rukama a dokonale se propojuje s jeho animačními dovednostmi. Obzvlášť se mi líbí skutečnost, že to vše je založeno na tématu tabule, protože to opravdu v sobě spojuje téma a prvky. Podle mého názoru tato stránka demonstruje, jak může být sjednocující ilustrace s účelem a zprávou webu.
Joey Lomanto
V tomto případě je ilustrovaný text mnohem jemnější. Místo toho, aby řídil celý směr designu, prostě to hraje dobře. Ve skutečnosti si na první pohled možná ani nevšimnete ručně vykreslený styl velkého textu domovské stránky. Je pravděpodobné, že text může být ve skutečnosti písmo, ale byl použit tak, aby se dokonale slučoval se stylem webu. Bez ohledu na to, že styl je krásně sjednocený a ilustrace hraje mnoho rolí v celkovém designu.
Běž žít
Ilustrovaný text nemusí být ručně vykreslen. Jak můžete najít v tomto příkladu, text je stylizován různými způsoby, které zase text na bity celkové ilustrace. Krása tohoto přístupu je, že sjednocuje text s ostatními ilustracemi. Tím se vyvarujete méně jednotného pocitu, kdy máte jednoduše vyobrazení nad standardním webovým textem. Ty mohou fungovat, avšak v tomto případě je dopad ilustrovaného textu jasný.
Další ukázky ilustrovaného textu
Následující příklady se do této kategorie volně vkládají. Říkám volně, protože je obtížné říkat občas, protože to je někdy jemná věc. V některých případech se text jen cítí jako umělecké dílo, takže jsem ho vložil do této sbírky.
Kontrastní povstání
Fakta
La Web Shop
Informativní ilustrace
Podle samotné definice ilustrace je jedním z jejích účelů objasnit a vysvětlit. Takže je jen vhodné, abychom našli několik příkladů, kde to ilustruje, a to s mimořádnou jasností.
Knižní
Začněme Knižní stránky. V tomto neobvyklém uspořádání zjistíme, že ilustrace velmi jasně symbolizují různé body rozvržení domácí stránky. Každý blok má vizuální prvek, který nejen zkrášluje, ale je důležitější, vysvětluje to. Tolik, že jako čtenář téměř ani nemusím číst kopii. Obrazové prvky zařízení vlevo dole to zejména dokazují.
Konferujte
V mnohem méně prominentním způsobem se ukázalo, že ilustrace v tomto designu je stejně informativní. Jednoduché ilustrace jednoduše demonstruje téma webu. Nemůže vás překonat nad hlavou s jeho poselstvím, ale to opravdu odpovídá účelu stránky krásně.
aktivovat
Ilustrace v tomto designu nejen informuje o události, kterou představuje, ale také oznamuje samotný účel události. Tato konkrétní událost se točí kolem odpojení od technologie. Je to šance pro lidi zaplavení technologií, aby unikli svým spojům.
Obrázek nám ukazuje, co budou dělat účastníci, takže je informativní. A díky své povaze se ilustrace rozpadá s technologií a zakořeněná se čistě organickým pocitem, což je zásadně skvělý způsob, jak sdělit místa účelům.
Více informativních ilustrací
Tyto extra stránky také ukazují myšlenku ilustrací, které nás informují. Některé jsou drobné a základní ikony, zatímco jiné jsou ponořující prvky, které plně definují a reprezentují obsah.
Vitality City
Uklizenodoma.cz
Qubiq
Technologická protilátka
S posledním příkladem (The aktivovat místo) jsme vstoupili do toho, co chci uvažovat příště, použití ilustrace prolomit technologicky orientovaný pocit věcí. Někdy je nutné se odpojit od technologických podkladů webu a ukázat velmi organický pocit. Ilustrace je jedním z nejsilnějších nástrojů pro dosažení takové myšlenky.
Aplikace zásilky
Tato přímočará blízká stránka není nic výjimečného. A jasně, jak se jeho krása splňuje, je radikálně jednoduché. Jediná obrovská ilustrace, která nás sama odděluje od skutečnosti, že se jedná o webovou stránku. Cítí se spíše jako umělecké dílo, které má malý interaktivní prvek, což je určitě skvělý způsob, jak udělat obrovský dopad na uživatele a vytvořit nezapomenutelný obraz.
Muziekpark
Zatímco tato stránka nevyužívá docela tak radikálního přístupu, ilustrace je stále velká a prominentní v uspořádání. Zde animované snímky dýchají život do stránky. Kombinujte to s kreativním a neobvyklým rozložením a cítí se plně oddělené od technologie, která ho pohání. Snad to, že to nevypadá jako normální místo, hraje v této též mocnou roli. Domníváme se také, že ilustrace v tomto případě nám skutečně pomáhá informovat o tématu webu.
Egopop
V ještě jiném atypickém uspořádání zjistíme, že ilustrace byla dána do práce. Zde umělecká díla nehovoří jen o tom, jak jedinec představuje stránky, ale také nás rozvracejí z běžného myšlení, které by návštěvník mohl mít. Opět se cítí spíše jako interaktivní dílo než webové stránky. Pokud je to váš cíl a potřeba, pak je to skvělý přístup, který je třeba zvážit.
Zaarly
Ve srovnání s předchozími příklady, Zaarly místo stojí v jasném kontrastu. I když je návrh řízen jedním velkým příkladem a toto ilustrace slouží k nastavení tónu pro danou lokalitu, základní funkce je mnohem složitější než tyto ostatní vzorky.
Tento web je aplikace, která je určena k použití. A ilustrace pomáhá vytvořit určitý soubor očekávání. Dává lehký, humanistický pocit, který je zjevně velmi organický a přirozený. Představte si to v kontrastu s semi-minimalistickými aplikacemi bez osobnosti vůbec. Návrh přináší webu pocit dostupnosti a posunuje naše očekávání.
Závěr
Použití ilustrace v designu je starodávnou praxí a její aplikace na web je jasná. Stejně jako u každého konstrukčního prvku mám radost z procesu přehodnocení jeho účelu a použití. Prostřednictvím takového úsilí jsem nevyhnutelně zjistila, že získávám lepší podhodnocení toho, jak to funguje, způsoby, jak ji využít k zamýšlenému účelu, av konečném důsledku i některé nové a inspirativní myšlenky.
Jak používáte ilustrace v návrhu webových stránek? Podělte se o své zkušenosti níže ....