Rapport obligatorisk oppgave 08 INTERACTIVE INFOGRAPHIC WEBSITE http://annes-portfolio.com/oblig

Obligatorisk oppgave 08 : Interactive Infographic Website Oppgaven gikk ut på å lage en hjemmeside som inneholder interaktiv infografikk som tar oss gjennom noen av stilepokene de siste 50 årene; Abstrakt Ekspresjonisme, Swiss Style, Popart og Psykedelisk. Vi skulle bruke et spesifikt objekt eller element for å visualisere denne reisen gjennom tid, hvor objektet skulle endre seg gjennom de forskjellige stilepokene. Vi skulle også ha med noe fakta om hver epoke. Jeg valgte å bruke en kortstokk når jeg skulle illustrere denne reisen, og endret designet på kortene for hver stilepoke. Jeg ønsket av brukeren av hjemmesiden skulle kunne snu kortene for å se både forsiden og baksiden av hvert kort, og at dette skulle være en interaksjon på hjemmesiden. Research og arbeidsprosess Oppgaveteksten inneholdt en anbefaling for hvordan vi kunne fordele arbeidet på de fire ukene som var satt av til oppgaven, og jeg valgte å følge denne til en viss grad. Uke 1: Planlegging og research. Jeg begynte med brainstorming for å finne frem til et produkt jeg ville bruke til infografikken, og hvordan jeg skulle presentere dette på en hjemmeside. Jeg gjorde søk på internett for å finne inspirasjon til infografikk, interaktive hjemmesider og fakta om de forskjellige stilretningene, og laget moodboards av bilder jeg fant på internett. Uke 2: Design; idé, konsept, skisser, wireframe, prototype. Her begynte jeg skisseprosessen etter at kortstokk var valgt som mitt objekt. Jeg begynte med anologe skisser av hvordan kortene skulle se ut, og hvordan jeg skulle presentere disse på hjemmesiden. Deretter fortsatte jeg skisseprosessen digitalt i Illustrator og Photoshop, hvor jeg utviklet designet på kortstokken, og etterhvert det ferdige resultatet av hvordan kortene skulle se ut. Vi kunne velge mellom to målgrupper for denne oppgaven; Studenter som studerer media og kommunikasjon eller en profesjonell gruppe klienter. Jeg valgte den siste gruppen, noe som legger til rette for en formell tone både for det visuelle og for teksten. Hjemmesiden må derfor være strukturert og oversiktilig med et enkelt, rent og profesjonelt design uten forstyrrende elementer og unødvendige detaljer. Hadde jeg valgt den andre målgruppen kunne jeg laget et mer lekent og fresht design. Uke 3: Utvikling av siden; bygge strukturen, kode, lage interaktivitet. Siden det er lenge siden jeg programmerte en hjemmeside trengte jeg en del oppfriskning på emnet. Jeg brukte en del tid på læringsvideoer hos Lynda.com og på å lese gjennom notater fra tidligere i studiet som omhandler html og css. Jeg laget også tegninger og wireframes av hvordan hjemmesiden skulle bygges opp, ved hjelp av Illustrator og Photoshop. Da jeg skulle lage selve hjemmesiden tok jeg først utgangspunkt i en template hos One. com (hvor jeg har et domene som jeg bruker i studiesammenheng). Dette var med på å friske opp litt kunnskaper om å bygge en hjemmeside, men var også ganske begrensend. Jeg gikk deretter over til å kode en side fra begynnelsen av i Dreamweaver for å få det designet og de funksjonene jeg ønsket. Når jeg først kom inn i programmeringen igjen var det bedre å jobbe i Dreamweaver enn i en template hos One.com. Jeg valgte en fixed hjemmeside da en har mer kontroll over designet på siden på denne måten; siden vises likt i alle nettlesere, uten at størrelsesforhold og annet endrer seg. Den interaktive biten var jeg først usikker på hvordan jeg skulle løse for å få noe mer enn klikkbare linker som førte til de forskjellige sidene. Jeg laget noen animasjoner av kortstokker som blir delt ut, men jeg fikk de kun til å virke ved at de åpnet seg i et nytt vindu (ikke på den eksisterende siden som jeg ønsket). Javascript har jeg ikke noen kunnskap om heller, så jeg holdt meg til html og css. Jeg fikk bygge opp strukturen til siden, og plassert tekstbokser og bilder der de skulle være i forhold til hverandre. Uke 4: Legge ut hjemmesiden på nett; siste finpuss, overføre til server, testing, evaluering, rapport. Den siste uken ble det gjort en del justeringer av både hjemmesiden og designet på kortene. Strukturen på siden forble den samme, så jeg endret bare på farger og bilder. Jeg fikk også lagt på interaktivitet ved at kortene snudde seg ved mouseover. 2 Rapport Interactive infographic website Interactive infographic website 3

4 Rapport Interactive infographic website Interactive infographic website 5 Psychedelic, bilder fra: www.sixtiesposters.com, Wes Wilson www.victormoscoso.com www.prismofthreads.blogspot, Wes Wilson http-_transpersonalspirit.wordpress.com, Moscoso www.postergeist.com www.victormoscoso.com Swiss Style, bilder fra: www.designhistory.com, Müller Brockmann www.lohse.ch, Richard Lohse www.jeromyj.com, Müller Brockmann www.designhistory.com, Hofmann www.designhistory.com, Müller Brockmann www.anasokolovic.hotglue.me, Müller Brockmann Popart, bilder fra: www.npr.org, Lichtenstein www.greynotgrey.com, James Rosenquist www.wikipedia.org, Andy Warhol www.thejessjournals.tumblr.com, James Rosenquist www.artyfactory.com, Lichtenstein www.askart.com, James Rosenquist Abstract Expressionism, bilder fra: www.arthistory.about.com, Kline www.spaightwoodgalleries.com, Gottlieb www.blog.pivotdesk.com, Pollock www.brainpickings.com, Pollock www.wikipaintings.org, De Kooning www.markrothko.org, Rothko Moodboards

Blyanskisser Brainstorming Skisser design 6 Rapport Interactive infographic website Interactive infographic website 7

Screenshots Skisser hjemmeside 8 Rapport Interactive infographic website Interactive infographic website 9

10 Rapport Interactive infographic website Interactive infographic website 11

Digital skisse i Photoshop Digital skisse i Photoshop 12 Rapport Interactive infographic website Interactive infographic website 13

Designvalg Kortene har fått design tilpasset de forskjellige stilepokene, hvor jeg har brukt typiske kjennetegn fra hver stilretning. Fargevalget mitt er hentet fra korstokken; rødt, hvitt og svart, og med innslag av grått på hjemmesiden. Abstrakt Ekspressjonisme Stilretning som oppstod i Amerika på 1940-tallet, også kalt Action Painting, American-style painting og Color field. Følelser er et viktig stikkord når det gjelder Abstrakt Ekspresjonisme. Kunsten innenfor denne stilretningen er subjektivt søkende, og det ble benyttet sterke og intense virkemidler for å få frem kunstnerens indre følelser og underbevisshet. Det finnes tydelige likhetstrekk fra både den europeiske ekspresjonismen, og også surrealisme. Typografi Jeg har brukt fonten CF Hounted House fordi denne er bygget opp av kjappe penselstrøk som jeg synes passer godt til designet. Swiss Style Stilretningen utviklet seg i Sveits på slutten av 1940-tallet og utover på 50-tallet. Swiss Style blir også kalt International Style og International Typographic Style. Typografi var nemlig en stor del av denne stilretningen, og sans serif skrifttyper som Akzidenz Grotesk (forgjengeren til Helvetica) og Geneva var mye brukt. Teksten var ofte venstrestillt med bølgende høyreside, og bruk av grid var svært viktig. Enkelt utrykk kjennetegner Swiss Style, samt sort-hvitt foto kombinert med tekst. Geometriske former og klare sterke farger er også typisk for denne stilretningen. Typografi Her har jeg brukt en av de mest kjente fontene fra Swiss Style, nemlig Helvetica. Denne gir assosiasjoner til stilretningen, og bokstavene på kortene (J, K, Q og A) er venstrejustert. CF Hounted House abcdefghijklmnopqrstuvwxyz A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1234567890 @ * # % & / ( ) =?!., - Helvetica abcdefghijklmnopqrstuvwxyzæøå A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å 1234567890 @ * # % & / ( ) =?!., - 14 Rapport Interactive infographic website Interactive infographic website 15

Popart Popart begynte på slutten av 1950-tallet, men hadde sin storhetstid på 60- og 70-tallet. Det som kjennetegner stilepoken er fokus på det anonyme, mekaniserte, masseproduserte bildet fra reklame, tegneserier og TV, og også bilder av kjente personer. Kunstnerne tok gjerne objekter ut av sitt opprinnelige miljø, og gjengav dem i utradisjonelle materialer og format. Et kjent eksempel på dette er Andy Warhols Campbell Soup bilder. Sterke og klare farger er typisk for perioden. Typografi Jeg valgte fonten Badaboom som jeg synes representerer Popart godt, da det er en font som gjerne er typisk for tegneserier og som vi ofte ser tilsvarende av i kunst fra denne perioden. Badaboom a b c d e f g h i j k l m n o p q r s t u v w x y z 1234567890 @ * # % & / ( ) =?!., - Psykedelisk Psykedelia oppstod i San Francisco i hippie-tiden på 60-tallet. Navnet på stilretningen kommer fra virkningen av de hallusigene narkotiske stoffene som var populære på denne tiden, og kunsten skulle fange og visualisere følelsen av å være høy. Kaleidoskopiske mønstre, spiraler, sterke farger og kontraster, optisk effekt av vibrerende linjer, tekst og bokstaver gjort nærmest uleselige og surrealistiske emner kjennetegner stilepoken. Jeg har valgt å bruke vibrerende linjer, kontrast mellom rødt, hvitt og sort, organisk deformert tekst. Typografi Her har jeg valgt fonten Bellybeans som minner meg om hippietiden hvor denne stilepoken oppstod. Bellybeans abcdefghijklmnopqrstuvwxyzæøå A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å 1234567890 @ * # % & / ( ) =?!., - 16 Rapport Interactive infographic website Interactive infographic website 17

Hjemmeside Designet på hjemmesiden har jeg holdt veldig stilrent og enkelt, hvor whitespace er viktig og illustrasjonene har hovedfokuset. Enkel og tydelig header med en liten twist ; spar-symbolet istendenfor O en i journey. Horisontal meny med mouseover og valgt effekt (skifter farge), og en enkel horisontal rekke med illustrasjoner under. Fakta-delen kommer rett under bildene. Bakgrunnsfargen er en dempet lys grå som er lik på hele siden for å samle den til en helhet. Illustrasjonsbildene på undersidene har mouseover-effekt med at kortet snus når en holder musepilen over. Alt innhold har en margin på 40px fra venstre for å oppnå en bra komposisjon. Farger Fargene på hjemmesiden er hovedsaklig grått og sort for å danne en nøytral bakgrunn for infografikken. Fargen rødt og hvitt er i tillegg representert i illustrasjonene for en fin kontrast. Typografi Jeg har valgt enkel og tydelig typografi, med Arial til overskrifter, og Verdana til brødtekst. Arial abcdefghijklmnopqrstuvwxyzæøå A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å 1234567890 @ * # % & / ( ) =?!., - Verdana abcdefghijklmnopqrstuvwxyzæøå A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å 1234567890 @ * # % & / ( ) =?!., - 18 Rapport Interactive infographic website Interactive infographic website 19

Egenevaluering, Utvikling og Prosess Det å jobbe med webdesign igjen når det er nesten ett år siden sist var en utfordring. Jeg måtte gå gjennom og friske opp kunnskapene grundig, både ved hjelp av Lynda-videoer og notater jeg har gjort tidligere. Først var det veldig skremmende å skulle begynne å programmere igjen, men når jeg først kom i gang kom mye kunnskap fort tilbake. Jeg er fornøyd med resultatet, men når det gjelder responsiv design så kan jeg ikke nok om dette. Skulle jeg gjort denne oppgaven bedre hadde jeg kanskje valgt å bruke en forholdsvis tom Wordpress template hvor alt må kodes, men hvor det er lagt inn koder for responsiv design. Jeg hadde godt av å friske opp disse kunnskapene, og det var kjekt å gjøre programmering igjen. Tiden har jeg disponert bra, men jeg har brukt noe mer tid på designet enn det som er foreslått i oppgaveteksten. Dermed begynte programmering litt sent, og jeg har hatt circa en uke på dette. Kildehenvisninger og referanser Lynda-videoer: Infographics: Planning and Wireframing, with Shane Snow Html Essential Training CSS Fundamentals Designing websites from Photoshop to Dreamweaver Websider: Fakta om Abstract Expressionism http://snl.no/abstrakt_ekspresjonisme https://www.moma.org/collection/details.php?theme_id=10051 http://www.metmuseum.org/toah/hd/abex/hd_abex.htm http://www.nettkringkasting.no/~hanne/abstrakt_ekspresjonisme.html Fakta om Swiss Style http://www.designishistory.com/home/swiss/ http://swissgraphicdesign.blogspot.no/ http://smearedblackink.com/swiss_style_timeline/ Fakta om Popart http://snl.no/popkunst http://www.artyfactory.com/art_appreciation/art_movements/pop_art.htm http://arthistory.about.com/od/modernarthistory/a/pop-art-art-history- 101-Basics.htm Fakta om Psychedelic http://gds.parkland.edu/gds/!lectures/history/1960/psychedelia.html http://www.arthistory.net/artstyles/psychedelicart/psychedelicart1.html http://www.slideshare.net/arishachannah/psychedelic-art-movement http://annes-portfolio.com/oblig Inspirasjon, infografikk http://www.creativebloq.com/infographic/8-pro-tips-creating-interactive-infographics-11133560 http://www.coolinfographics.com/ http://neomam.com/interactive/13reasons/ (en artig sak om infografikk) http://awesome.good.is.s3.amazonaws.com/transparency/web/1204/yourdaily-dose-of-water/flash.html 20 Rapport Interactive infographic website Interactive infographic website 21

Endringer Kortene ligger nå med bildesiden opp og snues til baksiden når en fører musepilen over istedenfor omvendt. Jeg har også forsøkt litt forskjellig med tekst-feltet, og endte opp med alternativ 3: Alt. 1 Alt. 3 Alt. 2 Alt. 4 22 Rapport Interactive infographic website Interactive infographic website 23