Bettina Andersen M ED I E G RA F I K ER 2. Hovedforløb
Indholdsfortegnelse Grafisk design...3 Proces... 4 Inspirationssøgning... 4 Skitsering... 5 Rentegning.... 6 Typografi & Ombrydning.......................................... 7 Setup af dokument... 8 Baseline grid... 8 Typografi... 9 Farvekoder... 10 Paragraph styles... 11 Tabeller.... 12 Grafisk Produktion & Workflow.... 13 UX design... 14 Sketchfab viewer... 15 Kode eksempel... 16
GRAFISK DESIGN Martin by Harman vil have lavet et nyt logo. Det skal, i stil med deres gamle logo, signalerer at de sælger lyskilder. Samtidig skal det stemme i overens med firmaets værdier, de beskriver dem selv på følgende måde: Martin handler om nye ideer, bygget på et solidt grundlag af erfaring og en uovertruffen række dynamiske lysløsninger.
PROCES Briefing om opgaven. Brainstorm/mindmap. Inspirationssøgning. Sketching. Rentegning. Test af logo. INSPIRATIONSSØGNING Jeg vidste at jeg ville arbejde med golden ratio og evt. negative space, så jeg gik i gang med at søge på nettet efter inspiration. Her er nogle af de ting jeg bedst kunne lide. 4 Grafisk design - H2
SKITSERING Jeg skitserer ideer løbende imens jeg søger inspiration. H2 - Grafisk design 5
RENTEGNING Jeg gik igennem nogle iterationer af min rentegning, for at se hvad der fungerede. Jeg ville oprindeligt have M et inde i pæren, men dette virkede som dobbelt konfekt så jeg endte med at gøre brug af negative space, og satte i et ind i pæren. Til højre ses den endelige version. Den oprindelige idé. Enkeltfarvet pære, dog stadig dobbelt konfekt. 6 Grafisk design - H2 Ligner ikke en pære nok.
T YPOGRAFI & OMBRYDNING Opgaven gik ud på at redesigne Martin.com s brugervejledning, der skulle tages udgangspunkt i teksten fra den eksi sterende brugervejledning. Den eksisterende brugervejledning er i højformat og har 36 sider - min endelige brugervejledning er i A4 højformat og har 56 sider.
SETUP AF DOKUMENT A4 højformat. Margin: Top: 42,205. bund: 45. Inderst: 20. Yderst: 20. 2 spalter m. 8 mm gutter. 5 mm bleed. Én masterside. Jeg valgte dette setup, da det var det som passede bedst til en brugervejledning med en stor mængde tekst og tabeller. Samt gjorde jeg marginer større for at skabe et bedre overblik. BASELINE GRID Top margin + brødtekst højde. 42,205 mm + 3,175 mm = 45,38 mm. Increment every: 15 pt. 8 Typografi & Ombrydning - H2
Brødtekst Calibri Regular, 12/15pt Bundet til grundlinjenet Mellemrubrik Akrobat Regular, 15/18 pt Pagina Akrobat Bold, 20/24 pt Kolumnetitel Akrobat Light, 20/24 pt TYPOGRAFI Jeg har valgt at bruge Calibri regular til brødteksten i brugervejledningen, fordi den er let læselig, og er tidsløs. Samt har jeg valgt at bruge Akrobat bold til mellemrubrikkerne, da den passer godt sammen med calibri. Samt har den mange gode skriftsnit. brødtekst = 12/15 pt. mellemrubrik = 15/18 pt. justering: fast for/bagkant. mellemrubrik udregninger: 1 linje: (15*2) - 18 = 12 pt. 2 linjer: (15*3) - (18*2) = 9 pt. H2 - Typografi & Ombrydning 9
FARVEKODER De forskellige afsnit var opdelt med farvekoder. Dette var gjort så det var nemt for brugeren at finde rundt i manualen, og så de aldrig var i tvivl om de var det rigtige sted. De samme farver går igen i appen. 10 Typografi & Ombrydning - H2
PARAGRAPH STYLES her viser jeg et eksempel på en af mine paragraph styles, i dette tilfælde stylen til mine mellemrubrikker. Samt den fulde liste af paragraph styles som jeg gør brug af, i min brugervejledning. H2 - Typografi & Ombrydning 11
TABELLER Der var rigtig mange tabeller i brugervejledningen, de fleste af dem gik endda over flere sider. Der er kæmpe forskel på mængden af indhold i tabellerne, så det var svært at gøre brug af object styles/table styles da der lå meget manuelt arbejde i det alligevel. Med de mindre komplicerede tabeller kopierede jeg alt teksten ind i Indesign og rettede tegnene til så det var nemt at konvertere til en tabel efterfølgende. Ens for alle tabellerne er at headeren er den samme farve som det pågældende afsnit (ikke vist på billedet). 12 Typografi & Ombrydning - H2
GRAFISK PRODUKTION & WORKFLOW Opgaven gik ud på at lave en mockup af en webapp til brugervejledningen. Martin by Harman ønsker at deres brugervejledninger kan fungere som web app på mobile devices. H2 - Grafisk Produktion & Workflow 13
UX DESIGN Designet af appen er meget minimalistisk, for ikke at forvirre brugeren. Der er holdt en rød tråd fra brugervejledningen, så alle afsnittene har samme farve, og disse går også igen i indholdsfortegnelsen, som er indbygget i menuen. Samt er der også en tilbage knap i samme farve i bunden af siden. Knapperne er gjort store så de er nemme at ramme, selv når man står ude og arbejder. Og selve formatet er til en tablet. Jeg har lavet en søgefunktion for at det er nemmere for brugeren at finde det som de leder efter. 14 Grafisk Produktion & Workflow - H2
SKETCHFAB VIEWER I Appen var det et krav at vi havde implementeret en sketchfab viewer. Jeg har placeret min på forsiden, når man klikker på pilen nedad. Sketchfab vieweren viser en 3D model af lampen. Jeg satte den på forsiden for at den var let-tilgængelig, og uden at den tog alt for meget fokus fra resten af indholdet. H2 - Grafisk Produktion & Workflow 15
KODE EKSEMPEL Jeg koder i Brackets. Dette kodeeksempel viser Effects siden i min app, samt den CSS der er brugt både på forsiden og på effects siden. Siden består af følgende: Navigation Overskrift Tekst Lister Billeder Tilbage knap 16 Grafisk Produktion & Workflow - H2
H2 - Grafisk Produktion & Workflow 17