Perancangan Antarmuka Pemakai User Interface

6. State Transition Diagram Prov. Jawa Timur Gambar 4.32 State Transition Diagram Prov. Jawa Timur

4.3.5 Perancangan Antarmuka Pemakai User Interface

Perancangan antarmuka pemakai User Interface pada aplikasi multimedia ini akan ditampilkan sesuai dengan kebutuhan pengguna yang akan melihat informasi yang dibutuhkan. Pada aplikasi multimedia ini terdapat beberapa tampilan menu yang akan memuat tampilan-tampilan informasi berdasarkan navigasi yang ada. Rancangan aplikasi multimedia ini terdiri atas: 1. Rancangan Tampilan Halaman Intro Pada rancangan tampilan intro yang merupakan tahapan awal dari halaman opening menuju halaman utama dari aplikasi multimedia. Pada tampilan intro tidak terdapat tombol, jadi hanya berupa tampilan video saja. Setelah video selesai di putar, secara otomatis tampilan akan langsung berubah menjadi halaman utama. Dan bisa juga dengan mengklik video maka akan langsung menuju ke halaman utama tanpa menunggu video selesai diputar. Gambar 4.33 Rancangan Tampilan Halaman Intro 2. Rancangan Menu Utama Rancangan ini merupakan rancangan yang digunakan sebagai tampilan utama dari aplikasi yang dibuat. Bagian atas tampilan halaman utama terdapat tulisan ”Mengenal Budaya Rumah Adat Pulau Jawa” dan di tengah halaman utama terdapat peta pulau jawa. Tulisan dan peta ini bertujuan untuk memberitahukan user bahwa aplikasi ini adalah aplikasi tentang rumah adat yang ada di pulau Jawa. Background gambar peta pulau Jawa Selain itu peta pulau Jawa kemudian dijadikan tombol menurut provinsi masing-masing, sehingga menjadi 6 tombol provinsi yang ada di pulau Jawa. Tombol-tombol itu antara lain: • Prov. Banten, berfungsi untuk menampilkan info tentang Prov. Banten. • Prov. DKI jakarta, berfungsi untuk menampilkan info tentang Prov. DKI Jakarta. • Prov. Jawa Barat, berfungsi untuk menampilkan info tentang Prov. Jawa Barat. • Prov. Jawa Tengah, untuk menampilkan info tentang Prov. Jawa Tengah. • Prov. D.I. Yogyakarta, untuk menampilkan info tentang Prov. D.I. Yogyakarta. • Prov. Jawa Timur, untuk menampilkan info tentang Prov. Jawa Timur. Di bagian bawah juga terdapat dua buah tombol yaitu: • Volume, berfungsi untuk mengecilkan dan memperbesar volume musik pada aplikasi ini. • Keluar, berfungsi untuk keluar dari aplikasi. Gambar 4.34 Rancangan Menu Utama 3. Rancangan Menu Informasi Prov. Banten Rancangan menu ini digunakan untuk menampilkan informasi tentang Prov. Banten. Di dalamnya terdapat beberapa tombol yaitu: • Rumah Adat, berfungsi untuk menampilkan informasi tentang rumah adat Prov. Banten yaitu rumah panggung. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Keluar, berfungsi untuk keluar dari aplikasi. Mengenal Budaya Rumah Adat P. Jawa - Volume + Keluar Prov. Banten Prov. DKI Jakarta Prov. Jawa Barat Prov. Jawa Tengah Prov. D.I. Yogyakarta Prov. Jawa Timur 4. Rancangan Menu Informasi Rumah Adat Prov. Banten Rancangan menu ini digunakan untuk menampilkan informasi tentang rumah adat Prov. Banten. Di dalamnya terdapat beberapa tombol yaitu: • Prototype rumah adat, berfungsi untuk menampilkan prototype dari rumah adat Prov. Banten yaitu rumah panggung. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan kembali halaman info Prov. Banten • Keluar, berfungsi untuk keluar dari aplikasi. Keluar Peta Prov. Banten Logo Prov. Banten Informasi Prov. Banten Rumah Adat Peta Gambar 4.35 Rancangan Menu Informasi Prov. Banten Gambar 4.36 Rancangan Menu Informasi Rumah Adat Prov. Banten 5. Rancangan Menu Prototype Rumah Adat Prov. Banten Rancangan menu ini digunakan untuk menampilkan prototype rumah adat Prov. Banten berbentuk 3 Dimensi sehingga user bisa melihat rumah adat seperti aslinya dan juga bisa digerakkan dengan menggunakan tombol yang tersedia. Di dalamnya terdapat beberapa tombol yaitu: • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan halaman info rumah adat Prov. Banten. • Keluar, berfungsi untuk keluar dari aplikasi. • Kanan, berfungsi untuk menggerakkan rumah adat berputar ke posisi kanan. • Kiri, berfungsi untuk menggerakkan rumah adat berputar ke posisi kiri. Keluar Informasi Rumah Adat Prov. Banten Peta MENGENAL RUMAH ADAT PROV. BANTEN Prototype rumah adat • Reset, berfungsi untuk mengembalikan posisi rumah adat ke posisi semula. • Zoom In, berfungsi untuk memperbesar posisi rumah adat. • Zoom Out, berfungsi untuk memperkecil posisi rumah adat. Gambar 4.37 Rancangan Menu Prototype Rumah Adat Prov. Banten 6. Rancangan Menu Informasi Prov. DKI Jakarta Rancangan menu ini digunakan untuk menampilkan informasi tentang Prov. DKI Jakarta. Di dalamnya terdapat beberapa tombol yaitu: • Rumah Adat, berfungsi untuk menampilkan informasi tentang rumah adat Prov. DKI Jakarta yaitu rumah kebaya. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Keluar, berfungsi untuk keluar dari aplikasi. Keluar Peta Prototype Rumah Adat Prov. Banten Prototype Rumah Adat Prov. Banten Reset Zoom In Zoom Out 7. Rancangan Menu Rumah Adat Prov. DKI Jakarta Rancangan menu ini digunakan untuk menampilkan informasi tentang rumah adat Prov. DKI Jakarta. Di dalamnya terdapat beberapa tombol yaitu: • Prototype rumah adat, berfungsi untuk menampilkan prototype dari rumah adat Prov. DKI Jakarta yaitu rumah kebaya. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan kembali halaman info Prov. DKI Jakarta. • Keluar, berfungsi untuk keluar dari aplikasi. Gambar 4.38 Rancangan Menu Informasi Prov. DKI Jakarta Keluar Peta Prov. DKI Jakarta Logo Prov. DKI Jakarta Informasi Prov. DKI Jakarta Rumah Adat Peta Informasi tentang Logo Prov. DKI Jakarta Gambar 4.39 Rancangan Menu Informasi Rumah Adat Prov. DKI Jakarta 8. Rancangan Menu Prototype Rumah Adat Prov. DKI Jakarta Rancangan menu ini digunakan untuk menampilkan prototype rumah adat Prov. DKI Jakarta berbentuk 3 Dimensi sehingga user bisa melihat rumah adat seperti aslinya dan juga bisa digerakkan dengan menggunakan tombol yang tersedia. Di dalamnya terdapat beberapa tombol yaitu: • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan halaman info rumah adat Prov. DKI Jakarta. • Keluar, berfungsi untuk keluar dari aplikasi. • Kanan, berfungsi untuk menggerakkan rumah adat berputar ke posisi kanan. • Kiri, berfungsi untuk menggerakkan rumah adat berputar ke posisi kiri. Keluar Informasi Rumah Adat Prov. DKI Jakarta Peta MENGENAL RUMAH ADAT PROV. DKI JAKARTA Prototype rumah adat • Reset, berfungsi untuk mengembalikan posisi rumah adat ke posisi semula. • Zoom In, berfungsi untuk memperbesar posisi rumah adat. • Zoom Out, berfungsi untuk memperkecil posisi rumah adat. Gambar 4.40 Rancangan Menu Prototype Rumah Adat Prov. DKI Jakarta 9. Rancangan Menu Informasi Prov. Jawa Barat Rancangan menu ini digunakan untuk menampilkan informasi tentang Prov. Jawa Barat. Di dalamnya terdapat beberapa tombol yaitu: • Rumah Adat, berfungsi untuk menampilkan informasi tentang rumah adat Prov. Jawa Barat yaitu keraton kasepuhan cirebon. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Keluar, berfungsi untuk keluar dari aplikasi. Keluar Peta Prototype Rumah Adat Prov. DKI Jakarta Prototype Rumah Adat Prov. DKI Jakarta Reset Zoom In Zoom Out 10. Rancangan Menu Informasi Rumah Adat Prov. Jawa Barat Rancangan menu ini digunakan untuk menampilkan informasi tentang rumah adat Prov. Jawa Barat. Di dalamnya terdapat beberapa tombol yaitu: • Prototype rumah adat, berfungsi untuk menampilkan prototype dari rumah adat Prov. Jawa Barat yaitu keraton kasepuhan cirebon. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan kembali halaman info Prov. Jawa Barat. • Keluar, berfungsi untuk keluar dari aplikasi. Gambar 4. 41 Rancangan Menu Informasi Prov. Jawa Barat Peta Prov. Jawa Barat Logo Prov. Jawa Barat Informasi Prov. Jawa Barat Rumah Adat Peta Informasi tentang Logo Prov. Jawa Barat Keluar Gambar 4.42 Rancangan Menu Informasi Rumah Adat Prov. Jawa Barat 11. Rancangan Menu Prototype Rumah Adat Prov. Jawa Barat Rancangan menu ini digunakan untuk menampilkan prototype rumah adat Prov. Jawa Barat Jakarta berbentuk 3 Dimensi sehingga user bisa melihat rumah adat seperti aslinya dan juga bisa digerakkan dengan menggunakan tombol yang tersedia. Di dalamnya terdapat beberapa tombol yaitu: • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan halaman info rumah adat Prov. Jawa Barat. • Keluar, berfungsi untuk keluar dari aplikasi. • Kanan, berfungsi untuk menggerakkan rumah adat berputar ke posisi kanan. • Kiri, berfungsi untuk menggerakkan rumah adat berputar ke posisi kiri. Keluar Informasi Rumah Adat Prov. Jawa Barat Peta MENGENAL RUMAH ADAT PROV. JAWA BARAT Prototype rumah adat • Reset, berfungsi untuk mengembalikan posisi rumah adat ke posisi semula. • Zoom In, berfungsi untuk memperbesar posisi rumah adat. • Zoom Out, berfungsi untuk memperkecil posisi rumah adat. Gambar 4.43 Rancangan Menu Prototype Rumah Adat Prov. Jawa Barat 12. Rancangan Menu Informasi Prov. Jawa Tengah Rancangan menu ini digunakan untuk menampilkan informasi tentang Prov. Jawa Tengah. Di dalamnya terdapat beberapa tombol yaitu: • Rumah Adat, berfungsi untuk menampilkan informasi tentang rumah adat Prov. Jawa Tengah yaitu rumah joglo. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Keluar, berfungsi untuk keluar dari aplikasi. Keluar Peta Prototype Rumah Adat Prov. Jawa Barat Prototype Rumah Adat Prov. Jawa Barat Reset Zoom In Zoom Out 13. Rancangan Menu Rumah Adat Prov. Jawa Tengah Rancangan menu ini digunakan untuk menampilkan informasi tentang rumah adat Prov. Jawa Tengah. Di dalamnya terdapat beberapa tombol yaitu: • Prototype rumah adat, berfungsi untuk menampilkan prototype dari rumah adat Prov. Jawa Tengah yaitu rumah joglo. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan kembali halaman info Prov. Jawa Tengah. • Keluar, berfungsi untuk keluar dari aplikasi. Gambar 4.44 Rancangan Menu Informasi Prov. Jawa Tengah Peta Prov. Jawa Tengah Logo Prov. Jawa Tengah Informasi Prov. Jawa Tengah Rumah Adat Peta Informasi tentang Logo Prov. Jawa Tengah Keluar Gambar 4.45 Rancangan Menu Informasi Rumah Adat Prov. Jawa Tengah 14. Rancangan Menu Prototype Rumah Adat Prov. Tengah Rancangan menu ini digunakan untuk menampilkan prototype rumah adat Prov. Jawa Tengah Jakarta berbentuk 3 Dimensi sehingga user bisa melihat rumah adat seperti aslinya dan juga bisa digerakkan dengan menggunakan tombol yang tersedia. Di dalamnya terdapat beberapa tombol yaitu: • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan halaman info rumah adat Prov. Jawa Tengah. • Keluar, berfungsi untuk keluar dari aplikasi. • Kanan, berfungsi untuk menggerakkan rumah adat berputar ke posisi kanan. • Kiri, berfungsi untuk menggerakkan rumah adat berputar ke posisi kiri. Keluar Informasi Rumah Adat Prov. Jawa Tengah Peta MENGENAL RUMAH ADAT PROV. JAWA TENGAH Prototype rumah adat • Reset, berfungsi untuk mengembalikan posisi rumah adat ke posisi semula. • Zoom In, berfungsi untuk memperbesar posisi rumah adat. • Zoom Out, berfungsi untuk memperkecil posisi rumah adat. Gambar 4.46 Rancangan Menu Prototype Rumah Adat Prov. Jawa Tengah 15. Rancangan Menu Informasi Prov. D.I. Yogyakarta Rancangan menu ini digunakan untuk menampilkan informasi tentang Prov. D.I. Yogyakarta. Di dalamnya terdapat beberapa tombol yaitu: • Rumah Adat, berfungsi untuk menampilkan informasi tentang rumah adat Prov. D.I. Yogyakarta yaitu keraton bangsal kencono. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Keluar, berfungsi untuk keluar dari aplikasi. Keluar Peta Prototype Rumah Adat Prov. Jawa Tengah Prototype Rumah Adat Prov. Jawa Tengah Reset Zoom In Zoom Out 16. Rancangan Menu Informasi Rumah Adat Prov. D.I. Yogyakarta Rancangan menu ini digunakan untuk menampilkan informasi tentang rumah adat Prov. D.I. Yogyakarta. Di dalamnya terdapat beberapa tombol yaitu: • Prototype rumah adat, berfungsi untuk menampilkan prototype dari rumah adat Prov. D.I. Yogyakarta yaitu keraton bangsal kencono. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan kembali halaman info Prov. D.I. Yogyakarta. • Keluar, berfungsi untuk keluar dari aplikasi. Gambar 4.47 Rancangan Menu Informasi Prov. D.I. Yogyakarta Peta Prov. D.I. Yogyakarta Logo Prov. D.I. Yogyakarta Informasi Prov. D.I. Yogyakarta Rumah Adat Peta Informasi tentang Logo Prov. D.I. Yogyakarta Keluar Gambar 4.48 Rancangan Menu Informasi Rumah Adat Prov. D.I. Yogyakarta 17. Rancangan Menu Prototype Rumah Adat Prov. D.I. Yogyakarta Rancangan menu ini digunakan untuk menampilkan prototype rumah adat Prov. D.I. Yogyakarta berbentuk 3 Dimensi sehingga user bisa melihat rumah adat seperti aslinya dan juga bisa digerakkan dengan menggunakan tombol yang tersedia. Di dalamnya terdapat beberapa tombol yaitu: • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan halaman info rumah adat Prov. D.I. Yogyakarta. • Keluar, berfungsi untuk keluar dari aplikasi. • Kanan, berfungsi untuk menggerakkan rumah adat berputar ke posisi kanan. • Kiri, berfungsi untuk menggerakkan rumah adat berputar ke posisi kiri. Keluar Informasi Rumah Adat Prov. D.I. Yogyakarta Peta MENGENAL RUMAH ADAT PROV. D.I. YOGYAKARTA Prototype rumah adat • Reset, berfungsi untuk mengembalikan posisi rumah adat ke posisi semula. • Zoom In, berfungsi untuk memperbesar posisi rumah adat. • Zoom Out, berfungsi untuk memperkecil posisi rumah adat. Gambar 4.49 Rancangan Menu Prototype Rumah Adat Prov. D.I. Yogyakarta 18. Rancangan Menu Informasi Prov. Jawa Timur Rancangan menu ini digunakan untuk menampilkan informasi tentang Prov. Jawa Timur. Di dalamnya terdapat beberapa tombol yaitu: • Rumah Adat, berfungsi untuk menampilkan informasi tentang rumah adat Prov. Jawa Timur yaitu rumah padepokan. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Keluar, berfungsi untuk keluar dari aplikasi. Keluar Peta Prototype Rumah Adat Prov. D.I. Yogyakarta Prototype Rumah Adat Prov. D.I. Yogyakarta Reset Zoom In Zoom Out 19. Rancangan Menu Informasi Rumah Adat Prov. Jawa Timur Rancangan menu ini digunakan untuk menampilkan informasi tentang rumah adat Prov. Jawa Timur. Di dalamnya terdapat beberapa tombol yaitu: • Prototype rumah adat, berfungsi untuk menampilkan prototype dari rumah adat Prov. Jawa Timur yaitu rumah padepokan. • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan kembali halaman info Prov. Jawa Timur. • Keluar, berfungsi untuk keluar dari aplikasi. Gambar 4.50 Rancangan Menu Informasi Prov. Jawa Timur Peta Prov. Jawa Timur Logo Prov. Jawa Timur Informasi Prov. Jawa Timur Rumah Adat Peta Informasi tentang Logo Prov. Jawa Timur Keluar Gambar 4.51 Rancangan Menu Informasi Rumah Adat Prov. Jawa Timur 20. Rancangan Menu Prototype Rumah Adat Prov. Jawa Timur Rancangan menu ini digunakan untuk menampilkan prototype rumah adat Prov. Jawa Timur berbentuk 3 Dimensi sehingga user bisa melihat rumah adat seperti aslinya dan juga bisa digerakkan dengan menggunakan tombol yang tersedia. Di dalamnya terdapat beberapa tombol yaitu: • Peta, berfungsi untuk menampilkan kembali halaman utama. • Kembali, berfungsi untuk menampilkan halaman info rumah adat Prov. Jawa Timur. • Keluar, berfungsi untuk keluar dari aplikasi. • Kanan, berfungsi untuk menggerakkan rumah adat berputar ke posisi kanan. • Kiri, berfungsi untuk menggerakkan rumah adat berputar ke posisi kiri. Keluar Informasi Rumah Adat Prov. Jawa Timur Peta MENGENAL RUMAH ADAT PROV. JAWA TIMUR Prototype rumah adat • Reset, berfungsi untuk mengembalikan posisi rumah adat ke posisi semula. • Zoom In, berfungsi untuk memperbesar posisi rumah adat. • Zoom Out, berfungsi untuk memperkecil posisi rumah adat. Gambar 4.52 Rancangan Menu Prototype Rumah Adat Prov. Jawa Timur

4.4 Pengumpulan Bahan-bahan