DSOP · Prototype-indeks — Alle mockups og iterasjoner

01 Hovedstil · retningsvalg

Overordnet designretning — 4 mockups

Første runde med konseptuelle retninger som bygde grunnlaget for hele designsystemet. KOM-gruppen valgte Living Atlas 17. juni 2026 — den ble basis for v1.1.0 av DESIGN.md.

Valgt retning

Living Atlas

Plus Jakarta Sans, blueprint-grid hero, data-pills, atlas-tile-grid. KOM-valg 17.6.

/dsop/mockup-atlas.html

Retning A

Editorial Magazine

Long-form, redaksjonell tone, mye hvitrom. Foretrukket av enkelte men ikke valgt.

/dsop/mockup-editorial.html

Retning B

Bold Light/Dark Split

Dramatisk lys/mørk split-grid. Tydelige kontraster.

/dsop/mockup-bold-split.html

Retning D

Programmatic Document

Dokumentstil, byråkratisk presisjon.

/dsop/mockup-document.html

02 Forside · 4 retninger

Forside — fra hero-tekst til pulse-animasjon

Fire forside-retninger med ulike vekttrekk. Retning D · Cinematic Lys + pulse ble valgt og implementert med IntersectionObserver-animasjoner.

Hub

Forside-hub

Oversikt over alle 4 forside-retninger.

/dsop/forside-mockups.html

A

Manifest

Manifesto-stil hero med store typografi-statementer.

/dsop/forside-A-manifest.html

B

Atlas-kart

Norge-kart som visualiserer aktørene geografisk.

/dsop/forside-B-atlas-kart.html

C

Cinematic mørk pulse

Mørk bg med pulserende noder + ticker.

/dsop/forside-C-pulse.html

D

Cinematic lys pulse

Lys variasjon av C. Mer optimistisk tone.

/dsop/forside-D-pulse-lys.html

Valgt + final

Cinematic lys · final

Endelig versjon med pulser på SVG-anchorpunkter, animert ticker. Implementert i hero-cinematic.php.

/dsop/forside-D-final.html

03 Om DSOP · 4 retninger

Om DSOP — fra tidslinje til programkontoret

Fire ulike måter å fortelle historien om DSOP. Retning D (final) ble lansert — kombinerer narrativ ingress, IA-diagram, "tre lag av samhandling", Eivind Hovden-sitat, erfaringer og veien videre.

Hub

Om-hub

Oversikt over alle 4 Om DSOP-retninger.

/dsop/om-mockups.html

A

Tidslinje

Kronologisk presentasjon fra 2016 til 2026.

/dsop/om-A-tidslinje.html

B

Narrativ

Fortelle-form, redaksjonell.

/dsop/om-B-narrativ.html

C

Programkontoret

Fokus på organisering og styringsgrupper.

/dsop/om-C-programkontoret.html

Valgt + final

Final · kombinasjon

Implementert page-om-dsop.php med IA-diagram, gov-modell, erfaringer, FAQ.

/dsop/om-D-final.html

04 Tjeneste-single · 3 retninger

Per-tjeneste mal — for alle 15 DSOP-tjenester

Mal for hver av de 15 tjenestene. Retning C (Atlas) ble valgt og kombinert med B's prosess-mønster. Implementert i single-tjeneste.php.

Hub

Tjeneste-hub

Oversikt over alle 3 tjeneste-retninger.

/dsop/tjeneste-mockups.html

A

Editorial

Long-form artikkelstil med store sitater.

/dsop/tjeneste-A-editorial.html

B

Spec-stil

Teknisk dokumentasjon-stil med prosess-tabell.

/dsop/tjeneste-B-spec.html

Valgt (C + B-prosess)

Atlas — Samtykkebasert lånesøknad

Living Atlas-stil med floating data-pills, milepæler-callout, prosess-sekvens. Eksempel: SL-tjenesten.

/dsop/tjeneste-C-atlas.html

05 Felleskomponenter + Aktører · IA-utvidelse

Trekantet IA — Tjenester / Felleskomp / Aktører

Utvidelse av informasjonsarkitekturen for å vise hvordan tjenestene henger sammen. Tre retninger for hvordan FK + aktører kan presenteres. Retning C (narrativ) + logoer ble valgt.

3 retninger

Felleskomp + Aktør · retninger

Atlas-grid, Nettverks-kart, Narrativ + monogram vs logo. Inkluderer IA-diagram-vurdering.

/dsop/fk-aktor-retninger.html

Valgt · C + logo + IA

Felleskomp + Aktør · final

Endelig mockup med arkiv-sider for /felleskomponenter/, /aktorer/ og per-term-sider. Implementert som taxonomy-felleskomponent.php og archive-aktor.php.

/dsop/fk-aktor-final.html

06 Bærekraft · 3 retninger

FNs bærekraftsmål — Retning A valgt

Tre måter å presentere DSOPs bidrag til 7 av FNs 17 bærekraftsmål. Retning A (Portfolio / atlas-grid med KPI-strip) ble valgt og implementert med ny baerekraftsmal-taksonomi.