Overlevering af webdesign
En 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?
Når du som kunde kommer med et gennemarbejdet designbrief og digitalt design, kan vi umiddelbart begynde at bygger efter. Her er designprocessen gennemgået inden vi møder kunden, og vi kan forholdsvist hurtigt starte på implementeringen, hvis materialet vi modtager er af god kvalitet.
Hvis du overleverer et design til implementering, bør det som minimum indeholde:
For at udviklerne 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.
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.
Moduloversigterne skal i modsætning til prototypen være detaljeret og indeholde samtlige moduler og komponenter, der skal bygges til læsningen.
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.
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.
Billederne, som er brugt i designet, skal gerne vedhæftes i korrekt opløsning og beskæring, så vi kan bruge dem til test.
Farver, der er i brug, skal dokumenteres - dvs. angives med HEX- eller RGB farvekode samt titel.
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.
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
Indhold relateret til webdesign
En god designproces indeholder lige dele nysgerrighed, kreativitet, ledelse og struktur, og det er vigtigt at facilitere henholdsvis det ene og det andet på de rigtige tidspunkter i processen, så både idéudvikling og fremdrift understøttes maksimalt.
Designfaser og metoder
Forventningsafstemning er helt centralt
Vores wireframes og prototype er udgangspunktet for en forventningsafstemning omkring designet.
Læs mere
Designprocessen
Vores designproces er brugercentreret
Vi fokuserer på at gøre det så let og intuitivt som muligt for brugerne at interagere med løsningen.
Læs mere
Design og UX
Et godt UX design kan optimere din forretning
Med et godt UX design kan du styre dine besøgendes handlinger og modne dem leads.
Læs mere