En styleguide er godt redskab fordi den sikrer at du har en retningslinje for styling af dine elementer og du fastholder din identitet igennem hele dit website
🎞️ 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
Hvem skal bruge en styleguide?
En styleguide er nyttig for:
- Designere
- Udviklere
- Marketingteams
- Alle, der arbejder med brandets visuelle og kommunikative udtryk.
Hvordan adskiller en styleguide sig fra et designsystem?
En styleguide fokuserer på visuelle og tekstuelle retningslinjer, mens et designsystem inkluderer færdige komponenter og værktøjer til implementering i udvikling.
Kan jeg lave en styleguide selv, eller skal jeg hyre en professionel?
Du kan lave en simpel styleguide selv, men for større brands eller komplekse projekter kan det være værd at hyre en professionel for at sikre, at den opfylder alle krav og standarder.
Hvilke værktøjer kan jeg bruge til at lave en styleguide?
Populære værktøjer inkluderer:
- Figma
- Sketch
- Adobe XD
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.
Bestil hjemmesideanalyse
Bestil din analyse allerede idag, læs mere på nedestående
Jeg håber du kunne bruge artiklen
Har du spørgsmål eller vil starte en dialog, er du altid velkommen til at kontakte mig på nedestående
