Rapport oblig-08 Interactive infographics Innledning Oppgaven var å designe en nettside som skulle vise fram fire ulike design stiler. De fire forskjellige stilene skulle vises fram på et produkt eller plakat som hjalp med å definere hva de forskjellige stilene sto for. Nettsiden skulle være interaktiv. I denne rapporten forteller jeg om både prosessen og resultatet. Tolkning av oppgaven Nettsiden var den viktigste delen av oppgaven. Nettsiden skal være interaktiv og inspirerende. Samtidig skal man kunne lære om fire forakjellige design stiler. Disse stilene er: - Pop Art - Swiss - Abstrakt ekspresjonisme - Psychedelia Nettsiden skulle enten lære studenter om design historie, eller vise fram arbeidet til en gruppe klienter. Jeg har valgt å jobbe med en gruppe studenter som studerer design. Det var viktig at nettsiden hadde flere funksjoner. Enten om kunne trykke på en knapp, eller om bildene kunne bevege seg. Nettsiden skulle være interaktiv. På slutten av oppgaven skulle man ha en ferdig nettside og 4 ferdige produkter. I tillegg skal man ha en bedre forståelse av HTML og CSS koding. Research En nettside er ikke like interessant uten produkter og bilder å vise fram. Derfor var det viktig å gjøre ferdige 4 plakater i ulike stiler før jeg satt i gang med videre planlegging om nettsiden. For å få en bedre forståelse om de ulike stilene skrev jeg litt om hver stil. Abstrakt ekspresjonisme Abstrakt ekspresjonisme var en kunstnerisk bevegelse som dominerte amerikansk kunst i tiårene etter andre verdenskrig. Dette var den første kunstretningen som fikk en internasjonal betydning i USA. Betegnelsen ble først brukt om Vasilij Kadinskijs malerier, men senere brukt for å beskrive arbeidene til en gruppe malere som arbeidet i New York på 1940 tallet. Abstrakt ekspresjonism er kunst hvor man ikke etterligner gjenstander. Formene og fargene representerer ikke noe spesielt, men bestemmer heller selv hvordan man oppfatter/ tolker kunsten. Eksempler på kunstnere innenfor abstrakt ekspresjonisme er: Willem de Kooning, Jackson Pollock og Hans Hoffman. Swiss Swiss også kjent som Swiss International Style er en design stil som ble utviklet på midten av 50 tallet i Sveits. Denne stilen tok utgangspunkt i enkelhet, lesbarhet og objektivitet. En viktig del av denne stilen var typografien. Siden typografi var en viktig komunikasjons element på denne tiden, ble komunikasjon swiss son hovedfunksjon. Stilen skulle komuniksere sine budskap på en effektiv måte, derfor ble bilder, tekst og illustrasjoner ofte satt sammen i denne stilen. Kjennetegn på denne stilen er layout, grid, basic og få farger og sans-serif fonter.
Eksempler på kunstnere innenfor swiss er: Armin Hoffman, Josef Müller-Brockmann. Pop Art Pop art var en kunstretning som ble utviklet som en reaksjon mot den abstrakte ekspresjonimen. Popkunst henviser til kunstretningens fokus på temaer hentet fra underholdningskulturen. Pop art var populært på 1950-tallet. Stilen var kjent for å inkludere bilder fra kultur kombinert med «comic book» design. Sterke farger ble brukt i denne stilen. Eksempler på kunstnere innenfor Pop Art er: Andy warhol og Roy lichtenstein. Psychadelia Psycadelia var stilart som utviklet seg på 1960-tallet. Denne stilen var en slags videre utvikling av popart. Navnet og stilen var sterkt preget av de narkotiske substansene som var gjeldene på denne tiden. Kunstnere ble inspirerte av de psycedeliske opplevelsene og sterke mønster, farger som man kunne oppleve etter narkotika. Mange av de tidligere eksempler på denne stilen er heller innenfor literatur enn «visual». Derfor er det vanskelig å nevne kjente kunsnere. Men eksempler på en tidlig kunstnere er: Andre Masson og Salvador Dali. Et annet kjent navn innenfor Psychedelia er: Timothy Leary. Leary var en psykolog, som undersøkte psykedeliske stoffer. Kreativ metode Etter å ha lært mer om hver stil satt jeg i gang med å lage moodboards. Jeg syns selv at dette hjelper meg å komme i gang med inspirasjons biten og skissing. Jeg har valgt å jobbe i denne rekkefølgen fordi dette har hjulpet meg mye før. Moodboards/Inspirasjon Pop Art
Swiss Abstrakt ekspresjonisme
Psychedelia Skisser I begynnelsen av oppgaven var jeg fortsatt usikker på hva slags produkt jeg skulle bruke for å vise fram designene, og valgte da en vase. Senere bestemte jeg heller for å lage en template på en plakat som kan henge ned på nettsiden. Jeg har ikke så mange skisser av dette på papir, men mange skisser på en vase. Her ser du godt hva slags design jeg kunne ha tenkt meg, og hva som inspirerte meg: Design stiler
m u s p I sum m Ip u m u r m ps m o I su L ru Lo rum Ip sum Lo rumm Ip sum Lo oru Ip L rum Lo WO W Nettsiden
Nettsiden / ferdig produkt 1 2
3 4
1- På det første bildet vises introen av nettsiden. Her har jeg valgt å bruke enkle farger og et enkelt bilde, som viser hva nettsiden forteller. Nettsiden har også en enkel meny bar som gjør at man kan velge en snarvei til slide 2. 2- Ved bruk av musen kan man skrolle ned på siden, og slide 2 kommer forsiktig opp. 3- Plakatene vises fram på slide 2. 4- Ved å ta musen forsiktig over plakaten, snur den seg rundt og viser teksten som tilhører plakaten. Plakatene Designvalg Etter mange skisser satt jeg i gang med nettsiden. Jeg holdt meg til den samme skissen hele tiden. Dette hjalp meg å jobbe kjapt, uten å endre mening hele tiden. De første jeg gjorde var å finne en template, som kunne hjelpe meg med nettsiden jeg ønsket. Jeg ønsket meg en nettside som bare var 1 side. Ved bruk av musen kunne man «slide» ned til forksjellige «slides». Den første siden er kun intro, mens den andre siden viser fram produktene med tekst. Ved å bruke ferdig koding har jeg fått til en funksjon som gjør at plakaten snur seg rundt når musen beveges over den. Ved hjelp av denne koden beholder nettsiden den enkle og rene sliten. Nettsiden er ikke for rotete med både bilder og tekst på en gang. Typografi Fonten jeg har brukt i meny baren er Arial. Mens fonten på introsiden er Pier Sans, som gir siden det lille ekstra. På overskriften på teksten har jeg brukt Arvo, og i brødteksten Oswald. Teksten er lett å lese og ikke for tung.
Farger Jeg har valgt å bruke enkle farger som hvit og lyse grå og mørke grå på nettsiden. Plakatene i seg selv har ganske mye farger og det syns jeg var nok. Her er et fargekart på de fargene jeg har brukt til denne oppgaven: Til plakatene brukte jeg de fargene som hørte til på den tiden. Til abstrakt ekspresjonisme brukte jeg mørke og «skitne» farger. Til Pop art brukte jeg sterke primære og sekundærer farger. til Swiss ble det brukt sterke primær farger, og til psykedelia ble det brukt litt av hvert. Egenevaluering Nettsiden er nesten helt lik skissen og jeg er derfor ganske fornøyd med resultatet. Jeg er utrolig fornøyd med plakatene og funksjonen de fikk på nettsiden. Alt tok litt tid, men resultatet ble bra. Til mappen kunne jeg ha tenkt meg å endre litt på skyggen på plakatene og kanskje noen andre små endringer. Men akkurat nå syns jeg nettsiden ser veldig bra ut. Jeg har lært utrolig mye innen Html og Css, og kan godt tenke meg å lære enda litt mer. KILDER http://www.theartstory.org/movement-pop-art.htm http://www.metmuseum.org/toah/hd/abex/hd_abex.htm http://www.theartstory.org/movement-abstract-expressionism.htm http://www.artlex.com/artlex/a/abstractexpr.html http://www.internationalposter.com/style_primer/international-typographic.aspx http://www.swissted.com http://www.1stwebdesigner.com/create-scrolling-parallax-website/ https://onepagelove.com/the-top-20-one-page-websites-from-2013
http://bootstrapbay.com https://www.pinterest.com http://weheartit.com http://codepen.io http://www.w3schools.com