3.3 Perancangan Aplikasi
Perancangan tampilan layar menunjukkan interface antarmuka dari program aplikasi
ini. Tampilan antarmuka perlu dirancang untuk menggambar kan aplikasi yang akan dibuat dan membantu mempermudah proses pembangunan aplikasi. Dalam
perancangan website, penulis mempersiapkan file-file yang digunakan dalam pembuatan website. File halaman website media pembelajaran ini secara umum
berekstensi. HTML dan.PHP. Hal ini dikarenakan seluruh file halaman website menggunakan bahasa pemrograman PHP dan HTML dan berkomunikasi dengan
MySQL sebagai tempat penyimpanan datanya atau sebagai database-nya.
3.3.1 Perancangan Halaman Menu Utama Beranda
Tampilan halaman utama media pembelajaran English grammar ini bertujuan untuk mempermudah user dalam menggunakan aplikasi ini melalui menu langsung terlihat
pada navigasi atas yang disesain dengan tampilan yang sederhana tapi menarik. Secara umum menu utama terbagi menjadi tujuh bagian yaitu:
1 bagian logo website
2 bagian kutipan grammar
3 bagian content isi
4 bagian sidebar
5 bagian fitur
6 bagian footer
Berikut gambar dari rancangan halaman menu utama beranda
Universitas Sumatera Utara
Gambar 3.7 Rancangan Halaman Beranda
3.3.2 Perancangan Halaman Menu Grammar
Dalam halaman ini, penulis sengaja berfokus pada topik-topik grammar yang telah disediakan. Topik grammar ini ditampilkan secara berurut seperti daftar isi,
dikarenakan penulis ingin memberi kemudahan dalam berinteraksi dengan user tanpa harus bingung dengan sederetan menu dan file yang berantakan. Seluruh topik dapat
di klik oleh user dan akan langsung menuju ke link pembelajaran.
Produk baru
L O G O
Produk baru beranda
grammar tes soal
modul tips
profil
ISI MATERI MEDIA BELAJAR sidebar
“kutipan”
footer
Universitas Sumatera Utara
Tampilan sebelum memilih materi grammar.
Gambar 3.8 Rancangan tampilan Menu grammar
Gambar 3.8 Rancangan Halaman grammar 1
Produk baru
L O G O
Produk baru beranda
grammar tes soal
modul tips
profil
English Grammar Topics 1 a
2 a 3 a
4 a 5 a
6 a 7 a
8 a 9 a
10 a sidebar
Universitas Sumatera Utara
Tampilan setelah memilih materi grammar.
Gambar 3.9 Rancangan Halaman Grammar 2 Gambar 3.9 Rancangan Halaman grammar 2
3.3.3 Perancangan Halaman Menu Tes Soal
Tes soal dalam media pembelajaran ini cukup menarik, ketika user akan menuju ke halaman tes soal, maka user akan dikirim ke halaman khusus, dimana halaman
tersebut lebih dinamis, lebih kecil tampilannya. Pada tes soal ini, dibuat folder khusus yang mengatur prosedur tes soal, dimana user diharuskan untuk mendaftar terlebih
dahulu, lalu kemudian akan bisa memulai tes soal. Penulis sengaja membuat halaman tes soal ini harus bersistem log in, karena nilai dari hasil tes yang dicapai oleh user
Produk baru
L O G O
Produk baru beranda
grammar
tes soal modul
tips
profil
Simple Present Tense
MATERI
sidebar
footer
-Ringkasan -kegunaan
-kata kunci -bentuk
Universitas Sumatera Utara
akan disimpan kedalam database, dan masih akan bisa dilihat kapan pun user kembali lagi untuk tes soal lainnya.
Gambar 3.10 Rancangan Halaman Tes Soal
3.3.4 Perancangan Halaman Menu Modul
Kategori