Grafisk produktion & workflow

Grafisk produktion & workflow

WORKFLOW & PRODUKTION WEBSITE NATURSPEJDERNE Dokumentation I 2

OPGAVEN Opgaven Jeg har lavet dette fiktive website der kunne være en mulighed for en nyopstartet spejderforening. På sigt skal den være responsiv så den nemt kan tilpasse sig til mobile enheder. Designkrav Sitet skal være indbydende, ligetil og enkel Den er lavet i friske farver Brugervenlig - nem at navigere rundt på Den skal være overskuelig og informerende Det skal være nemt at finde kontaktinformationerne Layout Sidens bredde er 960px Links med hover effekt for brugervenlighed Der er brugt Thickbox til billedgalleriet CSS3 er benyttet til at style knapper. Stringent opsætning med bokse Under kontaktformularen er det tilkoblet et php script. Billeder & Illustrationer Alle billeder er tilpasset og rettet i Photoshop Billederne er komprimeret til web så de ikke fylder så meget Logo Der er udarbejdet et logo til websitet (Naturspejderne) Udarbejdet i Illustrator Usability Sitet er enkelt, overskueligt og nemt at navigere rundt på. Man kan nemt overskue hvor man skal hen og det er nemt at finde kontaktoplysningerne i menuen eller til venstre på siden. Jeg har lavet en usability test på nogle brugere som blev bedt om at tænke højt, mens de navigerede rundt på hjemmesiden. Undervejs blev der stillet spørgsmål og opgaver, så man kunne få at vide hvordan brugerne oplevede hjemmesiden. Arbejdsprocess Inspirationssøgning på nettet Håndtegnede skitser Udarbejdelse af flowchart, skelet og storyboard Programmering med brug af HTML, CSS, CSS3, jquery og Scripts Browserkompatibilitet testet Tilretninger af kode og tekster Sitet er færdig Browserkompatilibitet Sitet er testet i Chrome, Firefox, Safari og Internet Explorer, og her fungerer det som det skal, jeg har tilføjet en lille kode for at undgå rammer omkring billederne som der opstår man ser den i Internet Explorer, men det er nu ikke længere et problem. Kvalitetsvurdering Jeg er blevet rigtig tilfreds med det færdige resultat, da sitet er blevet overskueligt og nemt at navigere rundt på. Det er enkelt og indbydende og det lever op til mine egne forventninger ang layout og funktionalitet. Jeg brugte en del tid på at få min knapbar ude i venstre side til at virke, da den ikke helt agerer som det skal i Safari, dette er ved at blive løst. Arbejdsprocess Formøde - Kravsspecifikationer - Særlige ting - Mv. Planlægning - Møde - Dokumenter - Målgruppe - Farve - Mv. Design - Skitser/ideer - Møde - Wireframe Kode - Programmering med brug af HTML, CSS, CSS3, jquery og Scripts Aflevering - Møde - Aflevering til kunde Dokumentation I 3

DIGITAL WORKFLOW Ideudvikling - Brainstorm - Mindmap Inspiration Målgruppe - Evt. Minerva modellen Skitser Layout - Lavet i photoshop Tekst, billeder, lyd mv. - Hvad skal bruges - materialer fra kunden Storyboard - Hvad sker der på siderne Flowchart - Diagram over sider Opsætning af website - browserkompatibel - Opload side til kunde inden møde Præsentation og justering Usability - Test på brugere - Spørgsmål - Stillet opgaver Dokumentation I 4

INSPIRATIONSSØGNING Smart med knappen ude til venstre, kan evt bruges til kontakt mm. Opdelingen af websitet gør det nemt og overskueligt at finde tingene, og dejligt med luft igennem. Kontaktformular Dokumentation I 5

FLOWCHART INDEX FORSIDE BLIV SPEJDER OM FAMILIESPEJD BILLEDER DET SKER GRUPPEN KONTAKT KONTAKTFORMULAR SKITSER Jeg synes denne opstilling er bedst og mest overskuelig til de tanker jeg har om sitet, så derfor vælger jeg at gå ud fra den. Dokumentation I 6

WORKFLOW & PRODUKTION STORYBOARD Her ses mit storyboard hvor hver enkelt side er forklaret og tegnet hvordan det skal se ud. Man kan bedre danne sig et overblik over hvordan alle siderne kommer til at se ud når man har lavet sådan et. Dokumentation I 7

FARVER Farverne til websitet er valgt fordi jeg forbinder en spejder med naturen og friluftliv, derfor den grønne (græs) og den brune (jord). Grøn Hex #6a873b Blå Hex #f2e8db Brun Hex #32271a Blå Hex #f2e8db Links er lavet i den mørkeblå så de nemt kan ses og matcher baggrunden og når man kører musen henover dukker den samme mørkeblå op som går igen flere steder på siden, der er en rød tråd imellem tingene. 100% 75% 55% 25% 100% 75% 55% 25% 100% 75% 55% 25% 100% 75% 55% 25% TYPOGRAFI Trebuchet MS, Arial, Helvetica, sans-serif Trebuchet MS er en let og moderne Sans Serif skrift. Den bliver brugt mere og mere på nettet, hvor den især ses på blogs. Trebuchet MS er dog ikke så læsevenlig som Verdana. Den er lidt mere kompakt og har lidt flere krummelurer, hvilket er med til at give den det lettere og måske mere moderne udtryk. Dokumentation I 8

LOGO Kunden valgte dette logo da det fungere rigtigt godt til dens formål. Det blå da deres uniformer er blå, og det grønne blad for at symbolise naturen. Fungere også godt i lille NATUR SPEJDERNE Kan også bruges uden navn Fungere også i sort/hvid Og i negativ Dokumentation I 9

GENERELT Forsidebillede med illustration i venstre hjørne, så der kommer forbindelse mellem denne website og de resterende produkter jeg har lavet tidligere. Videoer fra Youtube er blevet integreret på forsiden Dokumentation I 10

Mine kontakter ude i venstre side som er låst til kanten. Den er på alle sider så man nemt kan komme til spejdernes side på facebook, man kan se videoer på youtube og kontakte spejderforeningen via kontakten, som åbner automatisk op i et mailprogram. Dokumentation I 11

WORKFLOW & PRODUKTION Jeg har prøvet at integrere børneillustrationerne som også bliver brugt på alt andet materiale. De figurerer på næsten alle siderne, så der kommer en rød tråd mellem produkterne God opdeling mellem aktiviteterne på denne side. Det gør det nemt og overskueligt at se på. Dokumentation I 12

Igen mine kontakter til venstre så man kan se helheden sammen med siden. Videoer er integreret fra Youtube så man nemt kan komme til nogle af de spejdervideoer som lederne lægger på nogle gange. Man trykker bare på dem og så går de i gang, og hvis man ønsker at se dem i større er det også muligt ved et enkelt tryk nede i højre hjørne. Dokumentation I 13

Her har jeg integreret et kort, google maps så man nemt kan se hvor Naturspejderne har adresse og man kan zoome ud og ind på det. En formular som man kan benytte sig af hvis man skal kontakte Naturspejderne. Der er tilkoblet et php script for at det skal virke optimalt. Dokumentation I 14

WORKFLOW & PRODUKTION Her er mit billedgalleri som har den funktion at når man trykker på et billede, kommer det op i større størrelse hvor man kan bladre frem og tilbage. Dokumentation I 15

HTML OG CSS Her er toppen af min kodning, hvor man kan se titel er med og alle mine scripts der er tilkoblet websitet Her er koderne til mit billedegalleri Dokumentation I 16

HTML OG CSS Her ses min kode til min kontaktside, hvor den henter en lille php fil der gør at min formular virker. Jeg har en masse kommentarer så det er nemt og overskueligt at finde rundt i mine koder også hvis andre skal se det også. Dokumentation I 17

DET FÆRDIGE PRODUKT Dokumentation I 18