Hvad er en styleguide og hvorfor skal du have en?

🎞️ Se videoen hvor jeg går det igennem

Hvorfor er en styleguide vigtig?

⚡ Hvorfor mener jeg, du bør anvende en styleguide, og hvorfor det sikrer en rød tråd i dit webdesign

• Styleguide - er en visuel guide for din styling af elementerne til dit website
• Rødtråd i designet, kan sikre, at prototypen og designet matcher
• Du har altid noget, som du kan referere til, hvis du er i tvivl
• At have en klar plan for styling gør dit arbejde med webdesign, lettere
• Lettere at implementere i webdesignet

Hvad er en styleguide?

En styleguide er en visuel præsentation af de elementer, der skal være på dit website eller app, det kunne eksempelvis være:

• Skrifttyper
• Farver
• Knapper og tekstlinks
• UI Komponenter på dit website

🧙‍♂️ En styleguide er altså en guide af de komponenter eller byggeblokke, der bruges til at udarbejde et website eller en app, fordelen ved dette er, at du får en rød tråd i designet

Hvordan arbejder du med styleguide?

Først og fremmest skal du udarbejde din styleguide ud fra din visuelle identitet, her finder du frem til hvilke skrifttyper, farver, ikoner, billedestil. du vil anvende på dit website.

På billedet herover kan vi se en reference af overskrifter for mit website her har jeg lavet en “styleguide” til overskrifter og tekster på mit site, guiden omfatter ikke kun skrifttype, men også skrifttypestørrelsen og linjehøjde , den information bruger jeg som reference på mit website.

Det samme gør jeg med farver, og hvordan de skal agere på siden, Her har jeg også valgt at dele farver ud på tekster, baggrunde og elementer på siden for at gøre det endnu nemmere for mig selv.

Her ses en reference af knapper, tekst‐links på min side og ikoner, der bruges. Det kan også være inkluderet i en styleguide

🧙‍♂️ Når alt i din styleguide er opsat efter dine ønsker, så er du klar til at tage næste skridt

Du kan bruge den til enten at designe dit website med wireframes som vist på billedet her under eller anvende det på dit website med at opsætte “klasser”

Billedet af wireframe for en skitse for mobilen på mit website

Styleguide på website vs. i design program

Jeg starter altid med at lave styleguides i design programmet figma

‍

Her ses en styleguide fra figma for www.nozoo.dk, et projekt som jeg har arbejdet på, her kan der ses knapper i deres normale state, og hover state.

🧙‍♂️ Men **magien** sker først når du får det op på websitet

Med styleguide kan du lave en side på dit website, som er sat til “kladde”, herfra kan du stadig referere elementer med “classes”, hvis du arbejder i Webflow eller andre *class”, baserede CMS-systemer

‍

3 tips til din styleguide

1. Start med din identitet

Start med at udforme en god og fyldestgørende visuel identitet for din virksomhed, så har du et godt udgangspunkt for styleguiden ved at anvende farver, skrifttyper, ikoner derfra.

2. Brug styleguiden til designe

Brug din styleguide til at designe dit websites wireframes, her fortrækker jeg Figma, men det kan også laves i Adobe XD eller Sketch.

3. Anvend styleguiden i udviklingsfasen

Opsæt en side som kladde, hvor du har al din styling. Designet bliver hurtigere at implementere, og du sikre den røde tråd. Når din visuelle identitet skal opdateres, er det også simpelt at lave ændringerne.

‍

🧙 Opsummering: En styleguide er guld værd, når du arbejder med webdesign, fordi du har en konkret plan og guide for elementer. Du skal derfor ikke bruge meget tid på tænke over, hvordan hvert element skal styles og se ud.