O klientovi
MAXECO je firma prodávající a instalující speciální topné fólie, které se vymykají od ostatních metod vyhřívání domu. Tyto tenké pásy topných fólií jsou totiž zabudovány v podlaze a rovnoměrně ohřívají celý prostor, což přípomíná pocit sálání tepla. Společnost si zakládá ne jen na prodeji, ale hlavně na zajištění kompletních služeb od A do Z – pro své poteciální klienty připraví projekt, rozpočet a následně topný systém nainstaluje, otestuje, spustí a předá.
Více o klientovi na www.maxeco.info
Zadání klienta
MAXECO si v základu přálo spojit dva weby a jejich veškerý obsah směřovat na jednu jedinou webovou stránku. Na novém webu pak dále požadovalo:
- zvýraznit výhody a efektivitu svých služeb;
- jasněji a přehledněji prezentovat, že to není jen a pouze o prodeji topných fólií, ale především o kompletním servisu pro lidi (návrh řešení, instalace, servis a záruka);
- vylepšit a podpořit web z hlediska prodejnosti a konverznosti;
- připravit web na SEO (optimalizace pro vyhledávače) a PPC kampaně;
- zlepšit responzivitu a mít možnost několika jazykových mutací.
Výsledné řešení
Podle přání a požadavků klienta jsme kompletně udělali nový web. Nejprve jsme vytvořili základní strukturu a organizaci webu (tzv. wireframe), ve které jsme načrtli představu od homepage přes kategorie až po jednotlivé podstránky podkategorií. Ve druhém kroku jsme práci předali našemu grafikovi, který vypracoval a navrhnul několik variant. Vybranou grafiku jsme nasadili na náš redakční systém a nakódovali do odpovídající podoby. Na závěr jsme doprogramovali téměř to nejdůležitější – moduly přímo na míru (např. blog či reference). A nakonec jsme web překontrolovali a doladili poslední maličkosti.
Struktura webu a wireframe
Bez smysluplného a odsouhlaseného wireframu, který prezentuje strukturu webu, nelze pokračovat. Jedním z úplně prvních kroků proto bylo vytvoření základní struktury a organizace webu. Kostru webu jsme rozřadili do tří úrovní:
- z domovské stránky povedou hlavní odkazy do kategorie prezentující topné fólie, do sekce O nás, na stránku referencí, na blog a na kontaktní stránku;
- druhá a třetí podúroveň je na novém webu zastoupena ve formě konkrétních textů nebo výpisem s odkazy na stránky s obsahem.
Před posláním zadání grafikovi jsme samozřejmě museli nastínit základní specifikace, co by se na webu mělo a nemělo objevit, jaký prostor má mít webový formulář, jestli je potřeba mít možnost více jazykových mutací apod. S klientem jsme kvůli individuálnímu návrhu grafiky také řešili některé základní a zároveň zásadní otázky, např. kdo je cílovou skupinou, jaké produkty či služby MAXECO poskytuje, jaká je konkurence a jak se vůči ní můžeme vymezit. Do procesu jsme vnesli i techničtější pohled SEO analýzy.
Návrh grafického designu na míru
Jakmile byla kmenová struktura webu odsouhlasena, poslali jsme grafikovi zadání na vytvoření návrhu vzhledu homepage a postupně i dalších podstránek. V řešení bylo rovnou několik variant – nejvíce eko do zelena, jako protipól hřejivá do oranžova a nakonec varianta s hravějšími barevnými tóny. Po konzultacích s klientem jsme upřednostili teplý, oranžový motiv, protože se nejvíc hodil k prodávanému produktu a službám.
Dále jsme na horní okraj „přilepili“ tzv. sticky menu, které s posunem po stránce dolů zůstává ukotveno, a homepage jsme se rozhodli obohatit o video, kterým navozujeme atmosféru. Ve stejném duchu jsme posléze rozpracovali i další podstránky, díky čemuž jsme dokončili kompletní grafický prototyp s rozložením a výběrem prvků tak, jak byly namyšleny pro ostrý web.
Kodérské a programátorské práce
V tento moment jsme grafiku a zmiňované šablony implementovali na web. Postupně jsme vyhotovovali a nakódovali:
- domovskou stránku,
- stránky produktů,
- stránku referencí,
- Kontakty,
- O nás
- a blogovou sekci.
K těm bylo samozřejmě potřeba doplnit i odpovídající moduly tak, aby všechno šlapalo, jak má, i s přihlédnutím ke konkrétním požadavkům a přáním MAXECA.
Na míru jsme proto např. naprogramovali Reference a Kontakty. V referencích se nám podařila jednoduchá a dynamická mapa. U ní se při načtení objevují a zajíždějí jednotlivé reference, takže ihned po otevření stránky zákazníci vidí výběr několika realizací. Stránku kontaktů jsme zase uzpůsobili tak, aby z ní bylo na první pohled patrné, v jakých regionech a státech MAXECO operuje a jak se s těmito regionálními či národními partnery spojit.
Závěrečné detaily a dokončení webu
Po dokončení kodérských prací a doprogramování modulů na míru byl web již víceméně použivatelný, avšak ne kompletně hotový a připravený na ostrý provoz. V závěrečné fázi jsme doladili ještě několik technických detailů důležitých pro funkčnost webu:
- Nastavení procházení a indexace prostřednictvím souborů robots.txt a sitemap.xml (generujeme automaticky)
- Základní SEO kontrola (URL adresy, struktura nadpisů, optimalizace obrázků, drobečková navigace apod.)
- Zajištění responzivity na rozdílných prohlížečích (Chrome, Mozilla Firefox, Safari ad.) a platformách (telefony, tablety, počítače)
- Nastavení nástrojů potřebných k webové analytice (Google Analytics, Google Search Console)
Jakmile byly zapracovány i tyto nezbytné drobnosti, nový web pro MAXECO jsme úspěšně dokončili, zveřejnili a klientovi předali.
Rozdíly po a před
Podobné reference
Tvorba e-shopu na míru pro Prefa Brno
Nový prezentační web zaměřený na design a čisté provedení
Redesign webu hotelu Continental
