Mit grafiske workflow inkluderer:

Transkript

1 GRAFISK WORKFLOW

2 Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være en indexside, minimum 2 underliggende sider og mulighed for udvidelse med minimum 3 yderligere underliggende sider. Sitet skulle desuden fungere i minimum 2 forskellige browsere. Komposition og layout: Flowchart er opbygget, så man kan navigere direkte til en hvilken som helst side, uanset hvilken side man befinder sig på. Skeletter til både indexsiden og de underliggende sider er nøjagtigt opbygget i Illustrator, samtidig med at storyboards for de samme sider er tegnet i Photoshop, for samlet at give et billede af det færdige site. Der er lavet CSS-styles for alt typografi (p, H1, H2 osv.) og alle ID s og classes, så enhver med forstand på kodning kan bygge sitet op fra bunden. Sitet er opbygget i formatet 960 x 550 pixels, for at lave maksimal kompatibilitet, da det på den måde også fungerer på mindre pc-skærme (17 ). Sitet er desuden bygget simpelt og minimalistisk op med fokus på overskuelighed og brugervenlighed. Aktualitet/væsentlighed: Sitet er lavet til nemt og hurtigt at kunne læse om forskellige stilperioder uden at blive forstyrret af en masse ligegyldige ting. Mit grafiske workflow inkluderer: Tidsplan Brainstorm Layoutudvikling Flowchart Storyboard Skelet Grafikoptimering af billeder til web CSS-betingelser Mappeorden Link af style sheet HTML-kodning Søgemaskineoptimering Upload Browserkompatibilitet: Sitet fungerer 100% i Safari, Firefox og Google Chrome, hvilket opfylder kravet om kompatibilitet med minimum 2 browsere. Internet Explorer har problemer med at vise de skygger, der er pålagt nogle af mine elementer, men ellers fungerer sitet også her. Kvalitetsvurdering: Jeg synes, sitet er blevet, som jeg havde forestillet mig, og især indexsiden synes jeg, er blevet god. Tanken var, at den skulle virke som en væg på et museum, hvor man så kunne finde yderligere info om en stilperiode, ved at klikke på det tilsvarende billede, og den følelse synes jeg, jeg har opnået. Desuden har brugervenlighed været et stort fokuspunkt, og jeg synes bestemt, sitet er meget overskueligt.

3 Tidsplan Tidsplan er udarbejdet med en kolonne, der viser, hvornår jeg forventer at være færdig, og en kolonne hvor jeg løbende kunne notere, hvornår jeg reelt var færdig. Dette var for hele tiden at kunne holde styr på, hvor langt jeg var i forhold til planen.

4 Brainstorm Brainstorm laves ukritisk, så man senere kan sortere i de forskellige idéer. Alt skal på bordet. Her er vist et udsnit af min brainstorm for både bog og website.

5 Layoutudvikling Layoutudvikling er lavet ved først at tegne en mase løse forslag i Photoshop (venstre) for til sidst at lave et færdigt layout (højre) baseret på de gode elementer, man udvælger fra de forskellige skitser.

6 Flowchart Flowchartet viser, hvordan der kan navigeres imellem de forskellige sider. Mit flowchart viser, at alle sider kan tilgås fra alle sider, da de alle er forbundede. INDEX Art Deco Minimalisme Pop Art

7 Storyboard Storyboards er tegnet i Photoshop, og giver et visuelt indtryk af det færdige site. Sammen med skelettet giver det en idé om, hvordan det endelige site kommer til at se ud.

8 Skelet Skelettet er lavet for at enhver kan se den præcise opbygning af sitet, og hvordan de forskellige ID s ligger i forhold til hinanden. Det er lavet i Illustrator med nøjagtige mål i pixels. 55 px 25 px 25 px 45 px 180 px 150 px 110 px 60 px 950 px Title 40px 15 px wrapper-undersider 20 px 220 px 55 px Menu px 390 px imgtopleft imgtopmiddle imgtopright 20 px Menu 2 95 px 40 px 130 px 80 px WRAPPER 130 px 40 px 550 px Menu 3 Content imglarge 550 px 440 px menuwrapper imgbottomleft imgbottommiddle imgbottomright 960 px 160 px 960 px

9 Grafikoptimering af billeder til web I Photoshop gemmes alle billeder i et format, der fylder så lidt som muligt, for at mindske indlæsningstiden af sitet. Billeder uden gennemsigtighed kan f.eks. gemmes i JPEG. Til billeder med gennemsigtighed gemmes filen i pngformat, da dette bevarer gennemsigtigheden.

10 CSS-betingelser CSS-betingelserne defineres, så alt indhold på siden opfører sig som det skal, når det indtastes i HTML-koden. Body margin: 0px padding: 0px font-family: Helvetica, Arial, sans-serif; p, a, A:hover, h1, h2, h3,.. P: font-size: 11px; line-height: 14px; color:#000; overflow:auto; H1: font-size: 40px; font-weight: bold; text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; H2: font-size: 20px; font-weight: bold; text-decoration: none; text-align: center; H3: font-size: 14px; line-height: 16px; font-weight: bold; color: #000; a:link, a:visited, a:hover, a:active: text-decoration: none; color:#000; a.swap: background-image:url(images/art%20 Deco%20lille.jpg) a.swap:hover: background-image:url(images/art%20 Deco%20hover%20lille.jpg) Div: Wrapper: margin-top: 11px; margin-right: auto; margin-left: auto; background-image: url(images/baggrund. jpg); Wrapper-undersider: margin-top: 11px; margin-right: auto; margin-left: auto; background-image:url(images/baggrund%20 lav%20opacity.jpg) imgtopleft: margin-top: 25px; margin-left: 55px; imgtopmiddle: margin-top: 45px; margin-left: 150px; float:left; imgtopright: margin-top: 25px; margin-left: 110px; imgbottomleft: margin-top: 40px; margin-left: 95px; Imgbottommiddle: margin-top: 60px; margin-left: 130px; imgbottomright: margin-top: 40px; margin-left: 130px; title: margin-top: 10px; margin-left: 10px; padding-top: 0px; menuwrapper: margin-top:20px; menu1: background-color:#fff; menu2 og menu3: background-color:#fff; class:.menuclass {margin-top: 20px;} content: margin-top: 20px; margin-left: 20px; overflow: auto; margin-left:15px; padding-left:15px; padding-right: 20px; background-color: #FFF; Imglarge: margin-top:20px; margin-left:20px; margin-right:20px; float:left;

11 Mappeorden og link af style sheet Der oprettes en særskilt mappe til sitet, med de korrekte undermapper. Kun indexfilen og CSS style sheetet må ligge løst i hovedmappen. Style sheet oprettes og linkes til HTML-sitet.

12 CSS-betingelser CSS-betingelserne skrives ind i det nyoprettede style sheet.

13 HTML-kodning Sitet opbygges i HTML-koden. Det opbygges udefra med wrapper først, så header osv. Der er tilføjet kommentarer for øget overskuelighed.

14 Søgemaskineoptimering Alle billeder gives en title og en alt. Alle sider gives en titel. Der indtastes metatags i indexsidens head.

15 Upload Sitet uploades til serveren og testes i forskellige browsere. Det færdige site kan ses på