Layout di dalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemen-elemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik. Di sini diperlukan pertimbangan ketika sedang mendesain suatu infomasi yang seefektif mungkin. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan. Untuk mempermudah dalam pembuatan dan penataan objek ke dalam stage maka dibuatlah desain tata letak terlebih dahulu sebagai panduan.
Gambar 3.31. Desain Layout Halaman Menu Utama.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.31:
a. Gambar latar belakang halaman utama.
b. Judul aplikasi.
c. Tombol menu belajar untuk berpindah ke halaman menu belajar.
d. Tombol menu lingkungan untuk berpindah ke halaman menu lingkungan.
e. Tombol menu bermain untuk berpindah ke halaman menu bermain.
f. Tombol keluar aplikasi untuk menutup aplikasi.
Gambar 3.32. Desain Layout Halaman Menu Belajar.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.32 a. Gambar latar belakang halaman belajar.
b. Tombol home untuk kembali ke halaman menu utama.
c. Tombol menulis untuk berpindah ke halaman submenu menulis.
d. Tombol berhitung untuk berpindah ke halaman submenu berhitung.
e. Tombol warna untuk berpindah ke halaman submenu warna.
f. Tombol bentuk dasar untuk berpindah ke halaman submenu bentuk dasar.
g. Tombol lawan kata untuk berpindah ke halaman submenu lawan kata.
h. Tombol alat musik untuk berpindah ke halaman submenu alat musik.
i. Tombol makanan sehat untuk berpindah ke halaman submenu makanan sehat.
Gambar 3.33. Desain Layout Halaman Menu Lingkungan.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.33:
a. Gambar latar belakang halaman lingkungan.
b. Tombol home untuk kembali ke halaman menu utama.
c. Tombol hewan bonbin untuk berpindah ke halaman submenu hewan bonbin.
d. Tombol kebiasaan baik untuk berpindah ke halaman submenu kebiasaan baik.
e. Tombol alam untuk berpindah ke halaman submenu alam.
f. Tombol bentuk negeriku untuk berpindah ke halaman submenu negeriku.
Gambar 3.34. Desain Layout Halaman Menu Bermain.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.34:
a. Gambar latar belakang halaman bermain.
b. Tombol home untuk kembali ke halaman menu utama.
c. Tombol game berhitung untuk berpindah ke halaman submenu game berhitung.
d. Tombol game puzzle untuk berpindah ke halaman submenu game puzzle.
e. Tombol melengkapi kata untuk berpindah ke halaman submenu melengkapi kata.
Gambar 3.35. Desain Layout Halaman Belajar Menulis.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.35:
a. Tombol back untuk kembali ke halaman menu belajar.
b. Animasi huruf atau angka.
c. Tombol huruf besar untuk mengubah tampilan huruf dipapan ketik menjadi huruf besar.
d. Tombol huruf kecil untuk mengubah tampilan huruf dipapan ketik menjadi huruf kecil.
e. Tombol huruf dan angka untuk menjalankan animasi.
Gambar 3.36. Desain Layout Halaman Belajar Berhitung.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.36:
a. Tombol back untuk kembali ke halaman menu belajar.
b. Tombol penjumlahan untuk menjalankan animasi penjumlahan.
c. Tombol pengurangan untuk menjalankan animasi pengurangan.
d. Animasi contoh soal penjumlahan.
e. Animasi contoh soal pengurangan.
Gambar 3.37. Desain Layout Halaman Belajar Warna.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.37:
a. Tombol back untuk kembali ke halaman menu belajar.
b. Tombol warna untuk mejalankan animasi teks nama warna.
c. Animasi teks nama warna dalam bahasa indonesia.
d. Animasi teks nama warna dalam bahasa inggis.
Gambar 3.38. Desain Layout Halaman Belajar Bentuk Dasar
Berikut merupakan keterangan desain tata letak untuk Gambar 3.38:
a. Tombol back untuk kembali ke halaman menu belajar.
b. Animasi gambar bentuk dasar.
c. Animasi nama gambar bentuk dasar.
d. Tombol previous untuk kembali ke gambar sebelumnya.
e. Tombol next untuk melanjutkan ke gambar selanjutnya.
Gambar 3.39. Desain Layout Halaman Belajar Lawan Kata
Berikut merupakan keterangan desain tata letak untuk Gambar 3.39:
a. Tombol back untuk kembali ke halaman menu belajar.
b. Animasi gambar ilustrasi pertama.
c. Animasi gambar ilustrasi kedua.
d. Animasi keterangan gambar ilustrasi pertama.
e. Animasi keterangan gambar ilustrasi kedua.
f. Tombol previous untuk kembali ke gambar sebelumnya.
g. Tombol next untuk melanjutkan ke gambar selanjutnya.
Gambar 3.40. Desain Layout Halaman Belajar Alat Musik.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.40 a. Tombol back untuk kembali ke halaman menu belajar.
b. Animasi gambar alat musik.
c. Animasi nama gambar alat musik.
d. Tombol previous untuk kembali ke gambar sebelumnya.
e. Tombol next untuk melanjutkan ke gambar selanjutnya.
Gambar 3.41. Desain Layout Halaman Mengenal Maknan Sehat.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.41:
a. Tombol back untuk kembali ke halaman menu belajar.
b. Animasi gambar jenis-jenis makanan yang termasuk di dalam kelompok tertentu.
c. Animasi nama kelompok makanan.
d. Tombol makanan pokok untuk menjalankan animasi jenis-jenis makanan pokok.
e. Tombol lauk untuk menjalankan animasi jenis-jenis lauk.
f. Tombol sayur untuk menjalankan animasi jenis-jenis sayur.
g. Tombol buah untuk menjalankan animasi jenis-jenis buah.
h. Tombol susu untuk menjalankan animasi jenis-jenis susu.
Gambar 3.42. Desain Layout Halaman Belajar Mengenal Hewan.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.42:
a. Tombol back untuk kembali ke halaman menu lingkungan.
b. Animasi gambar hewan.
c. Animasi nama gambar hewan.
d. Tombol previous untuk kembali ke gambar sebelumnya.
e. Tombol next untuk melanjutkan ke gambar selanjutnya.
Gambar 3.43. Desain Layout Halaman Belajar Mengenal Kebiasaan Baik.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.43:
a. Tombol back untuk kembali ke halaman menu lingkungan.
b. Animasi gambar ilustrasi kebiasaan baik.
c. Animasi keterangan gambar ilustrasi kebiasaan baik.
d. Tombol previous untuk kembali ke gambar sebelumnya.
e. Tombol next untuk melanjutkan ke gambar selanjutnya.
Gambar 3.44. Desain Layout Halaman Mengenal Alam.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.44:
a. Tombol back untuk kembali ke halaman menu lingkungan.
b. Animasi gambar foto alam.
c. Animasi keterangan gambar foto alam.
d. Tombol previous untuk kembali ke gambar sebelumnya.
e. Tombol next untuk melanjutkan ke gambar selanjutnya.
Gambar 3.45. Desain Layout Halaman tentang Negriku (Presidenku).
Berikut merupakan keterangan desain tata letak untuk Gambar 3.45:
a. Tombol back untuk kembali ke halaman menu lingkungan.
b. Tombol Presidenku untuk menampilkan layout presidenku.
c. Tombol Pulau besar untuk menampilkan layout pulau besar.
d. Tombol Indonesia Raya untuk menampilkan layout Indonesia Raya.
e. Tombol Nama Presiden untuk menjalankan animasi foto presiden.
f. Animasi gambar foto presiden.
g. Gambar garuda pancasila.
Gambar 3.46. Desain Layout Halaman tentang Negriku (Pulau besar).
Berikut merupakan keterangan desain tata letak untuk Gambar 3.46:
a. Tombol back untuk kembali ke halaman menu lingkungan.
b. Tombol Presidenku untuk menampilkan layout presidenku.
c. Tombol Pulau besar untuk menampilkan layout pulau besar.
d. Tombol Indonesia Raya untuk menampilkan layout Indonesia Raya.
e. Tombol gambar pulau indonesia untuk menjalankan animasi teks nama pulau.
f. Animasi teks nama pulau.
Gambar 3.47. Desain Layout Halaman tentang Negriku (Indonesia Raya).
Berikut merupakan keterangan desain tata letak untuk Gambar 3.47:
a. Tombol back untuk kembali ke halaman menu lingkungan.
b. Tombol Presidenku untuk menampilkan layout presidenku.
c. Tombol Pulau besar untuk menampilkan layout pulau besar.
d. Tombol Indonesia Raya untuk menampilkan layout Indonesia Raya.
e. Animasi bendera berkibar dan gambar garuda pancasila.
f. Teks lagu indonesia raya.
Gambar 3.48. Desain Layout Halaman Game Berhitung.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.48:
a. Tombol back untuk kembali ke halaman menu bermain.
b. Teks pertanyaan.
c. Tombol pilihan jawaban A.
d. Tombol pilihan jawaban B.
e. Tombol pilihan jawaban C.
f. Tombol pilihan jawaban D.
g. Teks feedback.
h. Tombol previous untuk kembali ke soal sebelumnya.
i. Tombol next untuk melanjutkan ke soal selanjutnya.
Gambar 3.49. Desain Layout Halaman Game Puzzle.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.49:
a. Tombol back untuk kembali ke halaman menu bermain.
b. Potongan puzzle yang diacak.
c. Target untuk memasang potongan puzzle.
d. Tombol previous untuk kembali ke puzzle sebelumnya.
e. Tombol next untuk melanjutkan ke puzzle selanjutnya.
Gambar 3.50. Desain Layout Halaman Game Melengkapi Kata.
Berikut merupakan keterangan desain tata letak untuk Gambar 3.50:
a. Tombol back untuk kembali ke halaman menu bermain.
b. Teks pertanyaan.
c. Tombol pilihan jawaban A.
d. Tombol pilihan jawaban B.
e. Tombol pilihan jawaban C.
f. Tombol pilihan jawaban D.
g. Teks feedback.
h. Tombol previous untuk kembali ke soal sebelumnya.
i. Tombol next untuk melanjutkan ke soal selanjutnya.
j. Gambar bantuan untuk pertanyaan.