3.3.1.1 Perancangan Antarmuka Pengunjung
1. Antarmuka Pengunjung
HEADER HOME
PROFIL TESTIMONIAL
NEWS Selengkapnya
P01
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO PRODUK TERBARU
INFO IMAGE
YMESSENGER ICON
SMILE FACEBOOK
TWETTER CARA PEMBELIAN
KERANJANG BELANJA
: 1.
Klik tombol “ Produk kami
” untuk menuju ke
P03 2.
Klik tombol “ Cara belanja
” untuk menuju ke
P05 3.
Klik tombol “ testimonial
” untuk menuju ke
P04 4.
Klik tombol “ Kontak kami
” untuk menuju ke
P06 5 .
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P
02 6 .
Klik link “Login” untuk menuju ke P07
7 . Klik tombol “info” untuk menuju ke
P08 8 .
Klik tombol “beli” untuk menuju ke P09
9 . klik tombol cari untuk melakukan pencarian produk
. 9 . klik tombol lupa password untuk
menuju ke M 02.
PRODUK NEWS
HUBUNGI KAMI
IMAGE INFO
Selengkapnya INFO
IMAGE INFO
IMAGE INFO
IMAGE Selengkapnya
Selengkapnya GO
KATEGORI
Gambar 3.23 Perancangan Tampilan Home Pengunjung 2. Antarmuka Registrasi Member P02
HEADER HOME
PROFIL TESTIMONIAL
NEWS
P02
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO Registrasi
YMESSENGER ICON
SMILE FACEBOOK
TWETTER
CARA PEMBELIAN KERANJANG
BELANJA :
1. Klik tombol “
Produk kami ” untuk
menuju ke P03
2. Klik tombol “
Cara belanja ” untuk
menuju ke P05
3. Klik tombol “
testimonial ” untuk
menuju ke P04
4. Klik tombol “
Kontak kami ” untuk
menuju ke P06
5 . Klik link “Daftar” untuk melakukan
registrasi dan menuju ke P 02
6 . Klik link “Login” untuk menuju ke
P07 7 .
Klik tombol “info” untuk menuju ke P08
8 . Klik tombol “beli” untuk menuju ke
P09 9 . klik tombol cari untuk melakukan
pencarian produk .
9 . klik tombol lupa password untuk menuju ke M
02. PRODUK
NEWS HUBUNGI
KAMI
IMAGE INFO
GO KATEGORI
Isi semua field yang ada. Nama
: Password :
Alamat :
Telpon :
E-mail :
Provinsi :
Kota : Isi semua field yang ada
Nama Password
Alamat Telepon
Email Provinsi
Kota Proses
Gambar 3.24 Perancangan Tampilan Registrasis Member
3. Antarmuka Produk Pengunjung P03
HEADER HOME
PROFIL TESTIMONIAL
NEWS Selengkapnya
P03
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO PRODUK TERBARU
INFO IMAGE
YMESSENGER ICON
SMILE FACEBOOK
TWETTER CARA PEMBELIAN
KERANJANG BELANJA
: 1.
Klik tombol “ Produk kami
” untuk menuju ke
P03 2.
Klik tombol “ Cara belanja
” untuk menuju ke
P05 3.
Klik tombol “ testimonial
” untuk menuju ke
P04 4.
Klik tombol “ Kontak kami
” untuk menuju ke
P06 5 .
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P
02 6 .
Klik link “Login” untuk menuju ke P07
7 . Klik tombol “info” untuk menuju ke
P08 8 .
Klik tombol “beli” untuk menuju ke P09
9 . klik tombol cari untuk melakukan pencarian produk
. 9 . klik tombol lupa password untuk
menuju ke M 02.
PRODUK NEWS
HUBUNGI KAMI
IMAGE INFO
INFO IMAGE
INFO IMAGE
Selengkapnya Selengkapnya
GO KATEGORI
Gambar 3.25 Perancangan Tampilan produk pengunjung 4. Antarmuka Testimonial P04
HEADER HOME
PROFIL TESTIMONIAL
NEWS
P04
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO Testimonial Member
YMESSENGER ICON
SMILE FACEBOOK
TWETTER
CARA PEMBELIAN KERANJANG
BELANJA :
1. Klik tombol “
Produk kami ” untuk
menuju ke P03
2. Klik tombol “
Cara belanja ” untuk
menuju ke P05
3. Klik tombol “
testimonial ” untuk
menuju ke P04
4. Klik tombol “
Kontak kami ” untuk
menuju ke P06
5 . Klik link “Daftar” untuk melakukan
registrasi dan menuju ke P 02
6 . Klik link “Login” untuk menuju ke
P07 7 .
Klik tombol “info” untuk menuju ke P08
8 . Klik tombol “beli” untuk menuju ke
P09 9 . klik tombol cari untuk melakukan
pencarian produk .
9 . klik tombol lupa password untuk menuju ke M
02. PRODUK
NEWS HUBUNGI
KAMI
IMAGE INFO
GO KATEGORI
Gambar 3.26 Perancangan tampilan testimonial
5. Antarmuka Cara Belanja P05
HEADER HOME
PROFIL TESTIMONIAL
NEWS
P05
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO Cara Pembelian
YMESSENGER ICON
SMILE FACEBOOK
TWETTER
CARA PEMBELIAN KERANJANG
BELANJA 1.
Klik tombol “ Produk kami
” untuk menuju ke
P03 2.
Klik tombol “ Cara belanja
” untuk menuju ke
P05 3.
Klik tombol “ testimonial
” untuk menuju ke
P04 4.
Klik tombol “ Kontak kami
” untuk menuju ke
P06 5 .
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P
02 6 .
Klik link “Login” untuk menuju ke P07
7 . Klik tombol “info” untuk menuju ke
P08 8 .
Klik tombol “beli” untuk menuju ke P09
9 . klik tombol cari untuk melakukan
pencarian produk .
9 . klik tombol lupa password untuk
menuju ke M 02.
PRODUK NEWS
HUBUNGI KAMI
IMAGE INFO
GO KATEGORI
Gambar 3.27 Perancangan Tampilan cara belanja 6. Antar muka Hubungi kami P06
HEADER HOME
PROFIL TESTIMONIAL
NEWS
P05
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO
Cara Pembelian
YMESSENGER ICON
SMILE FACEBOOK
TWETTER CARA PEMBELIAN
KERANJANG BELANJA
1. Klik tombol “
Produk kami ” untuk
menuju ke P03
2. Klik tombol “
Cara belanja ” untuk
menuju ke P05
3. Klik tombol “
testimonial ” untuk
menuju ke P04
4. Klik tombol “
Kontak kami ” untuk
menuju ke P06
5 . Klik link “Daftar” untuk melakukan
registrasi dan menuju ke P 02
6 . Klik link “Login” untuk menuju ke
P07 7 .
Klik tombol “info” untuk menuju ke P08
8 . Klik tombol “beli” untuk menuju ke
P09 9 .
klik tombol cari untuk melakukan pencarian produk
. 9 .
klik tombol lupa password untuk menuju ke M
02. PRODUK
NEWS HUBUNGI
KAMI
IMAGE INFO
GO KATEGORI
Gambar 3.28 Perancangan tampilan hubungi kami
7. Antarmuka News P07
HEADER HOME
PROFIL TESTIMONIAL
NEWS
P07
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO News
YMESSENGER ICON
SMILE FACEBOOK
TWETTER
CARA PEMBELIAN KERANJANG
BELANJA 1.
Klik tombol “ Produk kami
” untuk menuju ke
P03 2.
Klik tombol “ Cara belanja
” untuk menuju ke
P05 3.
Klik tombol “ testimonial
” untuk menuju ke
P04 4.
Klik tombol “ Kontak kami
” untuk menuju ke
P06 5 .
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P
02 6 .
Klik link “Login” untuk menuju ke P07
7 . Klik tombol “info” untuk menuju ke
P08 8 .
Klik tombol “beli” untuk menuju ke P09
9 . klik tombol cari untuk melakukan pencarian produk
. 9 . klik tombol lupa password untuk
menuju ke M 02.
PRODUK NEWS
HUBUNGI KAMI
IMAGE INFO
GO KATEGORI
Judul berita
Gambar 3.29 Perancangan tampilan news 8.
Antarmuka Profil P08
HEADER HOME
PROFIL TESTIMONIAL
NEWS
P08
PENCARIAN Login
Daftar |
BEST SELLER IMAGE
INFO Profil
YMESSENGER ICON
SMILE FACEBOOK
TWETTER
CARA PEMBELIAN KERANJANG
BELANJA :
1. Klik tombol “
Produk kami ” untuk
menuju ke P03
2. Klik tombol “
Cara belanja ” untuk
menuju ke P05
3. Klik tombol “
testimonial ” untuk
menuju ke P04
4. Klik tombol “
Kontak kami ” untuk
menuju ke P06
5 . Klik link “Daftar” untuk melakukan
registrasi dan menuju ke P 02
6 . Klik link “Login” untuk menuju ke
P07 7 .
Klik tombol “info” untuk menuju ke P08
8 . Klik tombol “beli” untuk menuju ke
P09 9 . klik tombol cari untuk melakukan
pencarian produk .
9 . klik tombol lupa password untuk menuju ke M
02. PRODUK
NEWS HUBUNGI
KAMI
IMAGE INFO
GO KATEGORI
IMAGE
Gambar 3.30 Perancangan tampilan profil
3.3.1.2 Perancangan Antarmuka Member