KANNATTAAKO GRAAFIKKO PITÄÄ

LEIVÄSSÄ?

Jukka Hietamäki & Antti Tolppanen

JUKKA HIETAMÄKI

• Passionate UI Designer Lahesta • entinen lähettämötyöntekijä,

varastomies, 2 x webbi- / graafinen suunnittelija

• vajaa 2 vuotta Vincitillä • viimeaikoina lähinnä iOS-juttuja ja

brändiuudistusta

KETÄ NOI ON? ANTTI TOLPPANEN

• Passionate UI Designer Kuopiosta • entinen mehutrukkikuski,

sisustusmyyjä, 2 x webbisuunnittelija • reilu 2 vuotta Vincitillä • viimeaikoina lähinnä ankankuvia ja

webbipalveluita

Kaleva, toukokuu 2011

Graafikko kannattaa pitää leivässään.

MISTÄ ME PUHUTAAN?

SPOILER ALERT!

Ensimmäisten graafikoiden haasteista insinööritalossa.

Mitä haasteista on opittu:

Miten haasteisiin on vastattu.

CC Image courtesy of incase on Flickr

Valmis!

PROJEKTI A

Kick-off

Valmis!

PROJEKTI B

Kick-off

PROJEKTI C

Kick-off

Valmis!

PROJEKTI D

Kick-off

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

CC Image courtesy of PEOSoldier on Flickr

Toisinaan projekteja myydään leiskoilla.

Asiakkaalla on graafinen ohjeisto ja ”näkemys” mitä valmiin tuotteen tulee olla.

Haaste:

MARSSITAAN VISUT EDELLÄ

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

• Mitä pidemmälle tuotetta on tehty, UI:n korjaamisen kynnys ja kustannukset kasvavat.

• Ylikuormitetaan kaikkia.

• Päätelaitteiden guidelinet voivat muuttua pitkien projektien aikana.

• Liian aikaisin ostetut lisenssit, etenkin fontit, voivat tulla kalliiksi.

MITEN TÄMÄ ILMENEE ARJEN TIIMELLYKSESSÄ?

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

Grafiikoiden vaatimukset saattavat muuttua merkittävästi.

A N D R O I D : 111 ikonia / graafista elementtiä x 4 x 4 = 1776

LDPI

MDPI

HDPI

XHDPI

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

UI-ratkaisuja miettiessä myös koodarit mukana.

– Tekniset rajoitteet ja mahdollisuudet sekä budjetti rajaa suunnitelmia.

– Erilaisia näkökulmia – erilaisia ideoita.

– Perustellaan asiakkaalle ratkaisuja monelta eri kantilta mietittynä > Palvelee asiakasta.

RATKAISUJA

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

Tosi raa’an tason konseptointi.

– paperiprotoilu > wireframet > moodboard

– Viivytetään visuaalisen linjan valitsemista loppuun asti ja pidetään linja!!!1!

• Loppuun asti mietityt UI-speksit antaa graafikolle työrauhan.

LOPULLINEN RATKAISU

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

”Et joskus parempia ratkasuja niiltä kun itteltä, et se on.. häirittee mut toisaalta tosi makee.

Et homma toimii.”

– Antti, keikari, uikkarisuunnittelija

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

RESURSOINTI, ALLOKOINTI, ESTIMOINTI

JA MUITA TOSI HIENOJA VIERASPERÄISIÄ INSINÖÖRITALOSSA OPITTUJA SANOJA

CC Image courtesy of bcndp on Flickr

Liikaa projekteja, liikaa koodareita, liian vähän taidekoululaisia.

Usean päällekkäisen projektin takia hankala pitää koodarit työssään.

Aikatauluttaminen tehtävä tiukaksi.

Haaste:

TÖIDEN KERÄÄNTYMINEN

CC Image courtesy of UCL Mathematical and Physical Sciences on Flickr

• Liian tiukka aikataulutus ei anna tilaa yllätyksille.

• Joutuu tekemään liian montaa eri projektia saman päivän aikana.

• Keskeytellään. Halutaan pikaisia vastauksia ongelmiin esim. kasvokkain tai Skypessä

• Oiotaan – ei välttämättä anneta riittävästi aikaa jokaiselle hommalle.

MITEN TÄMÄ ILMENEE TYÖNTEOSSA?

TÖIDEN KERÄÄNTYMINEN

• Tulee paha mieli, kun työn jäljellä ei voi paukutella henkseleitä.

• Stressi > kiukuttelu > alkoholin väärinkäyttö > häpeä > rappio. Tässä ollaan.

MITEN TÄMÄ ILMENEE TYÖNTEOSSA?

TÖIDEN KERÄÄNTYMINEN

• Edetään sprintti kerrallaan > kaiken lähtökohta.

• Aikataulutetaan päiviä löyhästi > vältetään oikomista.

• Hyväksytä kaverilla ennen lähettämistä > vältetään huonoa työn jälkeä ja häpeää.

• UX-tiimin kasvaessa maanantaipalaverit.

• Tehdään projekteihin mahdollisimman vähän kerrallaan.

KEVYITÄ RATKAISUJA

TÖIDEN KERÄÄNTYMINEN

TRELLO-RATKAISU

1. Tehdään ominaisuuden UI design ennen kun ominaisuuden kehitys alkaa.

2. Palaute devaajilta, mahdolliset korjaukset heti.

3. Kehitys, testaus.

4. UI review, graafikko tsekkaa ominaisuuden ja tekee mahdolliset korjaukset designiin nähtyään ominaisuuden livenä.

5. Toista 3-4 tarpeen mukaan.

RIIPIN LISTA™

MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

Kuse kaikki aikataulut

TÖIDEN KERÄÄNTYMINEN

Ei oikomista. Ei kiireilyä.

Lykkäystä saa kun sitä pyytää.

Kukaan ei ole suuttunut. Asiakkaan kanssa voi aina neuvotella.

VIIMEISET OLJENKORRET 1/2

Häikäise kaikki tyypit

TÖIDEN KERÄÄNTYMINEN

Todista, että graafikko kannattaa pitää leivässään.

> Palkatkaa lisää väkeä.

VIIMEISET OLJENKORRET 2/2

Laskutettava työ menee aina tietenkin edelle, mutta mitä jos:

Haaste:

SISÄINEN NAKKISADE

Pitää tehdä joulukortit, lehti-ilmoitukset, autoteippaukset, messumateriaalit…

Pitää toimia myynnin tukena.

Pitää tehdä uudet nettisivut.

“Hyötyjä on se että mun ideat saa fyysisen muotonsa.”

– Johanna, ankkaemo, innostuja, HR-bossi

SISÄINEN NAKKISADE

• Sisäisiin töihin on monella mielipide ja ”näkemys”.

• ”Näkemys” ei löydy ennen kuin ensimmäinen versio on tehty.

• Paljon korjauksia – usein aikataulu hyvinkin tiukka.

• Täytyy olla turhan monen alan asiantuntija: copywriter / AD / graafinen suunnittelija / tuotanto-AD / painotuotesuunnittelija / www-suunnittelija / ”koodari”.

MITEN ILMENEE TYÖN TIIMELLYKSESSÄ?

SISÄINEN NAKKISADE

SISÄINEN NAKKISADE

KO O D I KO U LU - TA R R A

”ankka, uus logo, jotain koodaamiseen liittyvää, ’suoritin koodikoulun’ tai jotai, läppärin kanteen liimataa”

6. ELOKUUTA 2012

“Aa ok. Hienoa. Ootteko yhtään miettiny mitä sinne laitetaan?” – Jukka, Pirkanmaan & Lahen komein, graafinen suunnittelija

“Mietittiin vähän sillee, että jos nyt alkuun tekisit meille uudet nettisivut. Katsotaan niitä asiakasprojekteja sitten.” – Jarkko, Fat-Steve, myyntikeisari, UX-tiimin isä ja kummisetä

“No… En mä oikein osaa sanoa. Kyllä sä varmaan tiedät paremmin, että mitä siellä vois olla…”

_v1.jpg

“Joo…Hei mut palveluita tuleekin neljä. Ne on… Mietitään vielä. Mut neljä.”

_v2.jpg

_v2_2.jpg

“Tässähän on jo ihan ideaa!”

“Kai sinne nyt tulee se rekrysivusto? Mulla on siitä ideoita!” – Johanna, ankkaemo, innostuja, HR-johtaja

“Mut tästä puuttuu nyt edelleen se ostajan opas. Ja tehdäänkö sittenkin single page…?”

_v8.jpg

“Ei siitä nyt kyllä tuu punaista. Mennään vanhoilla väreillä. Joo.”

_v11.jpg

MAALISKUU 2013

“No nyt aletaan taas puskee niitä nettisivuja. No tehdäänkö me nyt kuitenkin niistä punamustat?”

“Hei mulla on sit ideoita siitä rekrysivustosta!”

_v12.jpg

LOKAKUU 2013

“Joo. Hyvä se on. Ulos vaan.” – Pasi, johtaja, markkinointinakkikeisari, ideanikkari

“Tee niistä ihmisen näköisiä.”

_v14.jpg

“Kai sinne nyt tulee se rekrysivusto?!”

“Julkaistaan nyt, korjataan ja lisäillään sitten.”

“Lisäillään sitten.”

• Vältetään raskaan työn aloittamista ennenkuin kaikkia asiaa hämmentäviä on kuultu.

• Sitoutetaan myös muita sisäisiin duuneihin.

• Trelloon muutaman kysymyksen ”briiffilomake”.

• UX-tiimin viikkopalaverit > Nakit tasoihin.

• Vastuualueet > Kuka piirtää ankat.

RATKAISUJA

SISÄINEN NAKKISADE

TAISTELU RESURSSEISTA

KOODI VS. KÄYTTÖLIITTYMÄ

“Eli koodaajan / project leadin näkökulmasta ehkä vielä enemmän olis tarvetta tiiviimmälle

yhteistyölle UI-kuvia tehdessä tai jollekin sellaiselle että pääsis jotenkin mukaan siihen

teidän luomisprosessiin.”

– Iiro, kiipeilijä, project lead, devaaja

KOODI VS. KÄYTTÖLIITTYMÄ

Budjetti tulee vastaan – ei varaa hiomiseen.

Ei varaa käyttää UI-suunnittelijaa.

Yhteistyö ei pelaa.

HAASTEET

KOODI VS. KÄYTTÖLIITTYMÄCC Image courtesy of epSos.de on Flickr

Toteutus ei ole kaunis tai käytettävä.

MITEN TÄMÄ NÄKYY ARJEN HARMAUDESSA?

KOODI VS. KÄYTTÖLIITTYMÄ

MVP / VCP vs. MDP (Minimum Viable Product = Very Crappy Product vs. Minimum Delightful Product)

Tiiviimpi yhteistyö

• UI-konseptin kirkastaminen kehittäjien kanssa ennen kehitystyön aloittamista.

• Yhteisiä suunnittelupalavereja aina tarvittaessa.

• Workshopit > mukana kehittäjä, visupoika, UX-tyyppi, myyjä, asiakas.

RATKAISUJA

KOODI VS. KÄYTTÖLIITTYMÄ

VALMIS TUOTE ON KOKO TALON R E F E R E N S S I

Ei siis pelkästään diplomi-insinöörin taidonnäyte tai taidekoululaisen portfolion täyte.

KYLLÄ KANNATTAA.

Y H T E I S H E N K I

0

0,75

1,5

2,25

3

2011 2012 2013 2014

Graafikoiden määrä Vincitillä ja sijoitus GPTW:ssä

7. sija 6. sija 5. sija 1. sija

Y H T E I S H E N K I

“Graffa- ja käytettävyyspuolen hipsterit monipuolistavat ja virkistävät kehitysilmapiiriä

muuttamalla sitä heterogeenisemmäksi.” – Ville, kantrikukko, myyntimies

“...ekstrabonukset mahtavasta huumorista!!!:)”

– Topi, hyvä jätkä, koodari

Y H T E I S H E N K I

Y H T E I S H E N K I

“On muutama sellainen hipsteri, jolle voi naureskella ja vittuilla.”

– Juha, raju rakastaja, Team lead, koodari

Y H T E I S T Y Ö T A V A T

“On suoraan sanottu että millon ehtii katsoa asiaa ja pysytty siinä aikataulussa, mikä on

projektin sujuvuuden kannalta varsin merkittävä juttu.” – Topi, hyvä jätkä, koodari

Y H T E I S T Y Ö T A V A T

“Tehdyistä ominaisuuksista saadaan UI-suunnittelijan palaute heti -> voidaan lyhentää palauteloopin kestoa ja täten pienentää keskeneräisen työn määrä.”

– Juha, raju rakastaja, Team lead, koodari

P A LV E L L A A N A S I A K A S T A PA R E M M I N

“Usein päästään parempaan tulokseen haastamalla ideoita ja ajatuksia eri

näkökulmista.” – Ville, kantrikukko, myyntimies

P A LV E L L A A N A S I A K A S T A PA R E M M I N

“Aiemmin oli muistaakseni hieman riskinä se, että projektissa oli yhtä monta ilmettä kuin oli devaajiakin.”

– Mikko, pingiskunkku, Team lead, devaaja

“Ihan vitun kivaa!” – Jarkko, Fat-Steve, myyntikeisari, UX-tiimin isä ja kummisetä

KYSYTTÄVÄÄ?

A N T T I TO L P PA N E N

Passionate UI Designer

+358 44 416 9969

antti.tolppanen@vincit.fi

J U K K A H I E TA M Ä K I

Passionate UI Designer

+358 40 515 0031

jukka.hietamaki@vincit.fi

Linkedin →Linkedin →

KIITOS.