1. Hovedforløb. Mediegrafiker

Transkript

1 Af Ditte Vium Overgaard Grafik og billedbehandling 1. Hovedforløb Mediegrafiker OPGAVEBESKRIVELSE Der er til alle de fire kernefagligheder taget udgangspunkt, i mit eget lille projekt, med design af plakater med dyremotiver, med muligvis henblik på salg. Til de fire kernefagligheder er der udarbejdet følgelse opgaver: - GRAFIK OG BILLEDBEHANDLING: billedmanipulation - GRAFISK DESIGN: logo - TYPOGRAFI OG OMBRYDNING: designmanual - PRODUKTION OG WORKFLOW: hjemmeside Ditte Vium Grafisk Design

2 Ditte Vium Overgaard Mediegrafiker - HerningsHolm Erhvervsskole 1. Hovedforløb 2015 Kernefaglighedsbeskrivelse Produktion Og Grafisk Workflow

3 Opgavebeskrivelse OPGAVE Dette er en fiktiv opgave, og gik ud på at fremstille en fiktiv hjemmeside med webshop, til salg af egen plakatdesigns. OPGAVELØSNING Der har til udarbejdelse af opgaven ikke været kundekontakt eller samarbejde med andre, da det var en fiktiv opgave efter eget valg. Jeg har i udarbejdenlsen af opgaven, lagt stor vægt på at det skulle laves så enkelt og stilrent som muligt, så det er plakaterne der er i fokus og ikke selve siden. Endnu en vigtig faktor for designet, er at det skal holdes i et neutralt design, så der senere hen kan være mulighed for at udvide webshoppen, med andre produkter, og den skal derfor kunne matche flere forskellige stilarter. PROGRAMVALG Der er til opgaven anvendt DreamWeaver TEKNISK INFO Kode: HTML, CSS, JavaScript, PHP Format: 920px Test Browser: Chrome

4 Ideudvikling C 3 M2 Y 3 K 0 C 18 M 13 Y 14 K 4

5 Workflow OPSTART Der har til udarbejdelsen af opgaven ikke været nogen kundekontakt, men opgaven er udarbejdet ud af de retningslinjer jeg har sat mig for hjemmesidens layout UDARBEJDELSE af opgavem FÆRDIGGØRELSE af at alt på siden virker, samt endnu engang tjekke at alt virker inden det gives videre til kunden MINDMAPPING Idegenerering til farver, form og layout ILLUSTRATIONER Udarbejdelse af illustrationer der skal bruges MØDE MED KUNDEN Her skulle opgaven gives til kunden. Dette har dog ikke fundet sted, da dette var en fiktiv opgave LAYOUT & WIREFRAME Udarbejdelse af skitser FEJLFINDING Gennemgang af alt koden ARKIVERING Der faktureres og gemmes, til eventuel senere brug

6 Layout - Overskueligt og minimalistisk design - Let at navigere rundt på - Lys baggrund ved tekstfeltet - Layout: 920px. LOGO.top { height: 200px; width: 920px; background-image:url(grafik/dv-logo.png); background-repeat: no-repeat; }.TXT-BOX TOPMENU.top-menu { height: 30px; width: 550px; float: right; margin-top: 69px; margin-right: 45px; } MAIN BODY #main-body { min-height: inherit; width: 920px; height: auto; margin-top:230px; margin-bottom:0px; margin-left:auto; margin-right:auto; } FOOTER #bottom { width: 100%; height: 170px; background-color: #D8D8D8; float: auto; padding-top: 50px; margin-top: 130px; }

7 Layout FIXED POSITION Der er lavet fixed position på topmenuen, så den hele tiden er placeret i toppen, selv om der scrolles ned på siden. Alt indhold bliver scrolles op bag topmenuen.

8 Layout HOVER EFFECT Der er på menupunkterne i Footeren laves en hover effect, så de skifter fra sort til hvid, når musen køres over.

9 Layout HOVER EFFECT Der er på munepunkterne i topmenuen lavet en hovereffect, så de skifter fra sort til hvid når musen køres over.

10 Layout HOVER EFFECT Der er på prisguiden tilføjet en hover effect, så størrelsen på de forskellige plakater vises, når musen køres over.

11 Layout BESTILLING - PHP Der er på bestillingssiden, anvendt PHP, for at få bestillingen sendt som en rigtig ordre. Da hjemmesiden ikke er online, er der anvendt MAMP, som ekstern server til at teste om bestillingsfornularen virker.

12 Layout SLIDER Der er på forsiden indsat en billedslider. Til denne er der anvendt JavaScript.

13 Layout LINK TIL ANDRE HJEMMESIDER Der er i Footeren indsat link til FaceBook og Instagram. Ved klik på et af disse links åbnes en ny fane med profilen for plakaterne på FaceBook og Instagram.

14 Layout FORSIDE PRODUKTER PRODUKT UNDERSIDE HANDELSBETINGELSER / FRAGT OG LEVERING BESTILLING KONATKT

15 Opbygning Siden er bygget op med en index side (forside), som har fem underliggende sider: produkter, bestilling, kontakt, handelsbetingelser, graft og levering. På produktsiden er der underliggende sider til hver af plakaterne

16 Opgavebeskrivelse PROCESBESKRIVELSE Jeg har til udarbejdelse af opgaven startet med at sætte mig nogle retningslinjer for hvordan opgaven skulle bygges op. i forhold til layout, farver og form. Jeg har tegnet skitser af siden, får at have nogle konkrete placeringer og opbygning at gå ud fra. Dette har gjort hele opgaven lettere at gå til, da jeg fra opgavens start vidste hvordan det færdige resultat skulle ende ud. Det har været vigtigt at lave hjemmesiden så minimalistisk og brugervenlig som muligt. Derfor er der lagt stor vægt på placering af de forskellige elementer, så der ikke er tvivl om hvor man skal klikke, for at navigere rundt på de forskellige sider. KVALITETSVUDERING Jeg synes opgaven er endt ud med det resultat jeg havde tænkt mig fra start. Det vigtigste i opgaven var at siden blev enkel og overskuelig at navigere rundt på. Designet er lavet i 920px, for at få et smalt design, så det passer til det minimalistiske udtryk jeg gerne ville have frem på siden. Selv om siden er meget enkel, og med et meget fladt design, synes jeg alligevel det er lykkedes at få nogle gode detaljer med i designet. bl.a. ved brug at hover-effect på menupunkter, og priser/størrelser. Samt billedslideren på forsiden. Det har været en stor udfordring at få lavet mail- og bestillingsformularen, da dette er lavet i PHP. Men det har været en spændende og lærerig opgave, og jeg synes det er endt ud med et nogenlunde resultat.