Poki – unohtumaton brändikokemus interaktiivisen pelillisyyden kautta
Hollantilainen selainpelijulkaisija Poki kävi vuonna 2017 läpi suuren brändiuudistuksen, jonka päätteeksi he halusivat luoda jotain erityistä, joka erottaisi heidät sivustojen harmaasta massasta ja vakuuttaisi niin käyttäjät, potentiaaliset yhteistyökumppanit kuin selainpelikehittäjätkin.
Kurkkaa sivustoon! http://about.poki.com/
Poki pyysi Evermaden mukaan toteuttamaan Proof of Conceptin, jossa selainten rajojen kokeilu, uusien graafisten elementtien käytön monipuolisuus ja brändiuudistuksessa luodut arvot pääsisivät oikeuksiinsa.
Poki pyysi Evermaden mukaan toteuttamaan Proof of Conceptin, jossa selainten rajojen kokeilu, uusien graafisten elementtien käytön monipuolisuus ja brändiuudistuksessa luodut arvot pääsisivät oikeuksiinsa.
Pelillisyys keskiössä
Pelijulkaisijana Pokille oli luonnollisesti tärkeää tuoda brändiään esille pelaamisen kautta. Sivustolle toteutettiin lopulta useampia pelillisiä elementtejä – esimerkiksi kokonainen selainpeli sivuston lopussa.
Interaktiivinen käyttökokemus
Pokin brändissä toistuvat graafiset elementit, kuten pallo ja monikulmiot, haluttiin tuoda interaktiiviseksi osaksi sivua. Pokin pallolle päätettiinkin luoda oma sielu: pikkuruinen pallo kulkee sivulla käyttäjän mukana ja reagoi sivuston elementteihin.
Optimoitu suorituskyky
Yksi sivuston suurimmista kohdeyleisöistä ovat selainpelien toteuttajat. Siksi Pokille oli erityisen tärkeää, että kovasta ambitiotasosta ja näyttävistä animaatioista huolimatta tekninen toteutus on huippulaatua, eikä yhtäkään mutkaa vedetä suoraksi.
Erottuvat tekniset ratkaisut
Kyseessä ei ole mikään perinteinen one pager: sivulta löytyy esimerkiksi SVG-brändielementtigeneraattori, ‘Breakout’-henkinen selainpeli sekä fysiikkamoottori, jonka avulla lasketaan pallon reagointia selainelementteihin.
Pelijulkaisijana Pokille oli luonnollisesti tärkeää tuoda brändiään esille pelaamisen kautta. Sivustolle toteutettiin lopulta useampia pelillisiä elementtejä – esimerkiksi kokonainen selainpeli sivuston lopussa.
Interaktiivinen käyttökokemus
Pokin brändissä toistuvat graafiset elementit, kuten pallo ja monikulmiot, haluttiin tuoda interaktiiviseksi osaksi sivua. Pokin pallolle päätettiinkin luoda oma sielu: pikkuruinen pallo kulkee sivulla käyttäjän mukana ja reagoi sivuston elementteihin.
Optimoitu suorituskyky
Yksi sivuston suurimmista kohdeyleisöistä ovat selainpelien toteuttajat. Siksi Pokille oli erityisen tärkeää, että kovasta ambitiotasosta ja näyttävistä animaatioista huolimatta tekninen toteutus on huippulaatua, eikä yhtäkään mutkaa vedetä suoraksi.
Erottuvat tekniset ratkaisut
Kyseessä ei ole mikään perinteinen one pager: sivulta löytyy esimerkiksi SVG-brändielementtigeneraattori, ‘Breakout’-henkinen selainpeli sekä fysiikkamoottori, jonka avulla lasketaan pallon reagointia selainelementteihin.
Pieni pallo, iso sielu
Sivuston päähenkilönä toimiva pieni pallo on Pokin brändielementeistä merkittävin, ja se toistuu kaikessa markkinoinnissa. Siksi ymmärsimme heti projektin alussa, että pallon tulisi reagoida sivuston muiden elementtien kanssa. Sille haluttiin antaa sielu. Prototyyppivaihe oli pitkä. Lopulta löysimme sopivan animaatioteknologian, jonka avulla saimme yhdistettyä sulavan liikkeen ja tarkat ajoitukset parhaalla mahdollisimmalla tavalla.
Sivuston päähenkilönä toimiva pieni pallo on Pokin brändielementeistä merkittävin, ja se toistuu kaikessa markkinoinnissa. Siksi ymmärsimme heti projektin alussa, että pallon tulisi reagoida sivuston muiden elementtien kanssa. Sille haluttiin antaa sielu. Prototyyppivaihe oli pitkä. Lopulta löysimme sopivan animaatioteknologian, jonka avulla saimme yhdistettyä sulavan liikkeen ja tarkat ajoitukset parhaalla mahdollisimmalla tavalla.
Arcade-klassikkopeli sivuston sisällä
Kuinka moni yritys voi ylpeillä sillä, että sivustolla komeilee oma arcade-peliklassikko? Evermade toteutti Pokille version klassisesta “Breakout”-pelistä. Peli on toteutettu toimimaan joko näppäimistöllä, hiirellä tai kosketusnäytöllä.
Peli on ainutlaatuinen yhdistelmä eri web-tekniikoita: WebGL-pelimoottori ja perinteiset verkkosivuteknologiat toimivat saumattomasti yhdessä. Yhdistelmän ansiosta löysimme – ja ratkaisimme – lukuisia selainbugeja. Pelin tarkoituksena on ohjata käyttäjää toimimaan ja vuorovaikuttamaan sivuston kanssa. Tämä varmistaa, että käyttäjälle jää pitkäaikainen muistijälki Pokista ja sivustosta.
Kuinka moni yritys voi ylpeillä sillä, että sivustolla komeilee oma arcade-peliklassikko? Evermade toteutti Pokille version klassisesta “Breakout”-pelistä. Peli on toteutettu toimimaan joko näppäimistöllä, hiirellä tai kosketusnäytöllä.
Peli on ainutlaatuinen yhdistelmä eri web-tekniikoita: WebGL-pelimoottori ja perinteiset verkkosivuteknologiat toimivat saumattomasti yhdessä. Yhdistelmän ansiosta löysimme – ja ratkaisimme – lukuisia selainbugeja. Pelin tarkoituksena on ohjata käyttäjää toimimaan ja vuorovaikuttamaan sivuston kanssa. Tämä varmistaa, että käyttäjälle jää pitkäaikainen muistijälki Pokista ja sivustosta.
Timantit on generoituja
Sivuston kohdeyleisön vuoksi päätimme hyvissä ajoin, että emme valitse helpointa tietä toteutuksessa. Esimerkiksi sivuston päivitettävyys haluttiin viedä äärimmilleen. Siksi taustalla liikkuvia timantteja ja monikulmioita ei haluttu luoda manuaalisesti Photoshopissa.
Sivuston kohdeyleisön vuoksi päätimme hyvissä ajoin, että emme valitse helpointa tietä toteutuksessa. Esimerkiksi sivuston päivitettävyys haluttiin viedä äärimmilleen. Siksi taustalla liikkuvia timantteja ja monikulmioita ei haluttu luoda manuaalisesti Photoshopissa.
Evermade toteutti sivustolle SVG/PNG-generaattorin, jonka avulla voidaan luoda lennosta erikokoisia elementtejä, muuttaa kuvioiden värejä ja sumennuksen määrää syvyysvaikutelmaa luomaan.
Toteutus kätkee sisälleen huomattavan paljon matematiikkaa, fysiikkaa, loogista päättelyä ja WebGL-magiikkaa.
Toteutus kätkee sisälleen huomattavan paljon matematiikkaa, fysiikkaa, loogista päättelyä ja WebGL-magiikkaa.
Referenssin infoboxi
Tiedot
Tilaaja: | Poki B.V. |
Ajankohta: | 2017 - |
Toimittajan yhteyshenkilö: |
Mikael Toivio |
Lisätietoja
Tagit
Liiketoimintaprosessi
Markkinointi | |
Myynti | |
Viestintä |
Erikoisosaaminen
Graafinen suunnittelu | |
Käyttöliittymäsuunnittelu | |
Ohjelmistokehitys | |
Webkehitys |
Toimialakokemus
Urheilu, viihde ja virkistys |
Teknologia
WordPress |
Tarjonnan tyyppi
Toteutustyö | |
Tuki- ja ylläpitotyö |
Omat tagit
Evermade
Evermade - Asiantuntijat ja yhteyshenkilöt
Premium-profiilia ei ole aktivoitu. Aktivoi premium-profiili näyttääksesi tässä lisäämäsi 1 asiantuntijaa.
Evermade - Muita referenssejä
Evermade - Muita bloggauksia
It- ja ohjelmistoalan työpaikat
- Laura - Mobiilikehittäjä, Android
- Laura - Ohjelmistoarkkitehti, Tampere/Oulu
- Laura - Development Team Manager, Sports Games
- Taito United Oy - Senior Full Stack -kehittäjä
- Webscale Oy - Head of Sales, Cloud Services
- Laura - Hankinta-asiantuntija, tietohallinto
- Laura - Development Manager, Operations
Premium-asiakkaiden viimeisimmät referenssit
- SD Worx - Kehitystyö SD Worxin kanssa takaa Clas Ohlsonille parhaat palkanmaksun prosessit kasvun tiellä
- Digiteam Oy - Case Esperi Care Oy: Ketterä kumppanuus vei Esperin verkkosivu-uudistuksen maaliin sujuvasti ja aikataulussa
- Kisko Labs Oy - Howspace Hub - Mukautuva oppimisen hallintajärjestelmä kasvaviin oppimisalustavaatimuksiin
- Kisko Labs Oy - Sanoma Pro: Multimediasisältöjen hallinnan uudistaminen
- Kisko Labs Oy - Svean helppokäyttöinen palvelu asiakkaan verkko-ostosten hallintaan
- Kisko Labs Oy - Yhtenäinen käyttöliittymä luovien alojen ammattilaisille
- Codemate - Digitaalisen murroksen nopeuttaminen Flutterin avulla
Tapahtumat & webinaarit
- 27.11.2024 - Green ICT -ekosysteemitapaaminen III: Ohjelmistojärjestelmien virrankulutuksen mittaaminen ja kasvihuonepäästöjen arviointi
- 27.11.2024 - Digitaalisen asiakaskokemuksen uusi aikakausi
- 28.11.2024 - Webinaari: Keskity myyntityön laatuun!
- 28.11.2024 - Copilot-webinaari – Mielekkäämpää tietotyötä turvallisesti
- 04.12.2024 - Kuinka oikea matka- ja kululaskujärjestelmä tehostaa prosesseja?
- 05.12.2024 - Green ICT VICTIS -hankkeen kick off -tilaisuus
- 15.01.2025 - Datavastuullisuuden valmennus: hanki valmiudet vastuulliseen datan ja tekoälyn hyödyntämiseen
Premium-asiakkaiden viimeisimmät bloggaukset
- Kisko Labs Oy - Heroku: Millaisiin projekteihin se sopii ja mitkä ovat sen todelliset hyödyt ja haitat?
- Zimple Oy - Pipedrive vai Hubspot? Kumpi kannattaa valita?
- SC Software Oy - Jatkuvat palvelut – asiakaslähtöistä kumppanuutta projekteista ylläpitoon
- Timeless Technology - Ohjelmoitavat logiikat (PLC): Ratkaisevat työkalut automaatioon ControlByWebiltä.
- Kisko Labs Oy - Heroku: Ohjelmistokehittäjän ykköstyökalu skaalautuvien sovellusten rakentamiseen
- SD Worx - Näin luot vakuuttavan Business Casen palkkahallinnon ulkoistukselle
- Timeless Technology - Kyberriskien tunnistaminen Profitap IOTA verkkoanalysaattorin avulla.
Digitalisaatio & innovaatiot blogimediaBlogimediamme käsittelee tulevaisuuden liiketoimintaa, digitaalisia innovaatioita ja internet-ajan ilmiöitä |