Občas se designéři ve snaze o efektivní vizuální řešení soustředí na formu a nepřemýšlejí o tom, jak samotný design souvisí s produktem. Shromáždí módní prvky dohromady, ale nespojí je s myšlenkou. A to je v koncepční práci špatná cesta.
Nápad v designu je vlastně soubor grafických řešení, který kombinuje typografii, kompozici, scenérii a barvu. A hlavním cílem nápadu v designu je vizuálně vyjádřit vlastnosti značky nebo produktu.
Vadim Gaidai, vedoucí týmu webového oddělení agentury League Design, vysvětluje na příkladu webových stránek pro značku medu, jak vytvořit dobrý nápad na design a dobře ho realizovat.
Design bez nápadu
Vizuální část webových stránek se často vytváří bez nápadu. Vývojáři používají grafická řešení, která netvoří jasnou představu – nebo je spíše rozmazaná, obecná a bez charakteru. To se může stát ze tří důvodů (a ty se často kombinují):
- — slepé následování trendů,
- — rámec klienta (čas, rozpočet),
- — vizuální podmínky na trhu.
Výsledkem může být vizuálně atraktivní, ale šablonovitý design. Bude vypadat poskládaný, ale nebude fungovat, protože pokud je v systému identity snadné nahradit jedno logo jakýmkoli jiným (a webový design je nositelem identity), pak taková identita nebude fungovat. Jednoduše nemá žádnou jedinečnost.
Vezměme si například tuto šablonu – místo názvu této značky a fotografií sklenic s medem by to klidně mohlo být cokoli jiného:
Pokud se však podíváš na práce několika konkurentů nebo na Pinterest, okamžitě najdeš tisíce (nebo i více) implementací podobných grafických řešení:
Aby nedošlo k této chybě, vyplatí se věnovat čas a pozornost fázi generování nápadů.
Jak vygenerovat nápad na design
Tvorba grafických nápadů pro webové stránky je podobná tvorbě jakéhokoli jiného řešení značky. Jedná se o čtyři hlavní kroky:
#1 Analýza produktu. Představme si, že náš klient je konkurentem společností, jejichž webové stránky jsou uvedeny výše. Řekněme, že si říká High Honey (jakákoli shoda se skutečnými značkami je náhodná). Abyste lépe porozuměli produktu, najdeš odpovědi na tyto otázky:
Proč lidé kupují med od společnosti High Honey? Na tuto otázku se lze zeptat zákazníka, ale lépe bude fungovat kvantitativní průzkum mezi věrnými zákazníky (například prostřednictvím formulářů Google).
Jak vypadají konkurenti? O čem konkurenti mluví, na co kladou důraz při prodeji svého produktu? Například: „Vyrábíme med od roku 1896“ nebo „Náš med skladujeme v dubových sudech, a proto má bohatou chuť“.
Jaká je konkurenční výhoda značky High Honey? Zjisti všechny výhody značky (zeptej se svého zákazníka nebo si je zjisti sám*sama) a porovnej je s výhodami konkurence. Jedinečné výhody budou tvou specialitou. Ta, která se shoduje s výhodou nejčastěji zmiňovanou v průzkumech mezi zákazníky, je tvou hlavní konkurenční výhodou.
Poté, co jsme provedli malý průzkum podnikání klienta, bylo jasné, že hlavní konkurenční výhodou tohoto produktu je jeho poloha – velký včelín se nachází v Karpatech, kde nejsou žádné továrny, dálnice ani zemědělské podniky. Značka se tak může zaměřit na „horskou“ čistotu svého produktu.
#2 Generování nápadů. Napíšeme si všechna slova, která korelují s naší značkou a její hlavní předností – šetrností k životnímu prostředí (v bublinách slov budou: čistý, horský, průhledný, lehký, lesklý, bohatý, lesní, skalní, lesní atd.)
Pak si tahle slova musíš zkusit představit ve své hlavě – ale tak, aby to přímo nesouviselo s produktem. Velmi se mi líbí představa skály, na které se nachází včelín – nebo skály tvořené medem.
#3 Hledáme hlavní grafickou techniku. Když jsme připravovali tento projekt, rozhodl jsem se hledat ztělesnění hor ve včelařství a narazil jsem na tyto fotografie:
Rozhodli jsme se vytvořit grafiku stylizovanou pro tento obrázek v programu Figma. Mohli jsme to udělat ve 3D v Blenderu, ale na nástroji zde nezáleží – vyber si, co ti vyhovuje.
Pomocí pluginu Mesh Gradients jsme vygenerovali gradient a přidali na něj voštinovou mřížku (jednalo se o kombinaci dvou mřížek: jedné s režimem Darken a druhé s režimem Overlay). Řemeslnou zrnitost přidal plugin Noise:
Hlavní grafickou technikou tak byly medové hory s voštinovým vzorem v medových odstínech. Vyšlo to takto:
#4 Koncept designu stavíme na grafické technice. Když byla grafická část hotová, začali jsme vybírat typografii. Vybrali jsme písmo, jehož prvky připomínaly kapky medu – Branch Modern Ligature od Awwwards Fonts. Tlačítko bylo navrženo na základě šestiúhelníku – jako velmi široká včelí plástev.
Štětcem (nedbale, ale rychle) jsme nakreslili stromy a medvědy, aby návštěvníci stránek přesně pochopili, o čem jsou hory a med. Poté jsme přidali sklenici medu (náhodnou, kterou klient nahradí svou vlastní):
Ve zkratce
Při realizaci nápadu v designu je důležité zaměřit se na hlavní konkurenční výhodu značky a grafickou techniku, která jí nejlépe vyhovuje. Jakmile budeš mít základ, bude snadné ho doplnit o další prvky a udělat ho ještě zajímavějším. Klíčové je navrhovat ne kvůli designu, ale kvůli produktu.