//grafisk workflow & web Case Website til JJDK: jjdk.dk
Programmer
Opgaven gik ud på at redesigne og kode et website til virksomheden JJDK. Websitet skulle udgøre 7 sider ialt; forside med menu og dropdown. Kunden ønskede et ”simpelt fashion look” i sort / hvid og mulighed for, at websitet kunne skifte grundfarve parallelt med hhv. Spring / Summer- og Autumn / Winter-kollektionerne.
Dreamweaver Websitet blev kodet i Dreamweaver. PhotoShop Fotos blev redigeret i PhotoShop. FireFTP Websitet blev uploadet til domænet vha. Firefox’s tilføjelsesprogram FireFTP.
// H2 Morten Dam Orleman Thrane
Website JJDK Link Websitet kan ses p책 www.jjdk.dk
Design JJDK Proces Se procesdiagrammet til højre+1 Krav Kunden havde følgende krav til websitet: + 7 sider: Home, About, Collections – herunder JJDK og Oranged, Catalogues, Contact+2 + Optimeret til desktop+3 + Slider med store, gode image-billeder + Layout til to årlige kollektioner; SS og AW+4 + Engelske tekster + Indsætte Google Analytics sporingskode Brugervenlighed Websitet skulle optimeres ift. desktop, så der skulle ikke bruges tid på at optimere til tablets og mobile enheder. Jeg undersøgte derfor hvilket format, det var hensigtsmæssigt at tilpasse designet til. På baggrund af lidt research viste formatet 1024x768 px sig at passe bedst til størstedelen af internettets brugere.+3
// 04
Skitsering på nyt layout Da kunden havde meget klare ønsker til designet og gerne ville have en hurtig designløsning, tog jeg naturligvis udgangspunkt i kundens oplæg ift. min inspirationssøgning og den efterfølgende designproces. Godkendelse af design Efter en relativt hurtig skitseproces, design i PhotoShop og korrektur fra kunden blev designet godkendt.+4 Fonte Tekst på websitet er skrevet med den websikre font, Arial. Tekster på billeder er skrevet med fonte fra JJDK’s grafiske univers.+5 Opbygning af skelet Med et skelet sikrede jeg mig at pixelmålene gik op.+6
// H2 Morten Dam Orleman Thrane
+1
Procesdiagram
+4
Kundeoplæg med krav
Upload og endelig godkendelse
+2
Finde inspiration på nettet
Tekster fra tekstforfatter indsættes
Målfast skitsering i PhotoShop
Websitet kodes
PhotoShop
Kunden har rettelser til designoplæg
+ I PhotoShop udarbejdede jeg 2 layouts. For at kunne sammenligne de 2 layouts valgte jeg at du blikere mappestrukturen, så jeg kunne til- og fravælge lag.
Designoplæg godkendes
Flowchart
+5
Fonte Arial:
ABCDEFGHIIJKLMNOPQRSTUVWXYZÆØÅ abcdefghiijklmnopqrstuvwxyzæøå 0123456789
Home About
Collections JJDK
Catalogues
Contact +6
Skelet
Oranged
32
30
114
701
85
30
32
40
Menu: 900·40px
15 25
23
Logo: 144·25px
Emblem: 115·67px
67
40
Topleft: 845·100px
10
100
Wrapper: 1024·768px
Container: 960px·100%
Format 1024 px
100% // 545px
100% // 545px
Footer: 960·50px
50
50
768 px
+3
Kodning JJDK Grafik Grafikstykkerne skulle først klippes i PhotoShop. De kan laves på mange forskellige måder i PhotoShop. Jeg valgte at benytte følgende fremgangsmåde:+1 + Selection (CMD + venstreklik på shape) + Copy merged (CMD + SHIFT + C) + Ny PSD-fil (CMD + N) + Indsæt udklip (CMD + V) + Save for Web & Devices... (CMD + ALT + SHIFT + S) Herefter optimerede jeg grafikstykkerne; store billeder i god kvalitet (100%, .jpg), ensfarvet logo i .png osv. Og gemte tilsidst grafikstykkerne i image-mappen i site-strukturen.
CSS Efter at have kodet den ene CSS-fil oprettede jeg en ny, hvor farverne blev udskiftet. Hermed var der gjort klar til de 2 sæsoner.+2 Template Det var hensigtsmæssigt at bygge siden op omkring et template, da alle sider havde samme opbygning. Jeg lavede en ”Editable Region” hvor de forskellige siders indhold kunne lægges ind.+3 Slider Websitet skulle være enkelt og eksklusivt, men fremstilles billigt og hurtigt. Jeg fandt derfor en gratis slider, der kunne fremvise store, gode produk- og imagetfotos.+4
Websitets dele Websitet blev opbygget med disse grundelementer: + CSS styling+2 + HTML DIV tags + Dropdown Spry menu + JQuery Cycle Slider widget+4
// 06
// H2 Morten Dam Orleman Thrane
+1
Grafikstykker
+ Da jeg havde projiceret de ovenliggende lag ned på en shape i faste pixelmål kunne grafikstykket vælges med CMD + venstreklik på shape.
+3
Template
+ Med templaten kan du oprette nye sider med samme layout. Templaten er smart når du fx vil lave generelle ændringer på alle dine sider.
+ Copy merged: Der tages en ”flad kopi” af lagene.
+ I EditRegion1 skiftede jeg indholdet ud på de forskellige sider.
+ Format og kvalitet vælges +2
CSS
+4
+ EditRegion1 var oprettet på en DIV (#container) med fast bredde på 960 px og fleksibel højde.
JQuery Cycle Slider
<link href=”../css/ss-style.css” rel=”stylesheet” type=”text/css” /> <link href=”../css/aw-style.css” rel=”stylesheet” type=”text/css” /> + I <head>-sektionen linkes til en af de to eksterne CSS-filer, afhængigt af hvilken kollektion, der er aktuel.
+ Jeg downloadede slideren ”JQuery Cycle” fra Adobes egen widget browser. + I templaten indsatte jeg scriptet i <head>, hvor der defineres indstillinger for #slideshow. I scriptet kunne jeg tilpasse format, tempo osv.
+ På forsiden (index.html) indsatte jeg #slideshow i containeren (Editable region). Kunden ønskede 4 fotos i slideren.
Kodning af website JJDK Design af widget på issuu.com Det var kundens ønske at de seneste produktkataloger kunne tilgås fra websitet, og gerne med en billedrepræsentation. På websitet Issuu.com kan man designe sin egen widget. Herefter kan man kopiere et script, som kan embeddes i egen HTML-kode. Jeg designede en widget, der passede til mit layout og satte koden ind på den side, hvor katalogerne skulle vises.+1 Google Analytics Der var ikke interesse i at bruge tid og penge på at få websitet søgeoptimeret, men kunden ønskede alligevel at kunne følge med i søgningerne på jjdk.dk, så jeg fik til opgave at indsætte en sporingskode på HTML-siderne.+2 Test og upload af website I løbet af hele kodeprocessen testede jeg mit arbejde i forskellige browsere, for at sikre at resultaterne var så identiske som muligt. Jeg anvendte Firefox’s tilføjelsesprogram FireFTP til at uploade filerne til JJDK’s domæne: jjdk.dk.+3
// 08
// H2 Morten Dam Orleman Thrane
+1
Issuu
+2
+ På issuu.com kunne jeg tilpasse widgets til websitet. Jeg valgte det lille format: 400x283 px, for at få plads til 2 kataloger ved siden af hinanden, og en hvid (#ffffff) baggrundsfarve, for at integrere bedst muligt ift. Spring Summer layoutet.
+3
Google Analytics
+ Kunden tilsendte mig Google Analytics sporingskoden, som jeg satte ind i <head>-sektionen i templaten. Hermed kan JJDK selv følge med i hvilken aktivitet, der er på alle sider. Som det ses ovenfor skaber jeg orden og overblik i min kode ved at indsætte ”comments” til at afgrænse de forskellige scripts.
FireFTP
+ JJDK tilsendte koder og de fornødne specifikationer til serveren, så jeg kunne logge ind.
+ Jeg uploadede filerne fra vores server til deres domæne.
Kvalitetsvurdering JJDK Tidsplan Jeg fik 1 uge til at designe og kode websitet, da vi havde givet kunden et rigtig godt tilbud. Tidsplanen blev overholdt. Design Kunden havde givet ret tydeligt udtryk for, hvad ønsket var, og samtidig kendte jeg JJDK’s grafiske univers fra andre opgaver, så efter en hurtig korrektur eller to skød vi os ind på hinanden. Kunden virkede efter lancering rigtig godt tilfreds med resultatet. Kode Websitet kan det, det skulle kunne; være et udvidet ”visitkort” på internettet, der viser hvem virksomheden er. Da JJDK skulle skifte til Autumn / Winter-layoutet var jeg desværre på ferie, så en af mine kolleger tog over på opgaven. Jeg er derfor ikke sikker på, at skiftet af CSS og Issuukataloger foregik som planlagt fra min side. Samlet vurdering Ud fra den korrespondance jeg har haft med kunden i løbet af processen og efter lanceringen, føler jeg, at de er blevet fint tilfredse. Ud fra den relativt stramme tidsplan og de enkle ønsker fra kundens side er jeg også selv ret tilfreds. Dog kunne jeg have ønsket, at der havde været tid til fx at søgeoptimere.
// 10
// H2 Morten Dam Orleman Thrane
// H2 Morten Dam Orleman Thrane