ANALISIS DAN PERANCANGAN
3.1.2 Analisis Sistem Baru
3.2.3.1 Perancangan Antarmuka Pengunjung
1. Perancangan antarmuka menu utama (beranda)
Berikut dapat dilihat perancangan antar muka menu utama (beranda) dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.21 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Selamat Datang
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08
Kategori H01
Gambar Gambar Gambar
Keterangan Keterangan Keterangan
Link kategori Produk Terlaris Gambar Pencarian Cari Keranjang Belanja
Link like Facebook Facebook
Beli Lihat Detail Beli Lihat Detail Beli Lihat Detail
Gambar Gambar Gambar
Keterangan Keterangan Keterangan
Beli Lihat Detail Beli Lihat Detail Beli Lihat Detail
155
2. Perancangan antarmuka menu pemesanan
Berikut dapat dilihat perancangan antar muka menu cara pemesanan dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.22 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08 Kategori H02 Link kategori Produk Terlaris Gambar Pencarian Cari Keranjang Belanja
Teks Cara Pemesanan
3. Perancangan antarmuka menu keranjang belanja
Berikut dapat dilihat perancangan antar muka menu keranjang belanja dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.23 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08 Kategori H03 Link kategori Produk Terlaris Gambar Pencarian Cari Keranjang Belanja
Keranjang Belanja Anda Masih Kosong Keranjang Belanja
157
4. Perancangan antarmuka menu hubungi kami
Berikut dapat dilihat perancangan antar muka menu hubungi kami dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.24 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08
Kategori H04
Link kategori Produk Terlaris
Gambar Pencarian Cari Keranjang Belanja Hubungi Kami Informasi hubungi kami Via YM : GAMBAR YM
5. Perancangan antarmuka pendaftaran member
Berikut dapat dilihat perancangan antarmuka pendaftaran member dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.25 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08 Kategori H05 Link kategori Produk Terlaris Gambar Keranjang Belanja
Isilah form pendaftaran dibawah ini dengan data yang benar Hubungi Kami Email Username Password Ulangi Password --Pilih Kab/Kota-- Nama Lengkap Alamat Provinsi Kab/Kota Kode Pos Telepon Pencarian Cari Proses --Pilih Provinsi--
159
6. Perancangan antarmuka lupa password
Berikut dapat dilihat perancangan antarmuka lupa password dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.26 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08
Kategori H06
Link kategori Produk Terlaris
Gambar Pencarian
Cari Keranjang Belanja
Isilah form dibawah ini dengan email anda. Email
Proses
7. Perancagan antarmuka kategori
Berikut dapat dilihat perancangan antarmuka kategori dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.27 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08 Kategori H07 Link kategori Produk Terlaris Gambar Pencarian Cari Keranjang Belanja
Gambar Gambar Gambar
Keterangan Keterangan Keterangan
Beli Lihat Detail Beli Lihat Detail Beli Lihat Detail
Gambar Gambar Gambar
Keterangan Keterangan Keterangan
Beli Lihat Detail Beli Lihat Detail Beli Lihat Detail
161
8. Perancangan antarmuka halaman detail barang
Berikut dapat dilihat perancangan antarmuka halaman detail barang dari pembangunan website e-commerce di cv graha yang tercantum pada gambar III.28 dibawah ini :
Gambar (Header)
Beranda Cara Pemesanan Hubungi Kami
Login
Username Password
Login
Lupa Password Belum Memiliki Akun
Footer
Produk Terbaru
Gambar
Keterangan :
- Klik Beranda untuk menuju H01
- Klik Cara Pemesanan Untuk menuju H02 -Klik Keranjang Belanja untuk menuju H03 - Klik Login untuk masuk ke menu sesuai dengan hak akses
- Klik Hubungi Kami untuk menuju H04
- Klik Belum Memiliki Akun untuk menuju H05 - Klik Lupa Password untuk menuju H06
- Klik Kategori untuk menuju H07
- Klik Detail untuk menuju H08 Kategori H08 Link kategori Produk Terlaris Gambar Pencarian Cari Keranjang Belanja Gambar Beli Kembali Keterangan Nama Barang Merk Jenis Warna Gsm Berat Harga Promosi Menggunakan : Gambar Rating
