Perancangan Sistem Perancangan Antarmuka Interface

3.4 Perancangan Sistem

Berdasarkan gambaran dari hasil analisis proses maka dibangun suatu model rancanganflowchartsistem dan juga rancangan antar muka sistem. Bagan ini menjelaskan urut-urutan dari prosedur-prosedur dan proses prancangan sistem. 3.4.1 Flowchart Sistem Flowchart sistem pada gambar 3.5 menjelaskan pilihan dan cara kerja aplikasi ILKOMar dan flowchart perancangan aplikasi ditunjukkan oleh gambar 3.6. Universitas Sumatera Utara Gambar 3.5 Flowchart Sistem Universitas Sumatera Utara Gambar 3.6 Flowchart Pembuatan Aplikasi Universitas Sumatera Utara

3.5 Perancangan Antarmuka Interface

Perancangan Antarmuka Interface merupakan sarana interaksi antara pengguna dan sistem. Hal ini berfungsi untuk memudahkan pengguna dalam melakukan proses sistem. Splash Screen adalah window yang muncul pertama kali saat sistem dijalankan. 3.5.1 Rancangan Splash Screen Bentuk rancangan splash screen dapat dilihat pada gambar 3.7. Keterangan komponen objek yang digunakan pada splash screen dapat dilihat pada Tabel 3.2. Gambar 3.7 Rancangan Splash Screen Tabel 3.2 Keterangan Rancangan Splash Screen No. Jenis Objek Keterangan 1 Logo Aplikasi Image Logo Aplikasi yang dirancang. 3.5.2 Rancangan Menu Utama Bentuk rancangan tampilan menu utama dapat dilihat pada gambar 3.8.Keterangan komponen objek yang digunakan pada menu utama dapat dilihat pada Tabel 3.3. Universitas Sumatera Utara Gambar 3.8 Rancangan Menu Utama Tabel 3.3Keterangan Rancangan Menu Utama No. Jenis Objek Keterangan 1 Logo Aplikasi Image Judul Aplikasi 2 Tombol Objek Button Tombol untuk menampilkan menu Objek 3 Tombol Info Button Tombol untuk menampilkan menu info penggunaan aplikasi 4 Tombol Tentang Button Tombol untuk menampilkan menu tujuan dibuatnya aplikasi 5 Tombol Keluar Button Tombol untuk keluar dari aplikasi 3.5.3 Rancangan Menu Objek Bentuk rancangan tampilan menu objek dapat dilihat pada gambar 3.9.Keterangan komponen objek yang digunakan pada menu objek dapat dilihat pada Tabel 3.4. Universitas Sumatera Utara Gambar 3.9 Rancangan Menu Objek Tabel 3.4Keterangan Rancangan Menu Objek No. Jenis Objek Keterangan 1 Logo Aplikasi Image Judul Aplikasi 2 Tombol Gedung Ilkom Button Tombol untuk menampilkan menu informasi gedung perkuliahan Ilmu Komputer 3 Tombol Lantai 1 Button Tombol untuk menampilkan menu informasi lantai 1 4 Tombol Lantai 2 Button Tombol untuk menampilkan menu informasi lantai 2 5 Tombol Lantai 3 Button Tombol untuk menampilkan menu informasi lantai 3 6 Tombol Kembali Button Tombol untuk kembali ke menu utama 3.5.4 Rancangan Menu Info Bentuk rancangan tampilan menu info dapat dilihat pada gambar 3.10.Keterangan komponen objek yang digunakan pada menu info dapat dilihat pada Tabel 3.5. Universitas Sumatera Utara Gambar 3.10 Rancangan Menu Info Tabel 3.5 Keterangan Rancangan Menu Info No. Jenis Objek Keterangan 1 Judul Menu Text Judul menu 2 Informasi Penggunaan Aplikasi Text Box Informasi cara penggunaan aplikasi ILKOMar 3 Tombol Kembali Button Tombol untuk kembali ke menu utama 3.5.5 Rancangan Menu Tentang Bentuk rancangan tampilan menu tentang dapat dilihat pada gambar 3.11.Keterangan komponen objek yang digunakan pada menu tentang dapat dilihat pada Tabel 3.6. Gambar 3.11 Rancangan MenuTentang Universitas Sumatera Utara Tabel 3.6 Keterangan Rancangan Menu Tentang No. Jenis Objek Keterangan 1 Judul Menu Text Judul Menu 2 Informasi Aplikasi Text Box Informasi Biodata Perancang Aplikasi 3 Foto Image Foto Perancang Aplikasi 4 Tombol Kembali Button Tombol untuk kembali ke menu utama 5 Vertical Bar Scroll Bar Untuk menggeser atas – bawah 3.5.6 Rancangan Menu Informasi Objek Bentuk rancangan tampilan menu objek dapat dilihat pada gambar 3.12.Keterangan komponen objek yang digunakan pada menu objek dapat dilihat pada Tabel 3.6. Gambar 3.12 Rancangan MenuInformasi Objek Tabel 3.7 Keterangan Rancangan Menu Informasi Objek No. Jenis Objek Keterangan 1 Judul Menu Text Judul Menu 2 Tombol Kembali Button Tombol untuk kembali ke menu objek 3 Informasi Objek Text Box Berisi informasi yang berkaitan dengan objek 4 Vertical Bar Scroll Bar Untuk menggeser atas – bawah 5 Tombol AR Button Tombol ke menu augmented reality deteksi kamera 6 Logo Image Logo dari aplikasi yang dirancang 3.5.7 RancanganMenu Augmented Reality Bentuk rancangan tampilan menu augmented reality dapat dilihat pada gambar 3.13. Keterangan komponen objek yang digunakan pada menu augmented reality dapat dilihat pada Tabel 3.8. Universitas Sumatera Utara Gambar 3.13 Rancangan MenuAugmented Reality Tabel 3.8 Keterangan Rancangan Menu Augmented Reality No. Jenis Objek Keterangan 1 Logo ILKOMar Image Logo aplikasi yang dirancang 2 Tombol Kembali Button Tombol untuk kembali ke menu objek 3.5.8 RancanganMenu Keluar Bentuk rancangan tampilan menu keluar dapat dilihat pada gambar 3.14.Keterangan komponen objek yang digunakan pada menu keluar dapat dilihat pada Tabel 3.9. Gambar 3.14 Rancangan MenuKeluar Universitas Sumatera Utara Tabel 3.9 Keterangan Rancangan Menu Keluar No. Jenis Objek Keterangan 1 Logo Image Logo aplikasi yang dirancang 2 Konfirmasi Text Pertanyaan konfirmasi keluar 3 Tombol Ya Button Tombol untuk keluar dari aplikasi 4 Tombol Tidak Button Tombol untuk kembali ke menu utama Universitas Sumatera Utara BAB 4 IMPLEMENTASI DAN PENGUJIAN Bab ini berisi implementasi Augmented Reality perancangan sistem dari hasil analisis pada bab 3 yang telah dibuat, dan menguji sistem.

4.1. Implementasi Sistem