Perancangan Ui/Ux Dalam Mobile Game Musik “Oklik”
Total Page:16
File Type:pdf, Size:1020Kb
PERANCANGAN UI/UX DALAM MOBILE GAME MUSIK “OKLIK” Laporan Tugas Akhir Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.) Nama : Rhein Louis Thierry Chandra NIM : 00000013143 Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG 2020 ii KATA PENGANTAR Puji syukur kepada Tuhan Yang Maha Esa atas berkat rahmat dan karunia-Nya, proposal Tugas Akhir ini dapat diselesaikan dalam rangka untuk memenuhi sebagian syarat mendapatkan gelar Sarjana. Penulis berterimakasih kepada berbagai pihak yang membantu dan berpartisipasi dalam perancangan Tugas Akhir game “Oklik” beserta laporan ini. Pihak tersebut antara lain: 1. Mohammad Rizaldi, S.T., M.Ds., sebagai Ketua Program Studi Desain Komunikasi Visual, Universitas Multimedia Nusantara. 2. Lalitya Talitha Pinasthika, M.Ds., koordinator tugas akhir dan sebagai pembimbing penulis dalam perancangan “Oklik”. 3. Nadia Mahatmi, M.Ds., dan Adhreza Brahma, M.Ds., sebagai Ketua Sidang dan Penguji. 4. Kelompok oklik Resing Budoyo dan juga Om Kanjeng sebagai narasumber tentang oklik di Bojonegoro. 5. Nusa Beta Studio sebagai narasumber untuk UI/UX. 6. Bernadine Thendean dan Stefan Theodoric sebagai anggota inti tim dan laporan Tugas Akhir. 7. Alfate sebagai composer background music (BGM) dan juga coder. 8. Mahasiswa Interaction Design yang juga mengambil Tugas Akhir pada semester gasal tahun ajaran 2019/2020. 9. Keluarga yang memberi motivasi kepada penulis untuk menyelesaikan Tugas Akhir ini. iii iv ABSTRAKSI Kentongan merupakan alat komunikasi tradisional. Tetapi, kentongan memiliki potensi sebagai alat musik tradisional jika dimainkan bersama-sama dengan ritme berbeda-beda, di Bojonegoro musik ini disebut Oklik. Tetapi, potensi dari musik Oklik ini masih kurang dikenal luas oleh masyarakat di luar dari daerah Bojonegoro. Pada kesempatan kali ini, penulis ingin mengenalkan Oklik kepada masyarakat di luar Bojonegoro lewat medium video game Penulis akan merancang video game yang berupa kompilasi mini game untuk mengenalkan Oklik dengan menggunakan teori tentang UI/UX, desain, dan game. Lewat video game yang dirancang ini, penulis berharap masyarakat di luar Bojonegoro dapat mengenal Oklik sebagai salah satu alat musik tradisional dari Indonesia. Kata kunci : oklik, video game, UI, UX, mini game. v ABSTRACT Kentongan is a traditional communication tool. But, kentongan have a potency as a traditional musical instruments if played together in a different rhythmic, in Bojonegoro this music called Oklik. But, the potency of Oklik as music haven’t been noticed by people outside from Bojonegoro. On this occasion, the writer wants to introduce Oklik to the people outside from Bojonegoro using video game as the medium. The writer will design a mini game compilation video game to introduce Oklik using UI/UX, design, and game theory. With this mini game that are designed, the writer hope the people outside Bojonegoro will know Oklik as one of many traditional musical instrument from Indonesia. Keywords: oklik, video game, UI, UX, mini game. vi DAFTAR ISI LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ............. Error! Bookmark not defined. HALAMAN PENGESAHAN TUGAS AKHIR .... Error! Bookmark not defined. KATA PENGANTAR ....................................................................................... iii ABSTRAKSI ...................................................................................................... v ABSTRACT........................................................................................................ vi DAFTAR ISI .................................................................................................... vii DAFTAR GAMBAR .......................................................................................... x DAFTAR TABEL ........................................................................................... xiv DAFTAR LAMPIRAN .................................................................................... xv BAB I PENDAHULUAN ................................................................................... 1 1.1. Latar Belakang ..................................................................................... 1 1.2. Rumusan Masalah ................................................................................ 4 1.3. Batasan Masalah ................................................................................... 4 1.4. Tujuan Tugas Akhir .............................................................................. 5 1.5. Manfaat Tugas Akhir ............................................................................ 5 BAB II TINJAUAN PUSTAKA ........................................................................ 7 2.1. Teori Perancangan ................................................................................ 7 2.1.1. Elemen-Elemen Desain ............................................................. 7 vii 2.1.2. Prinsip-Prinsip Desain ............................................................. 11 2.2. Tipografi ............................................................................................ 13 2.2.1 Tipografi Pada Media Digital ............................................................. 15 2.3. Layout ................................................................................................ 17 2.3.1 Layout Pada Media Digital ................................................................. 19 2.4. Game .................................................................................................. 21 3.2.1 Genre ................................................................................................. 22 3.2.2 Rhythm Game ..................................................................................... 24 3.2.3 Dampak Positif Game ......................................................................... 25 2.5. User Experience Design ..................................................................... 25 2.5.1. User Experience...................................................................... 27 2.6. User Interface Design ......................................................................... 31 2.6.1. Prinsip UI ............................................................................... 32 2.7. Graphical User Interface (GUI) & Head-Up Display (HUD) ............. 36 2.8. Musik ................................................................................................. 42 2.8.1. Jenis Musik ............................................................................. 44 2.8.2. Musik Tradisional ................................................................... 45 BAB III METODOLOGI ............................................................................... 48 3.1. Metodologi Pengumpulan Data........................................................... 48 3.1.1. Studi Pustaka .......................................................................... 48 3.1.2. Kuesioner................................................................................ 49 3.1.3. Wawancara ............................................................................. 50 3.1.4. Studi Eksisting ........................................................................ 55 viii 3.1.4.1. “Patapon”................................................................................ 56 3.1.4.2. “Jungle Rumble” ..................................................................... 59 3.1.4.3. “Cooking Mama” .................................................................... 62 3.1.4.4. Analisis Studi Eksisting .......................................................... 64 3.2. Metodologi Perancangan .................................................................... 69 3.2.1. Understand ............................................................................. 71 3.2.2. Diverge ................................................................................... 72 3.2.3. Converge ................................................................................ 73 3.2.3.1. Moodboard ............................................................................. 73 3.2.3.2. Wireframe ............................................................................... 75 3.2.4. Prototype ................................................................................ 80 3.2.4.1. Frame Bambu ......................................................................... 80 3.2.4.2. Ikon ........................................................................................ 82 3.2.4.3. Pemilihan Font ....................................................................... 83 3.2.4.4. Perancangan Logo ................................................................... 84 3.2.5. Test ......................................................................................... 85 BAB IV ANALISIS ......................................................................................... 86 4.1. Analisis Alpha Test ............................................................................. 86 4.1.1. Perubahan Gaya Visual UI ...................................................... 86 4.1.2. Prototype ................................................................................ 88 4.1.3. Analisis Pengguna................................................................... 89 4.1.3.1. User Experience & User Interface .......................................... 89 4.2. Analisis Beta Test ............................................................................. 104 ix 4.2.1.