Her er mappeinnleveringen min. Har samlet alle de obligatoriske oppgavene, ukesaktivitetene og noen skisser fra dette studieåret. Har lagd en presentasjon der jeg har fokusert på at veldig mye av jobben har foregått i Adobe programmene på pcèn(derav en pc som illustrasjon), samtidig som jeg har et naturbilde på “skjermen” som skal vise til hvor jeg henter det meste av min inspirasjon.
MMD_Miniprosjekt_Line Ellingsen_RPRT01_10032011_001
Obligatorisk oppgave Miniprosjekt
Dette skulle i utgangspunktet være et samarbeidsprosjekt, men siden jeg er den eneste i klassen min, ble det en individuell oppgave. Jeg har så vidt sett et e-kort, så for meg ble dette en utfordring. Oppgaven var at jeg skulle lage et skjermbasert postkort med tema: ”Tegn i årstiden”. Presentasjonsteknikk og teknisk løsning var valgfritt, men kortet skulle være skjermbasert. Her kunne jeg ta i bruk gammel lærdom og garantert ville jeg være nødt til å lære nye ting.
Research
Det var bare å starte på scratch å finne ut hva et e-kort var, sjekke forskjellige nettsteder for å se på ulike løsninger. For å bidra til å definere problemet stilte jeg følgende spørsmål:
• Hvordan ser et e-kort ut?
• Hva er formålet med e-kortet?
• Hva er budskapet?
• Hvem er budskapet beregnet på (målgruppe)?
• Hva ønsker jeg at målgruppen skal få vite?
Under ideutviklingsprosessen brukte jeg tankekart.
E-kort:
Budskapet for kortet var at det skulle vise ”tegn i årstiden”. Målet ville være at det skulle være et kort som kunne sendes som e post. Målgruppen for kortet var familie, venner og bekjente. Målgruppen skulle få en hyggelig vinterhilsen. Kortet skulle bestå av to sider, ha minimum to bevegende elementer og minimum en interaktiv løsning. Jeg har lagt et kort med en for og en bakside..
Jeg valgte å ha et design der jeg mener å få vist flere tegn i årstiden. Bakgrunnen var en akvarell av et snø/fjell landskap. Det samme landskapet går igjen på side to for å binde det hele sammen. Kortet er en blanding av symmetri og assymetri fordi jeg synes det gir mer liv og samtidig orden.
Forsiden
På forsiden har jeg lagt inn en animasjon av en skiløper som kjører over scenen, dette fordi vinter og ski naturlig hører sammen(i hvert fall her nord). Animasjonen av snø som daler er med på å forsterke det vinterlige preget. Det hopper inn en vinterkledd hare i scenen. Jeg har lagt inn to lydfiler. Den ene er når skiløperen kommer og den andre er haren som kommer hoppende i snøen. Begge filene fades inn og ut samtidig som jeg har dempet lyden, jeg har også prøvd å synce lyden til hoppene til haren.Tilslutt har jeg lagd to knapper (interaksjoner ) Disse har jeg valgt å lage formet som store snøfnugg. På scenen ser knappen hvit ut, når du trykker på den blir sirkelen der skrifta/tegnet står på blå; denne fargen er hentet fra det blå i akvarell bakgrunnen igjen for å binde sammen. Når en trykker på knappen blir denne sirkelen sort(sort fordi den ikke trenger å være iøynefallende) og interaktiviteten skjer. Den ene knappen viser scenen med animasjonene engang til, men knappen” snu” lar oss se neste side, som er skrivesiden på kortet.
Baksiden:
Her er det lagt inn static tekst og felt for input tekst. Disse har jeg valgt å ha hvite for å illustrere fargen på vanlige papirkort; for å skape gjenkjennelse. Jeg har delt selve skrivedelen opp på en måte som en forbinder med vanlige postkort. Jeg valgte fonten Raavi, sans-seriff. Bruk av sans-seriff fordi W3C anbefaler å bruke sans-seriffskrift i tekster i skjermbaserte medier. Teksten er i sort for at det skal være lettlest. På denne siden er animasjonen en hare som hopper inn på scenen, den hopper inn bak skrivefeltet og kommer hoppende ut på andre siden av feltet og hopper ut på scenen, denne gjentar seg så lenge man har denne siden fremme, som om det kommer flere harer hoppende. Her hadde jeg tenkt å legge inn lyd der haren hopper, men fikk dette ikke til selv med hjelp fra veileder. Det som skjedde var at denne lyden kom inn på scene 1 også og vi greide ikke å finne ut av det(var det virus på fila? Eller var det noe i A.S som ble feil tro?). Synd egentlig for det fungerte bra på denne siden. Jeg har satt inn et snøfall også på denne siden for å få frem det vinterlige preget. Jeg har lagd en knapp her som det ikke ligger noen function bak. Siden vi ikke har lært hvordan en sender et slikt kort har jeg bare lagd knappen for at man skal se at man har ”sendt” kortet. Knappen er et bilde av et norsk frimerke(for å illustrere et vanlig frimerke på et vanlig postkort). Har laget ett rødt felt på knappen der teksten send står; for at det skal tydeliggjøre for brukeren at her er en knapp man må trykke på for å få sendt kortet. Denne siden har også fått en knapp for å snu kortet.Det er også laget input tekstfelt for navn og e-post adresser siden dette skal være et e-kort. Alle input tekstfelt har en left alignment, fordi det er vanlig på slik tekst.
Produksjon/teknisk løsning,
Adobe Flash: jeg brukte verktøyene her og tegnet inn de ulike elementene, jobbet med timeline for å få animasjon på de ulike figurene og A.S 3.0 for å lage interaktivitetene.
Adobe Photoshop: brukte jeg til å tilpasse, justere og manipulere fotoene som skulle inn.
Konklusjon:
Jeg har gjennom arbeidet med oppgaven fått lekt meg litt med både design, animasjon og interaktivitet og samtidig fokusere på oppgavens innhold for å komme frem til produktet. Jeg har fått mer kunnskap om både animasjon og interaktivitet samtidig som jeg har fått repetert andre felt ved design som vi har vært gjennom. Likte ikke helt at jeg ikke fikk bruke lyden av harehopp der jeg hadde tenkt, hadde vært fint å fått lære det. Morsomt å se at skjermbaserte medier kan brukes til mer en bare flashbanner og web-sider. Jeg ble jo som sagt alene om denne oppgaven, men jeg vil bare si at jeg ser verdien i det å ha noen å samarbeide med både av lærings, motivasjon, kreativitet og arbeidsfordelings – hensyn. Og at denne oppgaven sikkert har blitt helt annerledes dersom jeg hadde hatt noen å samarbeide med. I det store og hele syntes jeg dette var en lærerik oppgave.
Referanser:
http://en.wikipedia.org/wiki/E-card
http://www.digoo.info/internett/2010/12/Hva-er-E-kort.html
http://www.123greetings.com/
http://www.freesound.org/
http://www.findsounds.com/ISAPI/search.dll
Linker:
Her er e-kortet:
Dette skal i utgangspunktet være et samarbeidsprosjekt, men siden jeg er den eneste i klassen min, blir det en individuell oppgave.
Jeg har så vidt sett et e-kort, så for meg blir dette en utfordring. Oppgaven er at jeg skal lage et skjermbasert postkort med tema: ”Tegn i årstiden”. Presentasjonsteknikk og teknisk løsning er valgfritt, men kortet skal være skjermbasert.
Siden det er vinter her oppe i nord enda noen måneder velger jeg å ta utgangspunk i det. Masse forskjellige assosiasjoner flyr gjennom hodet mitt…ski, snø, kjelke, vinterklær, dyr i vinterpels, måke, snøballkrig, skispor, skøyteløper, fjell, istapper, vinterdikt, lyder osv.. Bare å la tankene jobbe litt så får vi se.
Har plagdes lenge nå med WordPress og Ftp serveren så mye tid har gått med der. Men her er Portofolien min.
Obligatorisk oppgave 09. Portofolie
Rapport
Jeg skulle designe min egen portofolie, som skulle represtentere meg som multimediadesigner i denne oppgaven. Jeg kunne selv velge programvare. Alt skulle tilslutt integreres i en HTML fil og lastes opp på ftp-serveren. Jeg valgte å jobbe i Adobe Flash. Jeg så at jeg fikk bruk for alt jeg hadde lært i forkant, og kom til å lære mye nytt gjennom arbeidet med denne oppgaven.
Research
Begynte som vanlig med research. For å bidra til å definere problemet stilte jeg følgende spørsmål:
• Hvordan ser andre portofolier ut?
• Hvilke format kan jeg bruke?
• Hva er formålet med portofolien?
• Hva er budskapet?
• Hvem er budskapet beregnet på (målgruppe)?
• Hva ønsker jeg at målgruppen skal få vite?
• Hva kan hindre at budskapet ikke når ut til målgruppen?
Jeg startet etter dette med å gjøre research(med de foregående spørsmålene i tankene) på internett.
Under ideutviklingsprosessen brukte jeg tankekart, noe jeg synes fungerer godt for meg. Jeg skulle vise arbeidene mine frem og tenkte da ut forskjellige ting, som kan representere meg som designer; eks. byggeklosser, labyrint, fange sommerfugler, karusell, skiltstativ,Skatte- kiste, flyvende ballonger, puslespill, brettspill osv. Det jeg tilslutt valgte var at puslespill skulle representere meg. Grunnen til det valget er at jeg ser designarbeid på en måte som mange små puslespillbiter, som må settes sammen for å få et design til å fungere. Samtidig som det å sette sammen et puslespill krever fantasi, orden, det kan være spennende, overraskende og det blir en helhet tilslutt. Puslespillbitene går igjen i knappene og i over-skriftene i de fire parentsidene, og i overskriftene i childsidene. I parentsidene er det en bit i overskriften som ligger løs; dette fordi jeg i childsidene, som jo er de ferdige oppgavene har valgt å ha hele puslespill teksten samlet for å vise at det er det ferdige produktet. Da jeg enda har mye igjen i studiet lar jeg den løse puslespillbiten stå for det som fortsatt skal læres og gjøres(parentsoverskriftene).I footeren har jeg prøvd å vise noen av metodene jeg har brukt for å designe.
Jeg har prøvd å være kritisk til valg av arbeider for å få en portofolie som inneholder variasjon. Portofolien skal vises på web. Målgruppen vil være de som er interessert i design og eventuelle kunder. Målet for portofolien er å få disse til å se på den.
Nettstedet er i denne oppgaven inndelt i 3 nivåer(4 parent sider med et nivå lenger ned(child) og et nivå lenger ned derfra(child nivå 2)). Det var viktig å navngi sidene der jeg hentyder til hva siden omhandler. Jeg lagde så en sitemap på FreeMind for å se hvordan mitt lille nettsted hang sammen, for å lette arbeidet med å lage navigasjonen. Jeg har en tab navigasjon(forklart og begrunnet under sidebar) på portofolien. Jeg lagde en wireframe som skulle hjelpe meg med å finne ut av: navigasjon, plassering av grafikk og bilder og lignende måtte jeg lage for å få en bedre oversikt og rutine. Jeg var nå klar for å tenke innhold og design. Jeg valgte å ha et design som er gjennomgående med faste plasser for de ulike elemenetene på de ulike nivåene, slik at brukeren kjenner seg igjen. Mer om layout under de ulike sidene. Interaktiviteten i portofolien er utarbeidet i Action Script 3.0.
Parent sidene 1-4
Selve sidene har en mellomgrå bakgrunn, for å ikke ta fokus fra selve siden. Jeg prøvde meg ut med mange forskjellige bakgrunner underveis, men har nå lært at det er best bakgrunnen er nøytral for fokuset sin del.
Header:
Her har jeg valgt en rolig rødfarge fordi resten av siden vil ha mye innhold. Jeg har brukt puslespillbiter med tekst inni som overskrift i en lys gråtone for å få en helhet sammen med den mellomgrå bakgrunnen. Har brukt Static text for da forandres ikke teksten i de ulike nettleserne, men blir på en måte som et bilde av teksten. Jeg har satt inn et bilde av noen som fotograferer på høyre side av headeren, men for at dette skulle gli inn uten å ta for mye oppmerksomhet valgte jeg og ha det på en opacity på 50%. Komposisjonen er assymetrisk noe som skaper liv. Den løse puslespillbiten med sin diagonale linje gir headeren dynamikk og et overraskelsesmoment. Kontraster i headeren vil være: det mørke mot det lyse (øyet dras mot det lyseste partiet i den mørke headeren) og krigen mellom 2 bildelementer( puslespill-overskriften med den løse biten og fotografen).
Sidebar:
Her befinner navigasjonsystemet seg, med knapper og linkede sider. Det navigasjonssystemet jeg syntes var mest hensiktsmessig å bruke siden jeg har bilder, tekst og ikoner, som er linket til andre sider enten på i selve portofolien eller andre sider på nettet kalles tab navigasjon og er en hyperlinket navigasjon. Bakgrunnen her er i en lys gråtone dette fordi jeg ville skape en rolig bakgrunn for puslespillbitene, som er et foto jeg har manipulert i Adobe Photoshop. Jeg prøvde ut forskjellige knapper, men syntes disse hadde mest sammenheng med temaet for designet og at de dermed var med på å skape helhet. Puslespillbitene har i den samme gråtonen som bakgrunnen for hele siden for å skape sammenheng i designet, og for å skille den litt ut fra den lysegrå bakgrunnen i sidebaren uten det blir for mye “støy”. Teksten inni puslespill-bitene er i den samme rødfargen(fungerer bra på den grå bakgrunnen) som i bakgrunnen av headeren, igjen for å skape helhet. Jeg valgte fonten Arial, helvetica, sans-seriff. Bruk av sans-seriff fordi W3C anbefaler å bruke sans-seriffskrift i tekster i skjermbaserte medier.
Innhold:
Lysgrå bakgrunn som jeg har hentet fra sidebar for å skape helhet. Jeg har sort font for at dette er det essensielle på siden og derfor må ha god kontrast og fungerer bra på den lysgrå bakgrunnen. Marginalinnstilling på teksten er venstrejustert fordi det er det som er mest vanlig å bruke på denne type tekst. På side 2-3 har jeg i tillegg lagt inn et galleri med foto av de øvelsene og oppgavene jeg vil vise. Disse er lagt på usynlige knapper som man kan trykke på(linket til andre sider her eller andre steder på nettet) for å få se oppgaven i stor størrelse og som flash. Komposisjonen på galleriet er symmetrisk; det skaper balanse og orden i og med at fotoene tar så mye fokus er så “urolige”. På side 4 har jeg linket tekst til Reflektert dagbok og Mitt enkle nettsted.
Footer:
Jeg ville også vise noen av metodene jeg bruker som designer, derfor har jeg lagd en footer som består av foto med fargeblyanter, en pc, collage m.m. for at dette skulle gli inn uten å ta for mye oppmerksomhet valgte jeg og ha det på en opacity på 50% som fotografen i headeren, dette også for å få en helhet i designet. Har valgt å ha samme rolige rødfarge som i headeren, for å binde sammen designet på siden. Footeren finner du på de fire parentsidene.
Child sidene:
Nivå 1 består av 17 sider (èn side for hvert av fotoene på side 2 og 3). Disse sidene har samme fargebruk, font og headerfont som parentsidene, men siden jeg skulle få plass til både litt tekst og et større foto her valgte jeg å lage layouten litt annerledes. Jeg mener at selv om den er litt forandret kan man se at det tilhører samme portofolie. Komposisjonen på sidene er sym-metrisk (axsial) utsnittet er plassert sentralt det skaper tiltalende balanse, orden, ro, harmoni og kraft,og gir full oppmerksomhet på fotoet, som skal være i fokus. Headeren er litt smalere i høyden, men lik parentsidene, bortsett fra at jeg har tatt bort fotografen for å få mest mulig ro. Valg av farge og font er begrunnet i avsnittene over. Jeg har delt siden med en rød strek for å markere skille mellom tekst og foto på en stilfull måte i og med at rødfargen går igjen i hele designet. Hver av disse sidene har en tilbakeknapp i samme rødfarge. Disse knappene går tilbake til parentsidende hører til.
Nivå 2 består av 8 sider der en får se en større del av den aktuelle oppgaven. Her går tilbake-knappen bare tilbake til siden på child nivå 1. Samme layout som nivå 1. På dette nivået har jeg også laget fem linker til andre nettsteder, disse åpnes i eget vindu.
Banner
Jeg har valgt å lage et banner til portofolien, dette har jeg integrert i en Html fil. Når en trykker på banneret blir man linket(usynlig knapp) videre til selve portofolien. Banneret er i den samme rødfargen som går igjen i Portofolien. Her er puslespilltemaet tatt i bruk da det er plassert masse biter i scenen. Jeg har brukt actionscript til å lage en classic tween der puslespillbitene blir dratt opp og satt sammen til en overskrift 
ortofolie.
Produksjon/teknisk løsning
Adobe Flash: her tok jeg i bruk mange av verktøyene for å lage symboler, Action Script 3.0 og animasjon.
Adobe Dreamweaver: integrerte alt arbeidet i en html med en css linket til
Adobe Photoshop: brukte jeg til å lage rett størrelse på fotoene som skulle inn og å manipulere foto.
Konklusjon:
Jeg har gjennom arbeidet med oppgaven fått en større forståelse for Flash, Action script og DW, hvor viktig det er for meg som designer å ha fokus på innhold, utvikling av designet, ta hensyn til oppgaveteksten og å prøve å tilpasse produktet ut fra det og de ideer jeg har. Jeg har fått kunnskap om bruk av ulike verktøy, animasjon, typografi og farger, har også fått grunnleggende kunnskap om scripting og koding for skjermbaserte medier. Mener å forstå det jeg gjør når jeg skal laste opp noe på serveren fra DW nå. Regner med at jeg får bruk for det jeg har lært i blant annet Mappeoppgaven.
Referanser:
http://en.wikipedia.org/wiki/Artist’s_portfolio
http://www.luminous-landscape.com/columns/portfolio-8.shtml
http://en.wikipedia.org/wiki/Electronic_portfolio
http://en.wikipedia.org/wiki/Web_banner
http://stopdesign.com/portfolio/
http://www.kstavnem.com/index/1;Hjem/
http://nle.no/en/history/history-2010/paer-baeckstrand/
Har i tillegg vært inne på veldig mange ”ressurssider” for hvordan å finne tekniske løsninger.
Jeg har valgt å lage et design som er en blanding av assymetrisk og symmetrisk design. Dette fordi brukerne av denne sida er unge og jeg vil at den skal appelere til dem som litt fresh og interresant samtidig som den skal være brukervennlig. Jeg har brukt farger i de ulike boksene som jeg har hentet fra headeren for å gi et gjennomgående design som igjen er med på å skape oversiktlighet og orden. Bildene jeg har valgt til hovedsiden skal gi de unge et bilde på det urbane og kunst som presenteres på nettstedet. Samtidig som også headeren er litt grov i utforming og viser det urbane. I upperbar har jeg med stor font tydelig vist hva de kan finne dersom de navigerer seg videre.
Jeg personlig synes at en nettside må være enkel å navigere, ryddig, rolig, informativ, samtidig som den må ha noen talende bilder/illustrasjoner.
Her finner du min løsning på denne oppgaven.
Her er et eksempel på en assymetrisk side:
Hadde en grafikk nesten ferdig som jeg hadde eksperimentert med til fotogalleriet. Valgte å gjøre den litt om slik at jeg kunne bruke den som peker til min reflekterte skoledagbok. Trykker du på bildet under kommer du til html sida der pekeren er.
Min første oppgave med lyd til. Morsom og lærerik. Ønsket meg en stopp motorlyd, men fant ingen som var gratis så jeg valgte å ta en bremselyd.
Trykk på bildet hvis du vil se og høre.
Trykk på banneret(over) hvis du vil se hele oppgaven
Her er forsiden. Det er lagt inn en interaktivitet her som transformerer noen av stjernene til ordet : Nordlys
Her er gallerisiden
Rapporten: MMD_08_Line Ellingsen_RPRT01_06122010_001
Litt morsom oppgave og fin for øvelse på å bruke verktøyene. Trykk på bildet så får du se bilen kjøre.
I denne oppgaven skulle jeg designe en klokke med pendel. Animere pendelen ved bruk av Classic Tween.
Jeg har tatt et foto av en naustvegg å brukt som bakgrunn på klokken fordi jeg ville at den skulle være litt annerledes. Har valgt sort på visere, ramme for at de skulle være mest mulig nøytral for å få ro i et ellers detaljert foto, pendelen har fått et utsnitt av fotoet i seg for å skape helhet, men ser nå at det kanskje blir litt urolig? 12 tallet kommer litt bort, dette ville jeg forbedret dersom jeg skulle jobbet videre med klokka. Ser klart læringsverdi i oppgaven for fremtidige animasjoner.
Her finner du løsningen på oppgaven.
