495 Vodka se narodila v Moskvě. Prémiový nápoj vyrobený pro zámořský trh. 495 je odkaz na kód města a slogan Born in Moscow zdůrazňuje vysoký stav produktu.
Okamžitě poznámka pro ty, kteří se budou ptát na konverzi: toto je image web, jeho hlavním cílem je zprostředkovat charakter, historii značky, vyvolat emoce a překvapení. Web by se neměl doslova prodávat, měl by originálně předvést produkt a jeho nápady.
Zvládli jsme tento úkol? Uvidíme – odkaz na web.
„Vodka 495 se vyrábí a plní do lahví v továrně Bryansk Vodka Factory, která se nachází 350 km jihozápadně od Moskvy“ .
Cokoli. Od umělce
O korporátní identitu projektu se postarala nezávislá umělkyně z hlavního města Julia Popova, která nakreslila hlavní postavy štítku. Zobrazuje siluetu obyčejného Moskvana na pozadí známých moskevských míst: budova Moskevské státní univerzity a stará televizní věž. Na stole vedle je vintage telefon. To vše vytváří podvědomé spojení se značkou.
Mimochodem, stalo se, že toto je již náš druhý případ vývoje webových stránek pro produkt ve skleněné láhvi. Pouze v tomto případě mluvíme o alkoholu a v předchozím případě se objevuje zcela opačné téma diskuse – sójové mléko. Tady – o emocích, nostalgii, pohodových večerech v Moskvě a estetice velkoměsta – o zdravém životním stylu, nekonečném pohybu a moderní ekologické spotřebě.
Případ webu o alternativním mléce, který získal nominaci na „Nejlepší design“ podle ocenění Tagline Awards 2020–2021 – Odkaz.
Tajemství téměř ideální projekt
Masha Andrienko, vedoucí projektu 495 Vodka, hovořila o tom, proč považuje tento projekt za téměř ideální:
Toto byl můj první webový projekt o alkoholických nápojích. A proto si myslím, že je to z hlediska jeho podmínek (alespoň pro mě) téměř ideální projekt:
- Dobře napsaná technická specifikace popisující funkce a požadavky na web, oba vizuální a technické.
- Krásná a vysoce kvalitní vykreslení, fotografie z focení, videa a skutečná ochota vyplnit potřebné materiály.
- Čistý text pro web na začátku projektu (design byl proto původně vyvinut s ohledem na něj).
- Zajímavý a promyšlený příběh.
- Environmentální politika značky.
Cílem projektu je vytvořit web s jedinečným designem, který by byl spojen s prémiovým produktem ruského původu a nést DNA značky. Počáteční odkazy byly longshotfeatures.com, donpaparum.com, bedlamvodka.com.
Návrhářka projektu Sofya Treskovskaya poskytla pro web mnoho dalších ilustrací, což výrazně zvýšilo originalitu, ale zvýšilo časovou osu projektu. Zpočátku klient stanovil přísný časový rámec, ale po cestě nás navštívili nové zajímavé nápady, které vyžadují další zdroje. Díky tomu jsme mohli získat čas na to, aby byl projekt promyšlenější a kreativnější.
Splnili jste konečně termín? Upřímně, opravdu ne. Došlo k pandemii, při výrobě zákazníka nastaly potíže, kvůli kterým dočasně pozastavil projekt. Takže jsme dostali nárazník, abychom projekt dovedli k dokonalosti. Potíže byly způsobeny skutečností, že jsem musel změnit návrháře projektu, ale vše proběhlo téměř bezbolestně (děkuji, Emile!).
Vlastnosti rozvržení projektu očima návrháře rozvržení
Roma Baranov a jeho projev.
První designový dojem – WoW! Musím to udělat? Okamžitě se objevila myšlenka, že budu muset skákat přes hlavu a používat knihovny, se kterými jsem dosud nepracoval. Poprvé jsem použil lokomotivní svitek, GSAP, BarbaJS. Nyní vám povím o hlavních obtížích, s nimiž jsem se setkal, a jak jsem je vyřešil.
BarbaJS and Locomotive scroll
Barba.js je malá knihovna s vlastními nuancemi, která pomáhá k vytvoření plynulých přechodů mezi stránkami. Díky Barba.js funguje web jako SPA (Single Page Application) a pomáhá snížit latenci mezi stránkami, minimalizovat požadavky HTTP prohlížeče a zlepšit uživatelský komfort.
Locomotive Scroll poskytuje plynulé posouvání s podporou paralaxních efektů, přepínání tříd a spouštění obslužné rutiny události, když jsou položky ve výřezu. Vlastní svitek vypočítá výšku sekce při načtení stránky a přepočítá na změnu velikosti a přímé volání. Při procházení mezi stránkami Barba nejprve stáhne obsah další stránky s požadavkem a poté odstraní obsah aktuální stránky, a proto se výška stránky vypočítá nesprávně, pokud se nic neděje. Opět platí, že kromě responzivních vývojářů v Barba.js existuje vynikající dokumentace pokrývající případ interakce s lokomotivním svitkem.
S lokomotivním svitkem byl také další problém: používal jsem relativně nový GSAP plugin, GreenSock. Animuje prvky posouváním a přirozeně, pokud použijete vlastní posouvání, musíte zadat parametr scroller (protože ho mají napsaný v dokumentaci).
Odlet z roviny na hlavní stránce
Způsob, jakým letadlo vzlétlo, následovaný dalším úsekem jiné barvy, způsobil problémy. Pokud je animace svázána se svitkem, je viditelný přechod sekce s bílým pozadím do sekce s černým. Návrhářova myšlenka byla, že spojení sekcí by nemělo být viditelné, obsah by se měl objevit na bílém oblaku. Chtěl jsem to udělat kvůli skutečnosti, že mrak překrývá bílý spoj, jako další bílá část. Pokud jej necháte vyskakovat poté, co mrak zaplní celou obrazovku a přechod není viditelný, pak nastane vleklý okamžik, kdy uživatel uvidí na obrazovce pouze tento bílý mrak bez obsahu, což podle mého názoru není moc dobré. Ve výsledku jsme na křižovatce bloků nakreslili mraky, díky nimž jsme skryli plynulý křižovatku a učinili přechod zajímavějším.
Čerpání Fps
Hlavním problémem, kvůli kterému jsem byl na začátku projektu připraven opustit vlastní rolování, bylo fps drawdown. Zpočátku to bylo kolem 15-18. Postupem času jsem dokázal zvýšit ukazatele na ~ 30, což bylo víceméně přijatelné, ale stále ne dost. Nakonec jsem pro všechny animované prvky, které se hlavně točí nebo pohybují, pověsil vlastnost will-change: transform; Výsledkem bylo zvýšení až o 60 snímků za sekundu s menšími čerpáními u velkých souborů SVG.
Jezdec s lahvemi
Obtížnost nastala při animaci přechodů mezi snímky, protože text se pohybuje jako disk, jako vytáčení starých telefonů.
Strom v zápatí na hlavní stránce
Obsah je umístěn uvnitř strom a jakékoli zvětšení textu způsobí, že text přejde přes scenérii. Okamžitě bylo řečeno, že text by neměl růst, ale na adaptivním textu, tak či onak, se text nemusí hodit a tento problém musí být nějak vyřešen. Při přizpůsobování proto musel být strom rozřezán na části a část obsahu zůstala jen černá.
Kontrola věku uživatele
Když jsem dal tuto kontrolu na web, úplně se rozbily všechny skripty. Výsledkem bylo, že aby vývojáři pluginu mohli správně popsat logiku toho, jak zobrazit preloader, potvrzení věku a animaci na stránce (aby se nepřehrávalo před potvrzením věku), museli napsat Slacku. Mimochodem, jsou velmi aktivní jak tam, tak v sekci Problémy na GitHubu.
Také jste potřebovali zjistit, kdy zobrazit potvrzení a kam uložit informace o něm. První myšlenka je cookie. Existuje pouze jedno „ale“. Teoreticky může jedno zařízení používat několik lidí: dospělý uživatel vstoupí na web a potvrdí svůj věk. Čas plyne a na web přijde například jeho dítě – cookies ztrácejí svůj význam. Na některých stránkách výrobců alkoholických nápojů se v zásadě při každé aktualizaci stránky objeví potvrzovací okno. Řešením bylo uložit potvrzovací informace do relace.
Zarámované obrázky
Podceňovaným problémem se ukázaly být obrázky s rámečky. Přirozeně možnost udělat z toho solidní obrázek nebyla v zásadě zvažována, protože v budoucnu bude možná nutné je změnit v administrátorském panelu. Nejprve jsem házel mezi maskou a clipPath, pak jsem stál na maskách, připravoval je a všechno se zdálo být v pořádku, až jsem v jednom okamžiku šel na web se Safari: obrázky se při rolování otáčejí, hlava safari se točí, a maska letí nekonečně … Na jedné ze stránek s posuvníkem vypadá první obrázek dobře, ale začnete převracet posuvník a vše letí znovu. Obecně bylo jasné, že safari s maskou mají problémy s vlastnostmi transformace. Musel jsem vše předělat na ClipPath. Ukázalo se také, že návrhář viděl posuvník odlišně: v počáteční implementaci jednoduše listovali obrázky, v konečném se převrátí pouze plátno, rámeček stojí.
A nakonec, dvě malé potíže
1) Podrobná stránka láhve vodky způsobovala problémy: bylo nutné vytvořit efekt, jako kdyby člověk listoval v posuvníku a nepřepínal mezi stránkami.
2) Stránka měla celek epické s písmy, nyní je na webu 6 písem, v podstatě jeden styl každého z nich, ale přesto samotná myšlenka na takové množství způsobila odmítnutí, zdálo se, že to bylo příliš. Po všech argumentech designéra nebylo pochyb: bylo to opravdu nejlepší řešení.
Jaký je výsledek?
Web jsme spustili před měsícem, na CSSDA jsme obdrželi speciální ocenění, čestné uznání a vynikající mobilitu na Awwwards.
Nenašli jsme okamžitě společný jazyk se zákazníkem, ale to, co se nakonec stalo, je výsledkem jasné synchronizace s klientem a pochopení týmu, jaký výsledek chtějí obě strany získat .
Projektový tým:
Design – Sofia Treskovskaya, Emil Izmailov
Front-end – Roman Baranov
Back-end – Vladislav Korobov
Designové obaly – Cheslav Merck
Ilustrátor – Yulia Popova
Umělecký směr – Alexander Pedchenko
Vedení – Maria Andrienko
Navštivte náš Instagram, kde každý týden mluvíme o nových designových konceptech, spuštěných projektech a dalších novinkách ze studia.
#websites #webdesign #webdevelopment
