Zadání
Redesign webu výrobce dřevěných plotů Bekr Servis z podhůří Vysočiny. Důraz na propracovaný design. Vytvoření e-shopu. Unikátní poptávkový formulář s propojením na e-shop, provázání galerie s mapou realizací. Nafocení výrobních prostor a produktů, storytelling a copywriting.
Řešení
Web byl naprogramován na platformě WordPress bez použití komerčních šablon. Vytvořili jsme vlastní řešení s nově vyvinutými komponenty: E-shop postavený na Woocommerce, galerii realizací propojenou s Google Maps, interaktivní 3D konfigurátor plotu a úvodní slider s animovanými skládanými fotografiemi.
Redesign webu je postaven na zakázkových fotografiích. Focení probíhalo ve třech etapách: nafocení výrobních prostor, nafocení roubenek pro úvodní slider a produktové focení výrobků pro e-shop.
Kladli jsme důraz na promyšlený copywriting, který prezentuje firmu Bekr Servis.
Copywriting a vytvoření obsahu
Abychom mohli správně odprezentovat DNA firmy Bekr Servis, spolu s majitelem firmy jsme absolvovali několik konzultačních schůzek. Díky bohaté praxi klienta v této oblasti podnikání, byla příprava textů pro web jednodušší, než u jiných zakázek. Bylo však nutné přepracovat texty všech podstran do jednotného stylu, popsat historii firmy a v sekci Dřevěné ploty přepsat text s výčtem technologií do lidštější podoby.
Pro poutavější popis výroby plotu jsme spolu s kreslířem vytvořili sérii kreseb, popisující celý průběh zakázky.
Redesign webu
Celý web je laděný do tmavězelených odstínů, přecházejících až do barvy tyrkysové. Tyrkysová barva tak koresponduje s firemní identitou loga Bekr servis.
Redesign webu je postaven na zakázkových fotografiích. Ty byly použity především na domovské stránce a také v mozaice v sekci Kdo jsme. Klientské fotografie, pořízené na různých zařízeních, v nejednotné kvalitě, jenž jsme museli využít v sekci Dřevěné ploty, byly postprodukcí upraveny tak, aby vizuálně ladily s celým webem.
Jednotícím prvkem webu je práce s kružnicemi, které byly použity jak na domovské straně webu, tak i v poptávkovém formuláři.
Výroba fotografií pro slider
Vytvoření skládaných fotografií pro úvodní slider. Vzhledem k tomu, že web je celkově tmavý, úvodní fotografie musí upoutat a zaujmout. Toho bylo dosaženo výběrem lokací a časem focení tak, aby fotografie byly zalité sluncem. Saturované barvy dobře kontrastují s celkovým laděním webu. Abychom upoutali pozornost na plot, fotografie byly převedeny do vrstev. Ty byly následně programově rozanimovány při najíždění úvodní stránky webu nebo v interakci na srolování.
1. Původní klientské foto
Výběr lokací z dostupných fotografií klienta,
které by mohly být vhodné pro realizaci
celkové idey.
2. Předfocení lokace
Prohlídka vybraných lokací před vlastním focením. Vyhledání správných úhlů pro focení, zjištění polohy objektů ke slunci a stanovení přesného času focení.
3. Nafocení lokace
Focení roubenek. Fotili jsme v jeden den na třech různých lokacích. V postprodukci byla odstraněna původní obloha. Bude vyměněna za jinou a následně zanimována.
4. Příprava plotu
Příprava všech vrstev fotografie tak, aby do sebe perfektně zapadaly a nabízely prostor pro animaci.
5. Finální foto
Výsledná fotografie, sestavená z vrstev. Ty jsou animované při najetí úvodní stránky a v interakci
na scrolování obsahem.
Programování a vývoj webu
Web je naprogramován od základů (bez využití předpřipravených řešní typu Elementor nebo DIVI). Díky tomu jsme měli veškeré požadavky klienta plně pod kontrolou a mohli jsme web naprogramovat přesně podle navrženého designu.
Poptávkový formulář je napojený na e-shop. Vybrané komponenty a jejich rozměry vygenerují objednávku, která je odeslána přímo výrobci. Sekce realizací interaktivně propojuje galerii fotografií realizací plotů Bekr Servis s Google mapou.
Administrátorská sekce webu je rozšířená o uživatelská pole, které klientovi umožňují spravovat a updatovat vybrané části webu bez našeho zásahu.
Vývoj zakázkového e-shopu
E-shop je postaven na platformě Woocommerce s možností správy agendy e-shopu přímo v administraci webu. Základní funkčnost Woocommerce jsme rozšířili dle požadavků na správu sortimentu. Bylo nutné nadefinovat vlastnosti všech komponent plotu do úplného detailu (délka, výška, průměr, povrchová úprava, odstín nátěru) a následně s nimi pracovat při výpočtu dopravy či poptávky.
Pomocí rozhraní API jsme napojili e-shop na dopravní službu Top Trans. Tím se automaticky kalkuluje cena za dopravu dle hmotnosti produktů, vzdálenosti a sazeb ceníku Top Transu.
E-shop byl nadesignován tak, aby odpovídal celkovému vzhledu webu. Zapracovali jsme do něj grafické prvky z poptávky plotu, vyrobili mockup s důrazem na brand klienta. Vzhled objednávek a faktur byl upraven tak aby odpovídal grafickému manuálu Bekr Servis.
Interaktivní 3D poptávka s napojením na e-shop
Pro atraktivní konfiguraci plotu jsme vytvořili propracovanou interaktivní poptávku s 3D rendery pozemku a jednotlivých prvků plotu. Konfigurátor se skládá z více než tisíc prvků, ty jsou zobrazovány například dle výběru typu opracování, typu komponentu, povrchové úpravy. Zákazník tím získává přesnější představu o finální podobě plotu.
Konfigurátor následně vygeneruje nákupní objednávku, která je odeslána výrobci. Výrobce plotů tak získává přesný soupis komponentů pro výrobu a zákazník předběžnou představu o ceně.
Děkuji moc, že se vám podařilo udělat nadčasový web s působivou úvodní grafikou, s poutavým příběhem a prvky webu, který web oživují. Hlavně oceňuji jak technicky, tak i graficky zpracovaný 3D poptávkový formulář, který zákazníky v jednotlivých krocích interaktivně provází celým objednávkovým procesem. Ještě jednou děkuji Vibes Visionu, za moderní a kreativní uchopení celého konceptu webu, který nás posunul dopředu a přeji hodně pracovních a osobních úspěchů.
Majitel firmy Bekr Servis
Přemýšlíte nad redesignem vašeho webu?
Napište nám.