Skica postavičky pro web

Udělali jsme redesign webu Wittmann Tours s omezeným rozpočtem

Představa mimo budget

Předtím, než jsme si sedli s Wittmann Tours a povídali si o redesignu jejich stránek, jsme měli dost odlišnou představu o tom jak jejich túry prezentovat.

Zobrazení stránky na mobilu

Naší prvotní myšlenkou bylo představit všechny prohlídky formou pohlcujícího interaktivního dokumentu, který bude doprovázen mnoha fotografiemi a videi. Po výpočtu finančních nákladů na takovou výrobu a po upřesnění rozpočtu s Wittmann Tours jsme ale zjistili, že stanovený budget nám výrobu rozhodně nepokryje. Museli bychom jít cestou umenšování interaktivních prvků, což by výslednému dílu ubralo na kráse a efektnosti. A než něco dělat polovičatě, je lepší to nedělat vůbec. Myšlenku jsme proto raději opustili a začali jsme hledat nové řešení.

Zpátky ke kreslícímu prknu

Ačkoliv jsme měli značně okleštěný rozpočet, nechtěli jsme projekt zcela opustit. S Wittmann Tours máme přátelské vztahy a jejich práce se nám líbí. Navíc jsme už byli nadšení a natěšení, že pro ně něco krásného vytvoříme! Bylo proto třeba věci co nejvíce zjednodušit. Nakonec jsme jako průvodce webem vymysleli animovanou rodinku, která tvoří kreativní prvek na vícero podstránkách. Také jsme se rozhodli využít „backend“ kódování z původních stránek, což nám ušetřilo spoustu programátorského času.

Zjednodušení UX

Nejdůležitější změnou v návrhu bylo jednoznačně zjednodušení procesu prohlížení a rezervace zájezdů. Dost času jsme také strávili přemýšlením nad tím, co bychom mohli ze stránek odstranit, abychom dosáhli plynulejšího a intuitivnějšího uživatelského prostředí. Ke každému zájezdu jsme přidali zajímavosti, historické souvislosti a často kladené otázky.

Schéma nového UX designu
Ukázka konceptu nového UX prezentovaného klentovi.
Pokud kliknete na bublinu s přímou řečí, budete přesměrováni přímo do dané recenze na stránkách TripAdvisor, z níž výňatek pochází.

Inspirace hrou

V rámci zachování jednoduchosti jsme vytvořili pouze omezený počet postaviček, které návštěvníka provázejí webem.

Inspirováni vizuály adventure her typu Point and Click, jako je například Broken Sword, jsme nakreslili rodinku, jež nás plynule provádí celým webem. Postavičky rozpohybovali a z těchto animací chůze jsme vytvořili úvod, sekci recenzí i stránku 404. Klient nás nakonec požádal, zda bychom rovněž ilustrovali úvodní obrázky k hlavním zájezdům. U těchto prohlídek jsme proto vždy vybrali nejznámější objekty dané trasy a použili je jako úvodní ilustrace.

Návrh postaviček pro animaci
Místo použití videí jsme pro animaci použili WebGL.
Ilustrace - Památník Operace Anthropoid Ilustrace - Orloj na Staroměstském náměstí Ilustrace - Tančící dům Ilustrace - Španělská synagoga

Použij to znovu, pak recykluj

Zaměřili jsme na to, abychom využili co nejvíce původního kódu z předešlých stránek a tím snížili celkový rozpočet.

Výzva přijata! Pustili jsme do toho a pokusili jsme se využít co největší množství původního kódu. Nainstalovali jsme nejnovější aktualizace zabezpečení a provedli drobná vylepšení. Díky naší schopnosti zachránit většinu kódu jsme nakonec ušetřili spoustu času na vývoji. Naopak front-end kód jsme museli naprogramovat od samého začátku. Naštěstí knihovny typu pixi.js a gsap celý proces zjednodušily a učinily ho mnohem zábavnějším. Závěrem jsme pak optimalizovali veškerá multimédia i kód pro rychlé načítání stránek, abychom potěšili nejen návštěvníky, ale i vyhledávače.

Chybová stránka 404. Text v bublinách je náhodně vybírán ze seznamu.

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