Skica pro ilustraci

Sami jsme zažili horor se švábi! tuto zkušenost jsme přenesli do konceptu nových webových stránek pro Aderu.

Ocenění - Honorable Mention z Awwwards

Začínáme strukturou

Správná struktura webových stránek je základ! Vrhli jsme se proto do hloubkové analýzy dat a zjistili jsme, že dosavadní struktura byla kompletně špatně.

Ukázka z webu adera.cz

Nejprve jsme se probrali daty Google Analytics za několik předchozích let. Výsledek byl překvapivý. Zjistili jsme, že návštěvníci nehledali samotnou službu ochrany před škůdci, ale rovnou konkrétní škůdce! Tento poznatek se tak stal klíčem pro novou strukturu. Rozloučili jsme se s většinou podstránek zaměřujících se výhradně na nabídku služeb, a místo toho jsme vytvořili přehledný atlas škůdců. Každý škůdce má nově svou vlastní stránku se všemi souvisejícími informacemi. Návštěvníci si zároveň mohou deratizační službu objednat přímo z těchto podstránek. Ukázalo se, toto rozhodnutí bylo výborné. Dramaticky totiž firmě zvýšilo konverzní poměr.

Atlas škůdců na webu adera.cz

Příběh

Při vytváření záhlaví stránek jsme zvažovali mnoho různých způsobů a stylů ztvárnění, od natáčení živých škůdců až po použití loutek. Abychom se ale vešli do stanoveného rozpočtu, rozhodli jsme se nakonec pro ilustrace.

Měli jsme přitom "štěstí", že jsme na vlastní kůži zažili invazi švábů. Příběh, který se stránkou prolíná, jsme tak mohli rekonstruovat na základě naší vlastní zkušenosti.

Vytvořili jsme hororový příběh rodiny, nad jejímž životem převzali vládu nejrůznější škůdci. Jednotlivé scény a obrazy jsme proměnili v pohybující se „zátiší“, která se vznáší či přejíždí po obrazovce pomocí paralaxových efektů.

 
Ilustrace pro Homepage

Homepage

Rodina přichází domů na večeři, aby zjistila, že místo u stolu obsadila švábí rodina. Založeno na pravdivém příběhu.

Skica ilustrace pro homepage
Původní skica
Návrh postavy

Ochrana před škůdci pro firmy

Maminka vchází do svého obchodu. V šoku zjišťuje, že novými majiteli se staly krysy a převzali zde veškerou vládu.

Ilustrace pro stránku Systémová ochrana
Ilustrace pro stránku Školení

Školení o ochraně před škůdci

Ani hlava rodiny nemá dobrý den v zaměstnání. Jeho přednášku za něj vede štěnice.

Původní skica
Původní skica

Rizikové vyklízení

Rodiče požádali dceru, aby jim pomohla vyčistit sklep, který si pronajali. Celé místo je ale infikováno bakteriemi a odér tu začíná připomínat drogovou laboratoř. Adera naštěstí tento úkol vyřeší za vás – bezpečně a „levou zadní“.

Ilustrace pro stránku rizikové vyklízení

51 mini ilustrací

„Nakaženi“ estetikou klasického hororu jsme vytvořili ilustrace pro 51 sekcí webu.

Ilustracím jsme vdechli styl 60. let. Při jejich tvorbě jsme si užili plno legrace, a nakonec jsme s Aderou pracovali i na využití kreseb pro budoucí propagační materiály.

Mini ilustrace z celého setu pro web ve stylu 50.let
První set ilustrací pro web ve stylu 50.let Druhý set ilustrací pro web ve stylu 50.let Třetí set ilustrací pro web ve stylu 50.let

Ikony na míru

Navrhli jsme rovněž sadu ikon, které symbolizují jednotlivé kategorie škůdců. Pohráli jsme si rovněž se systémovými ikonkami. Adera je nyní používá i pro tiskové materiály jako součást své vizuální identity.

Sada ikon pro web

Kódování

Paralax kouzla vytvořené s pomocí WebGL

Největší výzvou pro nás bylo, aby všechny rolovací hlavičky paralaxu běželi hladce v plynulé animaci, a to napříč všemi zařízeními. Nejprve jsme se proto pokusili použít k animaci záhlaví normální CSS a Javascript. Po několika testech jsme ale zjistili, že animace běží na mobilních zařízeních příliš pomalu. Rozhodli jsme proto použít WebGL framework Three.js, který vše zvládl s naprosto skvělým výkonem. Pozadí stránek je poháněno Wordpressem.

Jedna z finálních mini ilustrací pro web

Jaké parádní dílo můžeme vytvořit pro vás?