Mini Guide Til Digital Grafik
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 15
| Download | |
| Open PDF In Browser | View PDF |
DESIGNGUIDE TIL DIGITAL GRAFIK DESIGNGUIDE INDHOLD 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. 1 2 3 Basale designprincipper Design & platforme Programmer 4 UX & UI design 5 Grafiktyper 01 BASALE DESIGNPRINCIPPER LAYOUTREGLER LINJER • • Skaber harmoni og orden Hjælper øjet med at finde vej i grafikken S TØ R R E L S E R • • • Hjælper brugeren med at navigere i dit design Brug linjer, farver, størrelser osv. • Får elementer til at træde frem Lys/mørk, tyk/tynd, stor/lille Justér balancen i dit design vha. størrelser og komposition • • Fremhæver elementer Beskær billeder på en spændende måde Forbinder forskellige elementer Afgørende for konsekvent branding SY M M E T R I • • Skaber ro Øjet er generelt tiltrukket af symmetri RETNING RAMMER KO N T R A S T • • • • BALANCE HIERARKI • Sender opmærksomhed til eller fra elementer Skaber dynamik G E N TAG E L S E R • • Leder beskueren gennem dit design Brug ‘L’, ‘Z’ eller ‘Y’ forme til at lede øjet fra ende til anden 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 Brug en serif font i kombination med en sans-serif font. Brug den ene til overskrifter og den anden til brødtekst. Don’t! To typografier, der minder om hinanden, er som regel ikke gode at bruge sammen. SKAB KONTRAST Brug typografier, der på en eller anden måde står i kontrast til hinanden. Dette skaber god dynamik i designet. Aldrig for mange! To eller tre er fint. Pas på med at inddrage for mange forskellige typografier - det kan hurtigt give et rodet udtryk. Gode sammen Kombinér fonte, der sammen virker harmoniske. 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. FA R V E SYS T E M E R • RGB • CMYK RGB står for Red, Green og Blue. RGB bruges til billeder og grafik, der skal vises på skærm. 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 BASALE DESIGNPRINCIPPER BILLEDKVALITET & FILTYPER 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. F I LT Y P E R .JPG Digitale billeders mest almindelige filformat er jpg, og har filendelsen .jpg eller .jpeg. Gennemsigtighed understøttes ikke. .PNG 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. .GIF Dette format bruges til små animationer. Billedsammensætninger kan gemmes i en enkel fil og danne en simpel animation. .EPS Formatet kan bruges til billeder såvel som vektorgrafik. .eps er et ikke-komprimeret filformat og er derfor ofte store filer. .SVG SVG er et filformat til bitmapbilleder til web. Formatet er et XML-baseret vektor format, og er ligesom .eps ofte store filer. REDUCÉR FILSTØRRELSEN PÅ DINE GRAFIKKER Prøv TinyPNG online her 05 DESIGN & PLATFORME DESIGN & PLATFORME B E G R E B E R O M D E S I G N & P L AT F O R M E 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. 06 DESIGN & PLATFORME DESIGN TIL SOCIALE MEDIER 828 x 315 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. STANDARDLOGO • Anbefalet billedstørrelse 400 x 400 px • PNG-, JPG- eller GIF-fil LINKEDIN 400 x 400 TOP BANNER • Min. 974 x 330 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 LOGO • 60 x 60 px • Må max fylde 2 MB • PNG-, JPG- eller GIF-filer 974 x 330 646 x 220 DESIGN & PLATFORME FACEBOOK 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 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 828 x 315 180 x 180 1200 x 630 DELTE BILLEDER • Anbefalet billedstørrelse er 1200 x 630 px • Vil blive vist på feedet med en max vidde på 470 px 1200 x 627 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 1200 x 717 1920 x 1080 07 08 DESIGN & PLATFORME YOUTUBE 2560 x 1440 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. 1280 x 760 09 DESIGN & PLATFORME INSTAGRAM 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 110 x 110 161 x 161 1080 x 1080 PROGRAMMER HVILKE PROGRAMMER BRUGES TIL HVAD? 10 P H OTO S H O P EXPERIENCE DESIGN 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. Design, byg prototyper og del brugeroplevelser på tværs af platforme, skærme og enheder med Adobe Experience Design. I L L U S T R ATO R T U M U LT H Y P E 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. 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. INDESIGN C A N VA InDesign giver dig en fantastisk kontrol og fleksibilitet omkring tekstarbejde. Layout og komposition af tekst i samspil med billeder og grafik. Brug Canvas træk-og-slip-funktion og professionelle layout til at designe konsekvent smuk grafik. Canva er et browser-baseret design program. A N I M AT E SKETCH Med Animate kan du skabe animationer, interaktive webbannere og anden levende grafik. 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. 11 UX DESIGN UX DESIGN CHECKLISTE D I G I TA L D E S I G N Målgruppen er defineret Velvalgt produktnavn • Brugeren kan finde produktet Overordnet koncept og udtryk er gennemgående Nye tiltag er gennemarbejdede Loadingtiden er rimelig Tone og udtryk stemmer overens med målgruppen Al tekst er læseligt Velvalgte og klare ikoner Knapper og call-to-actions er tydelige Formularer indeholder så få indputsfelter som muligt Brugeren kan modtage support vedrørende produktet • 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. GRAFIKTYPER POPULÆRE GRAFIKTYPER 12 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. 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. 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. 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
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.7 Linearized : Yes Language : en-US XMP Toolkit : Adobe XMP Core 5.6-c143 79.161210, 2017/08/11-10:28:36 Create Date : 2017:11:14 11:54:24+01:00 Metadata Date : 2017:11:14 11:54:35+01:00 Modify Date : 2017:11:14 11:54:35+01:00 Creator Tool : Adobe InDesign CC 13.0 (Macintosh) Instance ID : uuid:8f70aa86-e9dc-204b-8ada-c10626a8b40b Original Document ID : xmp.did:78aa0fdd-f60d-4fa3-b056-b493e1272cb0 Document ID : xmp.id:572f2347-69f8-4b2f-8a22-636f1ea3558e Rendition Class : proof:pdf Derived From Instance ID : xmp.iid:a4996a35-1967-46de-a66c-94e509259b0d Derived From Document ID : xmp.did:f440b7c0-af1a-4085-96cf-0917fd31a394 Derived From Original Document ID: xmp.did:78aa0fdd-f60d-4fa3-b056-b493e1272cb0 Derived From Rendition Class : default History Action : converted History Parameters : from application/x-indesign to application/pdf History Software Agent : Adobe InDesign CC 13.0 (Macintosh) History Changed : / History When : 2017:11:14 11:54:24+01:00 Format : application/pdf Producer : Adobe PDF Library 15.0 Trapped : False Page Count : 15 Creator : Adobe InDesign CC 13.0 (Macintosh)EXIF Metadata provided by EXIF.tools