3. perancangan antarmuka pesan
Dibawah ini adalah perancangan antarmuka pesan dimana student dan moderator dapat mengirim pesan, membalas dan menghapus pesan. Perancangan
antarmuka tersebut dapat terlihat pada gambar 2.23.
Header
Footer
Keterangan :
- 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
EDIT PROFILE MESSAGE
[2] FRIENDS
[20]
Friends online [2] phot
o
phot o
phot o
Massages
Course information
phot o
Nama user Judul pesan
date
X
phot o
Nama user Judul pesan
date
X
phot o
Nama user Judul pesan
date
X
phot o
Nama user Judul pesan
date
X
Nama Layar : H02 Ukuran Layar : 960 pixel X 600 pixel
Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.23 Perancangan Antarmuka Pesan H02
4. Perancangan antarmuka pertemanan
Di bawah ini adalah gambar perancangan antarmuka pertemanan dimana student dapat melakukan pertemanan dengan mengkonfirmasi permintaan pertemanan.
Perancangan antarmuka tersebut dapat terlihat pada gambar 3.24
Header
Footer
Keterangan :
- Klik Message menuju halaman H02 - Klik Friends menuju halaman H03
- Klik Profile menuju ke halaman P01 - Klik Edit Profile menuju ke halaman
P02 - Klik Course menuju ke halaman C01
- Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01
Home | Profile | course | Blog | Forum | Account
EDIT PROFILE MESSAGE
[2] FRIENDS
[20]
Friends online [2] photo
phot o
phot o
Friends
Course information
Nama Layar : H03 Ukuran Layar : 960 pixel X 600 pixel
Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
phot o
Nama Teman Score [400]
View
X
phot o
Nama Teman Score [400]
View
X
phot o
Nama Teman Score [400]
View
X
phot o
Nama Teman Score [400]
View
X
Gambar 3.24 Perancangan Antarmuka Pertemanan H03
5. Perancangan antarmuka profile
Dibawah ini adalah perancangan antarmuka profile dimana terdapat informasi beranda dari status jawaban write dan menu untuk mengedit profile
pengguna. Perancangan antarmuka tersebut dapat terlihat pada gambar 3.25
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
EDIT PROFILE MESSAGE
[2] FRIENDS
[20]
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 : P01 Ukuran Layar : 960 pixel X 600 pixel
Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.25 Perancangan Antarmuka Profile P01
6. Perancangan antarmuka course
Kategori