Perancangan Papan Cerita Story Board Aplikasi

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