Hopp til innhold
halvorsen.tech
← Referanser

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
Forsiden til Torunn Tøllefsen AS, med en hytte i blåtimen og et tegningshode med prosjekt, år, arkitekt og publisering

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.

Prosjektoversikten, med filterknapper for hver prosjekttype, en liste over prosjekter og et bilde av Tromsø museum ved siden av

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.

Prosjektsiden for Kunstakademiet i Tromsø, med et bilde av kantinen og et tegningshode med type, år, oppdragsgiver, arkitekt, areal, publisering og fotograf

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.

Forsiden til Torunn Tøllefsen AS på mobil

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