En effektiv nettside er mer enn bare en digital tilstedeværelse – det er en mulighet til å engasjere, informere og inspirere. For Nortrapp, en ledende trappeprodusent siden 1946, var det viktig å ha en nettside som gjenspeilet deres kvalitet, håndverkstradisjoner og kjerneverdier. Som profesjonell webdesigner tok jeg på meg oppgaven med å utvikle en løsning som var både funksjonell og visuelt imponerende, samtidig som jeg leverte alt av foto, video og design i én helhetlig pakke.
Hovedutfordringene med Nortrapps tidligere nettside
Før prosjektet startet, hadde Nortrapp en nettside som slet med:
- Utydelig produktinformasjon: Teknisk språk og ustrukturert innhold gjorde det vanskelig for kundene å finne det de lette etter.
- Lite utnyttelse av 3D-bilder: Et stort bibliotek med 3D-bilder av trapper ble ikke brukt til å vise frem tilpasningsmuligheter.
- Utdatert design: Nettsiden reflekterte ikke Nortrapps fokus på kvalitet, detaljer og godt håndverk.
Dette ga meg en tydelig retning: skape en nettside som ikke bare var enkel å bruke, men som også effektivt kommuniserte verdiene Nortrapp står for.
Utvikling av den nye nettsiden
Som totalleverandør tok jeg ansvar for hele prosessen, inkludert utvikling, design og produksjon av visuelt innhold. Her er de viktigste tiltakene som ble implementert:
1. Trappekonfigurator
For å gjøre det enkelt for kundene å utforske produktene, utviklet jeg en interaktiv trappekonfigurator:
- Strukturering av bilder: Jeg organiserte hundrevis av 3D-bilder i logiske kategorier basert på komponenter og design. ChatGPT bistod i utforskningen av logiske måter å innrette søkekriteriene.
- Responsiv design: Konfiguratoren fungerer sømløst på alle enheter, fra mobil til PC, og gir en intuitiv utforsking av ulike design.
- Enkel navigasjon: Kundene kan tilpasse trapper basert på farger, materialer og design med noen få klikk.
2. Fotografering og Filming
For å gi nettsiden en autentisk og profesjonell visuell profil produserte jeg alt av foto og video:
Fotografering: Med Imagen AI kan alle bildene få grunnleggende justeringer, men akkurat dette bildesettet redigerte jeg manuelt.
- Produksjon på fabrikken: Jeg dokumenterte Nortrapps ansatte og arbeidsprosesser for å vise frem menneskene bak produktene.
- Materialprøver: Samtlige fargeprøver og tilvalgsalternativer ble fotografert og strukturert i en database.
- Redigering og fargekorrigering: Bildene og videoene ble nøye redigert for å sikre at farger og detaljer fremstår korrekt. Med Photoshop’s generative fill fjernet jeg etiketter på over 100 fargeprøver med et tasteklikk. For å navngi prøvene korrekt, benyttet jeg en KI-prosedyre som automatisk hentet ut navnene fra ustrukturerte data og la den til i bildefilenes metadata.
3. Bruk av KI og Webflow
For å effektivisere byggeprosessen ytterligere brukte jeg Relume, et KI-verktøy for grafiske designere, og Webflow som utviklingsplattform:
- KI-sidekart: Forslag til nettsidestruktur og innhold produseres med hjelp fra Relumes KI-verktøy for webdesignere.
- Halvfabrikerte designelementer: KI-sidekartet ble automatisk populert med Webflow-komponenter tilpasset kundens spesifikke behov.
- Skreddersøm: Hvert element ble justert individuelt for å sikre at nettsiden gjenspeilte kundens grafiske profil og merkevare. Piksel perfekt grafisk design er dessverre ikke en oppgave KI håndterer godt riktig enda.
- Tekstinnhold: Utkast til tekster på samtlige sider ble produsert av ChatGPT med en dedikert skriveagent. Dette sparer betydelig tid på kreativ prosess og disposisjoner.
- Rask utvidelse av funksjonalitet: Funksjonalitet som automatisk fremdrift av inspirasjons-galleriet drives av et script produsert utelukkende av KI.
KI sidekart: Utkast til sidekart og innhold genereres basert på en beskrivelse av bedriften. Dette sparer tid på innledende kreativ prosess.
4. Modernisering av designet og annonsemateriell
Nettsiden ble designet med moderne webdesign-prinsipper for å gi en sømløs og helhetlig opplevelse:
- Responsivitet: Nettsiden tilpasser seg alle skjermstørrelser for optimal tilgjengelighet.
- Visuelt enhetlig: Gjennomgående farger, typografi og bildebruk gir nettsiden et profesjonelt og konsistent uttrykk.
- Annonsemateriell: For å reklamere for de nye nettsidene, produserte jeg 10 display-annonser og satte opp en kampanje i Google Ads. For å spare tid på annonseoppsettet, benytter jeg ChatGPT o1 til å produsere et script som automatisk setter opp annonseformatene i Illustrator.
Resultatet
Den nye nettsiden har gjort det enkelt for Nortrapp å presentere produktene sine på en måte som er både brukervennlig og inspirerende. Trappekonfiguratoren lar kundene tilpasse designet etter egne preferanser, mens de autentiske bildene og videoene gir nettsiden en menneskelig og troverdig dimensjon. Sammen med det moderne grafiske designet representerer nettsidene nå også Nortrapps kjerneverdier. Oppdraget ble formidlet gjennom GP Marked.
Ønsker du en webdesigner som kan levere en helhetlig løsning for din nettside? Se flere prosjekter i min webdesign-portefølje, eller kontakt meg for å ta en prat om hvordan jeg kan hjelpe deg.
KI-Artboards: Et KI-generert script oppretter og arrangerer alle artboards for de ulike annonestørrelsene automatisk.
Ofte Stilte Spørsmål
Hvordan ble KI brukt i utviklingen av nettsiden?
KI-verktøy som Relume ble brukt for å effektivisere utviklingsprosessen. Relume genererte sidekart og innholdsstrukturer, og fylte Webflow-komponenter med halvfabrikerte designelementer. Dette ga en rask start på prosjektet og sikret en strukturert og effektiv byggeprosess.
Hvordan hjalp KI med å organisere og optimalisere innholdet?
KI ble brukt til å analysere og strukturere Nortrapps omfattende bibliotek av 3D-bilder. Dette inkluderte å kategorisere bilder basert på logiske søkekriterier som farger, materialer og design. I tillegg ble tekstutkast generert for nettsidens ulike sider, noe som sparte tid i den kreative prosessen.
Hva var fordelen med å bruke KI for fotografering og redigering?
KI-teknologi ble brukt til å forenkle prosesser som redigering og navngivning. Med Photoshop’s generative fill ble etiketter fjernet fra over 100 fargeprøver med et enkelt klikk. KI ble også brukt til å trekke ut og strukturere informasjon fra ustrukturerte data, slik at hver fil fikk korrekt metadata.
Hvordan effektiviserte KI annonseproduksjonen?
For produksjonen av 10 display-annonser ble det brukt et KI-generert script for Adobe Illustrator. Dette automatiserte oppsettet av annonseformatene, noe som sparte tid og sikret konsistent kvalitet på tvers av formatene.
Kan KI skape fullstendig skreddersydde løsninger?
KI bidrar med effektive forslag og grunnlag for design, men skreddersøm krever fortsatt en menneskelig hånd for å sikre pikselperfekte detaljer og estetikk som fullt ut representerer kundens merkevare. For Nortrapp ble KI brukt til å støtte opp om designet, men hver komponent ble tilpasset manuelt for å oppfylle prosjektets krav.
Hva er de største fordelene med å bruke KI i webdesign?
KI gir en raskere og mer strukturert byggeprosess, automatiserer repetitive oppgaver og frigjør tid til kreative og strategiske beslutninger. Dette gjør det mulig å levere nettsider av høy kvalitet mer kostnadseffektivt, uten at det går på bekostning av personalisering eller brukervennlighet.
