Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kannattaako graafikko pitää leivässä? - Vincit Teatime 2014

1,938 views

Published on

Pari vuotta sitten Vincitiin palkattiin ensimmäinen graafikko koodarilauman keskelle, ja siitä toiminta on laajentunut kokonaiseksi tiimiksi käyttöliittymäsuunnittelijoita ja graafikoita. Ilman kasvukipuja ja orastavia vatsahaavoja ei kuitenkaan olla selvitty.Kerromme miten Vincitissä graafikoiden ja koodareiden yhteistyö on kehittynyt. Monenlaisia työtapoja on kokeiltu – vaihtelevalla menestyksellä. Lisäksi annamme ideoita ohjelmistotaloille jotka harkitsevat omien graafikoiden palkkaamista.

Published in: Technology
  • Be the first to comment

Kannattaako graafikko pitää leivässä? - Vincit Teatime 2014

  1. 1. KANNATTAAKO GRAAFIKKO PITÄÄ LEIVÄSSÄ? Jukka Hietamäki & Antti Tolppanen
  2. 2. 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
  3. 3. 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
  4. 4. Valmis! PROJEKTI A Kick-off Valmis! PROJEKTI B Kick-off PROJEKTI C Kick-off Valmis! PROJEKTI D Kick-off
  5. 5. MARSSITAHDISTA JA -JÄRJESTYKSESTÄ CC Image courtesy of PEOSoldier on Flickr
  6. 6. 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Ä
  7. 7. • 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Ä
  8. 8. Grafiikoiden vaatimukset saattavat muuttua merkittävästi.
  9. 9. AN D ROID: 111 ikonia / graafista elementtiä x 4 x 4 = 1776 LDPI MDPI HDPI XHDPI MARSSITAHDISTA JA -JÄRJESTYKSESTÄ
  10. 10. 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Ä
  11. 11. 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Ä
  12. 12. ”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Ä
  13. 13. RESURSOINTI, 
 ALLOKOINTI, ESTIMOINTI JA MUITA TOSI HIENOJA VIERASPERÄISIÄ INSINÖÖRITALOSSA OPITTUJA SANOJA CC Image courtesy of bcndp on Flickr
  14. 14. 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
  15. 15. • 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
  16. 16. • 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
  17. 17. • 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
  18. 18. TRELLO-RATKAISU
  19. 19. 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Ä
  20. 20. 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
  21. 21. 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
  22. 22. 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.
  23. 23. “Hyötyjä on se että mun ideat saa fyysisen muotonsa.” – Johanna, ankkaemo, innostuja, HR-bossi SISÄINEN NAKKISADE
  24. 24. • 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
  25. 25. SISÄINEN NAKKISADE KOODIKOULU-TARRA ”ankka, uus logo, jotain koodaamiseen liittyvää, 
 ’suoritin koodikoulun’ tai jotai, läppärin kanteen liimataa”
  26. 26. 6. ELOKUUTA 2012
  27. 27. “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…”
  28. 28. _v1.jpg
  29. 29. “Joo…Hei mut palveluita tuleekin neljä. 
 Ne on… Mietitään vielä. Mut neljä.”
  30. 30. _v2.jpg
  31. 31. _v2_2.jpg
  32. 32. “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…?”
  33. 33. _v8.jpg
  34. 34. “Ei siitä nyt kyllä tuu punaista. 
 Mennään vanhoilla väreillä. Joo.”
  35. 35. _v11.jpg
  36. 36. MAALISKUU 2013
  37. 37. “No nyt aletaan taas puskee niitä nettisivuja. No tehdäänkö me nyt kuitenkin niistä punamustat?” “Hei mulla on sit ideoita siitä rekrysivustosta!”
  38. 38. _v12.jpg
  39. 39. LOKAKUU 2013
  40. 40. “Joo. Hyvä se on. Ulos vaan.” – Pasi, johtaja, markkinointinakkikeisari, ideanikkari “Tee niistä ihmisen näköisiä.”
  41. 41. _v14.jpg
  42. 42. “Kai sinne nyt tulee se rekrysivusto?!” “Julkaistaan nyt, korjataan ja lisäillään sitten.” “Lisäillään sitten.”
  43. 43. • 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
  44. 44. TAISTELU RESURSSEISTA KOODI VS. KÄYTTÖLIITTYMÄ
  45. 45. “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Ä
  46. 46. 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
  47. 47. 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)
  48. 48. 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Ä
  49. 49. VALMIS TUOTE ON KOKO TALON REFERENSSI Ei siis pelkästään diplomi-insinöörin taidonnäyte
 tai taidekoululaisen portfolion täyte.
  50. 50. KYLLÄ KANNATTAA.
  51. 51. 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
  52. 52. 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
  53. 53. “...ekstrabonukset mahtavasta huumorista!!!:)” – Topi, hyvä jätkä, koodari Y H T E I S H E N K I
  54. 54. 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
  55. 55. Y H T E I S T Y Ö TA V AT “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
  56. 56. Y H T E I S T Y Ö TA V AT “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
  57. 57. PA LV E L L A A N A S I A K A S TA PA R E M M I N “Usein päästään parempaan tulokseen haastamalla ideoita ja ajatuksia eri näkökulmista.” – Ville, kantrikukko, myyntimies
  58. 58. PA LV E L L A A N A S I A K A S TA 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
  59. 59. “Ihan vitun kivaa!” – Jarkko, Fat-Steve, myyntikeisari, UX-tiimin isä ja kummisetä
  60. 60. KYSYTTÄVÄÄ? ANT TI TOLPPANEN Passionate UI Designer +358 44 416 9969 antti.tolppanen@vincit.fi JUKKA HIETAMÄKI Passionate UI Designer +358 40 515 0031 jukka.hietamaki@vincit.fi Linkedin →Linkedin →
  61. 61. KIITOS.

×