Mini Guide Til Digital Grafik
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 15
DESIGNGUIDE
TIL DIGITAL GRAFIK
DESIGNGUIDE
INDHOLD
Basale designprincipper
Denne guide inderholder en række basale guidelines, der sørger for, at dit
digitale design står skarpt.
I guiden får du nogle overordnede beskrivelser af programmer og værktøjer, du
kan benytte i forbindelse med designprocessen, en UX design checkliste samt en
oversigt over hvilke formater, du bør bruge på de forskellige sociale medier.
Design & platforme
Programmer
UX & UI design
Grafiktyper
1
2
3
4
5
BASALE DESIGNPRINCIPPER 01
LAYOUTREGLER
LINJER STØRRELSER
HIERARKI BALANCE
KONTRAST
GENTAGELSER
RAMMER
SYMMETRI
RETNING
• Skaber harmoni og orden
• Hjælper øjet med at finde
vej i grafikken
• Hjælper brugeren med at navigere
i dit design
• Brug linjer, farver, størrelser osv.
• Justér balancen i dit design vha.
størrelser og komposition
• Skaber ro
• Øjet er generelt tiltrukket af
symmetri
• Får elementer til at træde frem
• Lys/mørk, tyk/tynd, stor/lille
• Fremhæver elementer
• Beskær billeder på en spændende
måde
• Leder beskueren gennem dit design
• Brug ‘L’, ‘Z’ eller ‘Y’ forme til at lede
øjet fra ende til anden
• Sender opmærksomhed
til eller fra elementer
• Skaber dynamik
• Forbinder forskellige elementer
• Afgørende for konsekvent
branding
02
BASALE DESIGNPRINCIPPER
TYPOGRAFI
Tænk over hvilke typografier, du vil benytte i dit design.
Nogle typografier spiller godt sammen, mens nogle
kombinationer kan virke uharmoniske og skabe uro.
Til højre ser du eksempler på forskellige
typografikombinationer - her ser du de gode
kombinationer, men også dem, som bør undgås.
Den sikre løsning er at benytte en enkel typografi og
benytte typografiens forskellige skriftsnit til at skabe
variation mellem overskrifter og brødtekst.
God kombination
Don’t!
Gode sammen
Aldrig for mange!
SKAB KONTRAST
Brug en serif font i kombination med en
sans-serif font. Brug den ene til over-
skrifter og den anden til brødtekst.
To typograer, der minder om
hinanden, er som regel ikke gode at
bruge sammen.
Kombinér fonte, der sammen virker
harmoniske.
To eller tre er fint.
Pas på med at inddrage for mange
forskellige typograer
- det kan hurtigt give et rodet udtryk.
Brug typograer, der på en eller anden måde står i kontrast
til hinanden. Dette skaber god dynamik i designet.
03
BASALE DESIGNPRINCIPPER
FARVER
Der er som sådan ingen regler for, hvilke farver der bør eller ikke
bør bruges sammen. Til gengæld kan du med udgangspunkt i
farvepalette-værktøjer udvælge dig en stærk farvepalette, som
du kan benytte i dit design.
Du kan eksempelvis benytte Adobes gratis værktøj Color CC’s
farvehjul til at sammensætte gode farvekombinationer. Her kan
du blandt andet benytte et billede, du synes, rummer en række
gode farver, og herudfra lege med forskellige kombinationer.
FARVESYSTEMER
• RGB
RGB står for Red, Green og Blue. RGB bruges
til billeder og grafik, der skal vises på skærm.
• CMYK
CMYK står for Cyan, Magenta, Yellow og Key.
CMYK bruges til print.
PRØV ADOBE COLOR CC HER
https://color.adobe.com/create/color-wheel/
04
BILLEDKVALITET & FILTYPER
.JPG
.PNG
.EPS
.SVG
.GIF
Digitale billeders mest almindelige filformat er
jpg, og har filendelsen .jpg eller .jpeg.
Gennemsigtighed understøttes ikke.
Ligeledes jpg er png et filformat til digitale billeder.
Fordelen ved png er, at formatet understøtter
gennemsigitighed, du kan derfor gemme et billede
af et objekt uden baggrund.
Dette format bruges til små animationer. Billed-
sammensætninger kan gemmes i en enkel fil og
danne en simpel animation.
Formatet kan bruges til billeder såvel som vektor-
grafik. .eps er et ikke-komprimeret filformat og er
derfor ofte store filer.
SVG er et filformat til bitmapbilleder til web.
Formatet er et XML-baseret vektor format, og er
ligesom .eps ofte store filer.
FILTYPER
BASALE DESIGNPRINCIPPER
Billedkvaliteten er en afgørende faktor for dit design. Sørg for at
bruge billeder og grafik i god opløsning.
Hvis dine grafikker skal bruges på hjemmesider eller lignende er
en lav filstørrelse afgørende for, at grafikken kan vises hurtigt.
Et godt tip til et onlineværktøj for at komprimere .jpg og .png
billeder er TinyPNG, der automatisk reducerer filstørrelsen, uden
synlig tab af kvalitet.
REDUCÉR FILSTØRRELSEN PÅ DINE GRAFIKKER
Prøv TinyPNG online her
05
DESIGN & PLATFORME
DESIGN & PLATFORME
RESPONSIVE DESIGN
Det er ikke til at vide, hvilken enhed din bruger ser din hjemmeside på,
derfor er det vigtigt at din hjemmeside er designet så den ser optimal ud
på alle slags enheder.
Responsive design er en måde at designe din hjemmeside på. Hensigten
med responsive design er, at hjemmesidens design er optimeret til alle
former for enheder herunder smartphones, tablets og almindelige
desktop computere.
MOBILE FIRST
Det er en god idé at være bevidst om, hvilken enhed din hjemmeside
bliver begået fra. Mobile-first er en tilgang, der i sin enkelhed består
i, at man først designer hjemmesiden til mobile enheder og derefter
optimerer siden, så den også fungerer på andre enheder.
ADAPTIVE DESIGN
Adaptive design minder på mange måder om responsive design, i og med
at hensigten er at tilpasse designet til forskellige enheder.
BEGREBER OM DESIGN & PLATFORME
06
DESIGN TIL
SOCIALE MEDIER
De mange sociale medieplatforme kan være en jungle at
finde rundt i, og ligeledes er de mange formater, der fremgår
fra platform til platform. Her får du nogle guidelines til hvilke
formater, du skal bruge hvor.
828 x 315
LINKEDIN
400 x 400
974 x 330
646 x 220
STANDARDLOGO
• Anbefalet billedstørrelse 400 x 400 px
• PNG-, JPG- eller GIF-fil
TOP BANNER
• Min. 974 x 330 px
• Må max. fylde 2 MB
• PNG-, JPG- eller GIF-filer
LOGO
• 60 x 60 px
• Må max fylde 2 MB
• PNG-, JPG- eller GIF-filer
BUSINESS BANNER
• Min. 646 x 220 px
• Må max. fylde 2 MB
• PNG-, JPG- eller GIF-filer
DESIGN & PLATFORME
07
FACEBOOK
PROFILBILLEDE
• Skal være min. 180 x 180 px
• Vil blive vist i 160 x 160 px
• Rundt omkring på siden vil billedet blive vist i 32 x 32px
COVERBILLEDE
• Fremvises på siden i 828 x 315 px
• Skal være min. 399 x 150 px
• Opnå det bedste resultat med en jpg-fil
i RGB under 100KB
DELTE BILLEDER
• Anbefalet billedstørrelse er 1200 x 630 px
• Vil blive vist på feedet med en max vidde på 470 px
DELTE LINKS
• Anbefalet størrelse er 1200 x 627 px
FREMHÆVET BILLEDE
• Anbefalet billedstørrelse er 1200 x 717 px
• Vil blive vist i 843 x 504 px
• Vælg høj opløsning for at opnå den bedste kvalitet
EVENTBILLEDE
• Anbefalet billedstørrelse er 1920 x 1080 px
• Vil blive skaleret ned til 417 x 174 px
828 x 315
180 x 180
1200 x 630
1200 x 627
1200 x 717
1920 x 1080
DESIGN & PLATFORME
08
YOUTUBE
KANAL COVERBILLEDE
• Youtube streames fra mange forskellige enheder, så det er
vigtigt at have et billede, der er optimeret til hver enhed.
• Tablet: 1855 x 423 px
• Mobil: 1546 x 423 px
• TV: 2560 x 1440 px
• PC: 2560 x 423 px
VIDEO UPLOADS
• Vil beholde størrelsesforholdet 16:9
• For at kvalificere til Full HD skal videoen uploades i min. 1280 x
720 px.
2560 x 1440
1280 x 760
DESIGN & PLATFORME
09
INSTAGRAM
110 x 110
161 x 161
1080 x 1080
PROFILBILLEDE
• Vil blive vist på siden i 110 x 110 px
• Billedet skal være kvadratisk
FORHÅNDSVISNING
• Instagram skalerer billedet ned til 640 x 640 px i
forhåndsvisningen
FULLSIZE BILLEDE
• Kvadratisk billede: 1080 x 1080 px
• Vertikalt billede: 1080 x 1350 px
• Horisontalt billede: 1080 x 566 px
DESIGN & PLATFORME
10
HVILKE PROGRAMMER BRUGES TIL HVAD?
PROGRAMMER
PHOTOSHOP EXPERIENCE DESIGN
TUMULT HYPE
CANVA
SKETCH
ILLUSTRATOR
INDESIGN
ANIMATE
Benyt Photoshop til at redigere dine billeder. Manipulér, indstil
lysstyrke, værdier og mættetheden, leg med filtre og masker
og meget mere. Ideelt til webgrafik og GIF’er.
Med en række simple værktøjer kan du i Sketch skabe design
til web. Det færdige design kan efterfølgende implementeres i
en interaktiv prototype i ‘søsterprogrammet’ InVision.
Tumult Hype er et ideelt program til at skabe levende indhold
til web. Et ‘keyframe’-baseret system gør det muligt at få
grafiske elementer til at interagere.
Brug Canvas træk-og-slip-funktion og professionelle layout
til at designe konsekvent smuk grafik. Canva er et brows-
er-baseret design program.
InDesign giver dig en fantastisk kontrol og fleksibilitet omkring
tekstarbejde. Layout og komposition af tekst i samspil med
billeder og grafik.
Med Animate kan du skabe animationer, interaktive web-
bannere og anden levende grafik.
Design, byg prototyper og del brugeroplevelser på tværs af
platforme, skærme og enheder med Adobe Experience Design.
Skab smuk vektorgrafik og illustrationer i Illustrator.
Programmet er perfekt til at skabe mønstre, 3D, særlige
pensler og meget mere. Tegn med fordel logo og ikoner i
Illustrator.
11
UX DESIGN
UX DESIGN
DIGITAL DESIGN
• UX DESIGN
“User Experience Design” er den del af
designprocessen, hvor brugervenligheden er i
fokus. Det handler om, at skabe eller tilpasse
et design på en måde, der stemmer overens
med brugerens behov. Her kigger man på
produktets funktionelle egenskaber.
• UI DESIGN
“User Interface Design” har, på samme måde
som UX design, brugeren i fokus, men
handler i højere grad om produktets visuelle
fremtræden. I UI design ser man på, hvordan
man gennem det visuelle udtryk, kan gøre
produktet brugervenligt og let at navigere
rundt i.
CHECKLISTE
Overordnet koncept og udtryk er gennemgående
Målgruppen er defineret
Al tekst er læseligt
Nye tiltag er gennemarbejdede
Brugeren kan finde produktet
Brugeren kan modtage support vedrørende produktet
Tone og udtryk stemmer overens med målgruppen
Knapper og call-to-actions er tydelige
Formularer indeholder så få indputsfelter som muligt
Velvalgte og klare ikoner
Velvalgt produktnavn
Loadingtiden er rimelig
12
POPULÆRE GRAFIKTYPER
GRAFIKTYPER
INFOGRAFIK
Skal du udarbejde en årsrapport, skabe interaktion på de sociale medier eller blot vil præsentere
et kompliceret emne på interessant vis? Så kan en infografik være en super mulighed.
Med infografikker kan du nemt formidle kompleks information som også er særligt delevenligt
på en blog, de sociale medier eller til det næste medarbejdermøde.
IKONER
Som ikon-designer besidder du en yderst efterspurgt evne på markedet, hvor flere kræver
strømlinede illustrationer til projekter online såvel som offline.
Ikoner designes tit i Illustrator på grund af programmets evne til at skabe grafikelementer helt
ned til den mindste detalje.
CINEMAGRAPHS
En cinemagraph er betægnelsen på statiske billeder, hvor enkelte elementer bevæger sig. Det,
som egentlig er en videoteknik, men som relativt nemt kan laves i Photoshop, ser fantastisk ud,
og er med til at give dine flotte stilbilleder liv.
Cinemagraphs kan bruges som bannerbilleder, annoncer, illustrationer til sociale medier og
meget mere. Cinemagraph-teknikken giver dybde, har en dragende effekt og fungerer perfekt til
storytelling.
VI TILBYDER FLERE KURSER OM GRAFIKTYPER
på www.softworld.dk
VIL DU LÆRE MERE?
LÆS OM GRAFISKE DESIGN KURSER
PÅ VORES HJEMMESIDE
WWW.SOFTWORLD.DK
