Oppgave 7 - Webdesign

1. Innleding

Koding kan være veldig frustrerende når man ikke får det til. Jeg har endelig begynt å få litt kontroll på html og css koding, og muligens noe overambisiøs bestemte jeg meg derfor å prøve meg på en løsning som involverer koding med Java-Script i denne oppgaven. Dette viste seg å være lettere sagt enn gjort…

Her er link til websiden

2. Idé

Jeg bestemte meg for å lage en litt tullete designsidé. I mangel på noen designartikler jeg virkelig brenner for, bestemte jeg meg for å lage en side for noe så traust som en ”stolbutikk”. Jeg ønsket å ha et litt tøysete og livlig preg på siden så jeg fant på navnet ”Stol På Oss”. Det imaginære konseptet bak denne butikken er å selge stoler i ”knæshe”, friske farger.

Det første jeg gjorde var å designe en enkel logo for butikken i Illustrator.

.

3  Skissestadiet

Etter å ha laget en grovskisse med penn og papir begynte jeg å utforme en mer detaljert skisse i Photoshop. Jeg ville at Photoshopfilen skulle være utgangspunktet for designet av siden og at jeg skulle ”slice” opp siden slik at jeg kunne bruke elementer derfra.

Jeg ønsket å ha en såkalt ”slider” på forsiden av siden. Dette er med andre ord bilder som roterer i en loop. Grunnen til at jeg ønsket dette er fordi det gir litt liv til designet, samt at det er en fin måte for en butikk å presentere ulike nyheter på.

Jeg var nøye med å bruke korrekte proporsjoner i Photoshop. Dette gjennomførte jeg ved å bruke linjalverktøyet slik at alt kom på akkurat riktig plass.

4. Programmering i Dreamweaver

Etter å ha designet layouten i Photoshop opprettet jeg en site i Dreamweaver. Jeg satte inn ulike diver og lagde css-styler til divene slik at oppsettet ble som i PSD-filen. Etter å ha laget alle de ulike stilene og divene la jeg alle css-stilene som en ekstern fil. Da det var gjort lagret  jeg oppsettet mitt som et template. Det eneste som skulle være forskjellig mellom de ulike sidene var nemlig ”main-content”-området. Jeg gjorde derfor dette området til ”editable region”.

Da det var gjort opprettet jeg et html dokument basert på ”template”-filen

4.1 Forside slider

Det som viste seg å bli en stor utfordring var derimot  å lage en slider til forsiden. En mulighet er å gjøre det ved hjelp av flash. Siden flash ikke støttes av Apple-produkter som Ipad og Iphone er dette imidlertid en temmelig ”forhistorisk” løsning. Dagens standard for slike interaktive bilder og gjenstander på nettet er derimot Java-script og nærmere bestemt noe som heter ”Jquery”. Dette viste seg fort å være svært avanserte saker for en fersking innenfor programmering. Jeg så på mange ulike instruksjonsfilmer på nettet for å prøve å finne en løsning på dette, men jeg ble bare mer og mer frustrert. Jeg prøvde meg på å kode slike java-script fra bunnen av, men dette var komplett umulig å få til. Etter å ha knotet med dette i halvannen dag fikk jeg tilslutt et gjennombrudd i saken. Jeg fant ut at det finnes tilleggsprogrammer i Dreamweaver som kan hjelpe deg med slike vanskelige oppgaver. Det var riktignok ikke enkelt å installere dette programmet og man måtte bruke ett annet tilleggsprogram for å installere programmet. Etter at jeg tilslutt klarte å innstalere dette programmet ble det imidlertid lettere å lage en slik slider.

Resultatet med slideren ble jeg veldig fornøyd med. Jeg har gjort det slik at slideren på forsiden rullerer med bilder hvert 3 sekund. Om man holder musepekeren over bildet stopper imidlertid bildene å rotere automatisk.

Innholdet i slideren lagde jeg i Photoshop. Det er en grunn til at en slik løsning ikke er optimalt og det er fordi at det gjør siden mindre søkbar i søkemotorene. Ideelt sett skulle man derfor har skrevet inn teksten og ikke bare hatt teksten i form av et bilde slik som jeg har gjort her.

4.2 Produktsider

Jeg ble så fornøyd med hvordan slideren fungerte at jeg bestemte meg for å benytte denne for å presentere butikkens produkter. Stolene jeg har vist på siden er bilder jeg har funnet på nett. Produktinormasjonen er oppdiktet. Siden hensikten med denne oppgaven er å få trening i webdesign og Dreamweaver ønsket jeg å minimere tidsbuken med å finne bilder etc. Av den benyttet jeg bildet jeg fant på nettet istedenfor å ta bildene selv.

Jeg lagde tre ulike produktpresentasjoner for hver produkttype. Jeg lagde deretter en slider for hvert produkt på samme måte som jeg gjorde på forsiden.

Spisestolside

Klappstolside

Lenestolside

4.3 Informasjonssiden

Denne siden kunne jeg definitivt laget langt finere. Pga. litt mangel på tid lagde jeg derimot en svært enkel løsning her. Jeg skrev ned noen oppdiktede ord og stylet dette ved å endre header og paragraphstyles ved hjelp av css-regler.

5. Refleksjoner rundt prosessen

Denne oppgaven viste seg å bli temmelig tidkrevende. Det som altså tok mest tid var å lage en slider med java-script. Jeg brukte mindre tid på å finpusse på produkt-presentasjonsbildene fra Photoshop. Om dette var et reelt oppdrag ville jeg nok brukt mye mer tid på detaljene her. I tillegg er også footeren ganske primitiv, så jeg ville nok lagt ned mer tid også her for å style denne.

Det var imidlertid gøy å få teken på å bruke java-script slider. Dette er noe jeg tror jeg kommer til å bruke mye videre, også i prosjektoppgaven.