WEBP

Da var det eksamenstid og første uke av eksamen!

Eksamensoppgaven gikk ut på å lage en webside for en firma eller en organisasjon som vi selv kunne velge. Siden skulle være stylet med CSS.

Jeg valgte å lage en side for et for et firma som heter Asdal Trading.
Dette er et godt innarbeidet firma som leverer en rekke produkter og tjenester til båt -og byggebransjen.
Bedriften holder til på Asdal, Bjorbekk i Arendal kommune og har 2 ansatte.

________________________________

 

UKE 1

Uke 1 startet med besøk hos kunden.

Vi diskuterte hva slags ønsker de hadde angående den nye websiden.

Før jeg dro til kunden laget jeg noen spørsmål som jeg tok med,
for å kartlegge hvordan de ønsket at websiden deres skulle være og hva den skulle inneholde.

Mine spørsmål:

• Hva slags nettside ønsker dere?
  Mest tekst eller mest bilder? Hvor mange sider/mapper?
  Kunden:
  Ca like mye bilder og tekst. Bilder av produkter m/tilhørende tekst.
  Ikke helt sikker på sider/mapper, må bare se etterhvert når jeg lager
  en skisse over websiden.
• Utseende
  Hvilke farger ønsker dere? Har dere logo eller profilhåndbok fra før?
  Kunden:
  Ønsker fargene sort, marineblå, sølvgrå/grå og hvit.
  Har logo og Profilhåndbok.
• Funksjoner
  Spesielle funksjoner? Skal nettsiden inneholde kontakt -eller bestillingsskjema,
  apper f eks facebook, twitter o.l., linker til andre sider osv.
  Kunden:
  Trenger ikke skjema, bare kontaktinfo. Er ikke på Facebook.
• Konkurrenter
  Hvem er konkurrentene deres og hvordan er deres websider?
  Vil dere skille dere ut eller ligne på eksisterende sider?
  Kunden:
  Konkurrentene er de som selger båtutstyr og vedlikeholdsprodukter
  til båt. Greie websider, vil ikke skille seg så veldig ut fra disse.
• Budskap
  Hva skal nettsiden formidle, slagord, motto
  Kunden:
  Trygghet, gode båtkunnskaper, lang erfaring, kort leveringstid.
• Målgruppe
  Hvem er målgruppen deres? Hvem vil dere skal besøke siden?
  Kunden:
  Målgruppen er alle som driver med båt, både privatpersoner og bedrifter.
  Alle som trenger produkter til båt kan kontakte oss.
• Ønsker ikke
  Hva ønsker dere ikke på nettsiden deres?
  Kunden:
  Ønsker ikke slide-funksjon med bilder, flash eller video.
• Budsjett
  Hvor stort er budsjettet/hvor mye vil dere bruke?
  Kunden:
  Spiller ikke så mye rolle, trenger en ny webside.
• Kontaktperson
  Hvem er ansvarlig for nettsiden ang vedlikehold/oppdateringer o.l.
  Kunden:
  De ønsket at jeg skulle være ansvarlig for websiden deres.

Etter kundebesøket laget jeg meg et lite tankekart over informasjonen jeg
hadde fått og ting som kjennertegner bedriften

For å få litt inspirasjon  søkte jeg på nettet etter andre bedrifter som selger båtutstyr.

Jeg laget et moodboard:

På hjemmesidene jeg fant, går blåfargen igjen på de fleste og gir et inntrykk
av livet på sjøen.

Deretter laget jeg et sitemap/en oversikt over hva som skulle være med på websiden:

UKE 2

Uken startet med å se på wireframes.
Jeg laget 2 forskjellige forslag, etter innspill fra kunden på forrige kundemøte.

De ble slik som dette:

Wireframe til undermappene:

Uke 3

Jeg laget et fargekart etter de fargene kunden ville ha:

Tema

Så var det å finne et tema til websiden.

Jeg valgte å bruke en side fra WordPress og lastet opp WordPress på min egen server.
Jeg valgte temaet «Twenty Twelve» som utgangspunkt for websiden de ønsket. Jeg har fått oversikt over all tekst som skal inn på websiden og jeg har også vært og tatt noen bilder som skal brukes på siden.

Jeg brukte Dreamweaver til å generere CSS-kodene og til å gjøre om på siden slik at den er nå helt totalt forskjellig fra det opprinnelige temaet og tilpasset slik kunden ønsket å ha den. Jeg har også brukt “inspiser element”  i Google Chrome, det er mye enklere synes jeg, da en hele tiden ser hvor en er hen.

UKE 4

Denne uken har gått med til å redigere CCS-koder og til å legge inn all tekst og bilder.
Toppbildet til websiden laget jeg i Photoshop:

Kunden ønsket å ha et båt-tau på siden sin, så jeg fant et tau som jeg tok bilde  av og satt det inn på bildet jeg laget.
De ønsket å ha bildet i fargen sort, med logo i sølv, produkter til Båt & Bygg måtte også være med, og adressen.

Jeg begynte med en sort bakgrunn. Så satt jeg på tauet. Så la jeg på et bilde jeg har tatt av et vann, så viser at websiden dreier seg om noe som har med vann og sjø å gjøre.

Vi ble enige om å ha logoen deres, adressen og resten av teksten i fargen sølvgrå, det ville bli pent, siden vi skulle ha sort bakgrunn.

UKE 5

Da er det siste uke med eksamen og uka har gått med til å klargjøre siden, rette litt på noen småting fra kunden og lagt til litt mer tekst og bilder. Jeg har også fått renskrevet rapporten min, som jeg har skrevet på hver uke.
Jeg synes resultatet ble veldig bra til slutt, og det synes kunden også!

 

Screenshot av den ferdige siden deres:

Bedriften har allerede en webside, så den nye siden deres ligger på min server.

 

Link til websiden deres:

http://elisabethhaugen.com/asdal/

WEBM

WEBM gikk ut på å presentere innleveringsoppgavene våre fra 2. semester på   en nettside..

Oppgavene var:

• Assignment 05 – Simple Website
• Assignment 06 – Photo Essay
• Assignment 07 – Branding and Packaging

Vi kunne også legge til læreaktiviteter og skisser på websiden.

Tema

Jeg begynte med å laste opp WordPress.
Jeg bestemte meg for å ta utgangspunkt i temaet «Twenty eleven» og laget et child theme til denne. Jeg hadde nettleseren Chrome som jeg brukte, synes den er litt lettere å jobbe i mht til Firefox. Jeg har endret hele oppsettet av siden, så ingenting er likt den originale.
Jeg brukte Dreamweaver og jeg måtte laste ned Filzilla. Disse brukte jeg til å endre på tekstfonter, størrelser, farger, størrelse på bokser o.l. Jeg brukte Chrome til å legge inn all tekst og alle bildene.
Link til siden min:

elisabeth.artprofil.org/

Endringer – Obligatorisk oppgave 07

Etter å ha fått tilbakemelding på oppgaven måtte jeg rette opp i litt forskjellig ting.

For det første måtte jeg finne en annen teksttype (font) til logo´n min. Det var visst ikke så bra å ha en som var håndskrevet.. Satt temmelig lenge før jeg fant denne her:

Ny brosjyre:

Ny emballasje:

Uke 4 – Obligatorisk oppgave 07

Point of Sale

Denne uka skal vi se på hva «Point of Sale» elementer er og hvordan en oppretter dem. Disse elementene bør utfylle varemerket som helhet, presentere produktene på en fristende måte og til slutt oppfordre kunder til å kjøpe produktene. Til slutt hvordan presentere våre konsepter og design til klienten på en profesjonell måte.

Vi skal:
– Forstå hva touchpoints er
– Anerkjenne verdien av «Point of Sale» elementer
– Tillate ulike elementer for å fungere sømløst sammen for å danne en merkevare
– Skape innovative «Point of Sale» elementer
– Presentere arbeidet til klienten på en profesjonell måte

Uke 3 – Obligatorisk oppgave 07

Learning Activity – Packaging

I denne ukas oppgave skal vi bruke logoen fra uke 1 og brosjyren fra uke 2 og designe en innpakning til vårt produkt. Vi kunne selv bestemme detaljene, om det skulle være hundekjeks, kjøttprodukter i en bolle, tørre pellets eller et nytt og spennende produkt.

Vi skulle bruke følgende trinn:

1. Exploration
   Lage skisser av forskjellige design til innpakningen.
2. Brand integration
   Velge en av tegningene på skissen og jobbe videre med. Sett den ved siden av brosjeren og logoen og se hvordan de kan passe sammen og hvilke ting en kan bruke fra disse til å lage innpakningen.
3. Design
   Gjør ferdig designet, kan bruke Photoshop, InDesign og Illustrator eller en kombinasjon.
4. Presentation
   Lag innpakningen m/design i full størrelse og ta bilder av den. Vi kan ta flere bilder for å vise forskjellige vinkler og sider av innpakningen. Presentasjonen er viktig. Hvordan presentere det ferdige produktet så det reflekterer essensen i designet vårt.

Jeg begynte med litt research og laget et Moodboard for å få litt idéer til mitt design.

1. Exploration
Så skulle vi lage skisser av forskjellige design til innpakningen av hundefóret.
Dette er skissen jeg laget:

2. Brand integration
Så skulle vi velge en av tegningene på skissen og jobbe videre med den. Etterhvert som jeg tegnet fant jeg ut at jeg ville lage en sekk med pelletsfór. Vi må bruke logoen og brosjyren vi laget så det passer sammen med designet på innpakningen.
Jeg valgte å jobbe videre med denne:

Og slik ble den etterhvert….

 

3. Design
Så skulle vi gjøre ferdig designet. Jeg brukte både Photoshop, InDesign og Illustrator til å lage designet.

Jeg har jo hund selv, så bildet av hundefóret på innpakningen har jeg tatt selv. Jeg synes det er viktig å ha bilde av hundefóret på utsiden av pakningen så en vet hvordan det ser ut og om det passer til din hund.

Etterhvert som jeg laget designet synes jeg ikke det ble noe bra, så arbeidet litt videre med det.
Jeg valgte også å kutte bort «Bites» fra logoen, bare ha navnet «Happy». Det hørtes mye bedre ut.
Og slik ble resultatet til slutt:

 

4. Presentation
Så skulle vi lage innpakningen med designen på og ta bilder av den og slik ble resultatet!

Jeg laget 3 forskjellige typer av fóret, et til liten hund, et til mellomstor og et til stor hund. De heter Mini, Medium og Maxi og navnet er skrevet i forskjellige farger for å skille dem fra hverandre.

Uke 2 – Obligatorisk oppgave 07

Illustration, Infographic and Brochure

Vi skal bruke logoen vi laget i uke 1 og designe en brosjyre for vårt produkt. Brosjyren må inneholde et Infographic (informasjonsbilde) som vi skal lage.

1. Illustrasjon av Infographic
Designet av brosjyren og Infographic-illustrasjonen bør passe sammen. Illustrere en Infographic ved hjelp av fiktive data. Infographic-illustrasjonen må vise næringsrike fordeler ved bruk av produktet. Det bør inneholde den ernæringsmessige verdien, i forhold til det nødvendige næringsinntaket hos hunder. Det må også gi en indikasjon på forbruk ang hundens størrelse. Vi kan også legge til informasjon som vi synes er relevant.

2. Design av brosjyren
Lage en brosjyre som introduserer produktet og inkluderer Infographic-bildet. Vi kan selv bestemme informasjonen og formatet av brosjyren. Bør bruke en brosjyre A4 (liggende), folding til A5 (stående). Trenger ikke å ha mer enn fire sider i brosjyren (men det avhenger av design og stil). Basere brosjyredesignet på utformingen av logoen.

________________________________________________________________

På emballasjen tenkte jeg å lage et bilde av en hund, så folk som ser produktet vet hva slags dyr det er til. Det ble noen skisser etterhvert, men den jeg likte best var den hunden som er størst på bildet under. Jeg ville illustrere hunden som en litt sånn tegneseriefigur.

Jeg laget litt skisser og så hentet jeg tegningen inn som en mal i Illustrator, og tegnet konturene til hunden min med litt småjusteringer!
Slik ble den til slutt:

Slik ble brosjyren min:

Slik ble brosjyren min, ferdig printet og satt sammen:

Uke 1 – Obligatorisk oppgave 07

Branding and Packaging

Utlevering av obligatorisk oppgave 07 – Branding and Packaging. Denne ukas læringsoppgave er første oppgave i oblig 07, som går over 4 uker. Neste uke blir det en ny oppgave. Alle oppgavene skal legges ut her etterhvert og utgjør en samlet oppgave til slutt som inneholder alle 4 ukesoppgavene.

Den første ukesoppgaven går ut på å:
UTVIKLE ET NAVN OG EN LOGO FOR HUNDEMAT

Sjekkliste:
1. Exploration:
Lag skisser med forslag til symbol til logoen. Skal leveres som skannede pdf-filer.
2. Focus:
Fremhev 3 forslag som du mener er de beste alternativene. Levere inn et A4-ark med grafikken til de 3 utvalgte symbolene, inkl. hvilke grunner en har til å velge hver av disse alternativene.
3. Construction:
Lag skisse og tegn en av de utvalgte alternativene og utarbeid den så den blir en vellykket logo. Levere inn tegningen som en skannet pdf-fil.
4. Testing:
Eksprimentér mer med dine favoritt alternativer fra punkt 3 og spør noen personer om deres mening. Levere inn eksempler som er vist til folk og skrive deres tilbakemeldinger eller mening på hvert punkt.
5. Refinement:
Velg den endelige utformingen og lag den i Adobe Illustrator, sammen med navnet på produktet. Levere inn den endelige logoen som en A4-pdf.

UKESOPPGAVE 1

Jeg har selv hund, en dvergdachs på 1 år. Jeg har også hatt hund i 5 år før det, så jeg kjenner til en del merker på hundefór og er stadig på jakt etter bedre og mer spennende fór til hunden min. Han fortjener jo bare det beste!

Hunden min heter «Happy» og jeg har bestemt meg for at det nye hundefóret mitt skal hete «Happy Bite«.
Navnet på hundefóret bør være noe man kan kjenne igjen hos en hund og «Happy»beskriver en gla og leken hund hvis han får dette fóret. Navnet «Bite»» fordi det er noe å bite i for hunden. «Happy Bite» = En go´bit til hunden din»! Ofte brukte navn på fórtyper kan en se på Moodboardet jeg har laget under.  Jeg gjorde litt research på internett og fant disse forskjellige logoene som skal være med på å inspirere meg når jeg skal lage min egen logo.

Ofte er det bilde av hunderasen på fórsekken så en vet hvilket fór man skal ha til sin hund. Til min hund bruker jeg Eukanuba». Det anbefalte hun jeg kjøpte hunden av også, og hun har god erfaring, så da regner jeg med at det er et godt fór. Hvis en studerer alle fórmerkene og ser hva de har til felles så finnes hundepoten, hundesiluetter eller et hundehode i de fleste logoene og de fleste innholder både et symbol og typografi (navnet). På noen logoer kan man se at det dreier seg om hundefór mens andre må man se på symbolet for å vite at det er et hundefór. Når det gjelder farger som er brukt synes jeg de fleste farger er brukt.

1. Exploration:
Lage skisser med forslag til symbol.

Dette er skissene jeg laget. Dette er ting jeg forbinder med en hund, og som viser forskjellige utforminger av en hundepote, forskjellige varianter av kjøttbein, noen hundeansikt og en matskål.

 

2. Focus:
Vi skulle utheve de 3 symbolene og det er de jeg har satt ring rundt som jeg likte jeg best.
Jeg ønsket å ikke ha et hundehode eller en siluett av en hund, for det synes veldig mange fórtyper har. Siden fóret skal hete «Happy» ville jeg det skulle symbolisere det å være gla, så derfor synes jeg symbolet skulle inneholde et smil.

Den første jeg har satt ring rundt viser en pote der den ene delen av poten er formet som et smil. Hjertepoten fordi den symboliserer kjærlighet og lykke og dvs å være glad. Og hundebeinet, som er formet som et smil. Ingen av disse symbolene har jeg sett i noen andre logoer, ihvertfal, så derfor blir de litt originale og egner seg derfor som en ny logo.

3. Construction
Jeg laget en skisse og tegnet de utvalgte symbolene i litt forskjellige varianter.
Jeg likte alternativ nr.2 best, en smilende munn som symboliserer «Happy» og potesporene til hunden. Veldig enkel slik en logo skal være.

4. Testing
Eksprimentér mer med dine favoritt alternativer fra punkt 3 og spør noen personer om deres mening.

1. person: Jeg likte best nr.1 og nr.2. Med den smilende munnen. Ikke hjerter og ikke kjøttbein.

2 person:   Jeg likte best de som ser ut som poter. Men ikke med hjerter. En av de tre øverste.

3 person:    Jeg likte best de med hjerter på. Hjerte symboliserer jo glad.

4 person:   Det må være et smil der, siden foret skal hete «Happy». Så en av de tre øverste…den i midten tror jeg, med runde hundepoter.

5 person:    Likte de øverste best, passet best til navnet. Ikke de med hundebein, for det er jo fór og ikke tyggebein til hunden.

Flertallet synes symbolet med den smilende munnen passet best med hensyn til det navnet jeg hadde valgt, så jeg utarbeidet noen forslag til hvordan jeg ville lage logoen min i Illustrator.

Nr. 1 synes jeg ikke ble noe bra, så mer ut som flammer, kjøttbeinet er litt kjedelig… Nr. 7 var ikke noe fin og nr.8 likte jeg ikke så godt heller ang klørne, hadde ikke lyst til å bruke hjertene heller, ville ha en ordentlig gla smilemunn! Så valget sto egentlig mellom nr.5 og nr.6..
Fikk ikke helt bestemt meg på hvor stor jeg ville lage smilemunnen, så jeg får eksprimentere litt med begge alternativene i Illustrator og se hvilken som egner seg best.

Her er noen forslag til tekstfonter som jeg synes kunne passe sammen med symbolet.

Jeg ønsket å ha en litt leken font, da den skal reflektere til navnet «Happy». Det må være en «gla» font som symboliserer en gla og fornøyd hund!
Valget falt til slutt på fonten «Noteworthy» fordi det er en ryddig og grei tekstfont, samtidig som den er lett å lese og er ikke så høytidlig, men heller litt leken og morsom.

Slik ble tekstfonten og symbolet mitt etter å ha eksprimentert litt med forskjellige farger og sammensetninger…

 

Jeg fant ut at jeg ville forkorte logoen min til bare «Happy». Kort og greit! Synes også det fungerte litt bedre som et navn på et hundefór. Og jeg endret teksten til store bokstaver.

Web Design

De neste ukene skal vi lære om servere og betydningen av hosting nettsteder med profesjonelle hosting selskaper. Drøfte komplekse begreper som HTML, IP-adresser og FTP programmer. Vi skal også lære å lage logiske filstrukturer for nettsteder.

Vite:

• Forklare hva webutvikling er i sin mest forenklede form
• Vis en grunnleggende forståelse av HTML
• Forstå funksjonen av servere og hosting selskaper
• Forstå hvordan nettstedet adresser og IP tallene
• Bruke et FTP-program
• Opprett en logisk fil og mappe struktur for nettstedet ditt

Foto Essay

Oblig. innlevering:

Et Foto-essay en fotoserie hvor bildene forteller en historie. Bildene trenger ikke å bli presentert i en bestemt rekkefølge.

Vi skal portrettere en person og vi står fritt til å velge hvem. Vi skal bruke speilreflekskamera, Photoshop og event. fotostudio. Foto-essayet skal bestå av 6 bilder + 1 i sort/hvitt av et objekt som er nært knyttet til den personen vi portretterer. Dette bildet vil bli brukt som «cover» og er derfor i tillegg til de seks bildene i foto-essayet, valgfritt med tekst.

Krav til foto-serien er at et av bildene skal ha naturlig lys, og de ​​resterende fem bildene er valgfrie (kunstig eller naturlig lys). Bildene kan redigeres i Photoshop. Foto-essayet skal til slutt presenteres i en pdf.

VALG AV TEMA:
Jeg valgte å portrettere min datter Renate på 10 år.
Anledningen har jeg kalt: Renate og «Kosen» i badeland, som viser hun og bamsen hennes gjennom en hel dag fra vi reiser hjemmefra på vei til badeland og helt til hun og bamsen legger seg for kvelden.

Her er det ferdige resultatet:
Dmk1_ GRA106_Assignment 06_ Photo Essay_ElisabethHaugen_28.02.13

Lyssetting og valører

Målet med denne oppgaven er praktisk erfare bevisst utnyttelse av lys og lyssetting i egne bilder, for å få frem formen i objektet.
Vi skulle lyssette og ta bilder av en ballong i et enkelt hjemmestudio. Vi skulle så jobbe med valørene i bildet. Valører er ulike nyanser og toner i fargen fra det helt lyse til det helt mørke. Vi skal velge om bildet skal være high-key eller low-key valør/farge. I tillegg til høy eller lav kontrast i valørene.

Dette er et eksempel på kontraster og high-key/low-key som sto i oppgaven:

Som lyssetting på ballongbildene brukte jeg en reflektor som jeg laget av en plate med aluminiumsfolie og i tillegg brukte jeg en spot-light lampe. På bildene brukte jeg både high-key og low-key innstillinger, med både høy og lav kontrast. Bakgrunnen er et sort fløyelsteppe på det ene bildet og på det andre.