Category: design

12
Mar

Erfaren webdesigner benytter KI for å effektivisere nye nettsider

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:

video
play-rounded-fill

 

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.

Kontakt meg om webdesign

13
Jul

Hvordan Lindhaugen AS i Sarpsborg moderniserte sine nettsider

Utfordringen

Lindhaugen AS, en anerkjent maskinentreprenør og anleggsgartner, stod overfor en stor utfordring med sin utdaterte nettside. Den gamle nettsiden hadde en rotete struktur som gjorde det vanskelig for besøkende å navigere og finne de tjenestene de trengte. Redundante sider og en ikke-intuitiv layout førte til at brukerne måtte klikke mye fram og tilbake for å finne informasjon.

Løsningen

For å løse disse problemene, gjennomførte jeg en omfattende redesign ved hjelp av Webflow, og restrukturerte siden fra 23 undersider til bare 9. Det nye webdesignet ga en konsekvent og brukervennlig navigasjonsopplevelse. I tillegg brukte jeg tre dager på å fotografere og filme ulike prosjekter og ansatte i arbeidssituasjoner. Dette visuelle innholdet fremhever ikke bare deres brede tjenestespekter, men beriker også deres mediebank for fremtidig bruk i sosiale medier og reklame.

Resultatet

Den nye nettsiden reflekterer nå Lindhaugens kjerneverdier gjennom både innhold og design. Besøkende finner lett informasjonen de søker, og resultatene Lindhaugen kan levere. Denne forbedringen øker sjansen for at besøkende konverterer til kunder, og hever deres merkevare betraktelig.

Pris på webdesign

Som både webdesigner, reklamefotograf og filmprodusent, leverer jeg nye nettsider for SMB-markedet med svært høy effektivitetsgrad. Totalt gikk det med fire effektive arbeidsuker for å ferdigstille dette prosjektet fra min side, spredt over en periode på fire måneder. I 2024 gir dette en veilende pris på kr 180 000 eks mva, inkludert foto, film og innhold. Hvert prosjekt varierer mye i kompleksitet og ønsket omfang, jeg leverer nettsider fra kr 50 000 og oppover.

Ta kontakt for et tilbud på ditt prosjekt!


Responsivt webdesign med videobakgrunner på alle enheter. Se live.

I dette prosjektet sanarbeidet jeg med GP Marked, som redesignet logo og utarbeidet ny kommunikasjonsstrategi for Lindhaugen i forbindelse med de nye nettsidene.

01
Oct

SmartEmploy – Mer enn et vanlig opplæringskontor

SmartEmploy vil revolusjonere hvordan lærlinger finner læreplass, samtidig som de gjør det enklere for bedrifter å finne lærlinger som matcher deres behov. Gjennom deres webportal digitaliserer de hele læreforløpet fra rekruttering til fagbrev, og bruker egenutviklede algoritmer for å tilby bedrifter skreddersydde lærekandidater.

Jeg er i hovedsak koblet på prosjektet som webdesigner, men bistår i designarbeid på alle deres digitale flater. Portalen er fremdeles under utvikling, og jeg gleder meg til fortsettelsen!

25
Oct

Logo- og webdesign for Moss Bilsenter

Kanskje du har lagt merke til de oppussede lokalene til nye Moss Bilsenter på vei inn til Moss fra sydsiden? Jeg ble engasjert for å lage en komplett ny profil med nettsider, logo, visittkort og fotografering våren 2019. Logoen er produsert i vektorgrafikk og levert i positiv og negativ variant. De responsive nettsidene er bygget på WordPress og tilpasser seg selvfølgelig nettbrett og mobil automatisk. Designet for de nye visittkortene ble utarbeidet i Illustrator og levert trykkeklart med utfall og skjæremerker fra InDesign.

Ta kontakt om du trenger en lokal webdesigner som kan levere en komplett profil til din bedrift.

https://mossbilsenter.no/

14
Feb

Webdesign for Østfold Bedriftsenter

Jeg har laget nye nettsider for Østfold Bedriftsenter! Vi migrerte tekstinnholdet fra deres eksisterende sider, og bearbeidet bildematerialet deres slik at det passet det nye designet. De nye nettsidene er bygget på WordPress, og er derfor lette å vedlikeholde.

Jeg leverer nettsider, foto, film og innhold til SMB-markedet på hele Østlandet. Les mer om hvilke tjenester jeg kan tilby innen webdesign her.