Kontur Agentur
Oversikt
Et merkevaredrevet nettsted for et agentur innen baderomsprodukter.
Detaljer
At a glance
- Type prosjekt
- Merkevare- og katalognettsted
- Min rolle
- Designet og bygget nettstedet, inkludert en stor produktkatalog bak merkevarepresentasjonen.
- Kategori
- Nettopplevelser
- Status
- I drift2026
- AI i produktet
- Ingen AI i driftNettstedet har ingen AI-funksjon i drift.
Hva jeg gjorde
- Formet den merkevaredrevne presentasjonen, navigasjonen og bildebruken
- Modellerte en produktkatalog i flere nivåer og rutene som presenterer den
- Implementerte det tospråklige nettstedet med optimalisert medielevering
- Satte opp automatiske ytelses- og visuelle regresjonskontroller
AI i prosessen
Planlagt, designet og implementert med AI-assistert utvikling. AI-verktøy hjalp meg med å utforske løsninger, skrive utkast til implementasjon og tester, og gå gjennom kode. Jeg bestemte omfanget, strukturen, hva som ble testet og hva som ble sluppet.
Bygget med
- TypeScript: Applikasjonskode
- Next.js: Rammeverk og ruting
- Tailwind CSS: Stiling
- next-intl: Norske og engelske ruter og innhold
- Motion: Innganger og overganger i grensesnittet
- Cloudflare R2: Fillagring for katalogbilder
- Playwright and Lighthouse CI: Visuell regresjon og ytelsesbudsjetter
- Vercel: Drift med deploy basert på pull requests
Besøk nettstedet(opens in a new tab)Discuss a project like this
Neste prosjekt
Boligplass
Behovet
Et agentur som representerer utvalgte baderomsmerker trengte et nettsted som presenterer merkene med den kvaliteten de forventer, gir partnere en måte å utforske en stor katalog på, og fungerer på norsk og engelsk.
Mitt bidrag
Jeg designet presentasjonen og bygget nettstedet. Agenturet leverte merkevaremateriell, produktdata og tekst. Merkene, produsentrelasjonene og salget tilhører agenturet. Denne casen handler om den digitale presentasjonen og strukturen bak den.
Beslutning
Merkevaren leder, grensesnittet trekker seg tilbake
- Bakgrunn
- Verdien til agenturet er merkene det representerer, og bildene deres er sterkere enn noe grensesnittelement kan bli.
- Hva jeg bestemte
- Bilder i full bredde med en minimal navigasjon, og merkesider der produktfotografiet bærer siden.
- Avveining
- Tilbakeholdenhet legger mer vekt på bildekvalitet og lastetid, så hvert bilde er optimalisert og leveres fra objektlagring i de størrelsene oppsettet trenger.
Slik fungerer det
- En katalog på rundt 1 800 produkter i et firenivås hierarki, modellert som strukturerte data og presentert gjennom én fang-alt-rute med en sti-oppslager.
- Katalogbilder lagres i Cloudflare R2 og leveres i faste størrelser, utenom rammeverkets bildeoptimalisering for det største settet.
- Norsk og engelsk deler komponenter og data gjennom lokaliserte ruter.
- Ytelsesbudsjetter og visuelle regresjonssnapshots kjører i CI ved hver pull request.
Verifisering og leveranse
Nettstedet ble gjennomgått i mobil- og desktopbredde, sjekket mot ytelsesbudsjetter og visuelle snapshots, og publisert gjennom en arbeidsflyt med pull requests.
Resultat og refleksjon
Publiserte et tospråklig merkevare- og katalognettsted. Lærdommen jeg tar med meg: en stor katalog er et datamodelleringsproblem før det er et designproblem, og én godt utformet oppslager slår hundrevis av håndlagde sider.