Pienistä eleistä suuriin tarinoihin
Animaatio tuo sivustolle elämää ja auttaa kävijää ymmärtämään tuotteesi tai palvelusi toiminnan yhdellä silmäyksellä.
Animaatio tekee enemmän kuin koristaa
Monimutkainen muuttuu helpoksi
Prosessin vaihe tai käyttöliittymän toiminto avautuu liikkeenä nopeammin kuin tekstinä, eikä kävijän tarvitse lukea pitkää selitystä ymmärtääkseen, miten palvelu toimii.
Katse löytää oikeaan kohtaan
Liike ohjaa huomion sinne, missä sitä tarvitaan, kuten tärkeään painikkeeseen tai uuteen sisältöön.
Sivusto jää mieleen
Elävä ja brändin näköinen sivusto erottuu staattisista sivustoista ja tekee käynnistä mieleenpainuvamman.
Kävijä pääsee itse mukaan
Interaktiivisessa animaatiossa kävijä etenee omaan tahtiinsa ja tutkii juuri niitä asioita, jotka häntä kiinnostavat.
Kolme tapaa tuoda liikettä sivustolle
Sopiva animaatio riippuu siitä, haluatko elävöittää sivustoa, havainnollistaa yksittäistä asiaa vai kertoa kokonaisen tarinan.
Pienet animaatiot
Kevyesti liikkuva ikoni tai symboli tuo sivustolle eloa pienellä panostuksella. Nämä ovat ensisijaisesti koristeellisia yksityiskohtia, jotka tekevät kokonaisuudesta viimeistellyn.
Kun projektin budjetissa on hieman liikkumavaraa, pienet animaatiot ovat helppo tapa elävöittää sivustoa.
Sopii esimerkiksi: ikoneihin, symboleihin ja pieniin kuvituksiin.
Lyhyet, looppaavat animaatiot
Lyhyt, toistuva animaatio voi olla abstrakti kuvitus tai havainnollistaa esimerkiksi käyttöliittymän toimintoa tai prosessin vaihetta. Kun tilaa on enemmän, mukaan voi tuoda myös tekstiä, jolloin animaatio kertoo asian itse.
Kuvaava animaatio auttaa asiakasta ymmärtämään tuotteen tai palvelun toimintaa ilman pitkiä selityksiä.
Pitkät ja interaktiiviset animaatiot
Laajempi animaatio voi olla kokonaan katsottava video tai sivustolle upotettu kokonaisuus, joka etenee kävijän vierittäessä sivua. Interaktiivisessa animaatiossa kävijä voi toistaa tietyn vaiheen klikkaamalla sivuston elementtiä tai animaatiota itseään.
Tämä muoto sopii hyvin esimerkiksi koko tuotantoprosessin selittämiseen.
Referenssit
EWQ – Verkkosivusto, joka tekee myymäläviestinnästä helposti ymmärrettävää
Projektissa kirkastettiin olemassa olevaa ilmettä ja sovellettiin sitä paremmin digitaaliseen ympäristöön.
Qaicu – Visuaalisesti erottuva WordPress-toteutus
Tavoitteena vahvistaa yrityksen digitaalista näkyvyyttä
JYU Executive MBA – Selkeämmät kävijäpolut myynnin tueksi
JYU Executive MBA:n verkkosivustouudistus toi käyttöön modernin WordPress-ratkaisun, joka tukee markkinointia, myyntiä ja sujuvaa käyttäjäkokemusta.
Jyväskylän Avoin Yliopisto – Interaktiivinen kurssialusta tieteellisen ajattelun oppimiseen
Trimedia toteutti Jyväskylän avoimelle yliopistolle Laravel-, Livewire- ja Alpine.js-teknologioilla rakennetun interaktiivisen kurssialustan tieteellisen ajattelun oppimiseen.
Romuta – Romutuskumppanille uudistettu sivusto
WordPress-verkkosivuston uudistus, jossa persoonallinen brändi-ilme, järjestelmäintegraatiot ja helppo sisällönhallinta tukevat liiketoimintaa
Syöpäsäätiön historiikki – saavutettava WordPress-toteutus
Ratkaisu joka tuo Säätiön historian näyttävästi esiin kaikilla päätelaitteilla.
Visit Häme – matkailusivusto usealla integraatiolla
WordPress-verkkopalvelu matkailusisällöille rajapintaintegraatioilla
Kansallisgallerian lahjoitussivusto varainhankintaan
Saavutettava WordPress-pohjainen lahjoitussivusto, joka tekee taiteen tukemisesta helppoa
Luoto.info: Järjestön asiantuntijatukea multisite-ratkaisuna
Syöpäjärjestöjen digitaalinen keskustelutukipalvelu WordPress Multisite -ratkaisuna
Sekasin Kollektiivi – vaikuttavaa datan esittämistä
Visuaalisuutta, saavutettavuutta ja vaikuttavaa datan esittämistä.
Näillä tekniikoilla animaatiot toteutetaan
Sopiva tekniikka valitaan animaation tyypin ja käyttötarkoituksen mukaan.
Mikä
Liike tehdään suoraan selaimen omilla keinoilla. Ikonit ja kuvitukset ovat vektorimuotoisia SVG-tiedostoja, jotka pysyvät terävinä kaikilla näytöillä.
Mitä vaatii
Vektorimuotoiset ikonit tai kuvitukset. Erillisiä kirjastoja ei tarvita, joten tämä on kevyin tapa tuoda liikettä sivustolle.
Mikä
Animaatio tehdään animaatio-ohjelmassa, esimerkiksi After Effectsissä, ja viedään sivustolle kevyenä tiedostona. Lopputulos näyttää videolta, mutta skaalautuu terävänä ja on huomattavasti videota kevyempi.
Mitä vaatii
Vektorimuotoinen kuvitus ja pieni toistokirjasto sivustolle. Animaatiota voidaan myös ohjata sivustolta, esimerkiksi käynnistää se vasta, kun se tulee näkyviin.
Mikä
Interaktiivisuus rakennetaan suoraan animaatioon. Animaatiolle määritellään eri tilat ja siirtymät niiden välillä, jolloin se reagoi esimerkiksi klikkauksiin tai hiiren liikkeisiin.
Mitä vaatii
Rive-kirjasto sivustolle ja suunnitelma siitä, mihin kävijän toimintoihin animaatio reagoi. Suunnittelu vaatii enemmän työtä kuin tavallinen animaatio, mutta lopputulos on aidosti vuorovaikutteinen.
Mikä
Animaatio etenee sitä mukaa, kun kävijä vierittää sivua. Tarina avautuu kävijän omaan tahtiin, ja tekstit ja kuvat voivat tulla esiin juuri oikealla hetkellä.
Mitä vaatii
Animaatio suunnitellaan yhdessä sivun rakenteen kanssa. Mobiilinäkymä huomioidaan erikseen, koska vierittäminen toimii puhelimessa eri tavalla kuin isolla näytöllä.
Mikä
Kokonaan katsottava animaatio, joka upotetaan sivustolle omana tiedostonaan tai videopalvelun, kuten YouTuben tai Vimeon, kautta.
Mitä vaatii
Videon tuotanto ja valinta siitä, julkaistaanko video omalta palvelimelta vai videopalvelun kautta. Jos videossa on puhetta, siihen tarvitaan tekstitys saavutettavuuden vuoksi.
Animaatio osana sivustoa
Me kerromme missä tilanteessa animaation tulisi olla vahvemmin osa sivustoa, sekä mikä kaikki on mahdollista animaatioiden avulla verkossa.
Osa kokonaisuutta
Sama tiimi suunnittelee käyttöliittymän ja animaatiot, joten animaatiot tuntuvat osalta sivustoa.
Sujuva kaikilla laitteilla
Animaatiot toteutetaan niin, että sivusto pysyy kevyenä ja toimii yhtä hyvin puhelimessa kuin isolla näytöllä.
Saavutettava myös liikkeessä
Animaatio mukautuu, jos kävijä on rajoittanut liikettä laitteensa asetuksista, eikä tärkeä tieto ole koskaan pelkän animaation varassa.
Idea syntyy yhdessä
Valmista käsikirjoitusta ei tarvita. Mietitään yhdessä, missä kohtaa sivustoa liike toisi eniten hyötyä.
Ota yhteyttä
Aloitetaan yhteistyö!
Kerro lyhyesti tarpeestanne ja olemme yhteydessä.
Arto Saksola
CEO
Usein kysyttyä
Animaatioista tulee aina jonkinlainen vaikutus latausnopeuteen. Animaatiot rakennetaan kevyiksi ja ladataan vasta, kun niitä tarvitaan, jolloin vaikutus sivuston nopeuteen pidetään mahdollisimman vähäisenä.
Video katsotaan alusta loppuun sellaisenaan. Sivustoon upotettu animaatio voi edetä kävijän vierittäessä sivua tai reagoida klikkauksiin, jolloin kävijä etenee omaan tahtiinsa. Kumpikin toimii, ja valinta riippuu siitä, mitä animaatiolla halutaan kertoa.
Kyllä. Animaatio voidaan suunnitella myös nykyiselle sivustolle, kun sen tekniikka sen sallii. Arvioimme tämän yhdessä ennen työn aloittamista.
Se riippuu animaation tyypistä. Pienet ikonianimaatiot ovat kevyt lisä sivustoprojektiin, kun taas pitkä tai interaktiivinen animaatio on oma kokonaisuutensa, jonka laajuus sovitaan tarpeen mukaan.
Ei tarvita. Riittää, että tiedät, mitä haluat kävijän ymmärtävän. Animaation idea ja toteutustapa mietitään yhdessä.
Kyllä. Animaatio suunnitellaan brändisi värien, typografian ja kuvitustyylin mukaan, jolloin se istuu sivustoon luontevasti.