Mascot for the website

Může být nakupování vymezovacích kroužků zábavné? No samozřejmě!

Webdesign

E-shop pana Kroužka se povedl. Svědčí o tom stovky 100% pozitivních recenzí eshopu na Heureka.cz.

Vymezovaci-krouzky.cz neprošel redesignem pěkně dlouho dobu a tak bylo na čase se mu podívat pod pokličku. Jeho majitel mě požádal o vytvoření svěžího, uživatelsky přívětivého a zábavného designu. Mým cílem bylo vytvořit z obyčejného nákupu nezapomenutelný zážitek. Nové stránce jsem rovněž chtěl vdechnout příběh a představit návštěvníkům zábavné okamžiky ze života pana Kroužka. S podporou WebGL na všech moderních zařízeních jsem se rozhodl scény vykreslit pomocí 3D přímo v prohlížeči i s interaktivitou.

Po dokončení nákupu vám pan Kroužek zatančí.

Příběh

Pan Kroužek je postava, kterou jsem vytvořil pro předchozí verzi webu. Všichni si ho zamilovali, a proto jsem prostě musel pokračovat v jeho příběhu.

Projekt měl dost nízký rozpočet, mým úkolem tedy bylo velice efektivně nakládat s časem. Jednotlivé scény webu jsem se rozhodl postavit na třech 3D modelech. Seznamte se s panem Kroužkem, panem Liškou a báječným Autem.

Skicy

Rychlé skicy jsem vytvořil pro vizualizaci a představení nápadu zákazníkovi.

Postavy

Navrhování scén ve 3D, které měli být vykresleny přímo v prohlížeči, se ukázalo jako pořádná výzva. Všechny 3D modely mít nízký počet polygonů, aby se stránky rychle načítaly.

Pan Kroužek

Náš hlavní hrdina. Odborník se specializací na „vymezovací kroužky“. Okouzlující společník, a jak se později ukáže po dokončení objednávky, i vynikající tanečník! Ve finále jsem se rozhodl vysvléci ho z původní pruhované košile, abych ušetřil nějaké ty kilobajty.

 

Pan Liška

Nejlepší kamarád pana Kroužka i zákazník. Ptáte se, na co liška potřebuje vymezovací kroužky? No, tak to ještě neznáte pana Lišku!

 

Auto

Má jen pár polygonů, přesto ale dokáže ručičku tachometru vystřelit až na 403 km/h. Wow!

 

Velice poetická
404 chybová stránka

Stránky 404 prostě miluji, neboť zde můžu naplno rozvinout tvůrčí svobodu. Na této 404 končí i všechny cesty pana Kroužka. Uvádí se zde: Chyba nebo příliš vysoká rychlost bez vymezovacích kroužků? Pan Kroužek dorazil na konec své cesty, ale vámi hledanou stránku nikdy nenašel.

Chybová stránka nám dává tolik nezodpovězených otázek. Například, visí z větve hlava pana Kroužka? Je mrtvý? A může pan Kroužel vůbec někdy zemřít, když má hlavu z plastu?

Tolik otázek na které nikdy nebudeme znát odpověď.
 

Dát vše dohromady a bezchybně nakódovat

Vytvoření webu vykresleném v reálném čase ve 3D mě postavilo před spousty nástrah a výzev. Zejména pokud jde o optimalizaci webu pro slabší zařízení.

Všechny 3D modely musely mít nízký počet polygonů, aby se scény zobrazovaly návštěvníkům okamžitě a s optimálním výkonem. Spoustu času jsem proto strávil nad optimalizací všech aktivních prvků a kódů. Díky tomu se stránka i veškeré animace načítají rychle a na všech zařízeních.

Když se nepovede import 3D modelu

Pane Kroužku! Tohle je zakázaná jóga póza!

Malé chyby v kódu mohou vést k velkým potížím

A jsem si zcela jistý, že k tomuhle došlo těsně před načtením chybové stránky 404.

Bez risku není zisk

Dělat eshop s 3D byl trochu risk, který se ale vyplatil. Zákazníky nejvíce oslovilo originální zpracování i to, že se pro ně běžný nákup stal zábavným zážitkem a pan Kroužek je hrdý, že má jeden z nejoriginálnějších eshopů v ČR a možná nejlepší eshop s vymezovacími kroužky na světě.

 
Pan Kroužek v autě

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