Reflektert dagbok – multimediedesign

Posts tagged “oblig 06

Enkelt nettsted – the end

Strevde fortsatt med å få til plasseringen av elementene, og startet på nytt igjen med et nettsted med navnet ”PlanB” fordi jeg tenkte at om ikke jeg får tid til å lage et skikkelig fint nettsted, så kan jeg i det minste ha et i bakhånd, et enkelt et, som var min PlanB.

Men etter god hjelp fra lærerne på forumet fikk jeg det etter hvert til likevel. Viktig å ha styr på hvilke div’er som er inni hvilke andre div’er og hvor store disse er. Det var også et godt tips å gjøre seg ferdig med byggeklossenes plassering, før man begynner med styling. Lettere å se sammenhengen da.

Jeg valgte å fjerne det hvite fra skissene mine slik at bakgrunnen ble helt svart og endret bittelit i plassering av f.eks menyen, men ellers er det ferdige resultatet nesten som på skissen.

Men jeg må si at dette har vært litt av en reise! Jeg har lært masse av den, og synes min ”PlanB”-nettside ikke ble så verst likevel tilslutt for å være en begynner slik som meg!

Endelig versjon ”PLAN B” websiden:

Live versjonen av nettsiden finner du her: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html 

T H E   E N D ! 🙂

Reklamer

Enkelt nettsted episode 3

Begynte å skisse igjen. Var ikke fornøyd med utseendet på siden, samt kranglet med posision, float, osv. Lekte med nye varianter av den grønne websiden, men begynte igjen å tenke på skarpe farger mot svart bunn. Her er nye skisser:

Nye skisser i Illustrator:

Kjedelig? Tja. Kanskje på tide å ta fram igjen sommerfuglen? Denne?

(Ny variant av dem gamle, snudd på gradient blant annet).

Og noen slike?

Sommerfugldesign på websidene:

Men hva har egentlig sommerfugler med webdesign, HTML og CSS å gjøre? Det ble litt feil. Så jeg bestemte meg for å knipse noen bilder selv og bruke disse. Bildet av meg selv manipulerte jeg med Adobe Photoshop Lightroom slik at det ble sjøgrønt og lilla, og fargene i designet ovenfor plukket jeg opp herfra med teardrop-verktøyet i Illustrator.

Valgte dermed å manipulere bildene jeg tok slik a de også ble litt sånn ”aged” og med lilla, grønne og gule toner.

Dette bildet illustrerer at HTML er et ”markup language”. Dermed en gul marker. Logisk, eller hva?

Dette bildet skal vise en wireframe skisse, hvordan man planlegger byggeklossene til en webside:

Til forsidebilde valgte jeg et bilde jeg selv tok i vinter, av noen tørre strå foran et nettinggjerde med snøen i bakgrunnen. Jeg manipulerte bildet slik at det fikk en nydelig turkisgrønn farge. Bildet skal selvfølgelig illustrere ”nettet”, med det nettinggjerdet (”wire fence” på engelsk, ikke langt unna ”wire frame”) 🙂


Enkelt nettsted episode 2

I mai begynte jeg på igjen.  Jeg gjennomgikk alle leksjonene på nytt, begynte å tenke wireframes og tok en titt på det tidligere arbeidet. Syntes det var kjedelig.

Ble inspirert av skissen med den store buede D’en og alle rundingene bak. Tenkte at D’en kunne være et slags konteiner for overskriften, som skulle være i venstre side istedenfor på toppen.

Hvorfor må alle websider ha tradisjonell design og layout, hadde lyst å lage noe annerledes og kanskje litt Austin Powersk? Fargesprakende 70-tall, psykedelisk? Det ville være tøft om undersidene hadde samme layout men forskjellig farge.

Begynte å jobbe i Dreamweaver etter å ha laget disse skissene først i Illustrator for å se hvordan det kunne bli:

Noen ”knapper” eller menyer i form av bilder som jeg lagde:

Begynte å utforme nettstedet i Dreamweaver men støtte borti diverse problemer. For det første ble den siste siden for lys, skriften inne i den hvite firkanten ville ikke vise. Byttet til en ekstra grønn underside, samme som forsiden.

Hadde valgt en kul font, syntes jeg, men leste en del om websafe fonts og fant ut at det ville være lite smart å bruke den. Måtte nok heller velge en av de vanligste fontene på nettet, som de fleste har installert.

Syntes etter hvert at den psykedeliske index-siden ble litt for mye, og utformet en ny, litt dusere en:

Men det var ikke lett å jobbe med bakgrunnsbilder og forskjellige farger på hver underside for en nybegynner som meg. Fikk tips om hvordan lage templates for Dreamweaver, noe som gikk lekende lett, men da uten fancy bakgrunnsbilder.

Gjorde bildet til bakgrunnsbilde for alle sidene, laget det transparent og la på svart bakgrunn. Fikk til hele nettstedet med svart-grønn kombinasjon, men fikk ikke til å plassere layout’en skikkelig. Sammentrykt på index-siden og for mye mellomrom før teksten begynte på de andre sidene.

Index-side:

Underside:


Enkelt nettsted episode 1

Denne oppgaven er nok den jeg har brukt lengst tid på av alle de obligatoriske oppgavene på multimediestudiet. Jeg begynte i januar-februar på læringsaktivitetene for webdesign som enkel HTML og CSS og jeg påbegynte allerede da Enkelt nettsted med ideer og skisser.

Her er en av de første ideskissene:

Hadde lyst å lage en dekorativ CSS fordi CSS er selve designet til websiden, selve stylingen. Den skulle være på mørk bakgrunn (svart, mørk grå eller grå) slik at den på en måte lyste. Her er noen forsøk i Illustrator:

Skisset litt mer og tenkte litt på hvor mange kolonner jeg skulle ha osv. Her er noen skisser:

Så testet jeg skissene røft i Illustrator:

Begynte å leke med en annen slags illustrasjon:

 
Og så prøvde jeg det ut på skissen i Illustrator med forskjellige farger. Kanskje grått var kjedelig?

Dette var i februar. Deretter ble det travelt på jobb og det ble umulig for meg å studere ved siden av i en periode. Hverdagen hang ikke sammen, så her ble det en lengre pause i arbeidet.