GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

Transkript

1 GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

2 DOKUMENTATION OPGAVEBESKRIVELSE Opskriftsbogen Chocoaddict skulle have et website, hvor alle opskrifter samt skabelon til print selv opskriften er tilgængelig. Der skal laves index side, samt to underliggende sider. Disse skal bestå af en side som viser forskellige opskrifter og en side med en opskrift, hvor print selv opskriften ligger. Der skal desuden være et link til print selv opskriften, hvor kunden selv kan udfylde skabelonen. Denne skal ligge et sted som ses og er nem for kunden at finde. LAYOUT Layoutet er enkelt og lyst, da kunden ønskede at billederne skulle være i fokus. Stilen er meget moderne, og flere af billederne har et grafisk element inde over ved mouseover. Sitet er opbygget i tre spalter, således at de gennemgående linjer forbliver. Index siden er opbygget således at det er nemt at tilføje nye blog indlæg, og kan placeres i vilkårlig rækkefølge. Kategori siden kager er opbygget således at sitet bliver længere jo flere billeder der tilføjes. USABILITY Sitet er overskueligt og nemt at navigere rundt på. Menuen er lavet med dropdown, så det altid er nemt at finde den rette kategori lige meget hvor på sitet du befinder dig. Der er desuden lavet links mellem blog indlæg på forsiden til opskriften. BROWSERKOMPATIBILITET Sitet er testet i Chrome og Safari, og her fungerer alt som forventet. PROCESREDEGØRELSE Møde med kunden Inspirationssøgning og ideudvikling Skitser Layout i Photoshop som sendes til kunden for godkendelse Flowchart, skelet og storyboard udarbejdes så det er hurtigt og nemt at gå til programmeringen. Programmering af sitet Søgeoptimering ved brug af metatags Browserkompatibilitet testes Demo sendt til kunden Enkelte rettelser af tekster og koder Sitet godkendes og uploades KVALITETSVURDERING Jeg er blevet godt tilfreds med det færdige resultat, da sitet er let og overskueligt at navigere rundt på. Opskrifterne er let tilgængelige, og print-selv funktionen virker som forventet. Senere skal sitet laves responsivt, således at det virker optimalt på tablets og smartphones.

3 MOODBOARD IDEUDVIKLING Disse tre skitser er blevet brugt som udga ngspunkt for sitet

4 FLOWCHART LAYOUT I PHOTOSHOP opskrift.html FORSIDE, KAGER OG MIN BEDSTE BROWNIE Layoutet er enkelt og lyst, da kunden ønskede at billederne skulle være i fokus. Stilen er meget moderne, og flere af billederne har et grafisk element inde over ved mouseover. kategorier.html chokoladen.html mitkoekken.html Sitet er opbygget i tre spalter, således at de gennemgående linjer forbliver. Index siden er opbygget således at det er nemt at tilføje nye blog indlæg, og kan placeres i vilkårlig rækkefølge. Kategorisiden kager er opbygget således at sitet bliver længere jo flere billeder der tilføjes. Her ses kategorisiden "kager" samt en opskrift som bliver vist her som "Min bedste brownie" kager.html brownie.html cookies.html broed.html andet.html Index siden med blog opslag, samt informationer som bla om mig, nyheder og instagram.

5 SKELET & STORYBOARD - FORSIDE SKELET & STORYBOARD - KAGE #header: auto x 1000px #banner: 150 x 1000px - img: frontpage_banner.png #header: auto x 1000px #banner: 150 x 1000px - img: frontpage_banner.png #Nav #Nav #content: auto x 1000px #boksleft: auto x 525px #boks1: auto x 475px #boksright: auto x 250px #boks2: auto x 200px #content: auto x 1000px img: kage_chokoladekube.png img:kage_chokoladekube_over_png img: kage_chokotærte.png img: kage_chokotærte_over.png img: kage_saltlakrids.png img: kage_saltlakrids_over.png img: frontpage_brownie.png img: frontpage_moedmig.png img: kage_hindbærmarengs.png img: kage_hindbærmarengs_over.png img: kage_brownie.png img: kage_brownie_over.png img: kage_smore.png img: kage_smore_over.png #boks1: auto x 475px #boks2: auto x 200px #boks3: auto x 800px #boks3b: 250 x 250px #boks3c: 250 x 250px img: frontpage_mitkoekken.png Billeder som skifter ved mouseover.

6 HTML & CSS HTML & CSS METATAGS, MENU & MOUSEOVER På sitet har jeg lavet description og metatags, for at øge søgeoptimeringen. Derudover har jeg lavet alternative tekster til billeder, samt benyttet mig af h1, h2, h3 og p. På denne side ses min html for metatags, menuen samt billeder med mouseover. På modsatte side vises min css. Billeder som skifter ved mouseover - samt "alt" tekst.

7 H2 PORTFOLIO - GRAFISK WORKFLOW CAMILLA GREGERSEN