Bakgrunn og utfordring
Foraas er totalentreprenør for fysisk sikring med snart 40 år i bransjen. Dagens nettside viste ikke hvem de er i dag. I onboardingmøtet med kunden fant vi seks behov:
- Tydelig avsender — kunden skal kontakte Foraas, ikke nettverket de er en del av.
- Fra lokal til nasjonal — med rammeavtalen med Avinor som bevis.
- Eie høysikkerhet — eneleverandør av PeriGuard i Norge, men nesten usynlig.
- Referanser i front — tunge kunder skal vise tyngde.
- Innganger per bransje — hver kunde skal finne sin løsning raskt.
- Se større ut — mer fremoverlent og «corporate».
Min rolle: innsikt, struktur, skisser, visuell retning og UI-design av ca. 15 sidemaler i Figma. Status: under utvikling i Sanity, ikke lansert.
Nettstedskartet
Strukturen er bygget rundt bransjer og bruksområder — ikke produktnavn. Nettverket ligger under Om oss, mens Service og Kontakt oss alltid er synlig.
Fra skisse til retning
1. Figma AI. Jeg testet raskt mange konsepter med AI-agenter. Strukturen var nyttig, men uttrykket ble generelt og kjedelig.
2. Manuelle skisser. Jeg tok med strukturen videre og testet farger og former for hånd.
3. Foraas’ egne bilder. Retningen kom fra virkeligheten: refleksvestene montørene bruker, den gule logoen, oransje byggenetting og romben fra skiltene på gjerdene.
4. Resultatet. Mørk marineblå for tyngde, refleksgult som signalfarge, oransje på knapper og romben som ikonform. Mer «corporate» — men fortsatt tydelig Foraas.
Alt er samlet i en stilguide: logo og favicon, fargepalett, Clash Display på overskrifter og Plus Jakarta Sans på brødtekst — med egne størrelser for desktop og mobil.
Forsiden
Hver seksjon svarer på et behov fra møtet:
- Nasjonal → hero med 40 år og avdelinger over hele Norge.
- Referanser → logorad, referanseslider og kundeomtaler.
- Høysikkerhet → første innholdsseksjon.
- Bransjer → grid som sender hver kunde videre.
Høysikkerhet som flaggskip
Det største hullet ble en egen landingsside. Krasjtester og beskyttelsesklasser er forklart med hva de faktisk stopper, ikke bare som koder.
Produkter, lokasjoner og kontakt
Katalog med søk og filter på produkt og bransje. Lokasjoner på et Norgeskart viser «nasjonal med lokal styrke». Kontaktskjema med filopplasting gir et bedre grunnlag for riktig tilbud.
Komponenter
Alle maler bygger på ett komponentsett, slik at nye bransje- og produktsider lages uten nytt design — og malen kan gjenbrukes av andre selskaper i nettverket. Nettsiden bygges nå i Sanity, og KPI-ene fra forprosjektet måles etter lansering.