// H2 Morten Dam Orleman Thrane

//grafiskworkflow& webCase Website til JJDK: jjdk.dkOpgaven 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.

ProgrammerDreamweaver Websitet blev kodet i Dreamweaver. PhotoShop Fotos blev redigeret i PhotoShop. FireFTP Websitet blev uploadet til domænet vha. Firefox’s tilføjelsesprogram FireFTP.

Website JJDK

Link Websitet kan ses på www.jjdk.dk

// H2 Morten Dam Orleman Thrane// 04

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

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 kor-rektur 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

+2 Flowchart

Home

About Collections

JJDK

Oranged

Catalogues Contact

+1 Procesdiagram

Kundeoplægmed krav

Finde inspirationpå nettet

Målfast skitsering i PhotoShop

Kunden har rettelser til designoplæg

Tekster fra tekstfor-fatter indsættes

Upload og endelig godkendelse

Websitet kodesDesignoplæg

godkendes

+3 Format

768

px

1024 px

+4 PhotoShop

+ I PhotoShop udar-bejdede jeg 2 layouts. For at kunne sam-menligne de 2 lay- outs valgte jeg at du-blikere mappestruk-turen, så jeg kunne til- og fravælge lag.

+6 Skelet

Topleft: 845·100px

100

Wrapper: 1024·768px

Container: 960px·100%Menu: 900·40px

Logo: 144·25px

Emblem:115·67px

Footer: 960·50px

4050

100%

// 5

45px

50100%

// 545px

701 30853032 32114

2515

4023

1067

+5 Fonte

Arial:

ABCDEFGHIIJKLMNOPQRSTUVWXYZÆØÅabcdefghiijklmnopqrstuvwxyzæøå 0123456789

// H2 Morten Dam Orleman Thrane// 06

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), ensfar-vet logo i .png osv. Og gemte tilsidst grafikstykkerne i image-mappen i site-strukturen.

Websitets dele Websitet blev opbygget med disse grundelementer:+ CSS styling+2

+ HTML DIV tags+ Dropdown Spry menu+ JQuery Cycle Slider widget+4

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 ind-hold 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

+4 JQuery Cycle Slider

+ Jeg download ede 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) ind-satte jeg #slideshow i containeren (Editable region). Kunden ønskede 4 fotos i slideren.

+1 Grafikstykker

+ Da jeg havde projiceret de ovenliggende lag ned på en shape i faste pixel-mål kunne grafikstyk-ket vælges med CMD + venstreklik på shape.

+ I <head>-sektionen linkes tilen af de to eksterne CSS-filer, afhængigt af hvilken kollektion, der er aktuel.

+ Format og kvalitet vælges

+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.

+ I EditRegion1 skiftede jeg indholdet ud på de forskellige sider. + EditRegion1 var opret-

tet på en DIV (#contai-ner) med fast bredde på 960 px og fleksibel højde.

<link href=”../css/ss-style.css” rel=”stylesheet” type=”text/css” />

<link href=”../css/aw-style.css” rel=”stylesheet” type=”text/css” />

+2 CSS

+ Copy merged:Der tages en ”flad kopi” af lagene.

// H2 Morten Dam Orleman Thrane// 08

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øgeopti-meret, 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 forskel-lige browsere, for at sikre at resultaterne var så identiske som muligt. Jeg anvendte Fire-fox’s tilføjelsesprogram FireFTP til at uploade filerne til JJDK’s domæne: jjdk.dk.+3

+2 Google Analytics

+ Kunden tilsendte mig Google Analytics sporingskoden, som jeg satte ind i <head>-sektionen i templaten. Her-med 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 for-skellige scripts.

+3 FireFTP

+ Jeg uploadede filerne fra vores server til deres domæne.

+ JJDK tilsendte koder og de fornødne spe-cifikationer til serveren, så jeg kunne logge ind.

+1 Issuu

+ 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.

// H2 Morten Dam Orleman Thrane// 10

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 Issuu-kataloger foregik som planlagt fra min side.

Samlet vurdering Ud fra den korrespondance jeg har haft med kunden i løbet af proces-sen og efter lanceringen, føler jeg, at de er blevet fint tilfredse. Ud fra den relativt stram-me 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.

// H2 Morten Dam Orleman Thrane