Web · 01

Design & udvikling

Fra idé til lanceret website: ét team, ét ansvar.

Kontakt os

Sådan arbejder vi med design & udvikling

Design og udvikling er ét samlet forløb, hvor vi tegner og bygger jeres website fra afklaring til lancering. Ydelsen findes, fordi de fleste websites går galt i overleveringen: designet laves ét sted, koden et andet, og indholdet kommer sidst. Vi holder de tre ting sammen, så det, der besluttes i Figma, er det, der ender i browseren, med de rigtige tekster og billeder.

Vi starter med en workshop om mål, målgrupper og indhold og arbejder derefter i iterationer på to uger. Design laves i Figma på et designsystem, frontend i Astro eller WordPress, og SEO-specialisten sidder med fra den første sidestruktur. Hver iteration ender med noget, I kan klikke på i en browser, ikke en præsentation. Tracking i GA4 og Consent Mode sættes op, før sitet går live.

Bagefter står I med et lanceret website, et designsystem i både Figma og kode, et CMS, jeres redaktører er oplært i, og måling, der stemmer. Vi afleverer dokumentation af komponenter, hosting og opsætning samt en prioriteret liste over de forbedringer, vi anbefaler i de første tre måneder efter lancering, baseret på de første rigtige brugerdata.

Hvornår det giver mening

  • Jeres website er fem år gammelt, og hver ny side kræver en udvikler, fordi skabelonerne kun kan det, de blev lavet til.
  • I har fået ny visuel identitet, men sitet viser stadig den gamle, og marketing bruger tid på at få kampagner til at passe ind.
  • Annoncer sender trafik til sider, der loader langsomt på mobil og ikke svarer på det, annoncen lovede.
  • I har fået tilbud fra et designbureau og et udviklingshus hver for sig og vil hellere have ét sted, der har ansvaret.

Det får du

  1. Workshop og afklaring
  2. Design og prototype
  3. Udvikling og test
  4. Lancering og oplæring
Kontakt os

Sådan foregår det

  1. Workshop, mål og sidestruktur

    Vi gennemgår forretningsmål, målgrupper, nuværende site og søgedata og laver sidestruktur og indholdsplan. I får et prioriteret omfang og en tidsplan, før der tegnes noget.

  2. Design på designsystem

    Tokens, typografi og komponenter defineres i Figma, og de vigtigste sider designes med rigtigt indhold. I ser en klikbar prototype og giver feedback i to runder.

  3. Udvikling, CMS og integrationer

    Frontend bygges i Astro eller WordPress på samme komponenter som i Figma. CMS sættes op med indholdsmodel og roller, og integrationer til CRM, mail eller webshop kobles til og testes.

  4. Test, lancering og oplæring

    Vi tester på enheder, kører tilgængeligheds- og performancetest, lægger redirects ind og lancerer. Redaktørerne oplæres, og vi følger Search Console og GA4 de første fire uger.

I dybden

Designere og udviklere arbejder i samme forløb

Designeren og udvikleren sidder i samme sprint og ser de samme Figma-filer. Det betyder, at en komponent bliver tegnet med viden om, hvad den koster at bygge, og bygget med viden om, hvorfor den ser ud, som den gør. Bevægelse og animation designes som en del af identiteten og bygges med GSAP eller CSS, så den ikke koster loadtid eller tilgængelighed.

Indhold og struktur før layout

Vi designer med rigtigt indhold fra starten: jeres tekster, produkter og billeder, ikke pladsholdere. Sidestrukturen laves sammen med SEO-specialisten ud fra søgeord og forretningsmål, så hver side har et formål, og de interne links giver mening for både brugere og Google. Det sparer omskrivninger sent i forløbet, hvor de er dyrest.

Redigering, dokumentation og oplæring af jeres team

Alt indhold kan redigeres af jeres eget team: sider, nyheder, kampagner og landingssider. Komponenterne er begrænset, så en redaktør ikke kan sætte dem forkert sammen. Vi dokumenterer, hvordan de opgaver, der sker hver uge, løses i CMS'et, og træner redaktørerne i to sessioner, så I ikke ringer for hver ændring.

Hastighed, tilgængelighed og måling fra lancering

Sitet lanceres med Core Web Vitals i grønt, WCAG 2.2 AA på komponentniveau og GA4 med Consent Mode v2. Vi tester på rigtige mobiltelefoner, ikke kun i Lighthouse, og kører en redirect-plan fra det gamle site, så placeringer ikke tabes. Efter lancering følger vi Search Console og CrUX i fire uger og retter det, der dukker op.

Fejl, vi ofte finder

  • Design godkendt uden rigtigt indholdPladsholdertekster giver layouts, der knækker, når de rigtige overskrifter er dobbelt så lange. Det koster omskrivninger, efter koden er skrevet. Vi kræver rigtige tekster og billeder i designet, før noget godkendes.
  • Redirects og metadata glemt ved lanceringGamle URL'er, der giver 404, koster placeringer, som tager måneder at genvinde. Vi laver et redirect-kort over alle indekserede sider før lancering og verificerer det i Search Console dagen efter.
  • Tredjeparts-scripts kopieret over fra det gamle siteChatwidgets, heatmaps og tre forskellige tag managers kan koste over et sekund i loadtid. Vi gennemgår hvert script, fjerner det, der ikke bruges, og loader resten efter, at siden er vist.

Sådan ser det ud

0sek. loadtid

Sider der er på skærmen, før kunden når at tvivle. Hurtigt, tilgængeligt og nemt at drive.

Før 4,8 s
Efter 0,9 s

Sådan måler vi effekten

  • LCP på mobil (mål: under 2,5 sekunder på 75-percentilen i CrUX)
  • Andel af nye sider, redaktørerne bygger uden hjælp fra en udvikler
  • Konverteringsrate fra organisk og betalt trafik før og efter lancering

Rammer

Pris
Fra 80.000 kr.
Varighed
8–12 uger
Hvem
Designer, udvikler, projektleder og SEO-specialist
Kontakt os

Eksempel: Zederkof A/S

Zederkof A/S havde et website fra en tidligere identitet, som marketing ikke kunne redigere selv. Vi lavede visuel identitet og website i ét forløb: designsystem i Figma, frontend bygget på de samme komponenter og et CMS, hvor produkt- og nyhedssider laves uden udvikler. Sitet blev ca. 2,1 sekunder hurtigere på mobil, og den organiske trafik steg ca. 55 % i de følgende måneder, primært fordi sidestruktur og interne links blev planlagt sammen med SEO, før der blev bygget.

Se det i praksis

Cases

t.i.n.g. shop

t.i.n.g. shop

Skræddersyet design og udvikling af møbelshop. Markedsføring gennem PPC med 200% vækst.

Se alle cases
Rigtig Kaffe A/S

Rigtig Kaffe A/S

All-around design, udvikling, branding, strategi og søgemaskineoptimering

Sokkeposten

Sokkeposten

Nyt PrestaShop site og 360 graders digital marketing med SEO og PPC annoncering.

Poetzsch Padborg

Poetzsch Padborg

Avanceret Google Tag Manager setup til konverteringstracking

Bolighuset Werenberg A/S

Bolighuset Werenberg A/S

Et digitalt sats på e-handel, der gav pote. Se vores arbejde for Werenberg, og hvordan vækstkurven blev stejl med en stabil og udviklingsdygtig webshop.

Ofte stillede spørgsmål

  • I workshops, ved feedback på design og ved indhold. Vi holder møderne korte og beslutningerne tydelige. Regn med to til tre timer om ugen fra én ansvarlig hos jer.

  • Adgang til det nuværende site, GA4 og Search Console, jeres logo og eventuelle brandregler, og en person, der kan godkende tekster. Vi skriver eller redigerer indhold, hvis I ikke har det.

  • WordPress er velkendt og fleksibelt til indholdstunge sites. Headless (Astro med et hovedløst CMS) giver hastighed og sikkerhed og passer til sites, hvor performance er afgørende. Vi anbefaler efter opgaven.

  • Typisk 6 til 12 uger fra workshop til lancering, afhængigt af omfang og indhold.

Næste Headless / Astro →