Tgl_komentar datetime
Aktif Tinyint
2
3.3 Perancangan Arsitektur
3.3.1 Perancangan Antar Muka
Interface atau antarmuka merupakan tampilan dari suatu program aplikasi yang berperan sebagai media komunikasi yang digunakan sebagai sarana
berdialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan interface yang mudah dipahami dan digunakan oleh user.
Perancangan interface untuk aplikasi pembelajaran bahasa Inggris menggunakan konsep jejaring social adalah sebagai berikut :
1. Perancangan Antarmuka Index pertama kali website di akses
Di bawah ini adalah tampilan utama pada saat website pertama kali diakses dimana pengunjung dapat melakukan pendaftaran jika memang belum
memiliki akun pengguna. Namun jika pengunjung memiliki akun mereka bisa langsung memasuki halaman pengguna dalam website pembelajaran bahasa
Inggris ini. Perancangan antarmuka tersebut dapat terlihat pada gambar 3.21
Header
Footer
Sign in
Email Password
Sign in Sign Up
Last_name :
Sign up First name :
Email : Password :
Confirm password : I am :
Birthday :
image
Keterangan :
- Klik Sign in jika data valid maka akan menuju halaman H01 namun jika tidak
valid maka akan menampilkan pesan M01
- Klik Sign up jika data invalid maka akan menampilkan pesan kesalahan
namun jika data valid menampilkan pesan M02
Lupa password
Nama Layar : I00 Ukuran Layar : 960 pixel X 600 pixel
Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.21 Perancangan Antarmuka Index i00 2.
Perancangan Antarmuka Home
Dibawah ini adalah tampilan antarmika home dimana halaman ini akan tampil ketika student dan moderator berhasil login. Perancangan antarmuka
tersebut dapat terlihat pada gambar 3.22
Header
Footer
Keterangan :
- Klik Nama Student menuju halaman P01
- Klik Edit Profile menuju halaman P02 - Klik Message menuju halaman H02
- Klik Friends Menuju halaman H03 - Klik Profile menuju ke halaman P01
- Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01
- Klik Forum menuju ke halaman F01 Home | Profile | course | Blog | Forum | Account
Friends online [2] phot
o
phot o
phot o
Nama student
phot o
phot o
Nama student
Isi status Isi status Isi status Isi status Isi status Isi status Isi status Isi status
Date post Comment status
phot o
Comment status Write comment
phot o
phot o
Nama student
Isi status Isi status Isi status Isi status Isi status Isi status Isi status Isi status
Date post Comment status
phot o
Comment status Write comment
Course information
Nama Layar : H01 Ukuran Layar : 960 pixel X 600 pixel
Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Massage Edit Profile
Friends
Gambar 3.22 Perancangan Antarmuka Home H01
3. perancangan antarmuka pesan
Kategori