Interaktiivinen infografiikka

Abstract

Tämän opinnäytetyön ensisijaisena tavoitteena oli suunnitella ja toteuttaa interaktiivinen Pohjois-Pohjanmaan karttagrafiikka. Työn graafinen osuus toteutettiin piirto-ohjelmalla Adobe Illustrator ja toiminnallinen osuus web-tekniikoiden HTML, CSS ja JavaScript-kirjaston jQuery avulla. Karttaa ei ole tehty toimeksiantona mihinkään varsinaiseen uutiseen ja se toimii lähinnä vain pohjana, jota voidaan tarvittaessa soveltaa tilanteeseen sopivaksi. Valmis kartta luovutetaan sanomalehti Kalevan vapaaseen käyttöön. Opinnäytetyön alkuperäinen ajatus oli oma mielenkiinto yhdistää web-tekniikoiden käyttöä ja työkokemustani graafisena toimittajana.

Opinnäytetyön alussa käsitellään interaktiivisuutta, infografiikkaa ja sen merkitystä uutisissa ja ilmiöissä, piirto-ohjelmaa Adobe Illustrator työkaluineen sekä työssä käytettäviä web-tekniikoita. Raportin lopussa kerrotaan työn eri vaiheet graafisesta ja teknisestä suunnittelusta ja koko työn lopullisesta toteutuksesta.

Opinnäytetyöllä saavutettiin laajempaa tietämystä yllä mainituista web-tekniikoista ja niiden avulla interaktiivisen kuvan luomisesta. Työtä voi jatkossa kehittää vielä näyttävämmän näköiseksi ja mahdollisesti lisätä joitakin uusia toimintoja kartalle.

The primary goal of this thesis was to design and create an interactive map graphic of Northern Ostrobothnia. The graphic section of the map was created by using a vector graphics editor Adobe Illustrator. Interactivity was created by web technologies HTML, CSS and JavaScript library jQuery. The map is not based on any particular piece of news and it’s meant to serve basically as a functional template, which can be applied for different situations. The final version of the map will be given to Kaleva newspaper for their free use. The thesis’ original idea came from my own interest to combine web technologies and my job work experience as graphic journalist.

The first section of the thesis introduces interactivity, infographics and its role in today’s news, Adobe Illustrator and its tools and also the web technologies that were used in project. The last section of the thesis describes different phases during the project from designing to actual implementation.

The thesis expanded my knowledge of the web technologies I used and how to create interactive picture with them. The map can be improved in future by making it neater or by adding new features in it.