digitale papirdukker

Visuelles papirdukker PROSJEKTOPPGAVE I WEB- OG INFORMASJONSDESIGN ved Høgskolen i Telemark

”Digitale papirdukker”

av Ragnhild Furulund 2010

Innhold

INNLEDNING PROBLEMFORMULERING PROSJEKTBESKRIVELSE VISUELLE PAP IRDUKKER FØR OG NÅ INFORMASJON OM PRODUKT OG TJENESTE “DRAG AND DROP” INNHOLD OG STRUKTUR ESTETISK PROSESS OPPSUMMERING

Innledning Jeg har tidligere tegnet meg selv som en papirdukke i Illustrator, og har hatt et ønske om å videreutvikle dette som et prosjekt og produkt.

Jeg har et nettsted som heter Visuelle. Jeg velger i denne oppgaven å lage et nytt nettsted. Jeg ønsker at dette skal bli som et lite "spill", der man kan kle av og på oss i Visuelle.

Vi i Visuelle bærer også på en drøm om å designe klær i fremtiden, så kanskje dette kan være en start på dette prosjektet?

Problemformulering Hvordan kan jeg lage digitale papirdukker i Flash og presentere dem i et nettsted laget i DreamWeaver?

visuelle

portofolio

tjenester

kontakt

!

Prosjektbeskrivelse De digitale papirdukkene skal være et eget nettsted, men ligge som en link til Visuelles hjemmeside. Vi planlegger en endring av vår hjemmeside i nær framtid, så det kan hende den da blir innlemmet i den.

Papirdukkene er ment som en leken og humoristisk del av Visuelles profil. Jeg kan også se for meg at dette kan bli et bestillingsprodukt.

I arbeidet med denne oppgaven har jeg også hatt et ønske om å bli mer fortrolig med programmene DeramWeaver og Flash.

Visue

elle

:)

Visuelle ANS Visuelle ANS er et firma som har eksistert ett år nå.

Foretaket består av to ansvarlige; Hege Evensen og meg selv, Ragnhild Furulund.

Vi er begge lærere i videregående skole og har tatt videreutdanning innen digitale medier.

Foretaket startet med at vi fikk oppdrag av grafisk art, som plakater, logodesign og annet.

Visuelle er i stadig vekst og har brukt oppstartåret til å samle kunder og bygge opp en portfolio.

Ved siden av vår hjemmeside, har vi hver vår blogg der vi kun legger ut egne arbeider.

Bloggene virker som en samling av ideer, inspirasjon, skisser osv.

Visuelle er opptatt av at alt er selvlagd, til den minste detalj. www.hegesvisuelledesign.blogspot.com www.ragnhildsvisuelledesign.blogspot.com

visuelle

portofolio

tjenester

kontakt

!

Visuelle Vi ønsker å være i stadig utvikling og på jakt etter vårt eget uttrykk og formspråk. Vi har planer om å endre hjemmesiden vår. Vi ønsker da å gi den et lysere uttrykk.

Derfor er dette prosjektet med på å legge føringer for videre profilutvikling.

Visuelles Profil

Visuelle har en pallett som er fremtredende på hjemmesiden. Vi har brukt en farge på hver av undersidene fra palletten Uttrykket er rent og stramt og bærer preg av vektoriserte tegninger og former. Fargepalletten har til nå fungert som en kontrast til det sorte og grå.

Firmanavnet i logoen er en egentegnet font.

Logoen er lett og lys med den lyse, sjøgrønne fargen.

Symbolet er et øye. Dette står for det visuelle. Ordet vi i visuelle står sentralt i øyets sentrum; pupillen.

Målgruppe

Vi i visuelle ønsker at alle skal være i målgruppen dersom man trenger en grafisk tjeneste. Når det gjelder dette nettstedet med digitale papirdukker, er det trolig unge og voksne kvinner som vil vise interesse.

Papirdukker før og nå Papirdukker er et nostalgisk leketøy. Jeg husker selv at jeg fikk lov til å leke med papirdukker hos en gammel dame som het Helga. De ble tatt ned fra loftet når jeg kom. Godt brukt og litt slitt i brettene. Dukkene var nok fra 50-tallet.

Jeg kan også huske at jeg på 70-tallet fikk en papirdukke som var en baby. Pappa kom hjem fra London og jeg var den heldige eieren av en ny papirdukke. Den var litt mer avansert med orange plastikkbleie og trykknapper.

Papirdukkene ser ikke ut til å dø ut. De kommer stadig i nye varianter og er et økonomisk alternativ til mange andre leker. Mine egne barn på snart 7 og 9 leker gjerne med papirdukker.

Papirdukkene opp igjennom historien har for det meste vist et kvinneideal. De så vakre og veldreide ut. Likevel ganske uskyldig.

Det er mer problematisk med de digitale variantene. Det er mye betenkelig med denne genren av spill for unge jenter, der det er mye fokus på kropp og sex. I tillegg er det mye å kommentere i forhold til det estetiske. Fargebruken og tegneferdighetene er dårlige. Det er også andre ting jeg reagerer på. Virusvarselen kommer på, det er støyende musikk, du får krav om registrering og betaling og uønsket reklame.

IInformasjon om produkt og tjenesten På hjemmesiden vår har vi under utropstegnet ! listet opp ord som vi mener fremmer kreativiteten vår.

Dette er noe som opptar oss. Vi ser unge mennesker i daglige designprosesser, og vet hvor viktig det er å gi næring til disse ordene og gi dem liv og mening.

Papirdukkene kan være med på profilering av vår bedrift og vekke interesse for hva Visuelle er, hvem Visuelle er og hva vi gjør. Vi ønsker å vise brukerne våre at vi er allsidige. Vi ønsker å leke og er opptatt av hva som fremmer vår kreativitet.

r e f l e kt e r t humoristisk løsningsorientert vågal original motivert ydmyk initiativrik drømmende idérik iherdig begeistret undrende positiv leken følsom fleksibel e n g a s j er t nytenkende fantasifull n y s g j er ri g

Vi i Visuelle er opptatt av lek. En voksen form for lek.

En lek med former og farger. Vi arbeide med komposisjon, kontraster, linjer, overflater, gjentagelser, osv

lek

“Drag and drop” Jeg har etter en del søking på nettet, funnet en løsning på det tekniske i forhold til å bevege på elementer. Søkeordet var ”drag and drop”.

For å få til ”drag and drop”, må man åpne et nytt dokument med actionscript 2.0.

Elementene som skal flyttes må gjøres om til symboler. Symbolet må få betegnelsen movie clip.

Man høyreklikker på symbolet og velger Actions. Der skriver man inn koden.

Jeg har hatt et ønske om at plaggene skulle snappes på plass. Etter mye søking fant jeg ingen løsning, men jeg tror at man må legge til avstander i forhold til x og y aksen. Dette ønsket ble for mye i denne omgang.

on (press) { startDrag(this,false); } on(release){ stopDrag(); }

on (release) { getURL(“ file:///C:/Documents%20and%20Settings/ragfur/Skrivebord/prosjektoppgave/papirdukker/ragnhild.html”, “_blank”); }

Jeg ønsket å lage en fin knapp som skal kunne veksle mellom Hege og meg. Jeg lagde først en knapp i Flash, men så kom jeg på ideen med å bruke en knapp fra klærne.

Actionscript-koden på forige side er den jeg har brukt.

Jeg har prøvd å endre koden “_blank” for at det ikke skal åpne seg et nytt vindu hver gang man trykker på knappen. Jeg har prøvd de andre target ordene, men har ikke fått det til.

573 PC

809 PC

475 PC

152 PC

1797 PC

Deftone Stylus

Pantone og font

Jeg har lagd et favicon og er spent på om den vil vises når jeg laster opp filen. Jeg lastet ned filformatet ico og lagret et bilde i 16x16 pixler. <link rel=”shortcut

icon” href=”favicon.ico”/>

Innhold og struktur

Jeg har vært opptatt av at nettstedet skal ha en logisk navigasjon og at alt er godt lesbart, samtidig som det estetiske blir ivaretatt.

Jeg har brukt min datter på snart 9 år for å teste ut enkelheten og forutsigbarheten i navigering og funksjon. Jeg syns det her har vært fornuftig å bruke henne til å teste siden, selv om barn ikke alene er målgruppen her.

Det har vært en utfordring i koblingen mot Visuelles hjemmeside. Jeg har valgt å lage en knapp, helt til høyre, som en liten merkelapp med logo som leder direkte til Visuelles hjemmeside.

Jeg startet prosessen med å designe siden i Flash, men så fort at siden burde lages i Dreamweaver, og heller legge inn Flashfilene der.

Jeg har underveis i prosessen endret rekkefølge og antall sider. Man blir dessverre litt blind i en designprosess. Det har variert litt hvor mange sider nettstedet skulle ha. Nå er det en index-side som ønsker oss velkommen. Så er det en klessnor som kommer seilende med info om å trykke på navnene. En fugl flyr avgårde. Dette er for å skape litt dynamikk og interesse.

To papirdukker med deres garderober blir presentert. I tillegg en informasjonsside om hva dette er, mulighet for kontakt og en gratis gave.

Når det gjelder søkemotoroptimalisering, så har jeg hatt fokus på brukeren. Jeg har skrevet inn alternative tekster til blidene.

Jeg har hatt i tankene at brukerne ikke skal tenke. Selv om det er lite tekst på dette nettstedet, er teksten likevel viktig.

Her et det jo en funksjon i å leke, så for mye tekst for brukeren er ikke på sin plass. Samtidig som det uten tekst blir vanskelig å forstå. Fokuset i teksten er ”Visuelle” og ”lek”.

Jeg har hatt et ønske om å ikke måtte scrolle på sidene.

Dette varierer jo med størrelse på skjermene. Jeg har flere ganger i prosessen endret formatet fra 1024X768 til 900X500 til 1024X450.

Jeg har arbeidet med problematikken mellom på den ene siden ha lite å presentere og på den andre siden ville vise for mange effekter som f. eks. lyd, musikk, snakkende mennesker osv.

Estetisk prosess

Hovedfargen på siden landet tidlig på en lys pudderrosa.

Dette er en farge som står bra til Visuelles profil. Den er justert slik at hvit skrift blir lesbart. I forhold til Visuelles tidligere pallett, må rosafargen justeres. Fargeuttrykket er bestemt ut fra våre garderober med flere gamle kjoler. Jeg har arbeidet med en fargepallett. Erfaringsmessig er dette til stor hjelp for å få et helhetlig uttrykk og sammenheng.

Jeg startet med å ramme inn overskrifter i lyseblå bokser, siden jeg hadde dette på originaltegningen. Disse boksene fungerte ikke på web. De så litt ut som kantmerkinger og standardfarge for linker.

Jeg har prøvd å være konsekvent i forhold til farger og fonter.

I forhold til komposisjon, har jeg hatt et ønske om mye luft.

Jeg ble tidlig inspirert av Ekebergrestaurantens hjemmeside og ville prøve å få til liknende luftighet. Jeg valgte derfor hvit og ren stage i flashen.

Jeg har også hatt i tankene å arbeide med plassering i forhold til en F-komposisjon.

Jeg vurderte å endre litt på det rene vektor-uttrykket underveis i prosessen. Jeg prøvde å trekke inn litt foto. Etter en del testing, likte jeg godt å blande foto og tegning, men med tanke på at vi kanskje skal lage det for andre, så er det en fordel å tegne og få uttrykket til å bli likt. Det rene vektoruttrykket er litt av uttrykket og profilen til Visuelle også.

Jeg hadde lenge lyst til å få til en zooming inn på meg og mitt portrett der jeg kunne si noe. Jeg lagde en animasjon av papir-dukken i programmet CracyTalk, men vurderte det til at dette ble for mye. Jeg ville også få til at klærne på klessnora skulle bevege seg i vinden, men valgte å ikke bruke tiden på det.

Polkadot er et dekorelement som ofte går igjen i Visuelles arbeider og profil. Dette dekorelementet sammen med kjolene og fontvalget kan vise til en inspirasjon av 50-talls stil.

Oppsummering Dette har vært en morsom og intens prosess å være i. Gjennom arbeidet med dette prosjektet, har jeg fått til mye av det jeg ønsket meg, kanskje mer.

Oppgaven har gjort meg tryggere på programmene. Jeg ser nå lettere muligheter og løsninger.

Visuelle kommer til å ha glede av dette prosjektet, både teknisk og estetisk.

Prosjektet har gitt meg en prosess og et produkt. Da jeg sartet prosjektet, visste jeg ikke hvordan jeg skulle få det til og om jeg skulle klare det.

Resultatet ble “digitale papirdukker”

Pairdukken Hege og hennes garderobe

Pairdukken Ragnhild og hennes garderobe

Til inspirasjon: http://www.opdag.com/history.html http://kilden.forskningsradet.no/c17251/artikkel/vis.html?tid=36751 http://creaturecomforts.typepad.com/my_weblog/images/2007/11/27/paperdolls.jpg http://blog.paper-source.com/gifts/a-new-take-on-the-classic-paper-doll/ http://thelongthread.com/wp-content/uploads/2008/03/paper-dolls1.jpg http://2.bp.blogspot.com/_J8V6lK1WU24/SMwz4UFuQqI/AAAAAAAABKQ/Gxlh55nCR1E/s40 0/2008.09.08+Halloween+Paper+Doll-A.jpg http://papergirlpdx.files.wordpress.com/2010/02/paper-doll-parade-012.jpg http://farm3.static.flickr.com/2677/4383915408_d104038d06_o.jpg http://2.bp.blogspot.com/_SsI-DcXH9xQ/ShPs_PigqHI/AAAAAAAACXA/do0FFWm-b9o/s320/ paper-dolls.gif http://spaceinvaders.com.br/2008/06/04/paper-doll/ http://roseflash.ca/blog/wp-content/uploads/2010/02/blackapple.jpg http://stylelist.ae8.net/files/2010/02/wpid-i_paper-dolls-models-jessica-stam-jordan-dunn-gemmaward-erin-wasson-590sc022710.jpg http://blog.craftzine.com/Betsy_McCall_magnetic_dolls.jpg http://tpettit.best.vwh.net/dolls/pd_scans/betsy_mccall/index.html http://barn.sol.no/spill/player.asp?id=41 http://www.bengh.nl/ http://www.etsy.com/listing/20343905/hello-valentine-articulated-paper-doll teknisk hjelp: http://www.entheosweb.com/ http://www.entheosweb.com/Flash/video_tutorials/drag_and_drop_actionscript.asp http://movielibrary.lynda.com

prosess Her er alt laget i Flash

Her er flashen tatt med inn i DreamWeaver

fjernet de bl책 rammene

Meny-arbeid. Testet ogs책 ut med bilde i body

info i flash-filen. Merkelapp med logo.

gul knapp

noen klĂŚr med foto

Uttesting av infoside. Etter hvert la jeg inn en tabell. Da fikk jeg elementene til ĂĽ ligge der jeg ville.

index og velkomst

takk