Prosjekt 04 · Nettside
Torunn Tøllefsen AS
Torunn Tøllefsen er interiørarkitekt MNIL i Tromsø, og har tegnet boliger, kontorer, skoler, butikker og museumsutstillinger siden 1995. Høsten 2026 laget jeg en ny nettside for kontoret i WordPress, der prosjektene er det første du ser.
- Rolle
- Design og utvikling
- Plattform
- WordPress
- Bygget
Innholdet i tall
- prosjekter fra 1998 til 2023
- 37
- prosjektbilder flyttet fra den gamle siden
- 373
- oppdrag i referanselisten, siden 1991
- 95
- presseomtaler, koblet til prosjektene
- 30
01
Utgangspunktet
Kontoret har over 30 år med prosjekter, priser og omtaler, men den gamle nettsiden viste lite av det. Forsiden var et galleri med 37 bilder uten bildetekst, så du kunne ikke se hvilket prosjekt et bilde hørte til. Referanselisten lå bak en lenke, delt i ti faner.
Prisene, som Årets hjem for Villa Sirilund, sto gjemt i prosjekttekstene. De 30 presseomtalene lå som PDF-er uten kobling til prosjektene de handlet om. Og ingenting på forsiden ba deg ta kontakt.
Siden har to slags lesere: byggherrer og innkjøpere som vil se erfaring, og privatpersoner som skal pusse opp hjemmet eller hytta. Begge trenger å se prosjektene først.
02
Prosjektene
Prosjektoversikten viser alle 37 prosjekter som rader med år, navn og type. Hold over en rad, så vises et bilde av prosjektet ved siden av listen. Knappene øverst filtrerer på bolig, næring, skole, utstilling, handel og restaurant, og viser hvor mange prosjekter hver type har.
Et filter kan også lenkes til. En adresse som slutter på ?type=Bolig åpner oversikten med bare boliger, så Torunn kan sende den til en privatkunde.
03
Tegningshodet
På en arkitekttegning står prosjekt, oppdragsgiver og tegner i en rute nederst i hjørnet. Hvert prosjekt på siden har en slik rute, med prosjekt, type, år, oppdragsgiver, arkitekt, areal, publisering og fotograf. Feltene er de samme som i referanselisten, så det er lett å sammenligne prosjekter.
Bildene vises slik de ble tatt. Stående bilder står ved siden av teksten, liggende bilder går over hele bredden, og bildemuren under beskjærer ingenting. Små bilder blir aldri vist større enn de er, så de ikke blir uskarpe.
04
Designet
Forsiden åpner på en hytte i Russelv i blåtimen. Bildet starter nesten mørkt og blir lyst i løpet av et par sekunder, som når noen slår på lyset i et rom. Har du slått av bevegelse i systemet, vises bildet ferdig opplyst med en gang.
Fargene er hentet fra den gamle logoen og nettsiden: svart, grafitt, varme gråtoner og papirhvitt. Rust er den eneste sterke fargen, og brukes lite. Lenkefargen ble gjort litt mørkere enn før, så den har nok kontrast mot hvit bakgrunn. Det er ingen skygger og ingen runde hjørner.
Teksten er satt i Schibsted Grotesk. Den ligner på Helvetica i logoen, har æ, ø og å, og har tall med lik bredde, så årstall og kvadratmeter står rett under hverandre. Logoen er tegnet på nytt som SVG, så den er skarp på alle skjermer.
Sammen med siden laget jeg en egen side som forklarer valgene til Torunn: farger, skrift, bilder og tone, vist med de samme blokkene som resten av siden.
05
Enkel å eie selv
Først bygde jeg siden som en demo med ekte tekst og bilder fra den gamle siden. Et importskript gjorde den så om til WordPress, med alle 37 prosjektene, tegningshodene og bildemurene på plass. Etterpå åpnet et skript hver side i blokkredigeringen og lagret den på nytt, så alt åpner uten feilmeldinger når Torunn skal endre noe.
Torunn kan legge til prosjekter, endre år og prosjekttyper, og bytte rekkefølge på typene i filteret. Kontaktinformasjonen fylles inn ett sted og oppdateres overalt. Tall som «37 prosjekter» og «95 oppdrag» teller seg selv, så de stemmer når hun legger til et nytt prosjekt.
06
Teknikken
- Tema
- Eget blokktema for WordPress, med fire maler og vanlig CSS uten byggesteg. Farger, skrift og avstander ligger i theme.json, så de kan endres under Stiler i WordPress.
- Blokker
- 30 egne blokker i en egen utvidelse: tegningshode, prosjektkort, prosjektoversikt med filter, bildemur, referanseliste, presseomtaler og kontaktstripe. Menyen og filteret bruker WordPress Interactivity API.
- Innhold
- Prosjekter er en egen innholdstype med år og undertittel, og prosjekttypene har en rekkefølge Torunn styrer selv. Kontaktinformasjonen fylles inn én gang og brukes på alle sider.
- Bilder
- Bildene kommer i riktig størrelse for skjermen. Bildet øverst på forsiden hentes først, resten lastes når du kommer til dem.
- Tilgjengelighet
- Hopp til innhold-lenke, synlig fokus i rustfarge og tastaturstyrt meny. Filterknappene sier fra om de er valgt, og skjermlesere får vite hvor mange prosjekter som vises. Animasjonen på forsiden slås av for dem som har valgt mindre bevegelse.
- Søkemotorer
- Egen beskrivelse for hver side, kanoniske adresser og strukturerte data for nettstedet og hver side.
- Kontroll
- Et Playwright-skript åpner alle sider og prosjekter i blokkredigeringen og sjekker at hver blokk er gyldig.
Viser nettsiden din det du har gjort?
Send meg en e-post om bedriften og nettsiden du har i dag. Jeg svarer med hva jeg ville endret, og hva det vil koste.
Send en e-post