Prosjekteksamen-web

BRIEFE

I forbindelse med studiet skal det løses større prosjekt-oppgaver som berører studiets fagområder. Prosjekt-eksamen går ut på å utvikle et prosjekt for en bedrift, en organisasjon eller et prosjektområde som velges av den enkelte student og godkjennes av skolen.Kriterier til prosjektet: Sluttproduktet skal være en html eller en Flash presentasjon

For at vi skulle kunne gå løs på oppgaven, måtte vi innlevere prosjektbeskrivelse og fremdriftsplan til godkjenning før vi kunne sette igang. Det gikk ganske greit. Jeg fant ut at jeg hadde kikket på feil innleveringsdatoer, og dermed var jeg gått i fellen. Jeg fant ut at jeg var på etterskudd og ikke bare litt. Mappeinnlevering gjekk av tidsperioden jeg hadde på denne oppgaven, dermed ble det mye mye mindre tid på denne eksamen. Ein måned på denne oppgaven mistet jeg. Så jeg brukte to dager på fremdriftsplan og prosjektbeskrivelsen.. Jobbet intenst! Noen hadde kanskje gitt opp, noe som jeg vurderte litt akkurat der og da. Men når jeg har kommet så langt, og så hadde gitt opp…hadde jeg ikke fått sovet på puten med god samvittighet over meg. Jeg skulle gjennomføre når jeg har kjempet meg så langt både dag og natt. Jeg visste jeg måtte jobbe intenst selv itillegg til en 100 prosent stilling jobb utenom.

PROSJEKTBESKRIVELSE:

Presentasjon
Dag Rune Flåten
Flaaten Invest
Karmsund, Haugesund
Tlf 901 40 244

Innledning

Flaaten invest vil prøve seg med et nytt firma, som en gang vil bli stor nok til å bli et eget firma.
Her vil de fokusere på å selge eiendommer i Spania og USA først og fremst. På langsiktig over hele verden.

Forretningside

Forretningskonseptet er å lage en ny nettside for Flaaten Invest som heter Hus i Varmen hvor en selger eiendommer i USA og Spania. Visjon og målsettingen for foretaket er å tilby kunder eiendommer i Spania og USA.

Hus i Varmen vil nå ut til flere, så kundegruppen vil være stor hvor målgruppen vil dekke fra 30 til pensjonistalderen. Det er de som er etablerte, klare for å investere i eiendom i varmen, eller pensjonister som er klare for å flytte ned i varmen for godt. Prisklassen i Spania er fra 1.million, så de under 30 vil ikke bli tatt med. Foretaksnavnet Hus i Varmen vil relaterer mer til hva firmaet driver med. Det vil ses på som et prøveprosjekt.

Prosjektbeskrivelse:

Innledning

I forkant skulle vi levere en prosjektbeskrivelse for hva vi har valgt og levere en detaljert plan for arbeidsoppgaver prosjektet vil ha.

Jeg vil designe en nettside for eiendommer. Å designe en nettside hvor en kan markedsføre eiendommer, vet jeg vil bli spennende, men utfordrende og mye valgmuligheter

Bakgrunn

Jeg vil ha hovedansvar for Design, men kundens ønsker betyr mye. Men jeg som designer skal veilede kunden min og bistå med råd til siste finish, som følger regler innen for grafisk design.

Bakgrunnen bak valget mitt er for å lære mer om megleryrke og alt som følger med det.
Og med tanke på design er det veldig åpent, for hvilken stil en velger.

Problemstillinger / utfordringer

Utfordring vil være at det er mye innhold på en slik nettside
– Hva skal tas med og ikke tas med
– Hvor skal det plasseres for å bli en ryddig nettside

Problemstilling:

– Hovedside-forfriskende, lekende og moderne
– Flash/banner/header
– Blogg- som skal tiltrekke lesere – (toveiskommunikasjon)
– Lett navigasjon
– Innhold- eiendommer
– Formidlingsdesign
– Kontaktskjema
– Intro
– Spania eiendommer
– USA eiendommer
– Bra navigasjon
– Slagord
– Det skal være ren Html/CSS. (obs endringer kan forekomme) siden dette er et prøveprosjekt, vil det ikke bli lagt slik at kunden kan oppdatere nettsiden siden. Her er det for å se og vise kunden att slik kan den bygges opp.

Research blir en viktig del i denne oppgaven. Jeg må finne meg god inspirasjon og info før jeg kan begynne på oppgaven, for å finne en løsning på de problemstillingene jeg har.

Mål, forventet resultat

Jeg vil fokusere først og fremst på god dialog mellom meg og kunden. Det skal følges en strukturert plan. Vi må ha jevnlige møter, hvor vi diskuterer hva som er best og ikke, men også ha møter for å veilede hverandre og få ny synspunkter.

Resultat målet skal være i nærheten av hva som er planlagt på forhand, selv om endringer kan forekomme. Om noen av oss ikke er fornøyde, skal de jobbes med én nytt design, til vi er fornøyde. Resultatet av nettsiden skal hovedsakelig være lekende, moderne og forfriskende. Det skal relateres til hus i varmen.

Virkemidler for gjennomføring

Det skal følges en strukturert plan eller en tidsplan basert på en deltidsjobb i tilfelle avvik kan forekomme.(sjukdom, bortreist, jobb o.l.)

Hovedoppgavene vil være basert på den informasjonen som vil bli gitt av kunden. Det vil derfor bli flere diskusjonsmøter i forkant før prosessen settes i gang. Det skal settes opp idemyldring på begge kanter som vi begge vil gå igjennom. Jeg som designer må også innhente meg kunnskap innen for megler/ Key Account manager, og salg av eiendommer.

Organisering

Styreleder – Meg. Oppgaver: Følge tidsplanen, Strukturert, samarbeidsvillig.
Ansvarlig instans – Begge. Oppgaver: Passe på at ting blir gjort.
Oppdragsgiver – Dag Rune – Hus i varmen. Oppgaver: Dele kunnskap, veiledning
Prosjektmedarbeider – Dag Rune: Oppgaver: gi tilgang til ressurser.

Rapportering

Det skal meldes fra til styreleder eller prosjektmedarbeider med en gang avvik forekommer.

Budsjett
Reisekostnader:

100,-

Driftsutgifter:

-telefon, kopiering, rekvisitter osv.

200,-

Kurs:

0-200,-

Andre kostnader:

500,-

Sammendrag av prosjektbeskrivelsen

Å lage en nettside for Flaaten Invest som baseres på å selge eiendommer i Spania Og USA. Den nye nettsiden skal hete Hus i Varmen. Det grafiske skal designet være forfriskende, lekende og moderne.
På det strukturnivå skal det følges tidsplan, møter og ha en god dialog mellom begge parter.
På det faglige, skal nødvendige ressurser værer tilgjengelig, samt skaffe seg kunnskap innen megler yrket.

Prosjekteksamen skal innleveres 20.09.2013

RESEARCH DEL 1 KUNDEN

Den første uken skulle jeg bruke tiden på orientering, altså finne ut hvordan jeg ville jobbe. Researching/innhente informasjon av – nettsider, grafiske regler, eiendom, salg, osv.

MØTE MED KUNDENJeg tok et møte med kunden hvor han skulle fortelle om hans bedrift, hvordan ansatte jobber. dette for å danne meg et helsinntrykk og sette ting mer på plass. Jeg synes det er viktig å vite bakgrunnen til kunden og dens bedrift slik at jeg hva kan gå til. Vi snakket også om hva han kunne sett fore seg. Referat ble skrevet under møtet (se under).

Referat:

Referat fikk veldig perspektiv på ting. Anbefales til alle andre der ute! En glemmer heller ikke ting en må huske på,deretter blir det mye mindre «mas» frem og tilbake og du jobber istedenfor på et profosjenell plan.
Referat på data ble gjort etter jeg var kommet hjem. På møtet skrev jeg notater i kladdebok. Kunden fikk kopi av møtereeratet på mail.

RESEARCH DEL 2 – WEB DESIGN

Jeg satt sammen noen bilder som jeg fant på en nettside. Jeg syns det er ganske enkelt og greit forklart. Dette er også viktige ting å huske på før en begynner å designe en nettside. At en har det i bakhodet.

Infoen fant jeg her: http://www.slideshare.net/maha121/design-av-nettsted

RESEARCH KONKURRENTER:

qsdgroupnorway.com

Det første jeg la merke til navnet til nettsiden, det relaterte ikke til noe me hus i Spania å gjøre:qsdgroupnorway? En annen logo ville tilpasset websiden enda bedre og ha løftet websiden betraktelig. Jeg ville også ha jobbet litt mer med kontrastene og kanskje presentert hovedfunksjonalitet på en annen og mer spennende måte. Menyene kunne vært kortet ned litt. Nettsiden finne du her:

http://www.qsdgroupnorway.com/?TRACK=HOME_ADW&gclid=CLfX5NaQsrkCFZN6cAodh0sAgQ

Utenlandseiendom

Denne nettsiden var bare horrible. Rotete ikke minst! Skulle gått litt arbeid på innhaldsfronten. Legge inn bilder, strukturere teksten med overskrifter. Vurder tekst og farger på nytt. få det litt mer stilrent. Kaotisk side.
Nettsiden finner du her:
http://www.utenlandseiendom.no/

Palmesus

Dette var mye mye bedre. Jeg vil si at paletten fungerer fint til sand, vann og syden. Både fargene og logo relaterer til sol og varme. Det var heilt grei oversikltighet. litt lang meny på venstre som jeg ikke likte helt. navigasjonen var bra. Bildekonseptet støtter også opp under profilen og konseptet for profil. Nettsiden finner du her:
http://www.palmesus.no/

Semegleren

Førsteinntrykket bra. Tekstmenyen øverst, kunne gjerne tonest opp litt og behøver heller ikke ta hele bredden.
Slik jeg ser det, er dette like så mye en «opplevelsesside» som en informativ side. Bildene relaterer til det driver med. Logoen og bakgrunnsfargen var jeg ikke helt fan av. men ellers likte jeg siden, med tanke på plassering, elementer og leselighet. Nettsiden dere her:

http://semegleren.com/

Moodboard elementer

Her har jeg laget et moodboard over viktige elementer til å ha med på eiendomsportal sider.

* Søkeskjema
* videoer (For å styrke trygghet, og lokke kunder)
* kontaktskjema
* Nyhetsbrev

Dette skal jeg og kunden drøfte og overveie ilag

INSPIRASJON:

Jeg letet på nettet etter eiendomssider som inspirerte meg som eiendomssider. Jeg fant et par, som gikk innenfor fargebruk, brukervennlighet, innholdskvalitet, plassering, og oversiktlig.

Inspirasjon design:

Her har jeg satt fokus på design, stil, og oppsett. Dette er hva jeg fant som fenger meg, og som får meg tiltrukket.
Jeg vil satse på et enkelt design, som holder orden på både hovedside og undersider.

FRIMERKESKISSER

Her skisset jeg meg 12 skisser, som jeg deretter plukket meg ut 3 skisser for å jobbe videre på.

UTSNITT SKISSER

Nr 3, 5 og 11 var det jeg likte best, og har et potensiale til web design.
Det er enkle og ryddige. Under kan dere se de 3 skissene i digital wireframe.

WIREFRAME

Videre har jeg jobbet en del med wireframes, og digitale skisser av design og layout av nettstedet. Disse har jeg laget i Photoshop, og fokusert på plassering av elementer, samt navngivelse av disse for å få en bedre oversikt. Disse utkastene er fra frimerkeskissingen og utsnitt skissene, nr 3, 5 og 11. Wireframe er et storyboard, og et visuelt uttrykk som viser hovedelementene som skal være med.

Wireframe nr 3:

Wireframe nr 5.

Wireframe nr 11

MØTE

Etter moodboard , inspirasjonsdel, research, frimerkeskissing og wireframe tok vi et nytt møte med kunden i uke 35, Onsdag kl.15.00 for å drøfte om hva som er viktig å ta med på nettsiden i første omgang, hvilket design, og farger i forhold til Logo. Hva han tenker om disse utkastene og ikke liker.

Referat:

Her kunne jeg gå fritt frem og jeg vil prøve meg på denne:

Mer om hvorfor leses på referatet.

FARGEKODE BAKGRUNN

Det visuelle førsteinntrykket er det aller viktigste, så jeg har prøvd å planlegge design og utseende til nettsiden svært nøye. Her har jeg testet hovedfarge. Vi ble enige om Orange (les referat), så jeg testet ulike nyanser :

Kopi ble sendt på mail til kunden.

FARGEKART TEKST

Vi ble enige om å ha hovedfarge som orange og hovedfarge på tekst- blå. Dette for å bryte ned den rolige balansen og heller skape kontrast og liv i layouten.

kopi ble sendt til kunden. Dette er de fargene vi satt igjen med :

Og dette er de fargene vi skulle prøve oss på til slutt :

Uttalelse fra kunden er : knæsj farger i en kombinasjon som er både uvanlig og tøff.

I fargelæren assosieres orange med:
Energi, Sol, Varme, Sikkerhet, Håp, Entusiasme, Synlighet, Oppmerksomhet, Optimisme, Innovasjon.
I merkevarebyggingens verden er farge det sterkeste virkemidlet!

I fargelæren assosieres blå med:

Blått assosierer vi med ro og mak, alvor og kjølig distanse. Det er også fargen for meditasjon, filosofi, visdom og en melankolsk sinnsstemning. Blått gjør godt for den som er stresset – og for både rom og temperamenter som trenger å svales ned. I varme: trenger du svalende luftighet, er blåfargene det rette hjelpemiddelet. blått assosieres med vann!

Orange assorieres med varme og blått assosieres med vann.

TYPOGRAFI :

Gode skjermfonter er Verdana, Arial og Helvetica (Dette under Research)

Groteske skrifter f.eks. Helvetica er uten seriff og fungerer fint som overskrift. Til brødtekst har vi valgt Georgia som er en antikva skrift som regnes tradisjonelt for å være bedre leselige enn grotesker, og brukes derfor gjerne i brødsats.

Arial og Helvetica:

Helvetica er en meget vanlig grotesk skrifttype som opprinnelig ble utviklet i 1957 av den sveitsiske skriftformgiveren Max Miedinger sammen med Eduard Hoffmann. Siden da er det utviklet flere tilsvarende skrifttyper, hvorav Arial, designet i 1982, er den mest alminnelig. Det er kun mindre forskjeller i de store bokstavene C, G og R foruten de små bokstavene a, e, r og t som i vesentlig grad skiller de to skifttypene.

Kilde: http://news.bbc.co.uk/2/hi/uk_news/magazine/6638423.stm
Kilde: http://www.nysun.com/arts/typeface-to-end-all-typefaces/62493/

Oswald:

Oswald er et av de tidligste skrifttyper som publiseres på Google Web Fonts, og på grunn av sin smale stil, fikk det raskt trekkraft som foretrukket skrifttype for lange overskrifter eller titler. De med ivrige øyne ville ha lagt merke til at Oswald har mye likhet med Bebas Neue på mange måter.
Kilde:http://designerfirst.com/blog/top-google-web-fonts/

Wireframe fra alle 5 meny sidene:

Hjem:

Nyheter:

Eiendommer til salgs:

Blogg:

Kontakt oss:

Mine tanker bak på disse layoutene er : Bredde, hierarkisk oppbygning, luft og interaksjon samt plassering av elemnter og innhold, Dette vil du se lengre nede på siden. jeg har ikke kommet så langt enda på å designe selve nettsiden, men skal poste ut snart. Men hvertfall det er det er viktigste nøkkelordene bak webdesignet mitt. Du ser at alle sidene er ganske like, dette for å ha en fin flyt og guide brukeren lett gjennom uten at det skal bli uryddigt og kaotisk. Noen elemnter vil jeg ha på alle sidene, slik at brukeren lett skal kunne finne «hjem» igjen. Det tror jeg er roten til suksesfull side.

Nav bar
En navigasjons meny skal være enkel å bruke og lett å forstå for brukerene som skal benytte seg av websiden. DEt første er Hvor er jeg? 2. Hvor har jeg vært? 3. Hvor kan jeg gå? Jeg må tenke ut hva som funker best på mitt nettsted. Altså skal jeg ha farger i nav baren eller gi de ulike menyvalgene i forskjellige farger ? Skal det etterlate seg spor på den siden jeg har valgt meg ut (vise en ny farge som spor) Skal den valgte vises når pekeren ikke er over knappen ? vil grafikken som vises når pekeren er over knappen eller grafikken som vises når pekeren klikker på knapper ? Skal den være horisontal eller vertikal ? Mange valgmuligheter.
Kilde:http://www.w3schools.com/css/css_navbar.asp

Her måtte jeg lage meg et moodboard- inspirasjon :

Her ser du det er mange valgmuligheter. Det viktiske som en må tenke på er brukervennlighet og synlighet!

Her er den menyen jeg endte opp med:

En horisontal nav bar som viser hvor brukeren er og hvilket side en har trykket på. jeg laget også en vertikal meny lenger nede på siden slik at brukeren slipper å scrolle seg helt opp til toppen. Så den vil være en «snarvei» se under:

Den øverste pilen viser hvor jeg er og den andre pilen viser hvor jeg er på vei.

Html og java script koding :

Html koder:

Alle websider er laget i HTML. HTML står for HyperText Mark-up Language, altså «hypertekst kodespråk».

Å skrive HTML er akkurat like enkelt som å skrive alminnelig tekst i et tekstbehandlings-program. Den eneste forskjellen er at HTML-tekster ikke bare inneholder ordene som skal stå på websiden, men også bestemte koder som styrer hvordan teksten skal se ut.

En webside er altså bare en enkel tekstfil med bestemte koder inni.
Kilde: http://www.webforalle.no/3-1.html

Javascript koder:

Javascript kan sees på som en tilleggsfunksjon til HTML som gjør det mulig for oss å lage klient-side funskjonalitet på web-siden vår. Javascript kan brukes til å, lokalt, gjøre enkle, eller mer avanserte operasjoner, eller forandre brukeropplevelsen på siden.
Kilde: http://www.kodehjelp.no/opplaring/javascript-nybegynner.aspx

Her er noen av mine koder:

og slik ble den:

Jeg har brukt mange dager, timer, sekunder, dag og natt for å bli ferdig med denne koden. Det måtte mye youtube videor til, holde tungen bent i munnen. under ser du litt mer av koden:

Youtubevideor som har vært til hjelp :

Kode kontakt oss :

Og slik ble koden:

Youtubevieoer som har vært til hjelp. Jeg har snappet opp litt her og der, da en og en ikke viste alt jeg var ute etter.

Design webside:

Jeg opprettet meg en konte på one.com (i prosjektbeskrivelse skrev jeg dreamweaver , men endringer kunne forekomme) Grunnen til dette var fordi jeg allerede hadde mistet en måned av tiden min til eksamen, og jeg føler meg trygg i dette programmet, selv om det var mye jeg ikke kunne der enda. En må fremdeles kode og linke. bruke fargekoder å diverse. jeg slet i begynnelsen, men etterhvert løsnet det litt å litt.

Jeg gikk for malen SUENISE (Se under)

Etter jeg har kodet og designet:

Så ser det ut som en troverdig eiendomsportal. Noe endringer må jeg fremdeles gjøre som posisjon på diverse elementer, linking og diverse titler. Ellers er jeg og kunden veldig fornøyde. Vi hadde ett møte sist uke, så referatet blir lastet opp imorgen.

Møte med kunden 26.09 2013

Referat:

Andre ting jeg ikke tok med på bloggen som jeg laget:

Dette som jeg ikke tok med, kan fremdeles bruke om kunden vil det. Det er slik blogg brukes i nymodernetid.

Hus i varmen sitemap

Nå ble jeg endelig ferdig med sitemap for hele websiden, se under:

Jeg synes den er enkel, brukervennlig, lett gjennkjennelig, orden, ryddig og strukturert.
Dette har jeg jobbet hardt med. Når kunden tar over, vil jeg selvsagt vise og «lære opp hvordan en poster ut nytt innlegg eller eiendom. Jeg har også avtalt at jeg er admin 2 om det er noe de trenger hjelp til. Dette helt gratis. Vi jobber alltid for å få en fornøyd kunde!

Konklusjon:

Arbeidsprosessen har vært stukturert hele veien. problemstillinger har jeg hatt underveis, en del mot slutten etter at jeg trudde at alt var i orden. url linkene på bilder som er koblet til de skjulte prospektene skiftet plutselig url link til kontakt oss på menyen, eks: wwww.husivarmen.priv.no/kontakt-oss/villa-i-calpe.index.html det rette: http://www.husivarmen.priv.no/referanser/villa-i-calpe/index.html. Hva som skjedde vet jeg ikke. Men jeg måtte gå igjennom 30 url linker på nytt for å ordne problemet. deretter dukket det opp enda nytt problem, hvor på slutten av url linken hvor index.html var borte på alle, som jeg nok engang måtte rette opp i.

En måtte ha tungen bent i munnen hele veien for å ha kontroll på hvor linkene skulle til, siden det er nokså mange elementer på siden. Det gikk seg til slutt.
En ting jeg ikke er så svært fornøyd med er at når en trykker på visningsbildene (de fem bildene øverst) når en klikker seg inn der , så kan en ikke alltid bare klikke seg inn på en ny, en må da trykke piltasten tilbake helt oppe til venstre på selve nettsiden. Dette var umuligt å ordne.

Ellers, er jeg veldig fornøyd med hva jeg har klart å oppnådd. Jeg og kunden er fornøyd med resultatet, og nettsidene r klar til å bygges på med skjulte sider, som kan gjøres synlige.

Linker:

http://www.husivarmen.priv.no/

Rapport:

MMD_RPRT01_HelgaWesterheim_190913

 

WEBM – Web Mappevurdering semester 2

Du skal til denne mappevurdering samle alle arbeidene fra 2.semester på EN nettside. Denne nettsiden må designes på en måte som representerer deg som designer. Siden skal ha linker til alle oppgavene, og link til din reflekterte dagbok.

Jeg har jobbet veldig intens med denne oppgaven, kveldene etter jobb og morningene før jobb. Så det har vært en hard måned og det merkes på kroppen. Men jeg er i mål, og gledeshylet har de fleste fått hørt til nå. Jeg er fornøyd med designet, som reflekterer meg – Jeg elsker farger, uansett om det er sterke eller pastell farger. Jeg liker det lekente, hvor designet kan lekes med og grensene kan tøyes. Litt ut av boksen ville jeg sagt.

Jeg laget meg en nettside via One.com hvor jeg kjøpte meg et domene og valgte et enkelt theme som var stilrent, som jeg kunne leke meg med og endre det slik jeg ville. Jeg startet med research – inspirasjon, deretter skissing av hvordan jeg ville nettsiden skulle bygges opp. Her var det viktig å prøve seg ut, og ikkje gå for det første designet. Når en har mye i hodet som en vil bruke, kan det bli fort krasj og rett og slett for mye for øyet. Her var det viktig å nøytralisere designet.

INSPIRASJON:

Et oppslag om hva som fanger, og beskrive meg. Flott ikke sant ? Det er enkelt, fargerikt, nøytralt, fengende, kreativt og abstrakt som gjør det spennende.

Brainmap

Enkelt og det fungerer!Plutselig kommer det frem mye som en ikke ar tenkt på.

Skissing

Frimerkeskissing. Jeg skisset ned det jeg kunne tenkt meg som et design ned på papiret. Jeg gikk for det nr 4 oppe til høyre, og under side 2, valgte jeg den i midten til høyre. Jeg følte at disse 2 kunne passet til et innholdet jeg ville bruke på nettsiden. Neste steg var å sette igang å tegne i illustrator og i Photoshop.

Analog header skisser:

1:

2:

3:

4:

5:

Her testet jeg mye frem og tilbake. Men, etter mye prøving frem og tilbake endte jeg med nummer 5. Den ville ikke ta for mye av fokuset som de andre hadde gjort, men bli en helhet til resten av designet.

Bakgrunn illustrasjon

1.

2.

3.

Som du ser tenkte jeg en del på mørke design, hor det andre skulle være i lyse farger. men jeg syntes ikke det fungerte. Det ble en altfor stor knekk mellom designene at det ble et rotete oppsett. Så jeg bestemte meg her for å være kreativ med lyse/pastell farger og leke meg med designet. Derfor falt valget på nr. 3

header 2

1.

2.

3.

4.

5.

6.

Her syntes jeg nr 2 og 5 var de som funket når jeg plasserte andre design i layouten. Var viktig å holde det balanserende. Disse vil bli brukt på aktivitetssiden.

Oblig bilde skisser

De tre siste ble jeg virkelig fornøyd med. De er forenklet, sterilisert og alikevell gi et godt utrykk for hva det skal
formiddle. Planen er at bildene skal være linket til hver sitt oblig. Jeg har enda ikke funnet ut hvordan dette gjøres..

OBLIGER FØR OG ETTER:

oBLIG 06- ENKELT NETTSTED:

Før :

Tilbakemelding:

Ikke så spennende design da det følger en viss gammeldags bransjestandard, men du har vist at du behersker noe grunnleggende i kodingen, typografien kan du nok jobbbe mer med, samt at css/HTML videoen viser en feil.

Etter:

Siden det manglet illustrasjon i innlevert oppgave, valgte jeg å gjøre noe med det. Det er sterilisert ornament etter årstids sesongen som det var den gangen da vi innleverte første gangen. Videoen under CSS og HTML historie er også tatt bort, og erstattet med
bilder, illustrasjon og tekst.

Jeg skulle innerst inne ønske jeg hadde hatt mer tid, men det har jeg dessverre ikke, samt hatt mer kunnskap innen scripting, men det tar lang tid for at den kunnskapen skal sette seg.
Men jeg er fornøyd med det jeg innleverte nå, siden det er en liten oppgradering på det bedre enn hva det var.

Oblig 07 Fotoessay:

Før :

Trykk på linken for å se:

MMD_Oblig7_HelgaWesterheim_081112

Tilbakemelding

Høy!
Men jeg hadde tatt feil av introbildet, som kun skulle avbilde 1 gjenstand. Resten var småpirk, som midstilt, ta vekk et hjerte, skarphet og grønn kjole istedenfor rød.

Etter:

fotoessay 07 etter

Her valgte jeg å bytte ut 2 bilder, og resten redigerte jeg litt på.

Introbilde:

tok jeg bilde av kun en gjenstand- pensel, som jeg hang opp i et tau.
Jeg ble desidert fornøyd med dette bilde, og det formiddlet hva obligen handler om.
Det ble et klart bilde, som tiltrakk fokuset med en gang.

Kamera innstillinger:

Canon Eos 500d
F-stopp: f/2.8
Eksponeringstid: 1/200 sek
ISO-hastighet: 100
Brennevidde: 43 mm

Bilde 1:

Her croppet jeg bildet bare, slik at symmetrien stemte.

Bilde 2:

endret jeg kun på skarpheten i bildet.

Bilde 3 (epler):

Tonet jeg ned bakgrunnen, som eplene. Her var det for lyst, så dette ble dempet, ved hjelp av macig tool, og derette kontrast verktøyet.

Bilde 4 (som ble byttet ut med bilde 3 fra første innlevering)

Dette er det nye bildet i serien, siden det forrige ikke hang så godt sammen med de andre bildene i serien.
Det nye hvor hun sitter i sofaen ute, viser en glad kunstner. Det viser hennes personlighet.

Innstillinger på bildet:

Canon EOS 500 D
Natrlig lysskilde
f/2.8
eksponeringstid: 1-125
ISO-hastighet. ISO-400
Brenvidde: 35 mm

Redigering:

For å ikke ødelegge bildeoppløsningen tok jeg skarphet til slutt, og Blur tool verktøyet på håret, slik at det skulle se mer naturlig ut. Dette kan være en grie måte å gjøre det på istdenfor å marke det med quick selection tool.
Ellers er det brukt adjustments som kontrast, og vibrance.
Det er ikke forsterket unaturlig , men mer forsterket på klarhet og fokus.

Bilde 5:

Står som det gjor. Dette fordi jeg henger meg ikke opp om hun har grønn kjole på seg istedenfir rød, fordi de andre bilde har rødt i bildene sine. Men i og med at det forrige bildet ikke har rødt i seg nå, valgte jeg at det skulle stå sånn.

Bilde 6:

Her fjernet jeg hjerte, fordi det skapte litt uro i bildet (skjønner ikke hvorfor) men tok rådet deres og fjernet dette i Photoshop. Jeg tok eyedropper tool og fanget opp den rette fargen i bilde rundt hvor hjertet hang. Deretter tok jeg en malepensel og malte over dette. Så skrudde jeg ned opacity i flere omganger,slik at det skulle bli så likt som mulig som resten av bakgrunnen. deretter tok jeg eyedropper på tauet, og tok pensel og malt tauet hvor det manglet. Opacity ble justert i flere omganger her også, samtidig som jeg endre på pensel utseende i mer røffe preg for at det skulle ligne.

Jeg ser nå, at jeg er enig med hva lærerene mente. Det ser mye bedre ut nå, enn hva det faktisk var.

Oblig 08- Flash

Før og nå:

Tilbakemelding:

Teknisk sett var oppgaven i tråd med kravene,men noe rusk.Noen knapper som ikke fungerte, og oppløsningen på bilder var noe dårlig.

Problemstilling Flash:

På Friday, 21 June 2013, 13:22 la jeg ut på forum beskrev jeg hva som var galt med Flashprogrammet, altså den slutter å virke hver 2 sekund omtrent. Under ser du hva jeg mener :

Etter dette forumet (om jeg hadde fått hjelp) hadde jeg en uke til å rette opp i dette, og få endret det som stod i tilbakemeldingen, og fått forberedet oppløsninger på bilder, byttet ut de bilde som var, endret tidsvarighet på banneren o.l
Men nei.

Jeg har også prøvd å lage selve flashgalleriet fra scratch igjen, men programmet ville bare ikke virke.

Problemløsninger

I og med at lærerene ikke svarte, prøvde jeg å utlye på Facebook om noen var kjente i flash programmet, uten hell. samtidig hørte jeg med en kompis av min sjef som kunne med flash kikke på det. Men han dukket aldri opp… Nå sitter jeg her i dag, og innleveringen er imorgen, fortvilet og sint med å ikke gjort noe.

Problemstilling et enkelt nettsted:

for noen dager siden da jeg skulle vise det ferdige resultatet til min familie, virket det plutselig ikke, når det virket for 3-4 dager før der. Jeg ble fortvilet nok en gang, og prøvde å finne en løsning på problemet. Jeg skrev i forum nok en gang den Tuesday, 25 June 2013, 17:39 med bilder som viste til problemene. Den ville ikke koble seg til serveren/hosten. Se under:

Problemløsning

Jeg prøvde å følge instruksjonene og prøvde å endre på ftp innstillinger som kanskje kunne hjelpe når det kom error eller problem med tilgang. Jeg prøvde også lage en ny site hvor jeg la inn root folderen med det samme filene, og koble til. men den gang ei…Jeg sendte også en epost til Nina.
Jeg tror feilen ligger hos noroff, siden jeg har deres server, som er mysql-b.noroff.no. Derfor har jeg valgt å innlevere mapparbeide slik det er med link til bildene til nettsiden , selv om disse linkene ikke akkurat virker nå, vil de virke når serveren er oppe og går igjen.

Innleveringer:

Web – Mappevurdering 2.semester

Oblig 06 – Et enkelt nettsted

Oblig 07 – Fotoessay

Oblig 08 – Flash galleri og Flash banner

 

10.1 Regnskapsside

Denne Aktiviteten har vært en kamp fra start til slutt

Brief:

Oppgave gikk ut på å lage et nettsted for et fiktivt regnskapsfirma med hjelp av WordPress. Vi skulle kun lage et enkelt design som inneholdt 4 sider, og heller konsentrere oss om å få WordPress til å virke og bli brukervennlig. Dette for at de fiktive medarbeiderne i den fiktive bedriften selv skal kunne oppdatere og legge ut nyheter og bilder. Programvare Dreamweaver og WordPress

Jeg designet et enkelt design som jeg håpet ikke ble for vanskelig å få implementert i WordPress. Jeg har riktig nok klart å redigere et enkelt og greit Theme ,jeg kunne ikke bruke altfor mye tid på denne oppgaven, da jeg har satt fast i maaange dager, og frem å tilbake, opp og ned..

Nettsiden regnskap

Brukerrettighetene er gitt til min samboer, og er klar til å logge seg inn :)

 

9.1 Layoutstiler – CURB

Målet med denne aktiviteten er å praktisk erfare bruk av grid som et hjelpemiddel til å utarbeide layout for web. I tillegg skal studentene øve opp bevisstheten rundt valg av layoutstil.

Oppgaven vi har jobbet med denne uken gikk ut på å lage forsiden til det fiktive bladet CURB magasin. Vi har jobbet med dette bladet før, men da med det trykte mediet som mål. Denne gangen skulle vi utarbeide layoutet for CURB sin hovedside på nettet.

Oppgaven besto også i:

Minimum seks skisser.
Lage en wireframe hvor grid skal brukes som hjelpemiddel.
Utarbeide et ferdig design i feks. Photoshop.
Produsere siden i Dreamweaver (HTML & CSS).
Legge opp nettsiden på skoleserveren.

I disse skissene har jeg prøvd ut ulike kombinasjoner som symmetrisk, asymmetrisk og kombinert layout. Jeg har tidligere laget både symmetrisk design og asymmetrisk layout og valgte også denne gangen for den sistnevnte- en asymmetrisk løsning. Dette gir et litt mer spennende inntrykk, samtidig som det gir mer rom til illustrasjon. De programmene jeg har benyttet i denne oppgaven er Adobe Photoshop (oppløsning) InDesign for å designe layouten og Dreamweaver til css koding og publisering.

Til å utarbeide wireframe har jeg benyttet 12 kolonnes grid i Adobe InDesign. I Adobe Photoshop brukte jeg denne wireframen til å sette opp guider som jeg igjen brukte som utgangspunkt for layouten.

CURB- Magasinet ferdig resultat:

(trykk på bildet for å komme til nettsiden, eller trykk på linken under bildet)

CURBMAGASIN

 

Oblig 08

Briefe

VIKTIGE SPØRSMÅL:

Hva er det viktigste Design Faktorene?

* Balansering design komponenter av enkelhet
og kompleksitet.

* kontekst og mål, bør være nøye og tankefullt identifisert som et første skritt
i design

* Det er viktig at designeren lager en modul som er
lett å navigere, inkluderer nedlastinger raskt, og bare de mest grunnleggende
informasjon.

* Desigeneren skal være
umiddelbart klar hvis en hyperkobling tar ham eller henne utenfor designer nettsted.

Hva betyr Ordet interaktiv?

* Interaktiv er sammensatt av to ord; inter som betyr mellom/blandt og aktiv som betyr preget av en handling. En interaktiv nettside er en nettside som kommuniserer med brukeren, hvor brukeren selv kan sette i gang handling gjennom sine valg. De aller fleste nettsider inneholder noe form for interaksjon, navigasjonen på en side er interaktivitet. Ved å klikke på menyknappen kommer brukeren dit den vil på nettsiden.

* Mange sider gir brukeren muligheter til å gjøre noe mer. Man kan for eksempel starte en video, flytte en boks, svare på spørsmål eller spille et spill.

Hva er banner ?

* Banner er en slags annonse, og en form for reklame. Ønsker man å markedsføre seg på internett gjøres dette stort sett ved hjelp av bannere, for å tiltrekke seg flere besøkende og vekke interesse.

Hva er standard størrelser for banner?

* Visuell forklaring :

Standard størrelser som går igjen er leaderboard, skyscraper, square, button og vertical.

Og da tenker jeg hva som passer meg best, hvilket størrelser jeg har i lengde på Nettstedet mitt og hva som ikkje tar for stor plass. Det var ikke oppgitt hvilket størrelser vi skulle ha på banneret i oppgaven så da går jeg ut ifra at dette er valgfritt. Etter disse tankene vil jeg gå for Leaderboard 800 px (som er lengden på nettstedet mitt) x 90 px som er høyden på leadernoardet (Se illustrasjon over )

standard størrelse og dimensjoner for Skjerm ?

De fleste brukere, hele 85%, benytter en skjermstørrelse som er større enn 1024 x 768 pixler.

INSPIRASJON BANNER

Som du ser på Inspirasjons bildet mitt, har jeg funnet bilder som relaterer til disse stikkordene : Farger, malingsflekker, moderne,enkelt, lekent, spennende, aniamsjon, flash player, kreativitet og dynamisk. Noen av ordene jeg fant til disse bildene har jeg også skrevet under på tankekartet. Det er tydeligvis dette som inspirer meg til ett gjenisidig tema til både flash og gallery. Det som bekymrer meg er hvordan jeg skal kunne lage det. Jeg har komt opp med disse spørsmålene til meg selv:

Lage grafikken i Illustrator?
Lage i Photoshop og derette laste inn i flash, hvor jeg kan automatisk lage til symbol knapp/movieclip/graphic på alle valgte elementer før det blir lastet opp på siden eller i biblioteket ?
Skal jeg laste opp alle bildene i png og deretter formaterer det til graphic?

INSPIRASJON GALLERY

Her var det mye forskjelligt og veldig kreativt som inspirerte meg mye. Her ser vi mange ulike effekter og bildegallerier er tatt i bruk. En av de er Poloroid Galleriet hvor bildene liksom er er «slengt» på veggen som tilfeldig skaper et vakkert rot. På det interaktive Flash galleriet kunne jeg dobbeltklikke på hvilket som helst poloroids bilde og zoome inn. Jeg vil tro de har brukt prtSc visnings effekt.

Et annet beundringsverk er hvor de har intigrert bilder inn i typografien, dette gjør visningen spennendende og unikt. Det får meg lust til sjekke det mer ut for å se hva mer som ligger rundt hjørnet.

Karusellen er en annen interessant tilnærming for utstillingsvindu bilder hvor det har tatt i bruk en grei visningsmodus for det største fremvisningsbildet. Det er både Dynamisk og har en unik måte å presentere bildegalleriet på for brukerne.

Jeg liker også den lille visuelle effekten ved bruk av miniatyrbildene, hvor det er brukt et stort bilde i bakgrunnen.
Det jeg ikke har likt som jeg har sett noen har er hvor det er kun brukt ett stort bilde til fullskjerm modus visning. Dette gir lite inblikk i hva mer som finnes der, hvor mange bilder det er og det blir litt for enkelt rett og slett.

TANKEKART

Her har jeg skreve ned alt som jeg har kommet på, som Brain map med ord. Det hjelper meg i gang til ideer til skisse prosessen.
Jeg tok med Flash banneren, Gallery side 1 og gallery side 2 ned på samme ark for å både sammenligne , men også planlegge for at det skal bli en variasjon på hver side, men ha ett tema som relaterer til Passion for maling

SKISSE BANNER :

Jeg skisset ned etter stikkord og ideer jeg har fått ifra tankekartet og inspirasjonsbilder. Tema er som sagt rettet til lidenskapen maling. Jeg har prøvd meg frem med ulike varanter av animasjoner og hvilke effekter av symbol jeg vil bruke. Det var lett å skisse ner ettersom jeg hadde så mange ideer. Motion tween og classic tween har inspirert meg masse hvor muligheten er ganske stor og uendelig så dette tenkte jeg faktisk masse på underveis da jeg skisset. Jeg vil ha det enkel og ha en tydelig visuell fremvisning.

SKISSE GALLERI SIDE 1 :

Dette er siden som skal navigere deg videre til bildegalleriet. Så her har jeg vore bevisst på å ikke bruke noen bilder i frimerkeskissingen, men kun animasjon og typografi som vil bli endret til symboler. Jeg gleder meg til å jobbe videre med noen av disse skissene for å se hva det fører til.

SKISSE GALLERI SIDE 2

Dette vil være siden som presenterer bildegalleriet. Jeg har skisset ulike fremvisnigs moduser i ulike scalerte bilder. Hoved stikkordet var enkelt , med små effekter. Jeg tenkte også på hvor galleriet skulle «befinne» seg, om det var i et rom, på veggen, i en stue, i en boks med spotter, i en ramme eller liggende på ett bord.

PRESENTASJONSKISSE BANNER

Jeg tok meg tid til å lage presentasjons skisser, hvor jeg testet ut hvilket jeg ville gå videre med fra frimerkeskissingen til å jobbe vider med i flash. Jeg gikk ut ifra 2 som jeg ville teste ut til layout og design av banner oppgaven. Jeg gikk for den som står Finish på da denne ville presentere det enkle uten for mye på gang, men samtidig presenterer det moderne, en helhet og følelse for hva som vil ventes på Foto Galleriet.

UTPRØVING AV EN BANNER VARIANT:

Jeg tok i bruk 2 ulike layer, hvor ett var typografi og ett var element preget av color effekt som gradient som kom flygende inn bak typografien for å gjøre dette konverterte jeg elemtet til movie clip og lekte meg med det.

Men jeg ville lage den jeg bestemte meg for i presentasjon skissen (over)slik at jeg kunne sammenligne og slik ble resultatet steg for steg med
Motion tween og movie clip :

Jeg ble veldig fornøyd med denne, og denne ville jeg beholde. Den viser hva innholdet er og bærer preg av helhet og et moderne look som typografien. Den består av 83 frame delt på 23 Fps på totalt 4.1 S. Jeg har også benytte easing out for at det ikkje skal gå alt for fort når bildet beveger seg «ut» av banneren, og får å ikkje få for hard overgang til typografien kommer inn. Når motion tween var over opprettet jeg ett nytt layer og la inn keyframe og typograi som kommer på plass når bevegelsene var over. Jeg kopierte keyframen hvor bildet låg og la den inn etter motiontween , slik at den stod stille. Brukte også action scrift slik at animasjonen ikkje gjentok seg

ARBEIDSKISSER TIL SIDENE :

Dette er skisser som viser mer spesifikke detaljer på hva jeg kunne tenkt meg på hver enkelte scener. Det vil gi meg ett forsprang før jeg begynner i Flash å jobber. Istedenfor å komme til Flash og begynne å rote og tulle på hvilke effekter jeg vil bruke og ikke bruke. Selvsagt kan det komme endringer underveis. Men det gir meg vertfall full oversikt og innblikk til å begynne med .

ULIKE SCENER TIL INTRO SIDEN :

Viser til noen av scenene jeg begynte på før jeg faktisk havnet med den jeg ville ha. Disse er utvalgt ifra arbeidskissene og deretter jobbet videre med i Flash programmet. (se over )

De fleste scenene her er jobbet med movieclip- motion twenn, samt effekter som gradient, alpha, glow og easing out.

WIREFRAME

Her har jeg jobbet med Wireframe til begge sidene og la til banneren på denne også. Den viser hvordan jeg har planlagt det ferdige resultatet til hvordan sidene skal se ut. under viser jeg hvordan det ferdige reslutatet er på intro siden og gallery siden min.

Movieclip med motion tween, hvor elementer og tekst kommer flygende inn og skal illustere pensler.

Jeg er fornøyd med resultatet, da jeg har holdt meg innenfor alt som har med maling å gjør. Vi har elememnter med tekst som illustrerer pensler, vi har ett lekent Gallery tekst som også kan forestille ulike tykkelser fra malingsstrøk. Men hovedgrunnen er at det skal være lekent og kreativt som malings yrket er. Vi har også ett element bak typografien som representerer malingsflekk.

GALLERY SIDEN

Her har jeg lagt til flere action koder og knapper slik at det er flere valgmuligheter på hvordan brukeren vil at trykke seg frem til fremvisningsbildet. Vi har navigereingspiler som fungerer som frem og tilbake knapp, og også tilbake til Intro siden. I tilegg har vi miniatyr bilder som også fungerer som navigasjon til fremvisningsbildet . Har også brukt scroll over effekt med fade-alpha 50 prosent. Dette la jeg inn på symbol siden når jeg dobbeltklikket meg på miniatyr bildet fra hovedscenen.

Noen av kodene mine :

link til BANNER & FOTOGALLERI

Flash banner til fotogallery oblig 08