portfolio GRAFISK WORKFLOW

Transkript

1

2 Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og de varer der sælges i butikken. Sitet skal indeholde indbydende billeder og sparsom tekstmængde. Designkrav En hjemmeside som er nem at navigere igennem Teksten skal være overskuelig og læsevenlig Flotte billeder af høj kvalitet Skal være indbydende Links til Facebook og Fødevarestyrelsen (Smiley rapport) Layout Format 984 x 909 px Alle sider linker til hinanden via menulinjen Links i menulinjen med mouseover effekt (a.hover) med ny farve Baggrundsbillede er faktisk en skanning af papirposen. Det vil skabe genkendelighed med bageriet og kan være en slags rød tråd med andre grafiske elementer Siderne indeholder lightbox effekten Typografi Arial - læsevenlig og overskuelig skrift. Alle har den på deres computer. Kan læses af alle browsere. Komposition Tænkt i kasser og i lige linjer for at skabe ro og overblik. Illustrationer jpeg billeder af høj kvalitet ikoner til eksterne links i png. format logoet er et gif.billede Procesbeskrivelsen Søgning på nettet for inspirations skyld og for at se hvad der ellers findes af lignende hjemmesider (bagerier, konditorer og sandwichbarer) Skitser i hånden og Illustrator Flowchart Fotografering hos bageren med mit eget kamera Canon EOS 1000 D Layout i Photoshop Skelet af index.html og produkter.html Storyboard af index.html og produkter.html Billedbehandling i Photoshop (RGB og 72 ppi) Billeder i jpeg., ikoner i png. og logoet i gif. format Opsætning i Dreamweaver med andvendelse af css og html Lightbox effekten med integreret js.scriptfiler Testes i Mozilla Firefox og Internet Explorer Uploades på kundens domæne Farver Holdt inden for firmaets (og fagets) farver: lyse- og mørkebrun, bordeaux og hvid for at bibeholde samme stil og stemning. Kvalitetsvurdering Jeg er meget tilfreds med min arbejdsproces, da det endelige resultat lever op til mine forventninger såvel som kundens ønsker.

3 Inspiration Jeg har kigget på mange forskellige hjemmesider for at finde inspiration. I mit søgefelt var der hovedsagelig andre bagerier, konditorer og sandwichbarer (f.eks. Andersen Bakery, Anettes Sandwich, Bavinchi og Snejbjerg Bageri). Skitser Her er mine håndtegnede skitser til forskellige layouts. Jeg har selv taget beslutning om hjemmesidens layout.

4 (eksterne links) index.html om os produkter brød kager sandwich fastfood find os Flowchart Hjemmesiden består af en index side og syv underliggende sider. Fra hver sider er der links til to eksterne sider: Facebook og Fødevarestyrelsen Layout Hjemmesidens layout er lavet i Photoshop. facebook smiley rapport

5 56 px x 184 px 145 x106 px 802 x 92 px 802 x 92 px 184px Skelet index.html Skelet til index.html er lavet i Illustrator. Skelet produkter.html Skelet til produkter.htmlm er også lavet i Illustrator. body body wrapper har en autohøjde wrapper har en autohøjde 984 x 28 px 454 x 92 px 205 x134 px 205 x134 px x 188 px 456 x 188 px 456 x 646 px 456 x 646 px 984 x 25 px 182x 184 px 802 x 92 px 145 x106 px 802 x 92 px 984 x 28 px px 290 x 193 px 128 px 73 px 290 x 193 px 128 px 491x 323 px 491x 323 px 73 px 290 x 193 px 128 px 290 x 193 px 491x 323 px 491x 323 px 984 x 25 px 646 px 184px 646 px 28

6 Storyboard index.html Storyboard til index.html er lavet i Illustrator. Storyboard produkter.html Storyboard til produkter.html er også lavet i Illustrator. body body skejbybagerlogo.gif -> index.html 2. pdf_icon.png -> produktliste.pdf 3. smiley_icom.png -> findsmiley.dk 4. facebook_icon.png -> facebook.com 5. åbningstider.textdoc 6. Om os->om_os.html 7. Produkter -> produkter.html Brød -> broed.html 9. Kager -> kager.html 10. Sandwich -> sandwich.html 11. Fastfood -> fastfood.html 12. Find os -> findos.html 13. header_omos.png 14. bagerietudefra_lille.jpeg-> lightbox broedprodukter.jpeg -> broed.html 23. otelokage_produkter.jpeg -> kager.html 24. pizzapepperoni_produkter.jpeg -> fastfood.html 25. sandwich_produkter.jpeg -> sandwich.html 26. brød.textdoc 27. kager.textdoc 28. fastffod.textdoc 29. sandwich.textdoc 15. kassenogdisken_lille -> lightbox 16. juicemaskine_lille-> lightbox 17. maelk_lille -> lightbox 18. smoeroggaer_lille -> lightbox 19. mirindaflasker_lille -> lightbox 20. Om os.textdoc 21. Adressen.textdoc

7 Web & devices Den skrift jeg gerne vil bruge er Pyke Peak Zero. Da jeg var meget usikker om at andre kunne se fonten på deres pc-er, besluttede jeg at de store overskrifter (H1) på enkelte sider skulle laves som grafik og gemmes som png filer. Billedet som link På produkter.html virker de fire store billeder som links til pågældende sider: brød, kager, fastfood og sandwich.

8 Lightbox Jeg integrerede javascriptet lightbox på hjemmesiden ved at henvise til nogle.js-filer, jeg downloadede og ved at tilføje scriptets css i min egen css-fil. I Internet Explorer Jeg tjekkede omgående i browseren om lightbox virkede. Og det virkede uden nogen problemer.

9 Link til Facebook i DW Jeg skulle lave link til Facebook, selv om kunden ikke endnu har oprettet sin profil på facebook, men det ville snart ske. Facebook.com start side Hvis man klikker på facebook ikonet, så kommer man på Facebook startside.

10 Link til Fødevarestyrelsen Da kunden sagde, at det var et krav at have link til Fødevarestyrelsen (Smiley rapport), lavede jeg også det. Fødevarestyrelsens site Hvis man klikker på smiley ikonen, så kommer man på Fødevarestyrelsens hjemmeside.

11 Find os på kortet Hvis man klikker på siden Find os, så åbnes Google kort med de rigtige koordinater i en boks (1). Koden fra Google maps For at få det til at virke, skulle jeg gå til Google maps og finde de rigtige html koder (2) og dernæst sætte det ind i Dreamweaver (3).

12 Sitet i Internet Explorer Sitet blev testet i Internet Explorer og virkede det fint. Sitet i Mozilla Firefox Sitet blev også testet i Mozilla firefox og her virkede det også fint.