Denne case er udviklet som et design- og udviklingskoncept for at demonstrere vores tilgang til hjemmesider for VVS-virksomheder. Projektet repræsenterer ikke en reel kundeopgave, og der har ikke været et kommercielt samarbejde.
Jysk VVS
Et konceptprojekt for en lokal autoriseret VVS-installatør i Vejle-området. Fokus: et distinkt marineblåt design med kobber-accent, lokal SEO-strategi med 5 bysider og en selvtegnende SVG-illustration i hero-sektionen.
Type
Konceptprojekt
Branche
VVS-installation
Teknologi
Vanilla HTML/CSS/JS
Fokus
Lokal SEO · Design
Autoriseret VVS · Vinding, Vejle
VVS i Vinding til vand & varme der bare virker.
Visualisering af hero-sektionen — marineblåt design med kobber-accent
Om projektet
Baggrund og målsætning
Konceptet er udviklet med udgangspunkt i en autoriseret VVS-installatør med base i Vinding ved Vejle. VVS-branchen er generelt præget af forældede hjemmesider, og konceptet demonstrerer, hvordan en lokal håndværksvirksomhed kan positionere sig professionelt online med et distinkt visuelt udtryk.
Designet er bygget i ren HTML/CSS/JS som en single-page applikation med hash-baseret routing — en arkitektur der giver høj ydeevne og simpel hosting uden behov for et serverside framework.
Konceptets tre mål
- 1Skab et distinkt visuelt udtryk der skiller sig ud i VVS-branchen
- 2Demonstrér lokal SEO-arkitektur med 5 by-specifikke sider
- 3Gør det nemt for besøgende at kontakte via formular eller telefon
Indhold
Sider og funktioner i konceptet
Forside
Hero med animeret kobber-rørillustration, USP-kort, ydelsesvisning, galleriteaser, kontaktformular og anmeldelsessektion.
Ydelsesside
6 ydelsesblokke (vandinstallation, varmeinstallation, badeværelse, fejlfinding, varmtvand, akut VVS) med processektion.
Galleri
Billedgalleri med masonry-lignende layout og hover-zoom effekt på alle billeder.
Om os
Virksomhedshistorie, arbejdsproces, dækningsområde og åbningstider med klar fremstilling.
Kontakt & tilbud
Kontaktformular med mailto-fallback, åbningstider og indlejret Google Maps.
FAQ
Accordion FAQ med 6 spørgsmål og strukturerede JSON-LD data for rich results i Google.
5 lokale bysider
Unikke sider for Vejle, Bredballe, Børkop, Jelling og Grejs med lokalt tilpasset indhold.
Responsivt menu-panel
Slide-in menu fra højre med overlay, fokushåndtering og keyboard-navigation.
Designretning
Vigtigste designvalg
Dyb marineblå + kobber
Primærfarven #0B2A45 (dyb marineblå) kombineret med metallisk kobber (#C48450) er valgt for at signalere faglighed, pålidelighed og soliditet. Paletten adskiller sig markant fra konkurrenternes generiske lyseblå.
Fraunces — display serif med karakter
Den optiske serif-skrifttype Fraunces bruges til overskrifter med kursiv-varianter der tilføjer personlighed og håndværksmæssig varme til ellers teknisk indhold.
Animeret kobber-rørillustration
Hero-sektionen indeholder en selvtegnende SVG-illustration af rørføring med kobber-accent. Det er et distinkt visuelt element der kommunikerer faglighed på en kreativ måde — ingen stock-foto.
Creme-hvid til lyse sektioner
Sekundærfarven #F7F4EE (varm creme) bruges til lyse sektioner for at undgå det kolde, kliniske look et rent hvidt ville give. Det holder designet varmt og indbydende.
SEO-strategi
Lokal synlighed i Vejle-området
Konceptet demonstrerer en lokal SEO-arkitektur tilpasset VVS-branchen, hvor potentielle kunder søger med geografi i forespørgslen — "VVS Vejle", "VVS-installatør Bredballe" osv. Hver by-side har unikt indhold og egne meta-tags.
By-specifikke landingssider
Hver by-side har unikt tekstindhold, lokale søgeord og opdaterede meta-tags — fremfor ét generisk "kontaktside" der ikke rangerer lokalt.
Teknisk løsning
Valgte teknologier
Vanilla HTML/CSS/JS
Enkelt og lynhurtigt — ingen rammeværk, ingen build-pipeline
Hash-baseret SPA-router
Alle sider i én fil med JS-drevet routing uden sideskift
Animeret SVG-illustration
Selvtegnende kobber-rørillustration via stroke-dashoffset animation
IntersectionObserver reveal
Scroll-reveal på alle sektioner med progressiv stagger
Google Fonts (Fraunces + Manrope)
Display-serif kombineret med clean sans for karakter og læsbarhed
Mailto-formular
Kontaktformular der virker uden server — åbner brugerens mailklient
Mobiloplevelse
Optimeret til den mobile VVS-søgning
Størstedelen af VVS-søgninger sker på mobil — ofte af folk med et akut problem der hurtigt har brug for hjælp. Konceptet er designet med dette adfærdsmønster som udgangspunkt.
- Telefonnummer synligt med ét klik direkte i navigationen
- Touch-venlige knapper og stort klikområde på CTA'er
- Responsivt grid der kollapser elegant til mobilvisning
- Hamburger-menu med slide-in panel og overlay
- Reducerede animationer ved prefers-reduced-motion
- Ingen horisontal scroll på nogen skærmstørrelse
Breakpoints
≤ 880pxGrid kollapser til 1–2 kolonner, galleri til 2 kolonner≤ 560pxEnkeltkolonne layout, CTA-knap skjules i headerAlletouch-action og -webkit-tap-highlight optimeretKonklusion
Hvad konceptet demonstrerer
Husk:Dette er et konceptprojekt. Der har ikke været et kommercielt samarbejde, og projektet er skabt som et designeksempel for at demonstrere Mumm & Crügers tilgang til VVS-virksomheders online tilstedeværelse.
Distinkt design virker
Et mørkt marineblåt design med kobber-accent skiller sig ud i en branche der er domineret af generisk lyseblå. Designet signalerer faglighed og soliditet.
SPA uden framework
En hash-baseret SPA i vanilla HTML/JS er et effektivt valg for en simpel virksomhedshjemmeside — hurtig, let at hoste og uden build-overhead.
Lokal SEO er afgørende
By-specifikke landingssider med lokalt tilpasset indhold er en af de mest effektive metoder til organisk synlighed for lokale VVS-virksomheder.
Se det i praksis
Udforsk den fulde hjemmeside
Koncepthjemmesiden er fuldt navigerbar. Udforsk alle sider, undersider og mobiloplevelsen i praksis — inkl. det animerede kobber-rør i hero-sektionen.
Næste skridt
Kunne du tænke dig en lignende hjemmeside?
Vi bygger professionelle hjemmesider til håndværkere, VVS'ere og lokale virksomheder. Fast pris fra 3.995 kr. — uforpligtende tilbud.