Portfolio - Grafisk Workflow

Transkript

1 Portfolio - Grafisk Workflow Opgaven gik ud på at designe et website for en tatovør. Der skulle indgå forskellige elementer på hver enkel side, samt overholdes nogle fastsatte krav. Vi skulle arbejde ud fra et flowchart som vi fik udleveret fra start. Derefter gik opgaven igang, med at lave skelet og storyboard, inden vi kunne gå igang med at sætte selve siden op i DreamWeaver. Layout Jeg har valgt formatet 950 x 550px, da det passer i alle skærmstørrelser. Jeg har holdt samme struktur på alle siderne, hvor billederne er i venstre side og teksten i højre side. Dog er der lige en undtagelse i spoergsmaalogsvar.html, hvor der også er tekst i venstre side. Jeg er gået ud fra kundens ønske om at designet skal henvende sig til unge mennesker. Derfor har jeg forsøgt at bruge nogle stærke farver, men samtid gøre sitet meget enkelt og elegant. Usability Sitet er nemt at gå til for enhver bruger. Den er meget enkel stillet op og flowchartet er meget overskueligt. Der er ingen undermenuer til at forvirre kunden, og man kan komme fra alle sider til alle de andre sider. I bunden er lavet en kontakt linje, så der altid er mulighed, fra alle sider, for at finde oplysningen om tatovøren. Samtidig er der også link til, at man kan sende en mail med det samme. Browserkompatibilitet Hjemmesiden er testet i Mozilla Firefox og Internet Explorer. Den virker fint i begge browser, men i explorer har scroolbaren fået et design, som kun virker i explorer. Kvalitetsvurdering Jeg er meget godt tilfreds med min hjemmeside. Det har været udfordrende at lave et site for en potentiel kunde. Desuden har der været en del udfordringer teknisk, men jeg synes de er blevet løst fornuftigt. Jeg har brugt meget tid på at layoute i Photoshop, hvorefter jeg har oploadet siderne. Det har været godt, at finde ud af hvor vigtig det er at lave sine layout, flowcharts og storyboards inden man går igang. Hvis man har lavet dem rigtig går DreamWeaver afdelingen rigtig let. Alle billeder er hentet fra google.dk og derfor er der copyright på alle billeder. De bliver selvfølgelig fjernet efter endt grundforløbsprøve

2 Skeletter

3 Forside H: 950px H: 550px H: 60px Logo 205px H: 90px Menulinje 720px H: 40px Forside billede 430px H: 330px 80px Tekst: 380px H: 305px H: 14px animation 415px H: 1px Kontaktinfo: 390px H: 15px Galleri H: 950px H: 550px H: 60px Logo 205px H: 90px Menulinje 720px H: 40px 117px H: 150px 39px Tekst: 390px (H: 305px) 430px H: 330px 80px 300px H: 230px H: 14px animation 415px H: 1px Kontaktinfo: 370px H: 15px

4 Lov om tattoovering H: 950px H: 550px H: 60px Logo 205px H: 90px Menulinje 720px H: 40px Billede 430px H: 330px 80px Tekst: 380px H: 305px H: 14px animation 415px H: 1px Kontaktinfo: 390px H: 15px H: Tattooveringens historie 950px H: 550px H: 60px Logo 205px H: 90px Menulinje 720px H: 40px Billede 430px H: 330px 80px Tekst: 380px H: 305px H: 14px animation 415px H: 1px Kontaktinfo: 390px H: 15px

5 Spørgsmål og svar H: 950px H: 550px H: 60px Logo 205px H: 90px Menulinje 720px H: 40px 430px H: 330px 80px 380px H: 305px 200px H: 330px 206px H: 300px H: 14px animation 415px H: 1px Kontaktinfo: 390px H: 15px H: Kontakt os 950px H: 550px H: 60px Logo 205px H: 90px Menulinje 720px H: 40px 39px 117px H: 150px 39px 430px H: 330px 80px Tekst: 390px (H: 305px) H: 14px animation 415px H: 1px Kontaktinfo: 370px H: 15px

6 Storyboard

7 Navigation/knapper 1. Logo linker til forside.html 2. Galleri til Galleri.html 3. Lov om tatovering til Lov om tatovering.html 4. Tatoveringens historie til Tatoveringens historie.html 5. Spørgsmål og svar linker til Spørgsmål og svar.html 6. Kontakt os linker til Kontakt os.html 10. en linker til [email protected] ved tryk Skabelon Animationer 9. animation.gif 415x1px Faste grafiske elementer Body: Baggrundsbillede image/body.png, repeat x Wrapper: baggrundsfarve #000, Margin top 10px, Margin left auto, Margin right auto Menu: Georgia, regulær, 16px, tekstfarve #a26fab, padding-top 10px, padding- 8. Overskrift/Mellemrubrik: Georgia, bold, 12px, tekstfarve #fff, scrollbar-arrow-color: #A26FAB; scrollbar-highlight-color: #A26FAB; scrollbar-track-color: #000000; 8. Brødtekst: Georgia, regulær, 12px, tekstfarve #fff, Line-height 18px, padding top 8 px 10. Georgia, regulær, 10px, tekstfarve #fff Grafik - Mappe Index 1. logo.ai 185x110px 9. animation.gif 415x1px Tekstindhold 8. manus.docx 10. manus.docx * boks 7 og 8 er uden stroke/border

8 Se skabelon for resten af informationerne Forside Grafik - Mappe Index 7. forside_billede.gif 430x330px Tekstindhold 8. manus.docx

9 Se skabelon for resten af informationerne Galleri Grafik - Mappe Index 1. papillon_nuque_prd.jpg 117x150px 2. drama_japan_tattoo.jpg 117x150px 3. anklecross.jpg 117x150px 4. star-tattoo-designs.jpg 117x150px 5. back.jpg 117x150px 6. marilyn.jpg 117x150px Tekstindhold 8. manus.docx Navigation/knapper Swap image til når musen kører over: 1. papillon_nuque_prd_over.jpg 300x230px 2. drama_japan_tattoo_over.jpg 300x230px 3. anklecross_over.jpg 300x230px 4. star-tattoo-designs_over.jpg 300x230px 5. back_over.jpg 300x230px 6. marilyn_over.jpg 300x230px Swap image tilbage til sort når musen er væk 9. Swap image til denne box 330x230px linker til 1-6. alle billeder popper op i nyt vindue i original størrels hvis tryk på dem * 9 har ikke nogen stroke/border

10 7 8 7 Se skabelon for resten af informationerne Lov om tatovering Grafik - Mappe Index 7. lov.jpg 430x330px Tekstindhold 8. manus.docx

11 7 8 Se skabelon for resten af informationerne Tatoveringens historie Grafik - Mappe Index 7. historie-foto.jpg 430x330px Tekstindhold 8. manus.docx

12 Se skabelon for resten af informationerne Kontakt Grafik - Mappe Index 4. Cathrine-Luxhøj.jpg 117x150px 5. Andre-Johansen.jpg 117x150px 6. jan-rasmussen.jpg 117x150px 7. Tine-Soerensen.jpg 117x150px Tekstindhold 8. manus.docx 6. Georgia, regulær, 12px, line-height 22, tekstfarve #a26fab 8. linker til ved tryk på dem

13 Logofremstilling

14 young Tattoo young Tattoo young Tattoo young Tattoo young Tattoo young Tattoo