9
Forståelse for grafisk produktion og workflow Opgavebeskrivelse: Jeg vil gerne lave en hjemmeside som promoverer mig selv i forhold til lærere/censor, kommende ar- bejdsgivere og evt. kunder. Siden skal indeholde en præsentation af mig, mine grafiske produkter samt evt. et billedgalleri med billeder jeg selv har taget.. Siden skal indeholde en hovedmenu med over- ordnede ”emner” samt en række undermenuer som uddyber de enkelte overskrifter. De grafiske produkter skal ligge som pdf-filer og der skal være projektbeskrivelser/-vurderinger af hvert projekt. Ydermere vil jeg udvikle et logotype til mig selv. Programvalg: Dreamweaver - Brugt til opsætning af selve hjemmesiden Photoshop - Brugt til klargøring af header samt til layout-udkast. Layout: Format 704 x 512 Jeg har brugt samme template til alle siderne Links har en effekt ved aktivering (a:hover) Komposition: Jeg hat forsøgt at skabe en enkel og stilren hjemme- side, med de vigtigste informationer for kommende arbejdsgivere og evt. kunder. Usability: Hjemmesiden er nem og overskuelig at gå til, og de to menuer (topmenu og venstremenu). Hvis man ønsker yderligere information er der mulighed for at kontakte mig via mail. Arbejdsproces: Jeg startede med at søge en masse inspiration i andre grafiske hjemmesider og mediegrafiker port- folier. Derefter satte jeg mig ned og lavede nogle forskellige skitser og fik efterhånden kogt idéerne ned til en enkelt, stilren og overskuelig hjemme- side. Jeg ønskede at bryde det lidt farveløse udtrky med en header med noget farve på, og udviklede derfra idéen med de farvede firkanter. Se flowchart, skelet og storyboard længere nede Browserkompatibilitet: Hjemmesiden er testet af i Internet Explorer, Safari samt Firefox. Kvalitetsvurdering: Jeg synes jeg har fået lavet en fin og tilfredsstillen- de hjemmeside med de nødvændige informationer og relevant indhold. Billedegalleriet er endnu ikke kommet op og køre, da det viste sig at være mere omfattende end ventet at opnå et tilfredsstillende resultat.

Portfolio - Grafisk workflow

Embed Size (px)

DESCRIPTION

ww.sunestenild.dk

Citation preview

Page 1: Portfolio - Grafisk workflow

Forståelse for grafisk produktion og workflow

Opgavebeskrivelse:Jeg vil gerne lave en hjemmeside som promoverer mig selv i forhold til lærere/censor, kommende ar-bejdsgivere og evt. kunder. Siden skal indeholde en præsentation af mig, mine grafiske produkter samt evt. et billedgalleri med billeder jeg selv har taget..

Siden skal indeholde en hovedmenu med over-ordnede ”emner” samt en række undermenuer som uddyber de enkelte overskrifter.

De grafiske produkter skal ligge som pdf-filer og der skal være projektbeskrivelser/-vurderinger af hvert projekt.

Ydermere vil jeg udvikle et logotype til mig selv.

Programvalg:Dreamweaver - Brugt til opsætning af selve hjemmesiden

Photoshop - Brugt til klargøring af header samt til layout-udkast.

Layout:• Format 704 x 512

• Jeg har brugt samme template til alle siderne

• Links har en effekt ved aktivering (a:hover)

Komposition:Jeg hat forsøgt at skabe en enkel og stilren hjemme-side, med de vigtigste informationer for kommende arbejdsgivere og evt. kunder.

Usability:Hjemmesiden er nem og overskuelig at gå til, og de to menuer (topmenu og venstremenu). Hvis man ønsker yderligere information er der mulighed for at kontakte mig via mail.

Arbejdsproces:Jeg startede med at søge en masse inspiration i andre grafiske hjemmesider og mediegrafiker port-folier. Derefter satte jeg mig ned og lavede nogle forskellige skitser og fik efterhånden kogt idéerne ned til en enkelt, stilren og overskuelig hjemme-side. Jeg ønskede at bryde det lidt farveløse udtrky med en header med noget farve på, og udviklede derfra idéen med de farvede firkanter.

Se flowchart, skelet og storyboard længere nede

Browserkompatibilitet:Hjemmesiden er testet af i Internet Explorer, Safari samt Firefox.

Kvalitetsvurdering:Jeg synes jeg har fået lavet en fin og tilfredsstillen-de hjemmeside med de nødvændige informationer og relevant indhold. Billedegalleriet er endnu ikke kommet op og køre, da det viste sig at være mere omfattende end ventet at opnå et tilfredsstillende resultat.

Page 2: Portfolio - Grafisk workflow

Inde

x

Gal

leri

Om

mig

CV

Mit

liv

Kom

pete

ncer

De

4ke

rnek

ompe

tenc

erKo

ntak

t

ww

wTy

pogr

a� o

gom

bryd

ning

Gra

�k o

g bi

llede

Gra

�sk

desi

gn

Gra

�sk

wor

k�ow

pdf-�

l

pdf-�

l

pdf-�

l

pdf-�

l

E-m

ail

Page 3: Portfolio - Grafisk workflow

704x14

0

704x30

704x20

200x23

8

36

4419

0x23

870

18

115

85x110

Page 4: Portfolio - Grafisk workflow

704x14

0

704x30

704x20

36

215x23

8

299x23

872

65x65

13

13

118

Page 5: Portfolio - Grafisk workflow

Navigation/knapper Tekstindhold

Faste gra�ske elementer Gra�k - mappeindex

Animationer

Andet

1

7

1. Header linker til index.html2. Linker til index.html3. Linker til om_mig.html4. Linker til kernekompetencer.html5. Linker til galleri.html6. Linker til kontakt.html7. Linker til mail-program

Body: Margin 0 aller steder. Background: #CCC

Wrapper: 704x464 px. Topmargin: 50px. Right/left: auto

Menulinje: Verdana 13 px. farve: #FFF (ved hover og aktuel side: #babcbd)

Footer: Verdana 10 px. farve: #FFF

4 5 62 3

8

Storyboard - Template

Page 6: Portfolio - Grafisk workflow

Navigation/knapper Tekstindhold

Faste gra�ske elementer Gra�k - mappeindex

Animationer

Andet

1

Body: Margin 0 aller steder. Background: #CCC

Wrapper: 704x464 px. Topmargin: 50px. Right/left: auto

Menulinje: Verdana 13 px. farve: #FFF (ved hover og aktuel side: #babcbd)

Brødtekst p: Verdana 12/15 px.farve: #FFF

Rubrik h1: Verdana 30 pxfarve: #FFF

Mellemrubrik h2: Verdana bold 12/15 pxfarve: #FFF

2

3

1. indhold.txt

2. billede.jpg3. billede.jpg

Page 7: Portfolio - Grafisk workflow

Navigation/knapper Tekstindhold

Faste gra�ske elementer Gra�k - mappeindex

Animationer

Andet

1

1. Linker til mit_liv.html2. Linker til kvaliteter.html3. Linker til cv.html

Body: Margin 0 aller steder. Background: #CCC

Wrapper: 704x464 px. Topmargin: 50px. Right/left: auto

Menulinje: Verdana 13 px. farve: #FFF (ved hover og aktuel side: #babcbd)

Brødtekst p: Verdana 12/15 px.farve: #FFF

Rubrik h1: Verdana 30 pxfarve: #FFF

Mellemrubrik h2: Verdana bold 12/15 pxfarve: #FFF

45

6

2

3

4. indhold.txt

5. billede.jpg6. billede.jpg

Page 8: Portfolio - Grafisk workflow

Navigation/knapper Tekstindhold

Faste gra�ske elementer Gra�k - mappeindex

Animationer

Andet

1

7

1. Header linker til typogra�.html2. Linker til gra�k.html3. Linker til gd.html4. Linker til gw.html

Body: Margin 0 aller steder. Background: #CCC

Wrapper: 704x464 px. Topmargin: 50px. Right/left: auto

Menulinje: Verdana 13 px. farve: #FFF (ved hover og aktuel side: #babcbd)

Brødtekst p: Verdana 12/15 px.farve: #FFF

Rubrik h1: Verdana 30 pxfarve: #FFF

Mellemrubrik h2: Verdana bold 12/15 pxfarve: #FFF

4

5 6

2

3

5. indhold.txt

6. billede.jpg7. billede.jpg

Page 9: Portfolio - Grafisk workflow

Navigation/knapper Tekstindhold

Faste gra�ske elementer Gra�k - mappeindex

Animationer

Andet

1

Body: Margin 0 aller steder. Background: #CCC

Wrapper: 704x464 px. Topmargin: 50px. Right/left: auto

Menulinje: Verdana 13 px. farve: #FFF (ved hover og aktuel side: #babcbd)

Brødtekst p: Verdana 12/15 px.farve: #FFF

Rubrik h1: Verdana 30 pxfarve: #FFF

Mellemrubrik h2: Verdana bold 12/15 pxfarve: #FFF

2

3

1. indhold.txt

2. billede.jpg3. billede.jpg