Perancangan Antar Muka Menu Utama Aplikasi frontend Perancangan Antar Muka Cerita Rakyat Listview frontend Perancangan Antar Muka Cerita Fabel Listview frontend Perancangan Antar Muka Bantuan frontend Perancangan Antar Muka Tentang frontend Perancangan A

4.2.1 Perancangan Antar Muka Frontend Application

Untuk memudahkan proses pembuatan aplikasi cerita anak pada Mobile ini maka terlebih dahulu membuat rancangan desain tampilannya. Perancangan ini meliputi rancangan antar muka menu utama, antar muka list view cerita fabel, antar muka list view cerita rakyat, antar muka bantuan, antar muka tentang, antar muka isi cerita.

4.2.1.1 Perancangan Antar Muka Menu Utama Aplikasi frontend

Gambar. 4.13 PerancanganAntar Muka Menu Utama Aplikasi frontend ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna bervariasi - Gambar 0 merupakan gambar untuk background tampilan menu utama aplikasi. - Klik gambar 1 maka akan muncul tampilan T02. - Klik gambar 2 maka akan muncul tampilan T03 - Klik gambar 3 maka akan muncul tampilan T04 - Klik gambar 4 maka akan muncul tampilan T05 T01 Gambar 0 Gambar 1 Gambar 3 Gambar 2 Gambar 4

4.2.1.2 Perancangan Antar Muka Cerita Rakyat Listview frontend

Gambar. 4.14 PerancanganAntar Muka Cerita Rakyat Listview frontend

4.2.1.3 Perancangan Antar Muka Cerita Fabel Listview frontend

Gambar. 4.15 Perancangan Antar Muka Cerita Fabel Listview frontend ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna bervariasi - Klik area Gambar 1 Text 1 atau Gambar 2 Text 2 atau Gambar 3 Text 3 sampai Gambar Text n maka akan muncul tampilan T06. T02 Gambar 1 Gambar 2 Gambar 3 Text 1 Text 2 Text 3 ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna bervariasi - Klik area Gambar 1 Text 1 atau Gambar 2 Text 2 atau Gambar 3 Text 3 sampai Gambar Text n maka akan muncul tampilan T06. T03 Gambar 1 Gambar 2 Gambar 3 Text 1 Text 2 Text 3

4.2.1.4 Perancangan Antar Muka Bantuan frontend

Gambar. 4.16 PerancanganAntar Muka Bantuan frontend

4.2.1.5 Perancangan Antar Muka Tentang frontend

Gambar. 4.17 Perancangan Antar Muka Tentang frontend ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna hitam - Text 1 merupakan isi atau penjelasan dari tampilan T05 T05 Text 1 ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna putih - Text 1 merupakan isi atau penjelasan dari tampilan T04 T04 Text 1

4.2.1.6 Perancangan Antar Muka Isi Cerita frontend

Gambar. 4.18 Perancangan Antar Muka Isi Cerita frontend

4.2.2 Perancangan Antar Muka Backend Application