Bab III Analisis dan Perancangan
3.4 Perancangan Tampilan Antarmuka Aplikasi
Tampilan antarmuka perlu di rancang untuk menggambarkan sistem yang dibuat dan membantu mempermudah proses pembangunan sistem. Rancangan tampilan sistem dapat dilihat dan akan dijelaskan sebagai berikut.
3.4.1 Rancangan Halaman Utama
Tampilan halaman utama sistem pengenalan bangun ruang menggunakan Augmented reality ini bertujuan untuk mempermudah pengguna dalam menggunakan sistem melalui menu yang terlihat pada tampilan halaman utama dan disesain dengan fitur-fitur yang menarik. Secara umum menu utama terbagi menjadi tiga bagian yaitu tampilan gambar animasi, tampilan judul untuk mengetahui judul aplikasi dan tampilan tombol menu. Tampilan menu berisi tombol-tombol navigasi menu Augmented reality, home, katalog, marker, AR (Augmented reality), video, harga desain, help dan exit. Selain itu juga terdapat tampilan intuksi- intruksi gambar untuk memperjelas dari fungsi masing-masing tombol menu. Rancangan tampilan halaman utama dapat dilihat pada Gambar 3.32.
2 3 4 5 6 7 8
9
10 13
1
12
11
Gambar 3.20 Rancangan Halaman Utama
Keterangan Gambar 3.20 adalah sebagai berikut: 1. Untuk menampilkan nama dan judul dari sistem
2. Tombol Home berfungsi menuju ke halaman menu utama 3. Tombol Katalog berfungsi menuju ke halaman katalog 4. Tombol Marker berfungsi menuju ke halaman marker
5. Tombol AR berfungsi menuju ke halaman Augmented reality 6. Tombol Video berfungsi menuju ke halaman video
7. Tombol Harga desain berfungsi menuju ke halaman harga desain 8. Tombol Help berfungsi menuju ke halaman Augmented reality 9. Untuk menampilkan konten pada menu utama
10. Tombol Exit berfungsi keluar dari sistem
11. Tombol Sound berfungsi mengidupkan dan mematikan musik
12. Tombol Website berfungsi menuju ke alamat website dari CV.RAFT Origin 13. Tombol Sosial media berfungsi menuju alamat twitter,facebook dan blog dari
CV.RAFT Origin.
Rancangan halaman leanding page pada aplikasi berfungsi sebagai pengenalan sistem kepada pengguna dalam penggunaan aplikasi. Rancangan leanding page teridiri dari gambar-gambar, instuksi-instruksi untuk memudahkan dalam menjalankan sistem. Berikut adalah rancangan tampilannya.
logo
Keterangan
Exit Next
video
Website
Gambar 3.21 Rancangan leanding page
3.4.3 Rancangan Menu utama
Rancangan halaman menu utama pada sistem dapat dilihat pada gambar sebelumnya. Rancangan Menu utama berfungsi sebagai acuan untuk membuat tampilan tatap muka pada sistam yang dikerjakan . Terdapat logo, tombol menu-menu utama,konten , tombol sound, tombol menuju website, link sosial media dan tombol exit untuk keluar dari sistem. Berikut adalah rancangan tampilannya.
Menu
konten
Exit Link sosial media
logo
Website sound
Gambar 3.22 Rancangan Menu Utama
3.4.4 Rancangan Katalog
Rancangan katalog pada menu utama berfungsi sebagai acuan dalam pembuatan halaman katalog pada sistem. Pada Rancangan Katalog terdapat tombol menu utama untuk memilih menu-menu utama lainnya. Ditengah dari halaman ini terdapat konten berfungsi untuk melihat projek-projek perumahan dari CV. RAFT Origin dan tombol cover untuk kembail ke halaman utama pada halaman katalog, tombol back cover untuk kehalaman terakhir dan tombol back, next, sound dan website. Berikut adalah rancangan tampilannya. Menu cover logo Website sound Halaman Katalog Back
over Back Next
3.4.5 Rancangan Marker
Rancangan marker pada menu utama berfungsi sebagai acuan dalam pembuatan halaman marker pada sistem. Pada Rancangan Katalog terdapat tombol menu utama untuk memilih menu-menu utama lainnya. Ditengah dari halaman ini terdapat konten berfungsi untuk melihat projek-projek perumahan dari CV. RAFT Origin dan tombol cover untuk kembail ke halaman utama pada halaman marker, tombol back cover untuk kehalaman terakhir, dan tombol back, next, sound dan website. Berikut adalah rancangan tampilannya. Menu cover logo Website sound Halaman Marker Back
over Back Next
Gambar 3.24 Rancangan Marker
3.4.6 Rancangan AR
Rancangan halaman AR pada menu utama berfungsi sebagai acuan dalam pembuatan halaman marker pada sistem. Pada Rancangan Katalog terdapat tombol menu utama untuk memilih menu-menu utama lainnya. Ditengah dari halaman ini terdapat konten berfungsi untuk melihat keterangan umum,keterangan pengguna dan tomol AR untuk menampilkan bangunan 3D dalam menjalankan proses cursor dari CV. RAFT Origi. Tombol cover untuk kembail ke halaman utama pada halaman marker, tombol back cover untuk kehalaman terakhir, dan tombol back, next, sound dan website. Berikut adalah rancangan tampilannya.
Menu
Exit Link sosial media
logo Website sound AR Keterangan kegunaan Keterangan umum Gambar 3.25 Rancangan AR 3.4.7 Rancangan Video
Rancangan Halaman Video pada menu utama berfungsi sebagai acuan dalam pembuatan halaman Video pada sistem. Pada Rancangan Video terdapat tombol menu utama untuk memilih menu-menu utama lainnya. Ditengah dari halaman ini terdapat konten berfungsi untuk menjalankan video yang terdiri dari projek-projek perumahan dari CV. RAFT Origin. Tombol cover untuk kembail ke halaman utama pada halaman marker, tombol back cover untuk kehalaman terakhir, dan tombol back, next, sound dan website. Berikut adalah rancangan tampilannya.
Menu
Exit Link sosial media
logo
Website sound Video
3.4.8 Rancangan Harga desain rumah
Rancangan harga desain rumah pada menu utama berfungsi sebagai acuan dalam pembuatan halaman harga desain rumah pada sistem. Pada rancangan harga desain rumah terdapat tombol menu utama untuk memilih menu-menu utama lainnya. Ditengah dari halaman ini terdapat konten berisikan keterangan tentang jasa pembuatan desain rumah pada CV. RAFT Origin untuk dan terdapat tombol ekterior dan interior untuk menghitung harga desain dari ukuran suatu rumah. Terdapat juga tombol lainnya seperti tombol sound , link sosial media dan website. Berikut adalah rancangan tampilannya.
Menu
Exit Link sosial media
logo
Website sound Keterangan
Harga desain rumah
Gambar 3.27 Rancangan Harga desain rumah
3.4.9 Rancangan Help
Rancangan halaman menu help pada menu utama berfungsi untuk memudahakan dalam menjalan sistem. Rancangan help teridiri dari gambar-gambar dan instuksi-instruksi untuk memudahkan dalam memahami dan menjalan sistem. Terdapat tombol menu utama untuk memilih menu-menu utama lainnya. Ditengah dari halaman ini terdapat konten halam help dan tombol cover untuk kembail ke halaman utama pada menu help,
back cover untuk kehalaman terakhir dan menu back, next, sound dan website. Berikut adalah rancangan tampilannya.
Menu cover logo Website sound Halaman Help Back
over Back Next
Gambar 3.28 Rancangan Help