Perancangan Antarmuka Pengunjung Perancangan Antar Muka

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