Selainpohjaisen gacha-näkymän suunnittelu ja toteutus

Abstract

Gacha-sovellukset ja modernit verkkosivut ovat visuaaliselta ilmeeltään lähes toistensa vastakohdat; gacha-näkymät edustavat maksimalistista tyylisuuntaa, kun taas verkkosivuilla suositaan minimalismia. Työssä tutkittiin suosittujen pelien gacha-näkymiä käyttöliittyminä sekä niiden visuaalisen ilmeen keskeisimpiä elementtejä. Lisäksi tutustuttiin tuoreimpiin web-suunnittelutrendeihin. Tavoitteena oli selvittää, kuinka helposti gacha-näkymille tyypilliset elementit ovat sovellettavissa modernien verkkosivujen muotoon.

Kerätyn tiedon perusteella toteutettiin Reactilla pienimuotoinen esimerkkisovellus, jonka suunnittelussa hyödynnettiin aiemmin kerättyä tietoa gacha-näkymien rakenteesta. Näkymän visuaaliseen ilmeeseen sisällytettiin useita tuoreita web-suunnittelutrendejä.

Tärkeimmät johtopäätökset olivat, että gacha-näkymien peruselementit ovat helposti sovellettavissa verkkosivumuotoon, ja gachalle tyypillisiä animaatioita saa toteutettua helposti CSS-animaatioina. CSS-animaatioita on myös helppoa porrastaa. Eniten vaikeuksia selainpohjaisen gacha-sovelluksen toteuttamisessa aiheutti mobiiliresponsiivisuus. Sovellusta olisi voinut jatkokehittää esimerkiksi lisäämällä animaatioiden tueksi myös ääniä.

Gacha applications and modern websites have little in common. In gacha the design is often busy and maximalist while modern websites tend to be more on the minimalistic side. The objective of this thesis was to study the user interfaces of popular gacha games and the visual design. Information on modern web design trends was also collected. The purpose was to figure out how the elements of a typical gacha could be turned into a modern website.

A small application was designed and developed based on the results. The application combined the elements of a gacha with modern web design. Multiple web design trends were included in the visual design.

The conclusion of the thesis is that the basic user interface of a gacha application can be easily turned into a website. The animations can be made with CSS, and timing them is simple. The most notable challenge was making the application responsive because the user interfaces of horizontal gachas differ drastically from vertical ones. Further development could include adding sound to the application.