Perancangan Antarmuka Pengunjung 1 Perancangan Antamuka Menu Utama (Home)

BAB V KESIMPULAN DAN SARAN

3.2 Perancangan Sistem

3.3.2 Perancangan Arsitektur

3.3.2.3 Perancangan Antarmuka Pengunjung 1 Perancangan Antamuka Menu Utama (Home)

Berikut dapat dilihat perancangan antar muka menu utama (Home) dari pembangunan aplikasi e-commerce di Vim Audio dan aksesoris yang tercantum pada gambar 3.29.

Home Aksesoris Audio Login Password Login Chart Keranjang Balanja Total : Rp Kategori Merk Semua Produk Logo image image image image image image image image image Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F01 · Klik menu aksesoris menuju F02

· Klik menu audio menuju F03

· Klik menu contact us menuju F03

· Klik menu about us menuju F04

· Klik menu logout menuju F05

· Klik link login menuju F06

· Klik link lupa password menuju F07

· Klik link daftar menuju F08

· Klik link cari menuju F09

· Klik image menuju F010

· Klik link add toc hart menuju F011

· Klik link chart menuju F012

· Klik link kategori menuju F013

· Klik link merk menuju F014

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password ? Daftar Email Follow Us On : Pembeyaran PAYPAL BCA

Gambar 3.24 Perancangan Antarmuka Menu Utama (Home) 2. Perancangan Antarmuka Menu Aksesoris

Berikut dapat dilihat perancangan antarmuka menu aksesoris dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.30.

Home Aksesoris Audio

Login Password Login Chart Keranjang Balanja Total : Rp Kategori Merk Semua Produk Logo image image image image image image image image image Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F02 · · Klik home menuju F01Klik menu aksesoris menuju F02

· Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik menu logout menuju F05 · Klik link login menuju F06 · Klik link lupa password menuju

F07

· Klik link daftar menuju F08 · Klik link cari menuju F09 · Klik image menuju F010 · Klik link add toc hart menuju

F011

· Klik link chart menuju F012 · Klik link kategori menuju F013 · Klik link merk menuju F014

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password ? Daftar Email Follow Us On : Pembeyaran PAYPAL BCA

3. Perancangan Antarmuka Menu Audio

Berikut dapat dilihat perancangan antarmuka menu Audio dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.31 dibawah ini:

Home Aksesoris Audio

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F03 · · Klik home menuju F01Klik menu aksesoris menuju F02

· Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik menu logout menuju F05 · Klik link login menuju F06 · Klik link lupa password menuju

F07

· Klik link daftar menuju F08 · Klik link cari menuju F09 · Klik image menuju F010 · Klik link add toc hart menuju

F011

· Klik link chart menuju F012 · Klik link kategori menuju F013 · Klik link merk menuju F014

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password ? Daftar Email Follow Us On : Pembeyaran PAYPAL BCA

Gambar 3.26 Perancangan Antarmuka Menu Audio 4. Perancangan Antarmuka Menu About Us

Berikut dapat dilihat perancangan antarmuka menu About Us dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.32.

Home Aksesoris Audio Login Password Login Chart Keranjang Balanja Total : Rp Kategori Merk About Us Logo Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari F04 Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Email

Lupa Password? Daftar

· Klik home menuju F01

· Klik menu aksesoris menuju F02

· Klik menu audio menuju F03

· Klik menu contact us menuju F04

· Klik menu about us menuju F05

· Klik link login menuju F06

· Klik link lupa password menuju F07

· Klik link daftar menuju F08

· Klik link cari menuju F09

· Klik image menuju F010

· Klik link add toc hart menuju F011

· Klik link chart menuju F012

· Klik link kategori menuju F013

· Klik link merk menuju F014

Follow Us On :

Pembeyaran

PAYPAL BCA

Gambar 3.27 Perancangan Antarmuka Menu Contact Us 5. Perancangan Antarmuka Menu Contact Us

Berikut dapat dilihat perancangan antarmuka menu Contact Us dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.33.

Home Aksesoris Audio

Login Password Login Chart Keranjang Balanja Total : Rp Kategori Merk Contact Us Logo Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari F05 Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Email

Lupa Password? Daftar

· Klik home menuju F01 · Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F04 · Klik menu about us menuju F05 · Klik link login menuju F06 · Klik link lupa password menuju

F07

· Klik link daftar menuju F08 · Klik link cari menuju F09 · Klik image menuju F010 · Klik link add toc hart menuju

F011

· Klik link chart menuju F012 · Klik link kategori menuju F013 · Klik link merk menuju F014

Follow Us On :

Pembeyaran PAYPAL

BCA

6. Perancangan Antarmuka Menu Login

Berikut dapat dilihat perancangan antarmuka menu Login dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.34.

Home Aksesoris Audio

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F06 · · Klik home menuju F01Klik menu aksesoris menuju F02

· Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik menu logout menuju F05 · Klik link login menuju F06 · Klik link lupa password menuju

F07

· Klik link daftar menuju F08 · Klik link cari menuju F09 · Klik image menuju F010 · Klik link add toc hart menuju

F011

· Klik link chart menuju F012 · Klik link kategori menuju F013 · Klik link merk menuju F014

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password ? Daftar Email Follow Us On : Pembeyaran PAYPAL BCA

Gambar 3.29 Perancangan Antarmuka Menu Login 7. Perancangan Antarmuka Lupa Password

Berikut dapat dilihat perancangan antarmuka menu Lupa password dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.35.

Home Aksesoris Audio Login Login Lupa Password? Chart Keranjang Balanja Total : Rp Kategori Merk Resset Password Logo Proses Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F07 · Klik home menuju F01

· Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik link login menuju F05 · Klik link lupa password menuju

F06

· Klik link daftar menuju F07 · Klik link cari menuju F08 · Klik image menuju F09 · Klik link add toc hart menuju

F010

· Klik link chart menuju F011 · Klik link kategori menuju F012 · Klik link merk menuju F013

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam

Masukan alamat email Anda untuk melakukan reset password Email : Daftar Email Password Follow Us On : Pembeyaran PAYPAL BCA

Gambar 3.30 Perancangan Antarmuka Menu Lupa Password 8. Perancangan Antarmuka Daftar

Berikut dapat dilihat perancangan antarmuka menu Daftar dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.36.

Home Aksesoris Audio

Pendaftaran Mamber Logo

F08 · Klik home menuju F01

· Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik link login menuju F05 · Klik link lupa password menuju

F06

· Klik link daftar menuju F07

Login Nama Lengkap E-mail Password Confirm Password Alamat alamat kota provinsi Kode pos Lupa Password? Daftar Telepon Handphone Tanggal Lahir Gender Male Female Daftar Batal Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam

Password

9. Perancangan Antarmuka Detail Barang

Berikut dapat dilihat perancangan antarmuka menu Detaill Barang dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.37.

Home Aksesoris Audio

Login Email Login Lupa Password? Daftar Chart Keranjang Balanja Total : Rp Kategori Merk image Add To Chart Nama Produk Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

· Klik home menuju F01

· Klik menu aksesoris menuju F02

· Klik menu audio menuju F03

· Klik menu contact us menuju F03

· Klik menu about us menuju F04

· Klik link login menuju F05

· Klik link lupa password menuju F06

· Klik link daftar menuju F07

· Klik link cari menuju F08

· Klik image menuju F09

· Klik link add toc hart menuju F010

· Klik link chart menuju F011

· Klik link kategori menuju F012

· Klik link merk menuju F013

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam

Harga Stok Spesifikasi Logo F09 Password Follow Us On : Pembeyaran PAYPAL BCA

Gambar 3.32 Perancangan Antarmuka Detail Barang 10. Perancangan Antarmuka Keranjang Belanja

Berikut dapat dilihat perancangan antarmuka menu Keranjang Belanja dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.38.

Login Email Password Login Lupa Password? Daftar Chart Keranjang Balanja Total : Rp Kategori Merk Semua Produk Logo Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Produk Harga Satuan Jumlah Beli Sub Total

Total Rp...

Checkout Home Aksesoris Audio Contact Us About Us

Cari Cari

· Klik home menuju F01 · Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik link login menuju F05 · Klik link lupa password menuju

F06

· Klik link daftar menuju F07 · Klik link cari menuju F08 · Klik image menuju F09 · Klik link add toc hart menuju

F010

· Klik link chart menuju F011 · Klik link kategori menuju F012 · Klik link merk menuju F013

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam

F09

Follow Us On :

Pembeyaran PAYPAL

BCA

Gambar 3.33 Perancangan Antarmuka Menu Keranjang Belanja 11. Perancangan Antarmuka Kategori

Berikut dapat dilihat perancangan antarmuka menu Kategori dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.39.

Home Aksesoris Audio

Login Password Login Lupa Password? Chart Keranjang Balanja Total : Rp Kategori Merk Semua Produk Logo image image image image image image image image image Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F11 · Klik home menuju F01

· Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik link login menuju F05 · Klik link lupa password menuju

F06

· Klik link daftar menuju F07 · Klik link cari menuju F08 · Klik image menuju F09 · Klik link add toc hart menuju

F010

· Klik link chart menuju F011 · Klik link kategori menuju F012 · Klik link merk menuju F013

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Daftar

Follow Us On :

Pembeyaran PAYPAL

BCA

12. Perancangan Antarmuka Merk

Berikut dapat dilihat perancangan antarmuka menu Merk dari pembangunan aplikasi e-commerce di Vim audio dan Aksesoris yang tercantum pada gambar 3.40.

Home Aksesoris Audio

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F12 · Klik home menuju F01

· Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik link login menuju F05 · Klik link lupa password menuju

F06

· Klik link daftar menuju F07 · Klik link cari menuju F08 · Klik image menuju F09 · Klik link add toc hart menuju

F010

· Klik link chart menuju F011 · Klik link kategori menuju F012 · Klik link merk menuju F013

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Daftar

Follow Us On :

Pembeyaran

PAYPAL

BCA

Gambar 3.35 Perancangan Antarmuka Menu Merk 3.3.2.4Perancangan Antarmuka Member

1. Perancangan Antarmuka Menu Utama (Home)

Berikut dapat dilihat perancangan antarmuka menu utama (Home) dari pembangunan aplikasi e-commerce di Vim Audio dan Aksesoris yang tercantum pada gambar 3.41.

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F01 · Klik home menuju F01

· Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F03 · Klik menu about us menuju F04 · Klik menu logout menuju F05 · Klik link login menuju F06 · Klik link lupa password menuju

F07

· Klik link daftar menuju F08 · Klik link cari menuju F09 · Klik image menuju F10 · Klik link add toc hart menuju F11 · Klik link chart menuju F12 · Klik link kategori menuju F13 · Klik link merk menuju F14

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password ? Daftar Email Follow Us On : Pembeyaran PAYPAL BCA

Gambar 3.36 Perancangan Antarmuka Menu Member 2. Perancangan Antarmuka Menu Aksesoris

Berikut dapat dilihat perancangan antarmuka menu Aksesoris dari pembangunan aplikasi e-commerce di Vim Audio dan Aksesoris yang tercantum pada gambar 3.42.

Home Aksesoris Audio

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F02 · Klik home menuju F01

· Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F04 · Klik menu about us menuju F05 · Klik link login menuju F06 · Klik link lupa password menuju

F07

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password ?

Daftar Email

Follow Us On :

3. Perancangan Antarmuka Menu Audio

Berikut dapat dilihat perancangan antarmuka menu Audio dari pembangunan aplikasi e-commerce di Vim Audio dan Aksesoris yang tercantum pada gambar 3.43.

Home Aksesoris Audio

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari

F03 · Klik home menuju F01

· Klik menu aksesoris menuju F02 · Klik menu audio menuju F03 · Klik menu contact us menuju F04 · Klik menu about us menuju F05 · Klik link login menuju F06 · Klik link lupa password menuju

F07

Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password ?

Daftar Email

Follow Us On :

Gambar 3.38 Perancangan Antarmuka Menu Audio 4. Perancangan Antarmuka Menu Contact Us

Berikut dapat dilihat perancangan antarmuka menu Contact Us dari pembangunan aplikasi e-commerce di Vim Audio dan Aksesoris yang tercantum pada gambar 3.44.

Home Aksesoris Audio Login Password Login Chart Keranjang Balanja Total : Rp Kategori Merk Logo Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari F04 Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Lupa Password?

F07

Daftar

Follow Us On :

Gambar 3.39 Perancangan Antarmuka Menu Contact Us 5. Perancangan Antarmuka Menu About Us

Berikut dapat dilihat perancangan antarmuka menu About Us dari pembangunan aplikasi e-commerce di Vim Audio dan Aksesoris yang tercantum pada gambar 3.45.

Home Aksesoris Audio

Login Password Login Chart Keranjang Balanja Total : Rp Kategori Merk About Us Logo Teks Teks Teks Teks Teks Teks Teks Teks Teks Teks Contact Us About Us Cari Cari F05 Nama Layar : F01 Ukuran Layar : 920*200 Font : Verdana,Arial Warna Background : abu-abu,hitam Email

Lupa Password? Daftar

· Klik home menuju F01

· Klik menu aksesoris menuju F02

· Klik menu audio menuju F03

· Klik menu contact us menuju F04

· Klik menu about us menuju F05

· Klik link login menuju F06

· Klik link lupa password menuju F07

· Klik link daftar menuju F08

· Klik link cari menuju F09

· Klik image menuju F10

· Klik link add toc hart menuju F11

· Klik link chart menuju F12

· Klik link kategori menuju F13

· Klik link merk menuju F14

Follow Us On :

Pembeyaran

PAYPAL BCA

6. Perancangan Antarmuka Menu Login

Berikut dapat dilihat perancangan antarmuka menu Login dari pembangunan aplikasi e-commerce di Vim Audio dan Aksesoris yang tercantum pada gambar 3.46.

Home Aksesoris Audio

Add To Chart Add To Chart Add To Chart Nama Produk Nama Produk Nama Produk

Add To Chart Add To Chart Add To Chart

Dalam dokumen Pembangunan Aplikasi E-Commerce Pada Toko Vim Audio Dan Aksesoris (Halaman 142-174)