P Perancangan Arsitektur Perangkat Lunak

177

3.4.4.2 Perancangan Antarmuka Pengunjung

Perancangan Antarmuka digunakan untuk menggambarkan tampilan aplikasi E-commerce di PD. Lanny Socks untuk pengunjung. a. [T00] Rancangan antarmuka tampilan halaman utama pengunjung dan agen pada aplikasi e-commerce di PD. Lanny Socks dapat dilihat pada gambar 3.39: T00 Kategori Bahan Gambar produk Gambar produk Gambar produk silahkan Informasi Halaman Agen Keranjang Pre-order Keranjang Halaman Utama Kontak PD. Lanny Socks Perusahaan produksi kaos kaki atau Login Daftar Agen DAFTAR PRODUK Informasi Pembayaran Custumer Service Gambar produk Gambar produk Gambar produk Gambar produk Gambar produk Gambar produk Produk Terlaris Lokasi Kami Tentang Kami Ket : · Klik link Halaman utama menuju ke form T00 · Klik link login menuju ke form T01 · Klik link daftar agen menuju ke form T02 · Klik produk menuju ke form T03 · Klik menu keranjang menuju ke form T04 · Klik menu Keranjang pre- order ke form T05 · Klik menu halaman agen menuju ke form T01 · Klik menu informasi menuju ke form T06 · Klik menu kontak menuju ke form T07 Nama Layar :T00 Ukuran Layar :1024x768 Warna Latar : Putih pencarian Gambar 3.39 Perancangan antarmuka halaman utamapengunjung 178 b. [T01] Rancangan antarmuka tampilan login pada aplikasi e-commerce di PD. Lanny Socks dapat dilihat pada gambar 3.40: T01 silahkan Informasi Halaman Agen Keranjang Pre-order Keranjang Halaman Utama Kontak PD. Lanny Socks Perusahaan produksi kaos kaki atau Login Daftar Agen HALAMAN LOGIN AGEN Produk Terlaris Lokasi Kami Tentang Kami Ket : · Klik link Halaman utama menuju ke form T00 · Klik link login menuju ke form T01 · Klik link daftar agen menuju ke form T02 · Klik produk menuju ke form T03 · Klik menu keranjang menuju ke form T04 · Klik menu Keranjang pre- order ke form T05 · Klik menu halaman agen menuju ke form T01 · Klik menu informasi menuju ke form T06 · Klik menu kontak menuju ke form T07 · Klik button Masuk Akun menuju T08 · Klik button Lupa Password menuju T09 Nama Layar :T01 Ukuran Layar :1024x768 Warna Latar : Putih pencarian Masuk Akun Lupa Password Masukan email Masukan password Email Password Silahkan masukan Email dan Password untuk dapat mengakses website ini Gambar 3.40 Perancangan antarmuka login 179 c. [T02] Rancangan antarmuka tampilan daftar agen pada aplikasi e- commerce di PD. Lanny Socks dapat dilihat pada gambar 3.41: T02 silahkan Informasi Halaman Agen Keranjang Pre-order Keranjang Halaman Utama Kontak PD. Lanny Socks Perusahaan produksi kaos kaki atau Login Daftar Agen HALAMAN PENDAFTARAN Produk Terlaris Lokasi Kami Tentang Kami Ket : · Klik link Halaman utama menuju ke form T00 · Klik link login menuju ke form T01 · Klik link daftar agen menuju ke form T02 · Klik produk menuju ke form T03 · Klik menu keranjang menuju ke form T04 · Klik menu Keranjang pre- order ke form T05 · Klik menu halaman agen menuju ke form T01 · Klik menu informasi menuju ke form T06 · Klik menu kontak menuju ke form T07 · Klik button Buat Akun Baru menuju form T10 Nama Layar :T02 Ukuran Layar :1024x768 Warna Latar : Putih pencarian Buat Akun Baru Masukan email Masukan password Kode captcha Email Password Kode Keamanan Silahkan masukan data yang lengkap untuk menjadi agen di website kami Ulangi password anda Re-Password Masukan nama depan Nama Depan Masukan nama belakang Nama Belakang Alamat Alamat Kode pos Kode Pos Pilih provinsi Pilih kota Provinsi Kota Telepon Tlp Gambar 3.41 Perancangan antarmuka halaman daftar agen 180 d. [T03] ]Rancangan antarmuka tampilan detail produk pada aplikasi e- commerce di PD. Lanny Socks dapat dilihat pada gambar 3.42: T03 Kategori Bahan silahkan Informasi Halaman Agen Keranjang Pre-order Keranjang Halaman Utama Kontak PD. Lanny Socks Perusahaan produksi kaos kaki atau Login Daftar Agen INFORMASI PRODUK Informasi Pembayaran Custumer Service Gambar produk Zoom Gambar Produk Produk Terlaris Lokasi Kami Tentang Kami Ket : · Klik link Halaman utama menuju ke form T00 · Klik link login menuju ke form T01 · Klik link daftar agen menuju ke form T02 · Klik produk menuju ke form T03 · Klik menu keranjang menuju ke form T04 · Klik menu Keranjang pre- order ke form T05 · Klik menu halaman agen menuju ke form T01 · Klik menu informasi menuju ke form T06 · Klik menu kontak menuju ke form T07 · Klik button Masuk Akun menuju T08 · Klik button Lupa Password menuju T09 · Klik button Buat Akun Baru menuju form T10 · Klik button selesai belanja menuju form T01 Nama Layar :T03 Ukuran Layar :1024x768 Warna Latar : Putih pencarian INFO PRODUK PILIH PEMESANAN Deskripsi prouduk Pemilihan ukuran dan Jumlah produk PEMESANAN PRE-ORDER Jumlah produk KETERANGAN PRODUK Keterangan Produk KOMENTAR SEPUTAR PRODUK Komentar anda mengenai produk Gambar produk Gambar produk Gambar 3.42 Perancangan antarmuka detail produk 181 e. [T04]Rancangan antarmuka tampilan keranjang belanja pada aplikasi e-commerce di PD. Lanny Socks dapat dilihat pada gambar 3.43: T04 silahkan Informasi Halaman Agen Keranjang Pre-order Keranjang Halaman Utama Kontak PD. Lanny Socks Perusahaan produksi kaos kaki atau Login Daftar Agen KERANJANG PEMESANAN Produk Terlaris Lokasi Kami Tentang Kami Ket : · Klik link Halaman utama menuju ke form T00 · Klik link login menuju ke form T01 · Klik link daftar agen menuju ke form T02 · Klik produk menuju ke form T03 · Klik menu keranjang menuju ke form T04 · Klik menu Keranjang pre- order ke form T05 · Klik menu halaman agen menuju ke form T01 · Klik menu informasi menuju ke form T06 · Klik menu kontak menuju ke form T07 · Klik button Masuk Akun menuju T08 · Klik button Lupa Password menuju T09 · Klik button Buat Akun Baru menuju form T10 · Klik button selesai belanja menuju form T01 Nama Layar :T04 Ukuran Layar :1024x768 Warna Latar : Putih pencarian Selesai Belanja Informasi keranjang Belanja lagi TOTAL Rekomendasi Produk Gambar 3.43 Perancangan antarmuka keranjang