Comerto / Tvorba webových stránek a internetových obchodů / Reference webových stránek / Tvorba nového webu pro VacuSol ve svérázném designu

Tvorba nového webu pro VacuSol ve svérázném designu

Tvorba nového webu pro VacuSol ve svérázném designu
Moderní web s netradičním retro vzhledem, osobitými barvami, výraznými vizuálními prvky, s cílem ukázat produkty i reference a možností rychle je poptat.
Pro: VacuSol
Realizace: 2023
www.vacusol.cz

O klientovi

VacuSol je unikátem v českém prostředí na poli solárního ohřevu vody pomocí solárních panelů, protože solární kolektory si už od poloviny 90. let vyrábějí sami v Dolní Rožínce na Vysočině, solární sestavy dále projektují, instalují, servisují a v neposlední řadě pomáhají s vyřízením dotace. Zkrátka pokud toužíte po udržitelném a obnovitelném zdroji energie na ohřev TUV nebo na přitápění, VacuSol vám s tím pomůže od A do Z.

Více o klientovi na www.vacusol.cz

Zadání klienta

Starý web VacuSolu výrazně pokulhával za současnými standardy a moderními postupy, co se týče webdesignu. Nový web měl tohle všechno proměnit - přinést ozdravující redesign (v souladu se stávající vizuální identitou a logem), prezentovat dostupné produkty a všechny dosavadní reference solárních systémů, na stránkách měla převládat jednoduchost, přehlednost a výstižnost. Důraz chtěli klást na konverznost, proto by se mu měl přizpůsobit i kontaktní formulář k co největšímu minimalismu. Jako bonus navíc by bylo oslovení nejen koncových zákazníků, ale také odběratelů a montážních firem k těsnější spolupráci.

Jak web vypadá

Mobilní verze stránek

Výsledné řešení

Pro tvorbu webu jsme použili běžný postup skládající se z několika kroků, přičemž při jejich zpracování jsme brali ohled na požadavky VacuSolu:

  1. úvodní řešerše
  2. tvorba wireframu
  3. návrh grafiky na homepage
  4. návrh grafiky na zbytek podstránek
  5. nasazení na redakční systém Comerto
  6. nařezání grafiky a její implementace do webu
  7. tvorba modulů na míru
  8. vkládání obsahu
  9. responzivita
  10. kontrola funkčnosti a její zapracování
  11. závěrečné kontroly, příprava na optimalizaci pro vyhledávače
  12. spuštění webu

Minimalismus za každou cenu ... nebo ne?

Po zmapování všech služeb, které VacuSol nabízí, a nastínění struktury webu jsme wireframe předali grafikovi. Tentokrát jsme ale od něj dostali jedno původní, a pak druhé přepracovné vyhotovení grafiky úvodní strany.

Prvnímu návrhu dominoval minimalismus, jemné linky, kulatější bezpatkový font a decentní vizuální prvky. Grafika vypadala dobře, nebylo na ní vyloženě nic špatně, ale po chvíli pozorování jsme dospěli k závěru, že to není ono. Chyběla tomu identita a osobnost, která je v oblasti solárních panelů dnes tak důležitá.

VacuSolu jsme chtěli nabídnout odlišnost. Prohlédli jsme si proto ještě jednou jejich vizuální identitu s logo manuálem a původní návrh přetransformovali do retro vzhledu 90. let, v popředí stojí černá barva s přiměřeně agresivními, avšak stále pozitivními odstíny oranžové, písmo je výraznější a tučnější.

Druhý návrh jsme nakonec s klientem společně odsouhlasili, což nám udělalo radost. Věříme, že díky tomu firma opravdu nezapadne mezi konkurencí a stane se snadno zapamatovatelnou ikonou.

Katalog produktů s napojením na reference

Klíčovými požadavky pro VacuSol byla prezentace produktů na jedné straně a ukázání referencí na druhé straně. Obou cílů jsme dosáhli pomocí individuálních modulů na míru, které lze díky našemu Comerto redakčnímu systému dynamicky propojovat a obsažené informace zobrazovat na několika místech webu. Ve výsledku tak můžeme na detailu produktu (nebo v podstatě jakékoliv jiné stránce) zobrazovat buď kompletní výpis všech referencí, nebo jen některé z nich, třeba pouze instalace na rodinných domech.

Podobné moduly mají několik výhod (všechny je najdete v našem článku o redakčním systému), nicméně zde zmíníme alespoň některé:

  • Lepší vzájemné provázání všech jednotlivých prvků a stránek webu:
       Jasná, hierarchická struktura webu spolu s prolinkováním má výrazný vliv nejen na uživatele, ale také na hodnocení ve vyhledávačích
  • Jednoduchá aktualizace konkrétní informace na jednom místě v redakčním systému:
       Napsali jste chybu v nadpisu jedné reference? Stačí ji opravit jen a pouze jednou a projeví se to na celém webu
  • Možnost rychlé změny zobrazovaných informací, prvků či funkcí:
       Chcete na webu zobrazovat konkrétní informace už v náhledu reference? Stačí upravit několik řádků kódu a změna je okamžitě vidět

Finalizace úprav, vyladění, příprava na SEO

Po implementaci zmíněných konceptů byly na řadě trochu techničtější záležitosti.

Zajištění responzivity je důležitým aspektem moderních webů, jelikož právě díky ní je umožněno pohodlné prohlížení uživateli bez ohledu na používané zařízení nebo prohlížeč. Ať už tedy dnes přistupujete na stránky VacuSolu z počítače nebo z telefonu, z Chromu nebo Firefoxu, všechno se zobrazuje správně a tak, jak má (např. prvky nepřetékají mimo obrazovku, elementy se nepřekrývají).

V rámci našich kontrol funkčnosti se před téměř finálním spuštěním stránky podrobně procházejí, hledají se veškeré chyby a odstraňují se, např. úprava a zjednodušení poptávkového formuláře, oprava navigace a navigační struktury, doplnění chybějících textů na hlavních podstránkách, zvětšení či zmenšení okrajů, odsazení apod.

V závěrečném sprintu před spuštěním nového webu a krátce po něm jsme ještě zajistili správné nastavení parametrů sloužících k optimalizaci pro vyhledávače (SEO), mezi nimi třeba:

  • kontrola robots.txt k umožnění indexace vyhledávači;
  • generování sitemap.xml ke správné indexaci vyhledávači;
  • nastavení meta značek jednotlivých stránek;
  • kontrola 404 a broken linků;
  • nastavení základních redirectů (přesměrování);
  • aktivace analytických nástrojů na měření návštěvnosti a dalších cílů (Google Analytics 4, Google Search Console, Collabim).

Rozdíly po a před

Tvorba nového webu pro VacuSol ve svérázném designu - Porovnání, stará verze #1
Tvorba nového webu pro VacuSol ve svérázném designu - Porovnání, nová verze  #1
Tvorba nového webu pro VacuSol ve svérázném designu - Porovnání, stará verze #2
Tvorba nového webu pro VacuSol ve svérázném designu - Porovnání, nová verze  #2

Hodnocení klientem

Práce udělaná na novém webu je vidět, jsme spokojení! Prakticky denně přijdou poptávky, a to bez aktivní reklamy. S porovnáním s dřívějškem kdy chodila tak průměrně jedna poptávka za měsíc bez PPC kampaní.
Lukáš Vařejkazástupce společnosti

Podobné reference

ARPEG: Redesign webu na míru pro dlouhodobý rozvoj

ARPEG: Redesign webu na míru pro dlouhodobý rozvoj

Nový web s přepracovanou strukturou, aktualizovaným grafickým vzhledem, zlepšením uživatelské přívětivosti i konverznosti...
Betoneshop.cz: tvorba e-shopu na míru pro Prefa Brno a.s.

Tvorba e-shopu na míru pro Prefa Brno

Zbrusu nová verze e-shopu s betonovými výrobky pro dům i zahradu. Oblíbeným sortimentem jsou například betonové dlažby, květináče...
Nový prezentační web zaměřený na design a čisté provedení

Nový prezentační web zaměřený na design a čisté provedení

Moderní přístup k webdesignu si vysloužil projekt Maxmilian Develop, pro který jsme připravili kompletně nový web charakteristický...
Redesign webu hotelu Continental Brno se zaměřením na SEO

Redesign webu hotelu Continental

Nový web pro Continental Brno, známý brněnský hotel s dlouholetou tradicí, se speciálním zaměřením na prezentaci služeb a...