Mulai
Apakah Memilih 1. Inti Sel Apakah Memilih 2. Mitokondria
Apakah Memilih 4. Peroksisom Apakah Memilih 3. Lisosom
Ya Tidak
Ya Ya
Ya Tidak
Tidak
Apakah Memilih 5. R. E. Kasar Apakah Memilih 6. Badan
Golgi Apakah Memilih 7. R. E. Halus
Apakah Memilih 8. Vakuola Apakah Memilih 9. Sentriol
Apakah Memilih 10. Sel Utuh Tidak
Ya Tidak
Ya Tidak
Ya Tidak
Ya Tidak
Ya Tidak
Ya Tidak
Selesai Apakah Memilih Lihat Sel
Apakah Memilih Menu Pilihan Ya
Ya Tidak
Tidak Apakah Memilih Buka Link
Ya Tidak
Tidak Tidak
Halaman Pembuka Halaman Beranda
Halaman Pembuka
Halaman Augmented
Menampilkan Menu Pilihan Tombol Sel
1. Inti sel 2. Mitokondria
3. Lisosom 4. Peroksisom
5. Retikulum Endoplasma Kasar 6. Badan Golgi
7. Retikulum Endoplasma Halus 8. Vakuola
9. Sentriol 10. Sel Utuh
Halaman Web Menampilkan
Objek Inti Sel Menampilkan
Objek Mitokondria
Menampilkan objek Lisosom
Menampilkan objek Peroksisom
Menampilkan objek R. E. Kasar
Menampilkan objek R. E. Halus
Menampilkan objek Mikrotubul
Apakah Memilih 11. Mikrotubul Menampilkan
objek Vakuola Menampilkan
objek Sentriol Menampilkan objek
Badan Golgi
Menampilkan objek Sel Utuh
Gambar 3.5. Flowchart System
3.5. Perancangan Antarmuka Sistem
Untuk rancangan antar muka dari sistem yang akan dibangun menggunakan bahasa pemograman Java. Sistem akan dibangun menggunakan Unity Game Engine.
Handphone digunakan untuk menampilkan antar muka yang responsive menyesuaikan dengan display perangkat, tempat aplikasi berjalan. Antar muka
menggunakan 1 halaman pembuka dengan 6 halaman setiap antar muka.
Universitas Sumatera Utara
3.5.1. Rancangan Halaman Pembuka
Tampilan rancangan halaman Pembuka yang terdapat pada halaman Informasi Aplikasi dapat dilihat pada Gambar 3.6. Keterangan komponen yang terdapat pada
halaman Informasi Aplikasi dapat dilihat pada Tabel 3.2.
Logo
Mari Lihat Selnya
ARACellS
Gambar 3.6 Rancangan Halaman Pembuka Tabel 3.2. Keterangan Bagian-Bagian Rancangan Halaman Pembuka
No Jenis Objek
Keterangan
1 Nama aplikasi Image Judul Aplikasi yang akan dirancang.
3.5.2. Rancangan Halaman Beranda
Bentuk tampilan perancangan halaman Beranda dapat dilihat pada gambar 3.7. Keterangan komponen yang terdapat pada halaman Beranda dapat dilihat pada
Tabel 3.3.
Lihat Sel Keluar
Logo
ARACellS
Bantuan 4
3 2
1
Gambar 3.7 Rancangan Halaman Beranda
Universitas Sumatera Utara
Tabel 3.3. Keterangan Bagian-Bagian Rancangan Beranda No.
Jenis Objek Keterangan
1 Nama Aplikasi
Image Judul aplikasi yang dibuat, Judul Keterangan dan
Keterangan ditampilkan dari bentuk gambar. 2
Tombol Lihat Sel Tombol ini akan menampilkan menu tombol
komponen sel 3
Tombol Bantuan Tombol ini akan menampilkan halaman Bantuan
4 Tombol keluar
Akan keluar aplikasi
3.5.3. Rancangan Halaman Bantuan
Lihat Sel Keluar
Lihat Marker di Link
ARACellS
Logo
Keterangan Aplikasi
4 3
2 1
Gambar 3.8 Rancangan Halaman Bantuan
Bentuk rancangan halaman dapat dilihat pada gambar 3.8 dan keterangan komponen yang terdapat pada halaman Bantuan dapat dilihat pada Tabel 3.4.
Tabel 3.4. Keterangan Bagian-Bagian Rancangan Bantuan No.
Jenis Objek Keterangan
1 Nama Aplikasi
Image Judul aplikasi yang dibuat, Judul Keterangan dan
Keterangan ditampilkan dari bentuk gambar.
Universitas Sumatera Utara
No. Jenis Objek
Keterangan
2 Tombol Lihat Sel
Tombol ini akan menampilkan menu tombol komponen sel
3 Tombol Lihat Marker
di Link Tombol ini akan menyambungkan dengan
halaman web yang ditautkan sebagai penyedia marker
4 Tombol keluar
Akan keluar aplikasi
3.5.4. Rancangan Halaman Augmented
Bentuk rancangan halaman dapat dilihat pada gambar 3.9 dan keterangan komponen yang terdapat pada halaman Augmented dapat dilihat pada Tabel 3.5.
Beranda
Menu
Inti Sel Lisosom
Peroksisom Badan Golgi
Vakuola Retikulum
Endoplasma Halus
Sentriol Sel Utuh
Mikrotubul
ARACellS
Logo
Retikulum Endoplasma
Kasar Mitokondria
13 12
11 10
9 8
7 6
5 4
3 2
1
14
Gambar 3.9 Rancangan Halaman Augmented Tabel 3.5. Keterangan Bagian-Bagian Rancangan Augmented
No. Jenis Objek
Keterangan
1 Nama Aplikasi, Logo
dan Petunjuk untuk Aplikasi
Judul aplikasi yang dibuat, Judul Keterangan dan Keterangan ditampilkan dari bentuk gambar.
Universitas Sumatera Utara
No. Jenis Objek
Keterangan
2 Tombol Beranda
Tombol ini akan menampilkan halaman informasi
3 Tombol Menu Tombol Menampilkan tombol-tombol untuk melihat
bagian-bagian sel
4 Tombol
Kompleks Golgi
Tombol ini akan menampilkan objek Kompleks Golgi
5 Tombol Inti Sel
Tombol ini akan menampilkan objek Inti Sel 6
Tombol Lisosom Tombol ini akan menampilkan objek Lisosom
7 Tombol Mikrotubul
Tombol ini akan menampilkan objek Mikrotubul 8
Tombol Mitokondria Tombol ini akan menampilkan objek Mitokondria
9 Tombol Peroksisom
Tombol ini akan menampilkan objek Peroksisom
10 Tombol Retikulum
Endoplasma Halus Tombol ini akan menampilkan objek Retikulum
Endoplasma Halus
11 Tombol Retikulum
Endoplasma Kasar Tombol ini akan menampilkan objek Retikulum
Endoplasma Kasar 12
Tombol Vakuola Tombol ini akan menampilkan objek Vakuola
13 Tombol Sentriol
Tombol ini akan menampilkan objek Sentriol
14 Tombol Sel
Keseluruhan Tombol ini akan menampilkan objek Sel
Keseluruhan
3.6. Perancangan Objek
