Portfolio - sunestenild.dk Grafisk produktion og workflow Anvendte programmer: Opgavebeskrivelse: Jeg vil gerne lave en hjemmeside som promoverer mig selv i forhold til kommende arbejdsgivere og eventuelle kunder. Siden skal indeholde en præsentation af mig, mine grafiske produkter, mit cv samt evt. et billedgalleri med billeder jeg selv har taget. Siden skal være enkel og overskuelig og navigationen skal foregå på meget få sider, vha. integrerede menuer på hovedsiden. Der skal der udover også være en kontaktformular, så man har mulighed for at kontakte mig, selvom man ikke nødvendigvis har et e-mailprpgram til rådighed. Layout: Format 700 x 700 px Designet er byget op af fliser, som skifter farve efter et fast mønster Ved åbning af menupunkter, er brugt funktionen Behaviours i Dreamweaver for at give en fade -effekt. Komposition: Jeg hat forsøgt at skabe en enkel og stilren hjemmeside, med de vigtigste informationer for kommende arbejdsgivere og evt. kunder. hjemmeside. Derefter klargjorde jeg filer i Photoshop og kodede hjemmesiden i Dreamweaver. Se skelet og storyboard længere nede Browserkompatibilitet: Hjemmesiden er testet af i Internet Explorer, Chrome samt Firefox. Kvalitetsvurdering: Jeg synes jeg har fået lavet en fin og tilfredsstillende 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. Usability: Hjemmesiden er nem og overskuelig at gå til, da alt er samlet på ganske få sider. Der er knapper der guider, så man ikke er i tvivl om hvad man skal gøre. Kontaktformularen gør opmærksom på det, hvis man ikke har angivet en korrekt e-mail Arbejdsproces: Jeg startede med at søge en masse inspiration i andre grafiske hjemmesider og mediegrafiker portfolier. Derefter satte jeg mig ned og lavede nogle forskellige skitser og fik efterhånden kogt idéerne ned til en enkelt, stilren og overskuelig
700 px 14px 156x156 px 14px 6px 700 px 6px Skelet
6 7 8 1 2 3 4 5 1. Åbner div=mig 2. Åbner div=cv 3. Linker til galleri.html 4. Linker til portfolio.html 5. Åbner div=kontakt div erne mig, cv og kontakt skal have en fade-effekt når de åbnes. Disse laves vha. Behaviors i Dreamweaver.. Font-family: Verdana, Geneva, sans-serif Farver: Blå: #5da2db Lilla: #965196 Grøn: #79dd45 Rød: #e82d2f 1. mig.png 2. cv.png 4. portfolio.png 5. kontakt.png 6. sune.png 7. eye_left.png 8. eye_right.png Storyboard - index.html
1 1. Lukker div=mig mig.txt Brødtekst p: Verdana 11/14 px. Rubrik h1: Verdana 35px. Storyboard - Om mig
1 1. Lukker div=cv cv.txt Brødtekst p: Verdana 11/14 px. Rubrik h1: Verdana 35px. Mellemrubrik h2: 12px. Decoration: Underline Margin bund: 12px. Storyboard - CV
1 1. Lukker div=kontakt Brødtekst p: Trebuchet 9 px. Baggrundsfarve: #5da2db Baggrundsfarve - fokus: #965196 Storyboard - Kontakt
2 3 4 4 1 1. Link til index.html 2. Hover til menu 3. Hover til menu 4. Hover til menu 5. Hover til menu 2. design.png 3. typografi.png 4. billede.png 5. workflow.png Storyboard - portfolio.html
1 2 1. Link til typografi_produkt.pdf 2. Link til typograi_beskrivelse.pdf Storyboard - hover
Eksempel på kodning
Eksempel på css