Grafisk produktion og workflow

Transkript

1 Grafisk produktion og workflow Helle Nicolaysen svendeprøve juni 2016

2 Kunde (fiktiv) Bomholt er en virksomhed der laver og sælger plankeborde og som nu ønsker en helhedsorienteret grafisk designlinje, som et led i en mere målrettet markedsføring. (se kernefagligheden grafisk design) Opgave (fiktiv) Opgaven er at lave et website til virksomheden i forbindelse med udformning af en grafisk identitet. Ønsket er et stilrent og brugervenligt design med forskellige funktioner. Kreative proces idé og design Designmæssigt skal der tages udgangspunkt i eksisterende design linje websitet skal matche det resterende design websitet skal vise æstetikken ved træ Websitet skal have følgende funktioner: præsentation af virksomhed præsentation af kernemedarbejdere præsentation af plankeborde og træolier nyhedsopdatering via Instagram, da der ikke ønskes jævlige opdateringer en You Tube video et Google Maps kort kontaktoplysninger en kontaktformular websitet skal være responsiv, primært til mobil Udvikling af flowchart Et flowcahrt er et godt redskab til at skabe overblik og danne grundlag for et fælles sprog mellem kunde og designer og programmør omkring sidens indgold af index-side og undersider. forside om os nyheder produkter pleje kontakt 2 3

3 Udvikling af design i Photoshop Udvikling af skitser Skitser hjælper til at tale endnu mere konkret om det kommende produkt. Efter at flowchart og skitser er lavet og godkendt påbegyndes design i Photoshop. Da der sideløbende laves en grafiskk designlinje er der krav til tekst, farver, grafik og billedemateriale. I denne fase gøres der følgende overvejelser over det grafiske design kodning: hvordan kan lay-out se ud i forhold til mobile enheder. design i spalter der er nem at ændre til responsivt design og kodning brugervenlighed design der går igen i hele websitet Godkendelse af skitser Præsentation af skitse overfor kunde: indhold og funktioners placering forklares det forklares visuelt hvordan designet kan ændres til responsivt design. Tekniske overvejeler Når der designes i Photoshop er der nogle krav og hjælpemidler: farverummet er RGB (web) al billedmateriale er 72 ppi al materiale skal gemmes til web. installering af grids kan over designprocessen mere overskuelig og korrekt. god struktur i lag og mapper Præsentation af virksomhed og slideshow til at vise træ ud fra et æstetisk perspektiv. 4 5

4 Udvikling af wireframe Mens der arbejdes i Photoshop skitseres sideløbende et wireframe af websitet. Wireframe er en kæmpe hjælp, når der senere skal kodes. Derved har man både de grafiske og tekniske formaliteter på plads, hvilket giver overblik og struktur i design- og kodningsprocessen. Jeg har valgt kun at lave et wireframe over forsiden og bruge den som udgangspunktet for kodning i undersider, da opbygningen er identisk. logo-header: 250px Præsentation af kernemedarbejdere. nav: 800px. Præsentation af produkter og You-Tube video. HEADER - padding-top: 1113px (113px, pga fixed header) MAIN section main-bg: width 100% id: fadeshow width 100% section intro: width 100% id: intro-text, width: 100% class content half (width: 500px, padding-right: 25px). Præsentation af produkter. - padding-bottom: 50px - padding-top: 50px section firm: width 100% class one-third-column-frame (width: 100%) classes: content-one-third (width: 276p, padding-right/left: 37px). section customers: width 100% class one-third-column-frame, (width: 100%) classes: content-one-third (width: 276px, padding-right/left: 37px). Præsentation af Instagram som nyhedskanal. Kontaktoplysninger og kontaktformular. 6 section contact: width 100% class: content-two-third, (width: 700px) sec tion class: content -one third (width: id: foo footer 350px). ter l i n -ico ks:, n (t text sec e -alig x tion t-al n ce FOOTER ign id: cen nte foo footer r. ter) ter log adress o(t ext-, text-a alig l n ce ign cen nte ter r) 7

5 Kodning i Dreamviewer Optimering af kodning I kodning er at have god struktur, så det er nemt at overskue for dig selv og andre. Gennem styling optimerer jeg mine koder: anvendelse af mange classes fælles størrelse for alle p, h1 og h2-tags fælles font-type nulstilling af margin og padding I HTML5 navngiver man ikke længere kun ud fra div-bokse. Her navngives ud fra funktion, fx: header nav main section footer Denne nye navngivning er med til at give bedre struktur og øge søgeoptimeringen. Oprettelse af dokument Mappestruktur: der oprettes en mappe to undermapper - images & style laver et stylesheet (css) og gemmer det i style der oprettes et html dokument stylessheet (css) linkes til html navngivnng af title på hjemmeside Struktur i HTML: indrykninger kommentarer giver informationer og overblik Struktur i CSS kommentarer og overblik Anvendelse af <!DOCTYPE html>, HTML5 den er bagudskuende og understøtter alle tidligere versioner Anvendelse af <meta charset= uft-8 > understøtter æ, ø, å og er vigtig for en dansk hjemmeside Anvendelse af <meta name= viewport...> bevirker at repsonsiv design skalerer til mobile enheder 8 Klargøring til responsiv design Indsættelse af Media Query placeres nederst i css-dokumentet navigation-ikon til mobilversion placeres i navigation på desktop version, men usynliggøres indtil en skærmbredde på 1050px Opbygning af undersider Opbygning af struktur der tages udgangspunkt i wireframe navngivning af undersider linke til undersider Brugervenlighed HTML og CSS: navngivning af alt giver blinde mulighed for at få oplæst teksten styling af links via hover og active, så brugeren har nemmere ved at navigere på siden Afprøvning og kommentering Afprøvning af website internt på computeren samt kommentering i koderne gøres løbende. 9

6 Indsætte scripts Iterativ proces Javascript til slideshow placeres nederst i dokumentet billedstørrelse angives placeres ude i roden som en kilde Kodning, afprøvning, behov for ændring, videre kodning, afprøvning... etc. Indsætte iframes Instagram, størrelse/ antal kasser laves via link You-Tube link hentes og størrelse angives Google Maps link hentes og størrelse angives Søgeoptimering HTML5, H1 og H2 tags, links, responsivt design er højere rangeret. Testfase med kunde Media Qeury afprøves under kodningen. Kodning Indsætte kontaktformular Indsætte formular i HTML og style den i css skrifttyper knapper hover på knapper Nye ændringer foretages. Test på server Websitet testes med kunden på en server. Før lancering af website Testfase med kunde Før en virkelig lancering af webstitet ville følgende være relevant at opdatere: optimere websitet til ipad ved at angive flere størrelse under i Media Qeury angive en modtager i kontaktformularen. Hjemmesiden blev afprøves og godkendes til videre kodning Kodning af Media Query Redigering i Media Query i stylesheet influerer mange kodeændringer langsommelig proces fokus bliver lagt på at versionen er brugervenlig på mobilversion og ikke tabletversion Slideshow, stort logo og Google Maps gøres usynlige på mobil version

7 Grafisk produktion og workflow Helle Nicolaysen svendeprøve juni 2016