Perancangan Sistem Perancangan Antarmuka Sistem

3.4. Perancangan Sistem

Berdasarkan analisis terhadap sistem, maka dibangun Flowchart sistem yang menggambarkan lebih rinci tentang bagaimana setiap langkah program atau prosedur dalam satu urutan. Pada gambar 3.5 menjelaskan mengenai beberapa Menu dari aplikasi yang dapat diakses user. Proses menampilkan objek AR dapat terlihat pada Menu Start yang ketika di-klik maka akan masuk kedalam halaman Category, yang didalamnya terdapat objek dan video mengenaik kebudayaan nias yang dapat dipilih. Didalam salah satu objek terdapat penjelasan dari objek tersebut, tombol Main dan Augmented Reality. Start Tombol Start Tombol Information Tombol About Tombol Exit Tombol Objek Tampilan Video Tidak Tidak Tidak End Halama Utama Tombol Video Halama Category Ya Tidak Ya Halaman Objek Kalabubu Kalabubu Ya Ya Tombol AR Augmented Reality Kalabubu Ya Tidak Toho Tidak Baluse Tidak Hombo Batu Tidak Halaman Objek Toho Ya Tombol AR Augmented Reality Toho Ya Tidak Halaman Objek Baluse Ya Tombol AR Augmented Reality Baluse Ya Tidak Halaman Objek Hombo Batu Ya Tombol AR Augmented Reality Baluse Ya Tidak Tidak Halaman Information Ya Halaman Aboout Ya Halaman Warning Ya YesNo Ya Tidak Tidak Tidak 1 2 2 2 2 2 2 1 1 Gambar 3.5. Flowchart Sistem Universitas Sumatera Utara

3.5. Perancangan Antarmuka Sistem

Perancangan Sistem dibangun menggunakan Unity sebagai media pembuat user interface tatap muka, dan juga sebagai compiler untuk menjadikan project Unity menjadi ekstensi .apk yang berjalan pada Smartphone Android. Bahasa pemrograman yang dipakai penulis adalah C Sharp C. 3.5.1. Rancangan Halaman Home Rancangan pada halaman Home dapat dilihat pada gambar 3.6, serta keterangan komponen yang terdapat pada halaman Home dapat dilihat pada tabel 3.2. AR. KEBUDAYAAN NIAS INFORMATION START ABOUT EXIT 2 3 4 5 1 Gambar 3.6. Rancangan Halaman Home Universitas Sumatera Utara Tabel 3.2. Komponen-Komponen pada Halaman Home No Jenis Komponen Keterangan 1 Nama Aplikasi Text Judul Aplikasi 2 Tombol Start Button Tombol yang akan menampilkan halaman Category 3 Tombol Information Button Tombol yang akan menampilkan halaman Information 4 Tombol AboutButton Tombol yang akan menampilkan halaman About 6 Tombol Exit Button Tombol yang akan menampilkan halaman Warning untuk keluar aplikasi 3.5.2. Rancangan Halaman Category Rancangan halaman Category dapat dilihat pada gambar 3.7. serta keterangan komponen yang terdapat pada halaman Category dapat dilihat pada tabel 3.3. KEBUDAYAAN NIAS PERLENGKAPAN KEBUDAYAAN VIDEO HOMBO BATU BACK 1 2 3 4 Gambar 3.7. Rancangan Halaman Category Universitas Sumatera Utara Tabel 3.3. Komponen-Komponen pada Halaman Category No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Tombo Perlengkapan Kebudayaan Button Tombol yang akan menampilkan halaman Jenis- jenis perlengkapan Kebudayaan 3 Tombol Video Button Tombol yang akan menampilkan Video Hombo Batu 4 Tombo Back Button Tombol untuk kembali ke halaman utama 3.5.3. Rancangan Halaman category objek Rancangan halaman category objek dapat dilihat pada gambar 3.8, serta keterangan komponen yang terdapat pada halaman category objek dapat dilihat pada tabel 3.4. Gambar 3.8. Rancangan Halaman Informasi Objek Category Objek Objek Yang dipilih Teks Gambar Back 1 2 3 4 5 Universitas Sumatera Utara Tabel 3.4. Komponen-Komponen pada Halaman Category Objek No Jenis Komponen Keterangan 1 Nama halaman Text Judul Halaman 2 Jenis-jenis objek yang ingin dipilih Button Tombol yang akan menampilkan objek-objek yang akan dipilih 3 Gambar salah satu kebudayaan Nias Gambar atraksi kebudayaan Nias dalam hal ini Lompat Batu 4 Informasi penggunaan aplikasi Text Penjelasan mengenai category objek tersebut 5 Tombol Back Button Tombol untuk kembali ke halaman category Kebudayaan Nias 3.5.4. Rancangan Halaman Objek Dalam Rancangan halaman Objek Kalabubu dapat dilihat pada gambar 3.9, serta keterangan komponen yang terdapat pada halaman Main dapat dilihat pada tabel 3.5. Objek Gambar Text Back AR 1 2 3 4 5 Gambar 3.9. Rancangan Halaman Objek Universitas Sumatera Utara Tabel 3.5. Komponen-Komponen pada Halaman Objek No Jenis Komponen Keterangan 1 Nama halaman Text Nama objek 2 Gambar Objek Gambar bentuk asli dari objek Kalabubu 3 Tombol Augmented Reality Button Menampilkan Objek 3D yang dipilih 4 Keterangan objek Text Penjelasan mengenai asal-usul objek yang dipilih 5 Tombol Back Button Tombol yang akan menampilkan kembali ke halaman Category Objek 3.5.5. Rancangan Halaman Video Rancangan Video dapat dilihat pada gambar 3.10, serta keterangan komponen yang terdapat pada halaman Video dapat dilihat pada tabel 3.6. Video Video Hombo Batu Back 1 2 3 Gambar 3.10. Rancangan Halaman Video Universitas Sumatera Utara Tabel 3.6. Komponen-Komponen pada Halaman Video No Jenis Komponen Keterangan 1 Nama halaman Text Nama Video 2 Video Hombo Batu Video yang berisikan salah satu kebudayaan Nias yaitu Hombo Batu 3 Tombol Back Button Menampilkan Objek 3D yang dipilih 4 Keterangan objek Text Penjelasan mengenai asal-usul objek yang dipilih 5 Tombol Back Button Tombol yang akan menampilkan kembali ke halaman Category 3.5.6. Rancangan Halaman Augmented Reality Rancangan halaman Augmented Reality dapat dilihat pada gambar 3.11, serta keterangan komponen yang terdapat pada halaman Augmented Reality dapat dilihat pada tabel 3.7. Objek 3D dengan Augmented Reality Back 1 2 Gambar 3.11. Rancangan Halaman Augmented Reality Universitas Sumatera Utara Tabel 3.7. Komponen-Komponen pada Halaman Augmented Reality No Jenis Komponen Keterangan 1 Objek 3D Mesh dan Texture Objek 3D yang tampil sesuai dengan objek yang dipilih pada halaman Objek 2 Tombol Back Button Tombol yang akan menampilkan kembali ke halama category objek 3.5.7. Rancangan Halaman Tutorial Rancangan halaman Tutorial dapat dilihat pada gambar 3.12. serta keterangan komponen yang terdapat pada halaman Tutorial dapat dilihat pada table 3.8. TUTORIAL BACK 1 5 Text Gambar Link Marker Gambar 2 3 4 Gambar 3.12. Rancangan Halaman Tutorial Universitas Sumatera Utara Tabel 3.8. Komponen-Komponen pada Halaman Tutorial No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Deskripsi Tutorial Text Menjelaskan bagaimana cara pemakaian aplikasi Pengenalan Kebudayaan Nias 3 Tutorial Image Menampilkan penggunaan berdasarkan gambar 4 Tombol link marker Button Tombol yang akan men-trigger memicu browser smartphone untuk membuka suatu link download berupa marker dengan ekstensi .jpg 5 Tombol Back Button Tombol yang akan menampilkan kembali ke halaman Home 3.5.8. Rancangan Halaman About Dalam Rancangan halaman About dapat dilihat pada gambar 3.13, serta keterangan komponen yang terdapat pada halaman About dapat dilihat pada tabel 3.9. ABOUT Back Gambar Text Text 1 2 3 4 5 Gambar 3.13. Rancangan Halaman About Universitas Sumatera Utara Tabel 3.9. Komponen-Komponen pada Halaman About No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Gambar Image Foto penulis 3 Deskripsi Penulis Text Keterangan Penulis serta ucapan terimakasih 5 Informasi Penulis Image, Text Informasi beberapa media sosial yang digunakan penulis 6 Tombol Back Button Tombol yang akan menampilkan kembali ke halaman Home 3.5.9. Rancangan Halaman Exit Dalam Rancangan halaman Exit dapat dilihat pada gambar 3.14, serta keterangan komponen yang terdapat pada halaman Exit dapat dilihat pada tabel 3.10. Yes No Kebudayaan Nias 1 2 3 Gambar 3.14. Rancangan Halaman Exit Tabel 3.10. Komponen-Komponen pada Halaman Exit No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Tombol Yes Button Tombol yang akan mengakhiri aplikasi Universitas Sumatera Utara 3 Tombol No Button Tombol yang akan menampilkan kembali ke halaman Home

3.6. Perancangan Objek 3D