Issuu on Google+

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


Skeletter


Forside W: 950px H: 550px

H: 25px Logo W: 205px H: 90px

W: 25px

Menulinje

H: 60px

W: 720px

H: 40px

H: 70px

W: 25px

H: 70px

Forside billede W: 430px H: 330px

Tekst: W: 380px H: 305px

W: 80px

animation

W: 415px

H: 1px

H: 30px

H: 14px Kontaktinfo: W: 390px

W: 25px W: 25px

H: 15px

Galleri W: 950px H: 550px

H: 25px Logo W: 205px H: 90px

W: 25px

H: 60px

Menulinje

W: 720px

H: 40px

H: 70px

W: 117px H: 150px

W: 25px

H: 70px

Tekst: W: 390px (H: 305px)

H: 30px W: 39px

W: 80px H: 30px

W: 430px H: 330px

W: 300px H: 230px

W: 25px

animation

W: 415px

H: 1px

H: 14px Kontaktinfo: W: 370px

H: 15px

H: 30px

W: 25px W: 25px


Lov om tattoovering W: 950px H: 550px

H: 25px

W: 25px

Logo W: 205px H: 90px

Menulinje

H: 60px

W: 720px

H: 40px

H: 70px

W: 25px

Billede W: 430px H: 330px

H: 70px

Tekst: W: 380px H: 305px

W: 80px

animation

W: 415px

H: 1px

H: 30px

H: 14px Kontaktinfo: W: 390px

W: 25px W: 25px

H: 15px

Tattooveringens historie W: 950px H: 550px

H: 25px

W: 25px

Logo W: 205px H: 90px

Menulinje

H: 60px

W: 720px

H: 40px

H: 70px

W: 25px

Billede W: 430px H: 330px

H: 70px

Tekst: W: 380px H: 305px

W: 80px

animation

W: 415px

H: 1px

H: 14px Kontaktinfo: W: 390px

H: 15px

H: 30px

W: 25px W: 25px


Spørgsmål og svar W: 950px H: 550px

H: 25px

W: 25px

Logo W: 205px H: 90px

Menulinje

H: 60px

W: 720px

H: 40px

H: 70px

H: 70px

W: 430px H: 330px

W: 25px

W: 380px H: 305px

W: 80px W: 200px H: 330px

W: 206px H: 300px

animation

W: 415px

H: 1px

H: 30px

H: 14px Kontaktinfo: W: 390px

W: 25px W: 25px

H: 15px

Kontakt os W: 950px H: 550px

H: 25px Logo W: 205px H: 90px

W: 25px

H: 60px

Menulinje

W: 720px

H: 40px

H: 70px

W: 39px

W: 117px H: 150px

W: 25px

H: 70px

W: 39px

Tekst: W: 390px (H: 305px)

W: 80px H: 30px

W: 430px H: 330px

animation

W: 415px

H: 1px

H: 14px Kontaktinfo: W: 370px

H: 15px

H: 30px

W: 25px W: 25px


Storyboard


2

3

4

1 8

9 10

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. emailen linker til youngtattoo@.com 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, padding8. 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

* boks 7 og 8 er uden stroke/border

Tekstindhold 8. manus.docx 10. manus.docx

5

6


2

4

3

1 8 7

Se skabelon for resten af informationerne

Forside

Grafik - Mappe Index 7. forside_billede.gif 430x330px

Tekstindhold 8. manus.docx

5

6


8

1

4

2

5

3

9

6

10

Se skabelon for resten af informationerne

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

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 10. www.chinese-world.com linker til 1-6. alle billeder popper op i nyt vindue i original størrels hvis tryk på dem www.chinese-world.com/link1.html * 9 har ikke nogen stroke/border

Galleri Tekstindhold 8. manus.docx 10. www.chinese-world.com


8 7 7

Se skabelon for resten af informationerne

Grafik - Mappe Index 7. lov.jpg 430x330px

Lov om tatovering Tekstindhold 8. manus.docx


7

Se skabelon for resten af informationerne

Grafik - Mappe Index 7. historie-foto.jpg 430x330px

8

Tatoveringens historie Tekstindhold 8. manus.docx


8

4

5

6

7

Se skabelon for resten af informationerne

Grafik - Mappe Index 4. Cathrine-Luxhøj.jpg 117x150px 5. Andre-Johansen.jpg 117x150px 6. jan-Rasmussen.jpg 117x150px 7. Tine-Soerensen.jpg 117x150px

8. email linker til email ved tryk på dem

Kontakt Tekstindhold 8. manus.docx 6. Georgia, regulær, 12px, line-height 22, tekstfarve #a26fab


Logofremstilling


young Tattoo

young Tattoo

young Tattoo

young Tattoo

young Tattoo

young Tattoo


/websamlet