sketch af digitalt design

Overlevering af webdesign

God design-overleveringen kan være af afgørende betydning for den kommende implementering

Designoverlevering foregår, når et design til en løsning udarbejdes af et reklamebureau eller kundens egne designer og overleveres til en implementeringspartner.

Design-overleveringen kan være af afgørende betydning for den kommende implementering, og den kan i værste fald være behæftet med unødige designrevisioner/korrektioner, der i sidste ende fordyrer dit webprojekt.

I denne artikel deler vi ud af vores erfaringer og beskriver, hvordan du skruer et godt digitalt design sammen, og hvad du skal være opmærksom på, når du designer til webimplementering.

Digitalt design

Et digitalt design er ikke det samme som et visuelt design. Et visuelt design har typisk fokus på den visuelle stil i form af fx farvekoder, fonte, stil og stemning. Giver du et visuelt design til en udvikler, efterlader det langt flere spørgsmål og løse ender, end det giver konkrete svar på, hvordan designet skal opføre sig i et webformat.

Før vi kan begynde den egentlige udvikling af en webløsning, skal ’nogen’ derfor lave en digital rentegning, der forholder sig til de grundlæggende funktioner og interaktioner i indholdet.

Denne ’nogen’ kan være reklamebureauet, implementeringsbureauet eller en helt tredje part, som har kompetencerne til at omsætte et visuelt design til noget, som udviklerne kan kode på baggrund af.

Tæt samarbejde

Et digitalt design kan også udarbejdes i samarbejde, hvor den visuelle linje udarbejdes af reklamebureauet og den digitale rentegning udarbejdes af implementeringsbureauet i tæt dialog med reklamebureauet. Den sidste del giver ofte anledning til at genbesøge det visuelle design, fordi designet ikke altid kan overføres 1:1, når det skal gengives digitalt.

Hvad bør et digitalt design indeholde?

Hvis du overleverer et design til implementering, bør det som minimum indeholde:

Prototype eller wireframes

For at udviklerene kan omsætte designet bedst muligt, anbefaler vi, at du udarbejder en interaktiv prototype eller wireframes.

Wireframes kan være alt fra håndtegninger til digitalt producerede statiske sider, og de statiske sider kan med fordel gøres til en klikbar prototype via hotspots. Læs mere om værktøjer til prototyping senere i artiklen.

På baggrund af prototyper og wireframes får vi et dybere indblik i, hvordan funktioner, indholdsstrukturering, navigation, eventuelle sidetyper med mere er tænkt.

Detaljegraden i wireframes eller prototyper behøver ikke være 1:1 i forhold til et rentegnet UI-design, men det er vigtigt, at de er forståelige.

Moduloversigter

Moduloversigterne skal i modsætning til prototypen være detaljeret og indeholde samtlige moduler og komponenter, der er brugt i wireframen eller prototypen.

Moduloversigten er facitlisten for, hvordan den endelige løsning kommer til at se ud, og hvordan designet ombryder på forskellige enheder. Derfor er det vigtigt, at du laver en moduloversigt for hvert breakpoint.

Et modul kan for eksempel være et banner, en video, et tekstafsnit, en liste, en formular, en navigation med mere, og komponenter kan for eksempel være tjekbokse, formular felter, navigations punkter, tekstformater, knapper, ikoner og andet. 

Disse skal i oversigten defineres i alle aktuelle stadier såsom aktiv, inaktiv, på hover og med fejlhåndtering.

Moduloversigten skal ligeledes angive modulernes ind- og udvendige afstande samt de indbyrdes afstande i modulets komponenter.

Det en god idé af definere nogle standarder som for eksempel modulers højre- og venstremargin samt indvendig padding. På den måde sikrer du, at designet holder for- og bagkant på tværs af browserbredder.

Tekstformater skal defineres som h1, h2, h3 og nedefter i de varianter, der er brug for. Der må ikke forekomme flere varianter af et tekstformat. Derudover bør en h1 kun bruges til sidetitler og anvendes en gang på den enkelte side, og en <p> bør altid være brødtekst.

Værktøjer til prototyping og wireframing

For at undgå en længere skriftlig overlevering af designets detaljer, anbefaler vi, at du producerer designet i et program, der er beregnet til design af digitale løsninger såsom Adobe XD, Sketch, Invision Studio eller Figma.

Disse programmer har enten en hand-off funktion, der gør det muligt at inspicere designet eller eksportere det til fx Zeplin, der også tilbyder denne service.

Billedformater

Billedformater skal du angive, så vi kan oprette de rigtige crops til billedvisningerne i de forskellige moduler. Er der en særlig logik for, hvordan billederne skal opføre sig, fx i relation til browserens højde eller andet, skal du også angive dette.

Farver, der er i brug, skal dokumenteres - dvs. angives med HEX- eller RGB farvekode samt titel.

Som udgangspunkt implementerer vi designet som flydende, medmindre andet er aftalt.

Ressourcer

Alle ensfarvede ikoner skal eksporteres til flade SVG-filer uden strokes, så vi efterfølgende kan konvertere dem til en webfont. Det er vigtigt, at ikonernes artboard deler samme format, så de optræder homogene i udtrykket.

Licenserede fonte skal vedhæftes i alle de varianter, der er i brug.

Billederne, som er brugt i designet, skal gerne vedhæftes i korrekt opløsning og beskæring, så vi kan bruge dem til test.

Web Accessibility (webtilgængelighed)

Når du designer til web, er det vigtigt, at du undersøger om kunden er underlagt kravene om webtilgængelighed. Mange offentlige instanser, skal efterleve A og AA kravene i WCAG 2.1. Hvis du er i tvivl, er du velkommen til at kontakte os, så kan vi sammen sikre, at dit design overholder de nødvendige accessibility krav.

Læs mere om webtilgængelighed

Brug for hjælp?

Mange af vores kunder har gode erfaringer med at bruge os, hvis de ikke selv har kompetencer, eller ressourcer til at levere et fyldestgørende digitalt design.