Perancangan Struktur Menu Perancangan Interface

39

3.4.1 Perancangan Struktur Menu

1. Struktur Menu Pengunjung Gambar 3. 28 Struktur Menu Pengunjung 2. Struktur Menu Member Gambar 3. 29 Struktur Menu Member 40 3. Struktur Menu Admin Gambar 3. 30 Struktur Menu Admin 41

3.4.2 Perancangan Interface

Perancangan interface untuk aplikasi E-Commerce di CV Lorco Menara Multimedia adalah sebagai berikut :

3.4.2.1 Perancangan Antarmuka Pengunjung

1. Perancangan Antarmuka Menu Utama Home Gambar 3. 31 Strukutur Menu Pengunjung Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Teks Selamat Datang Teks Artikel Pilihan warna background Nama Layer : P01 Ukuran Layer : Layar Browser Warna Background : coklat biru violet 42 2. Perancangan Antarmuka About Us Gambar 3. 32 About Us Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P02 Ukuran Layer : Layar Browser Warna Background : coklat biru violet Teks About Us 43 3. Perancangan Antarmuka How To Buy help Gambar 3. 33 How To Buy Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P03 Ukuran Layer : Layar Browser Warna Background : coklat biru violet Teks How To Buy 44 4. Perancangan Antarmuka Contact Us Gambar 3. 34 Contact Us Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P04 Ukuran Layer : Layar Browser Warna Background : coklat biru violet Teks Contanct 45 5. Perancangan Antarmuka Registrasi Gambar 3. 35 Registrasi Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P05 Ukuran Layer : Layar Browser Warna Background : coklat biru violet e-mail : username : password : name : addres : city : postal cose : country : province : phone : 46 6. Perancangan Antarmuka Produk Tiap Kategori Gambar 3. 36 Produk tiap kategori Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Klik salah satu produk menuju P07 Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P06 Ukuran Layer : Layar Browser Warna Background : coklat biru violet Nama Product dan Price Nama Product dan Price Nama Produk dan Price Nama Product dan Price Gambar Product Gambar Product Gambar Product Gambar Product 47 7. Perancangan Antarmuka Detail Produk Gambar 3. 37 Detail Produk Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Klik Add To cart untuk memasukan barang ke cart Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P07 Ukuran Layer : Layar Browser Warna Background : coklat biru violet Nama Produk Harga Deskripsi Gambar Produk Zoom on click Material Aksesoris Quantity Add To Cart 48 8. Perancangan Antarmuka Chart Keranjang Belanja Gambar 3. 38 Chart Keranjang Belanja Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Klik continue shipping untuk melanjutkan belanja Klik checkout untuk selesai Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P08 Ukuran Layer : Layar Browser Warna Background : coklat biru violet Name SK U Quantity Subtotal Total : Checkout Continue Shipping 49 9. Perancangan Antarmuka Account Maintenance Gambar 3. 39 Account Maintenance Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P05 Ukuran Layer : Layar Browser Warna Background : coklat biru violet e-mail : username : password : name : addres : city : postal cose : country : province : phone : 50 10. Perancangan Antarmuka Lupa Password Gambar 3. 40 Lupa Password Klik Home menuju P01 Klik About Us menuju P02 Klik How To Buy menuju P03 Klik Contact Us menuju P04 Klik salah satu kategori d kolom kategori menuju P06 Klik register menuju P05 Klik Cart menuju P08 Klik submit untuk mengirim konfirmasi ke email Logo Home About Us How To Buy Contact Us Banner Login Register Kategori Teks kategori Teks kategori Shoutbox Search Cart Nama Layer : P10 Ukuran Layer : Layar Browser Warna Background : coklat biru violet Email Address : Submit 51

3.4 Jaringan Semantik