Perancangan Antarmuka Pengunjung Struktur Menu Admin

4. Perancangan Antarmuka Halaman Register P04 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P04 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. Klik REGISTER menuju P14. FOOTER Nama Alamat Register Telp email Provinsi Kota Kodepos Password v v Confirm Code GAMBAR CAPTCA Testimoni Isi testimoni Kurs Dollar Nilai kurs rupiah terhadap dollar Gambar 3. 36 Tampilan Antarmuka halaman Register Pengunjung 5. Perancangan antar muka Halaman Kontak P05 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P05 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. FOOTER Alamat Outlet : Kontak service: Kirim Nama Email Komentar Code GAMBAR CAPTCA Testimoni Isi testimoni Kurs Dollar Nilai kurs rupiah terhadap dollar Gambar 3. 37 Tampilan Antarmuka halaman kontak Pengunjung 6. Perancangan antar muka Halaman About P06 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P06 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. FOOTER Text keterangan tentang aplikasi eCommerce di Distro Garsy Bandung Gambar about us Kurs Dollar Nilai kurs rupiah terhadap dollar Testimoni Isi testimoni Gambar 3. 38 Tampilan Antarmuka halaman About Pengunjung 7. Perancangan antar muka Halaman Cara Belanja P07 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P07 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. FOOTER TEXT KETERANGAN TENTANG CARA BERBELANJA DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Gambar 3. 39 Tampilan Antarmuka halaman Cara Belanja Pengunjung 8. Perancangan antar muka Halaman Cara Pembayaran P08 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P08 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. FOOTER TEXT KETERANGAN TENTANG CARA PEMBAYARAN DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Gambar 3. 40Tampilan Antarmuka halaman Cara Pembayaran Pengunjung 9. Perancangan antar muka Halaman Syarat dan Kondisi P09 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P09 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. FOOTER TEXT KETERANGAN TENTANG SYARAT DAN KONDISI YANG BERLAKU DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Testimoni Isi testimoni Kurs Dollar Nilai kurs rupiah terhadap dollar Gambar 3. 41 Tampilan Antarmuka halaman Syarat Kondisi Pengunjung 10. Perancangan antar muka Halaman Why Us P10 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P10 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. FOOTER TEXT KETERANGAN TENTANG ALASAN KENAPA HARUS MEMILIH UNTUK BERBELANJA DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Kurs Dollar Nilai kurs rupiah terhadap dollar Testimoni Isi testimoni Gambar 3. 42 Tampilan Antarmuka halaman Why Us Pengunjung 11. Perancangan antar muka Halaman Detail Produk P11 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P11 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik DETAIL ATAU KLIK GAMBAR menuju P11. FOOTER GAMBAR PRODUK DETAIL Nama Produk Overview DESKRIPSI DETAIL PRODUK Idproduk Merek Kategori Harga Diskon Size Qty Add To Cart Testimoni Isi testimoni Kurs Dollar Nilai kurs rupiah terhadap dollar Gambar 3. 43 Tampilan Antarmuka halaman Detail produk pengunjung 12. Perancangan antar muka Halaman Lupa Password P12 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Merek Merek Kategori Kategori Kategori Kategori Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK LOGIN REGISTER KONTAK ABOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN P12 Klik HOME menuju ke Form P01. Klik PRODUK menuju ke Form P02. Klik LOGIN menuju ke Form p03. Klik REGISTER menuju ke Form P04. Klik KONTAK menuju ke Form P05. Klik ABOUT menuju ke Form p06. Klik CARA BELANJA menuju ke Form p07. Klik CARA PEMBAYARAN menuju ke Form P08. Klik SYARAT KONDISI menuju ke Form P09. Klik WHY US menuju ke Form p10. Klik ADDTOCART ATAU KLIK GAMBAR menuju P11. Klik LOGIN menuju M03. Klik KIRIM PASSWORD untuk me-request password baru. FOOTER Email Kirim Password Kurs Dollar Nilai kurs rupiah terhadap dollar Testimoni Isi testimoni Gambar 3. 44 Tampilan Antarmuka halaman Lupa Password Pengunjung

b. Perancangan Antarmuka Member

1. Perancangan Antarmuka Halaman Utama Home M01 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN Isi berita….. News M01 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total Produk Terbaru GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK Spesial Offer GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK ADDTOCART ADDTOCART ADDTOCART ADDTOCART Testimoni Isi testimoni Kurs Dollar Nilai kurs rupiah terhadap dollar Gambar 3. 45 Tampilan Antarmuka Halaman Utama Member 2. Perancangan Antarmuka Halaman Produk M02 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M02 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK ADDTOCART ADDTOCART nama nama nama nama harga harga harga harga GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK ADDTOCART ADDTOCART ADDTOCART ADDTOCART nama nama nama nama harga harga harga harga GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK GAMBAR PRODUK ADDTOCART ADDTOCART ADDTOCART ADDTOCART nama nama nama nama harga harga harga Halaman Kurs Dollar Nilai kurs rupiah terhadap dollar Testimoni Isi testimoni Gambar 3. 46 Tampilan Antarmuka Halaman Produk Member 3. Perancangan Antarmuka Halaman Member M03 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M03 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. Klik EDIT menuju M12. Klik HISTORY PEMBELIAN menuju M13. FOOTER Keranjang Belanja Pembelian Total Nama : Provinsi : Kota : Alamat : Telepon : Email : Menejemen Member EDIT HISTORY PEMBELIAN Kurs Dollar Nilai kurs rupiah terhadap dollar Testimoni Isi testimoni Gambar 3. 47 Tampilan Antarmuka Halaman Member 4. Perancangan Antarmuka Halaman Kontak M04 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M04 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total Alamat Outlet : Kontak service: Kirim Nama Email Komentar Code GAMBAR CAPTCA Gambar 3. 48 Tampilan Antarmuka Halaman Kontak Member 5. Perancangan Antarmuka Halaman About M05 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M05 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total Text keterangan tentang aplikasi eCommerce di Distro Garsy Bandung Gambar about us Gambar 3. 49Tampilan Antarmuka Halaman About Member 6. Perancangan Antarmuka Halaman Cara Belanja M07 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M07 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG CARA BERBELANJA DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Kurs Dollar Nilai kurs rupiah terhadap dollar Testimoni Isi testimoni Gambar 3. 50 Tampilan Antarmuka Halaman Cara Belanja Member