3.6 Perancangan Papan Cerita Story Board Aplikasi
Perancangan storyboard bertujuan untuk membuat skenario dari suatu aplikasi yang dibuat. Storyboard menampilkan rancangan tampilan beserta penjelasan isi dari
tampilan tersebut. Storyboard menjelaskan secara rinci isi dari setiap tampilan sehingga pembaca mengetahui alur cerita dari aplikasi tersebut.
Tampilan aplikasi website ini tidak mengutamakan animasi gerak ataupun suara. Ini bertujuan agar user lebih terfokus pada materi yang tertulis pada website.
Namun demikian, website ini didesain cukup menarik, sederhana dan juga user friendly dengan latar belakang berwarna hijau muda dan isi materi memakai font
“Arial”. Arial adalah font yang sudah umum dan hampir terdapat di seluruh komputer.
Website ini dimulai dengan tampilan pembuka yaitu halaman Daftar dan Login, dimana keduanya terdapat pada satu halaman. Tampilan berikutnya adalah
lima menu utama, kotak pencarian, dan link Logout untuk keluar dari aplikasi. Dari lima menu utama, menu “Beranda” yang akan tampil pertama kali setelah user
melakukan proses Login. Empat menu lainnya adalah “Materi”, “Kesalahan- Kesalahan Umum”, “Latihan” dan “Profil”. Aplikasi ini menyertakan contoh-contoh
soal dan juga soal-soal yang berkaitan dengan materi-materi yang terdapat pada website. Soal-soal yang diberikan bertujuan untuk mengetahui seberapa jauh
pengetahuan yang diperoleh user setelah atau sebelum membaca materi.
3.6.1 Rancangan Tampilan Halaman Pembuka
Interface 1 Gambar 3.12 Fungsi : Sebagai halaman pembuka untuk proses Daftar dan Login.
Teks : 1.
English-grammar.com nama website 2.
Welcome to My Web 3.
Copyright © 2010 By Winda Hafilia 4.
Belajar English Grammar Yuuk Animasi Gerak
Universitas Sumatera Utara
Belajar English Grammar Yuuk
Silahkan login
Nama Password
Anda belum punya akun? Silahkan daftar
Nama Password
Status Copyright © 2010 By Winda Hafilia
Welcome to My Web
english-grammar.com
5. Syarat Pengguna Aplikasi
Tombol: 1.
Daftar, digunakan untuk proses pendaftaran user 2.
Login, digunakan untuk proses login dan masuk ke tampilan utama yaitu menu Beranda
Gambar: Logo website pada header
Gambar 3.12 Tampilan Halaman Pembuka Proses LoginDaftar
3.6.2 Rancangan Tampilan Halaman Utama Menu Beranda
Interface 2 Gambar 3.13 Fungsi : Sebagai halaman utama setelah proses Login.
Halaman ini menampilakan penjelasan sekilas tentang pengertian tata bahasa grammar serta penjelasan pendukung lainnya yang berkaitan.
Login
Daftar
v
Syarat Pengguna Aplikasi
E
Universitas Sumatera Utara
Teks : 1.
Enlgish-grammar.com nama website 2.
Welcome to My Web 3.
Penjelasan tentang English Grammar 4.
Copyright © 2010 By Winda Hafilia Tombol:
1. Empat menu lainnya
2. Cari, digunakan untuk proses pencarian materi yang diinginkan oleh user
Link : 1.
Logout, digunakan untuk keluar dari website. Gambar: Logo website pada header
Gambar 3.13 Tampilan Halaman Utama Menu Beranda
Copyright © 2010 By Winda Hafilia
Welcome to My Web
english-grammar.com
Berand Materi
Kesalahan-kesalahan Umum Latihan
Profil
Cari
Berisi penjelasan tentang English Grammar
Counter 0 0 0 0
Logout
E
Universitas Sumatera Utara
3.6.3 Rancangan Tampilan Menu Materi
Interface 3 Gambar 3.14 Fungsi : Sebagai halaman untuk menampilakan materi-materi yang disampaikan.
Teks : 1.
English-grammar.com nama website 2.
Welcome to My Web 3.
Materi-materi yang disampaikan 4.
Contoh-contoh soal dan soal-soal yang berkaitan dengan materi. 5.
Copyright © 2010 By Winda Hafilia Tombol:
1. Empat menu lainnya
2. Cari, digunakan untuk proses pencarian materi yang diinginkan oleh user
3. Participle and Gerund : sebagai materi 1
4. Conditional :sebagai materi 2
5. Question Tags : sebagai materi 3
6. Tenses : sebagai materi 4
Link : 1.
Logout, digunakan untuk keluar dari website.
Universitas Sumatera Utara
Gambar 3.14 Tampilan Menu Materi
3.6.4 Rancangan Tampilan untuk Tampilan Soal Menu Materi
Interface 4 Gambar 3.15 Fungsi : Sebagai halaman untuk menampilkan soal-soal yang berkaitan dengan materi
yang dibaca. Teks :
1. English-grammar-learnig.com nama website
2. Welcome to My Web
3. Copyright © 2010 By Winda Hafilia
4. Soal-soal yang berkaitan dengan materi yang dibaca
Tombol: 1.
Empat menu lainnya
E
Copyright © 2010 By Winda Hafilia
Welcome to My Web
english-grammar.com
Berand Materi
Kesalahan-kesalahan Umum Latihan
Profil
Cari
Berisi materi
Judul Materi
Counter 0 0 0 0
Logout
E
Materi
Participle and Gerund Causative
Question Tags Tenses
Universitas Sumatera Utara
2. Cari, digunakan untuk proses pencarian materi yang diinginkan oleh user
3. Lihat, digunakan untuk melihat jumlah benar dari soal yang dijawab oleh user
Link : 1.
Logout, digunakan untuk keluar dari website. Gambar: Logo website pada header
Gambar 3.15 Tampilan Soal sesuai Materi
3.6.5 Rancangan Tampilan Menu Kesalahan-Kesalahan Umum
Interface 5 Gambar 3.16 Fungsi : Sebagai halaman untuk menampilkan kesalahan-kesalahan umum dalam
bahasa Inggris yang umum terjadi common errors in English.
E E
Copyright © 2010 By Winda Hafil Copyright © 2010 By Winda Hafilia
Welcome to My Web
Berand Materi
Kesalahan-kesalahan Umum Latihan
Profil
Cari
Berisi soal sesuai materi.
Benar:
Soal Materi
Counter 0 0 0 0
Logout
Lihat
Materi
Participle and Gerund Causative
Question Tags Tenses
E
Universitas Sumatera Utara
Teks : 1.
English-grammar.com nama website 2.
Welcome to My Web 3.
Copyright © 2010 By Winda Hafilia 4.
Penjelasan tentang common errors in english Tombol:
1. Cari, digunakan untuk proses pencarian materi yang diinginkan oleh user
Link : 1.
Empat menu lainnya 2.
Logout, digunakan untuk keluar dari website. Gambar: Logo website pada header
Gambar 3.16 Tampilan Menu Kesalahan-Kesalahan Umum
Copyright © 2010 By Winda Hafilia
Welcome to My Web
english-grammar.com
Berand Materi
Kesalahan-kesalahan Umum Profil
Car
Berisi dari Kesalahan-kesalahan Umum Common Errors
Counter 0 0 0 0
Logout
Kesalahan-kesalahan Umum Common Errors
Latihan
E
Universitas Sumatera Utara
3.6.6 Rancangan Tampilan Menu Latihan
Interface 6 Gambar 3.17 Fungsi : Sebagai halaman untuk menampilkan soal-soal untuk seluruh materi dan
direncanakan terdapat 50 soal yang harus diselesaikan. Teks :
1. English-grammar.com nama website
2. Welcome to My Web
3. Copyright © 2010 By Winda Hafilia
4. Soal-soal untuk seluruh materi
Tombol: 1.
Empat menu lainnya 2.
Cari, digunakan untuk proses pencarian materi yang diinginkan oleh user 3.
Lihat Nilai, digunakan untuk melihat nilai yang diperoleh user 4.
Cek Jawaban, digunakan untuk melihat jawaban yang sebenarnya. Link :
1. Logout, digunakan untuk keluar dari website.
Universitas Sumatera Utara
Gambar 3.17 Tampilan Menu Latihan
3.6.7 Rancangan Tampilan Menu Profil
Interface 7 Gambar 3.18 Fungsi : Sebagai halaman untuk menampilkan profil atau biodata saya sebagai
perancang dan pembuat website. Teks :
1. Engish-grammar.com nama website
2. Welcome to My Web
3. Copyright © 2010 By Winda Hafilia
4. Profil atau biodata dari saya sebagai perancang dan pembuat website
Tombol:
E
Copyright © 2010 By Winda Hafilia
Welcome to My Web
english-grammar.com
Berand Materi
Kesalahan-kesalahan Umum Latihan
Profil
Car
Latihan
Berisi 50 soal sebagai Latihan berkaitan dengan semua materi
Counter 0 0 0 0
Logout
Lihat Nilai Cek Jawaban
Universitas Sumatera Utara
1. Empat menu lainnya
2. Cari, digunakan untuk proses pencarian materi yang diinginkan oleh user
Link : 1.
Logout, digunakan untuk keluar dari website.
Gambar: Logo website pada header
Gambar 3.18 Tampilan Menu Profil
Copyright © 2010 By Winda Haf ilia
Copyright © 2010 By Winda Hafilia
Copyright © 2010 By Winda Hafilia
Welcome to My Web
english-grammar.com
Berand Materi
Kesalahan-kesalahan Umum Latihan
Profil
Car
Profil Saya
Berisi Profil tentang Saya
Counter 0 0 0 0
Logout
Poto Profil
E
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI
4.1 Implementasi