Laura Svendsen Kernekompetencer GRAFISK WORKFLOW
website til drømmemadpakken Hvad? Opgaven er anden del af en opgave i to dele, et trykt produkt og et digitalt produkt. Vi fik udleveret tekst og billeder til opskrifter og så stod det os egenligt frit for hvad vi ville lave. Jeg har derfor lavet et website med få sider for overskuelighed. Målgruppen til denne website er forældre, der ønsker sunde og gode idéer til deres børns madpakke. Der var hverken et minimum eller maximum på hvor stor produktet skulle være, så længe det ville være et overkommeligt arbejde. Derfor besluttede jeg mig for et website med et index og tre underliggende sider. Komposition og layout Allerførst startede jeg ud med at sætte en tidsplan over mit projekt. Derefter lavede jeg en brainstorm, for at danne mig et overblik over hvad jeg skulle have med på sitet. Efterfølgende kom idéudviklingen i forbindelse med skitser og et layout med farvevalg, form, fonte, billedstørrelse og indhold. Jeg lavede layout for alle siderne, hvilket resulterede i tre sider; generel, hvor elementer til alle sider skulle fremgå. Siden index, som er forsiden. Siden page1, som er første side med opskrifter og til sidst siden page2, som indeholder stort set det samme som page1, men med en knap mere til navigation. Siden page2 bliver brugt to gange, så ialt fire sider på websitet. Så lavede jeg et flowchart over sitet og derefter storyboard og skelet med de relevante oplysninger for koden af sitet. Programvalg Jeg har benyttet mig af Photoshop til layoutet, hvor jeg lavede hver side på websitet på hver sit lag. Her benyttede jeg efterfølgende slice tool til at skære billeder ud til headeren og til de to bokse på index. Ydermere brugte jeg layoutet i Photoshop til at regne størrelsen på de forskellige id-bokse, der skulle udgøre skelettet. Skelettet er lavet i Illustrator. Dette program brugte jeg også til at lave illlustration og logo. På skelettet har jeg angivet alle mål i pixels, for at en hvilken somhelst kan kode websitet. For at dette kan lades sig at gøre til fyldest har jeg ydermere lavet et storyboard, der udspecificerer præcis hvilke installationer de forskellige id-bokse har. Dette kunne være margin, padding, farve eller compound for p, h eller a. Til sidst kunne jeg så sætte websitet op i dreamweaver uden problemer ved hjælp af mit skelet. Efterfølgende kunne jeg uploade websitet. Fontvalg Jeg valgte at benytte mig af Arial som font til p og h. P-tag er størrelse 11/13, for at være overskueligt og letlæseligt. Logoet har jeg lavet med Frutiger. Browserkompatibilitet Sitet kan ses i Internet Explorer, Firefox, Google Chrome og Safari, hvilket gør det meget kompatibelt. Kvalitetsvurdering Jeg synes at processen ved at arbejde med grafisk workflow har gjort det meget overskueligt, da jeg har haft et overblik hele vejen igennem. Jeg brugte meget af min tid på layout, hvilket jeg er ret glad for, da dette gjorde det fortsatte arbejde meget nemmere. Skelettet var hurtigt at lave, da layoutet var rigtig lavet og derfor var det også ligetil, da jeg skulle sætte websitet op i Dreamweaver. Website www.mediegrafiker-ats. dk/12gf32med8b/madpakken/laura
TIDSPLAN
Brainstorm
Flowchart INDEX Side 1 side 2 side 3
LAYOUT TIL WEBSITE
SKELET lavet i illustrator
* Margin: 0px; Padding: 0px; Storyboard #Wrapper Margin-right: auto Margin-left: auto Background-image: url(images/illu/baggrund. png) #header url(images/illu/header1. png) #content Margin-left: 120px #footer #textbox_index #pic1_index Margin-left: 30px url(images/illu/box1.png) #pic2_index Margin-left: 30px url(images/illu/box2.png) #pics1_page url(../images/reduceret/kok. jpg) (page1.html) url(../images/reduceret/dell. jpg) (page2.html) url(../images/reduceret/rug. jpg) (page3.html) #pics2_page Margin-left: 10px url(../images/reduceret/ pand.jpg) (page1.html) url(../images/reduceret/ madbo.jpg) (page2.html) url(../images/reduceret/ kage.jpg) (page3.html) #pics3_page Margin-left: 10px url(../images/reduceret/fyp. jpg) (page1.html) url(../images/reduceret/ pitta.jpg) page2.html) #text1_page #text2_page #text3_page Margin-top: 5px Margin-left: 10px #footer_left Padding-top: 10px #footer_left a Text-align: left Line-height: 12px Color: #39C Text-decoration: none #footer_left a:hover Color: #F60 #footer_right Padding-top: 10px Text-align: right #footer_right a Text-align: left Line-height: 12px Color: #39C Text-decoration: none #footer_right a:hover Color: #F60 #text1_page h1 Font-size: 20px Font-weight: normal #text1_page h2 #text2_page h2 #text3_page h2 Font-size: 20px Font-weight: normal #text1_page p #text2_page p #text3_page p Line-height: 12px p Line-height: 16px h1 Font-size: 22px Font-style: normal Font-weight: normal Text-transform: none Padding-top: 10px h2 Font-size: 22px Font-style: normal Font-weight: normal Text-transform: none Padding-top: 10px h3 Line-height: 12px Font-weight: bold