Dokumentation. Grafisk Produktion & Workflow. OPGAVEN: Denne opgave er fiktiv, og den samme som jeg har beskrevet i kernefagligheden grafisk design

Transkript

1 Dokumentation OPGAVEN: Denne opgave er fiktiv, og den samme som jeg har beskrevet i kernefagligheden grafisk design PROGRAMVALG: illustrator CS5 og Dreamweaver CS5 FORMAT: (A4) TEKNIKKER: Brainstorm Moodboard Skitser Design HTML, CSS

2 Skitser til web siden

3 BESTSELLER HOME MOTIVER OM OS KONTAKT T-SHIRT MOTIVER Bestseller Dyr & Natur Helligdage & Anledninger Hobbyer og interesser Humor Identitet Karriere & Arbejde Krop & Sundhed Kæledyr Kærlighed og seksualitet Mad & Drikke Medier & Popkultur Militær Musik & Fest Nye Design Politik Religion & Tro Sport og Fritid Steder Her på denne side kan du lave din helt egen t-shirt, du kan selv vælge farve motiv osv. SUPPORT Har du brug for svar ang. forsendelse, sikkerhed, kontakt, eller noget helt andet, så klik her, og vi vil gøre alt for at hjælpe dig på vej.? DESIGN DIN EGEN T-SHIRT HOME MOTIVER DESIGN SELV OM OS KONTAKT HOME MOTIVER DESIGN SELV OM OS KONTAKT SUPPORT DESIGN SELV Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. OM OS Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. SUPPORT Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. KONTAKT Navn: Har du brug for svar ang. forsendelse, sikkerhed, kontakt,? eller noget helt andet, så klik her, og vi vil gøre alt for at hjælpe dig på vej. Sjovetryk.dk Copyright 2012 Tlf: Ring mig op Send mig en mail Spørgsmål: Sjovetryk.dk Copyright 2012 Før jeg går igang med at kode, laver jeg nogle grundige skitser over hvordan, jeg vil have sitet skal se ud, dem har jeg her lavet i illustrator. Da de er så nøjagtige, kan jeg slice fra dem og gemme det (Save for web and device) Sådan at mange af tingene bliver lagt ind som billeder, dog ikke teksten, da den så ikke er søgbar og det går ikke.

4 Jeg bruger Slice Tool til at slice alle de dele, jeg kan bruge på web siden, når jeg har gjort det går jeg hen i Filer, vælger Save for web and devices, så åbner et vindue, hvor jeg skal vælge hvilken slice jeg vil gemme og i hvilket format, her har jeg valgt at gemme det i JPEG High, da det er det format der tager sig bedst u i forhold til dette billede, og så er det stadig forholdsvis kort tid om at åbne det.

5 Her viser jeg lidt af koderne fra siden, man ser min menu, med aktive links hen til mine undersider. Under menuen er der min kontaktformular, som er sat meget enkelt og traditionelt op. Her viser jeg min CSS over kontaktformularen, her kan jeg gå ind og lave den styling jeg ønsker. Jeg har lært at benytte mig meget af kommentarer, de er rigtig gode at bruge, da det bliver meget nemmere at se hvor man skal rette det ene og hvor man skal rette det andet, og så er det også en god hjælp til at, huske hvad man har lavet.

6 Jeg benytter mig også af meta tags, som set ovenfor, meta tags er guld værd i forhold til søgeoptimering, det er tit dem der gør at, nogle overhovedet finder din side interresant ude på google. Man kan se meta tags som en slags appetizer. For at lave en god søgeoptimering benytter jeg mig af nogle forskellige muligheder som fx. at teksten på siden skal være levende, med det mener jeg at, det helst ikke bare må være et billede, det skal gerne være tekst skrevet i koden, så jeg benytter <p> <h1> og <h2>, det gør at man kan finde siden på google. Flowchart som viser sidens opbyning Hjem Om os Motiver Kontakt

7 Jeg valgte at logoet skulle placeres i toppen ude til venstre, med menuen i forlængelse af. Logoet kommer rigitg godt til sin ret der, det er synligt og nemt at afkode hvilken side man er på. Menuen er meget simpel, 4 menupunkter som leder dig videre ind til den valgte side, jeg har ikke valgt at der skal være nogen undermenu, da der ikke er behov for det, med den mængde informationer. Under menuen er der et bander i tegneserie stil, og under det en lille»velkomst hilsen«. Under billedet er der 3 billeder som er link der føre dig videre ind under nogle af menupunkterne. Første side som er»om os«indeholder en kort beskrivelse, om hvem firmaet er og hvad de laver, så er der en lille illustration af en skilpadde.

8 Denne side»motiver«har en ekstra menu ude i venstre side, hvor man kan få sig et overblik over de forskellige kategorier af tryk man kan få lavet, sådan at det er nemt at komme frem til præcis det man søger. Når man kommer ind på siden»motiver«, bliver man først og fremmest mødt af en masse billeder som er tidens Bestsellere. På denne side»kontakt«har jeg valgt at lave en kontaktformular, sådan at man nemt og hurtigt kan stille sit spørgsmål, så vil man modtage en mail med svar, eller få en opringning alt efter hvad der er nødvendigt. Til siden har jeg valgt at tegne en gammeldags telefon, og stadig holde den meget farverig sådan at, det passer til retsen af sitet.