3.2.2.3 Perancangan Antarmuka
Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user, terdiri dari perancangan
tampilan menu, tampilan form, tampilan pesan, keluaran dan jaringan semantik.
3.2.2.3.1 Perancangan Antarmuka Pengunjung
1. Perancangan Antamuka Beranda
Berikut dapat dilihat perancangan antar muka Beranda. Pada gambar 3.32 dibawah ini:
Gambar 3. 31 Perancangan Antamuka Beranda
2. Perancangan Antamuka Tentang Kami
Berikut dapat dilihat perancangan antar muka menu tentang kami. Pada gambar 3.33 dibawah ini:
Gambar 3. 32 Perancangan Antarmuka Tentang Kami
3. Perancangan Antarmuka Pendaftaran
Berikut dapat dilihat perancangan antar muka menu Pendaftaran. Pada gambar 3.33 dibawah ini:
Gambar 3. 33 Perancangan Antarmuka Pendaftaran
4. Perancangan Antarmuka Masuk
Berikut dapat dilihat perancangan antar muka menu Masuk. Pada gambar 3.31 dibawah ini:
Gambar 3. 34 Perancangan Antarmuka Masuk
5. Perancangan Antarmuka Kategori
Berikut dapat dilihat perancangan antar muka menu Kategori. Pada gambar 3.32 dibawah ini:
Gambar 3. 35 Perancangan Antarmuka Kategori
6. Perancangan Antarmuka Detail
Berikut dapat dilihat perancangan antar muka menu Detail. Pada gambar 3.33 dibawah ini:
HEADER
LOGO KATEGORI
PENCARIAN KATEGORI 1
KATEGORI 2 KATEGORI 3
UKURAN 1 UKURAN 2
UKURAN 3 UKURAN
KURS TRACKING JNE
BARANG TERBARU GAMBAR
GAMBAR
CA RI
KONTAK KAMI LOGO YAHOO MESSANGER
NO TELP PEMBAYARAN
FOOTER
H ARGA U KU RAN
STOK
GAMBAR BARANG
B ELI
KEMBALI
- KLIK CARA BELANJA MENUJU F04 - KLIK TENTANG KAMI MENUJU F02
- KLIK DAFTAR MENUJUF06 - KLIK HALAMAN UTAMA MENUJU F01
- KLIK MASUK MENUJU F07 - KLIK BELI MENUJU F09
- KLIK KATEGORI 1,2,3 …. DST MENUJU F05 - KLIK CARI MENUJU F11
HALAMAN UTAMA | CARA BELANJA | TENTANG KAMI | DAFTAR | MASUK
NAMA LAYAR : F10
UKURAN LAYAR : 1024X768
UKURAN LAYAR HEADER : 1024x204
UKURAN LAYAR MENU KANAN : 256x768
UKURAN LAYAR MENU KIRI : 256x768
UKURAN LAYAR MENU TENGAH : 512x768
UKURAN LAYAR FOOTER : 1024x404
FONT : ARIAL
BACKGROUND : COKLAT
F10
Gambar 3. 36 Perancangan Antarmuka Detail
7. Perancangan Antarmuka Cari
Berikut dapat dilihat perancangan antar muka menu Cari. Pada gambar 3.34 dibawah ini:
Gambar 3. 37 Perancangan Antarmuka Cari
3.2.2.3.2 Perancangan Antarmuka Pemesan
1. Perancangan Antarmuka Beranda
Berikut dapat dilihat perancangan antarmuka Beranda. Pada gambar dibawah ini:
Gambar 3. 38 Perancangan Antarmuka Beranda
2. Perancangan Antarmuka Tentang Kami
Kategori