Grafisk workflow. website til duckhead music

Transkript

1 Grafisk workflow website til duckhead music

2 Portfolio h1 Side 18 website til duckhead music Selvom jeg er hos et webbureau, så sidder jeg udelukkende med design, og er derfor ikke kommet til at kode endnu. Så for at kunne vise noget digitalt, som jeg selv har kodet, har jeg valgt at tage en opgave som jeg lavede for en ven i min fritid. Dog fik jeg opgaven solgt til bubblemedia, men det står der mere om under kvalitetsvurdering. Opgaven Min ven, Rasmus, er medejer af et lydstudie. Han var utilfreds med deres hjemmeside, og spurgte om jeg kunne komme med et redesign for dem. Programmer Photoshop Illustrator Dreamweaver Arbejdsprocess Dialog med Rasmus Layoutforslag Jeg havde egentlig ikke sagt ja til opgaven, men kunne alligevel ikke lade være med at gå ind i Ps og skitse lidt. Jeg sendte min skitse til Rasmus, som var meget begejstret, og så aftalte vi at jeg skulle arbejde videre med det. Derfor har jeg ikke så meget idéudvikling med, da layoutet stort set blev godkendt med det samme. Layout i Photoshop Skelet og flowchart i Illustrator Kodning i Dreamweaver Møde med Rasmus omkring overflytning til bubbleweb Tilpasning af layout, og opsætning i bubbleweb Oplæring for Rasmus i bubbleweb Lancering af site Layout Jeg ville lave et site som var meget simpelt, og har bevidst valgt at gør siden ret smal. Rasmus ville gerne have en responsiv side, men dette havde jeg ikke kompetencer til, så jeg lavede en smallere side, så den var lidt mere overskuelig på tablets og mobilskærme. Desuden synes jeg at et smal design gav et mere eksklusiv udtryk, og da der heller ikke var særlig meget indhold til sitet passede det fint med en bredde på 800px. Brugervenlighed Det er et meget simpel site, og jeg synes brugervenligheden er god. Der er en tydelig navigation, hvor brugeren let kan finde det den har behov for. Samtidig er kontatkinformationerne altid tilgængelige og synlige i bunden af siden. Reference siden giver brugeren god mulighed for at se og høre nogle af de indspilninger og musikere Duckehad har haft med at gøre. Kvalitetsvurdering Jeg var egentlig godt tilfreds med siden rent designmæssig, men rent funktionelt var der lidt mangler, i og med at jeg ikke kunne finde ud af at kode en kontaktformular, og sætte lydklip ind. Så da jeg blev ansat hos webbureauet bubblemedia, så jeg straks en mulighed for at få min ven som kunde hos dem. Fordelene ved at blive kunde hos os, er at siden vil blive sat op i et meget brugervenlig CMS, så duckhead selv har mulighed for at gå ind og redigere/tilføje/fjerne indhold. De vil også gerne have et blog-modul hvor de kan skrive nyheder. Derudover vil siden også blive sat op responsiv, så den tilpasser sig alle skærmstørrelser, hvilket er meget relevant i dag, hvor folk bruger deres smartphones og tablets mere og mere. Jeg satte et møde op med Rasmus, som sagtens kunne se de mange fordele, og derefter arrangerede jeg et møde mellem ham og mine chefer, hvor de aftale nærmere. Rasmus tog imod tilbuddet. For at hjemmesiden kunne sættes op i vores system, skulle jeg lige tilpasse mit photoshop layout til det grid vi bruger, og derefter opsatte min chef Kevin siden i bubbleweb, vores CMS. Nu ligger siden i bubbleweb, og Duckhead Music har alle de funktioner de søgte, og er meget tilfredse med det produkt vi har leveret. Derfor blev jeg aldrig helt færdig med min side, men det jeg nåede at kode er tilgængelig på denne adresse:

3 Grafisk workflow Portfolio h1 Side 19 layout forslag sendt til kunde opbygning af alle sider i photoshop...selvfølgelig i en overskuelig mappestruktur Jeg har benyttet mig af mit grid og guidelines for at have godt styr på målene så tidligt i processen som muligt, hvilket gør arbejdet nemmere for mig selv længere i forløbet.... igen, for at lette arbejdet, så jeg let kan navigere mellem de forskellige sider.

4 Portfolio h1 Side 20 flowchart skelet Alle sider er lavet i samme dokument i Illustrator, men i overskuelige lag.

5 Grafisk workflow Portfolio h1 template i dreamweaver browserkompatibilitet For at gøre kodningen noget nemmere lavede jeg en skabelon med alle de faste elementer på siden, så det er let at oprette nye sider, og så der kun er ét redigerbart felt at holde styr på på undersiderne. Af hensyn til brugervenlighed tjekkede jeg mit site i følgende browsere, hvor siden fungerede fint i alle. Side 21

6 Portfolio h1 Side 22 tilpasning til bubblegrid For at min kollega Kevin ville have lettere ved at implimentere mit design i bubblemedias CMS, bubbleweb, tilpassede jeg mit design til vores grid-system. adgang til bubbleweb Siden er opsat og Rasmus har nu adgang til bubbleweb, hvor han selv kan redigere i sidens indhold.

7 Portfolio h1 Side 23 css-betingelser * { margin: 0px; padding: 0px; html { overflow-y: scroll; body { background-image:url(images/ background.jpg); background-attachment: fixed; background-position: center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; #wrapper { float: none; margin-right: auto; margin-left: auto; margin-top: 40px; #header { height: 160px; margin-bottom: 40px; #content { #footer { height: 20px; margin-bottom: 40px; text-align: justify; ul { li { height: 28px; margin-bottom: 30px; border-top-width: 4px; border-top-style: solid; border-top- list-style-type: none; text-align: left; margin-right: 63px; padding-right: 10px; padding-left: 10px; padding-bottom: 2px; margin-left: 10px; li:hover { background-color: #F59A19;.nav_hover { color: #F59A19;.nav_hover:hover { color: #FFF; h1 { font-family: TeXGyreAdventorRe gular, Verdana, sans-serif; font-size: 16px; font-weight: bold; padding-bottom: 10px; color: #FFF; text-transform: uppercase; h2 { font-family: TeXGyreAdventorRe gular, Verdana, sans-serif; font-size: 14px; line-height: 16px; color: #FFF; font-weight: normal; padding-bottom: 10px; padding-top: 20px; h3 { font-family: TeXGyreAdventorRe gular, Verdana, sans-serif; font-size: 10px; margin-right: 124px; font-weight: normal; #footer.no_right_margin a { font-size: 10px; font-weight: normal; #footer.no_right_margin a:hover { color: #fff; p { a { font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 14px; color: #242424; font-family: TeXGyreAdventorRe gular, Verdana, sans-serif; text-decoration: none; font-size: 16px; font-weight: normal; color: #FFF; #slideshow_forside { height: 400px; #ref1 a { font-size: 11px; color: #242424; font-family: Verdana, Geneva, sans-serif; #ref1 a:hover { #index_info1 { height: 100px; width: 370px; padding: 10px; background-image:url(images/ images/baggrund2x2_09.png); #index_info2 { height: 100px; width: 370px; padding: 10px; background-image: url(images/ images/baggrund2x2_09.png); #gear { background-image: url(images/ images/baggrund2x2_09.png); #kontakt_bg { background-image: url(images/ images/baggrund2x2_09.png); height: 420px; width: 580px; margin-left: 20px; #kontakt_img { height: 420px; width: 200px; #kontakt { width: 200px; margin-left: 20px;

8 Portfolio h1 Side 24 css-betingelser #kontaktform { width: 280px; margin-left: 20px; #ref1 { background-image: url(images/ima ges/baggrund2x2_09.png); height: 460px; width: 140px; margin-top: 0px; padding: 20px;.orange { #ref2 { background-image: url(images/ima ges/baggrund2x2_09.png); height: 460px; width: 360px; margin-top: 0px; padding: 20px; #ref3 { padding: 20px; height: 460px; width: 140px; background-image: url(images/ima ges/baggrund2x2_09.png); margin-top: 0px; #gear1 { width: 340px; margin-top: 30px; margin-right: 40px; margin-left: 40px; #gear2 { width: 340px; margin-top: 30px;.no_padding_top { padding-top: 0px; iframe {.margin_top {.no_margin_top {.margin_right {.img_margin { margin-right: 16px; margin-bottom: 16px;.img_margin_last { margin-top: 0px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px;.no_right_margin { margin-right: 0px; #service { width: 720px; margin-left: 40px; #service a { font-family: TeXGyreAdventorRegul ar, Verdana, sans-serif; font-size: 14px; margin-right: 40px; font-weight: bold; #service a:hover { color: #fff;.number { font-family: Verdana, Geneva, sans-serif;