Upload
sune-stenild
View
228
Download
4
Embed Size (px)
DESCRIPTION
ww.sunestenild.dk
Citation preview
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.
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
704x14
0
704x30
704x20
200x23
8
36
4419
0x23
870
18
115
85x110
704x14
0
704x30
704x20
36
215x23
8
299x23
872
65x65
13
13
118
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
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
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
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
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