Perancangan Antarmuka Pengunjung dan Member 1 Perancangan Antarmuka Halaman Utama (Home)

ANALISIS DAN PERANCANGAN SISTEM

3.5 Perancangan Arsitektur

3.5.2 Perancangan antarmuka

3.5.2.2 Perancangan Antarmuka Pengunjung dan Member 1 Perancangan Antarmuka Halaman Utama (Home)

Berikut dapat dilihat perancang antarmuka pengunjung untuk toko osmoes kaos muslimah dapat dilihat di gambar III-42 berikut :

Nama layar : A01 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik detail menuju form A19

A01

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Osmoes Kids | Osmoes Remaja Dewasa | Produk Lainnya

Footer Shopping Chart Gambar produk Gambar produk Gambar produk Gambar produk Gambar produk Gambar produk Gambar produk Gambar produk

Check out | Detail

Payment Gateway Payment Offline _PengirimanLogo Jasa

Gambar III-41 Perancangan antamuka halaman utama

2. Perancangan Antarmuka Desain Kamu

berikut adalah perancangan antarmuka untuk pengunjung ketika pengunjung atau member mengklik navigasi menu pada aplikasi e- commerce dengan nama info, dengan gambar III-43 sebagai berikut :

Nama layar : A02 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja menuju A01 - klik info menuju A05 - klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik photo kamu untuk menuju form A03 - klik testimonial untuk menuju form A04 A02

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Desain Kamu | Photo Kamu | Testimonial

Footer Shopping Chart Desain Rating Desain Rating Desain Rating Desain Rating Desain Rating Desain Rating Desain Rating Desain Rating

Check out | Detail

Gambar III-42 Perancangan antarmuka Ikutan Nyok

3. Perancangan Antarmuka Photo Kamu

Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya menu seperti gambar III-44 berikut ini :

Nama layar : A03 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja menuju A01 - klik info menuju A05 - klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik desain kamu untuk menuju form A02 - klik testimonial untuk menuju form A04 A03

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Desain Kamu | Photo Kamu | Testimonial

Footer

Shopping Chart

Photo Member Photo Member Photo Member Photo Member

Check out | Detail

Gambar III-43 Perancangan Antarmuka Photo Kamu

4. Perancangan Antarmuka Testimonial

Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya menu testimonial seperti gambar III-45 berikut ini :

Nama layar : A04 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja menuju A01 - klik info menuju A05 - klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik desain kamu untuk menuju form A02 - klik photo kamu untuk menuju form A03 A04

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Desain Kamu | Photo Kamu | Testimonial

Footer

Shopping Chart Check out | Detail

Kolom Testimonial Text

Gambar III-44 Perancangan Antarmuka Testimonial

5. Perancangan Antarmuka Tentang Kami

Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya menu tentang kami seperti gambar III-46 berikut ini :

Nama layar : A05 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik belanja menuju form A01

- klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik the founder menuju form A06 -klik cara pemesanan menuju form A07 A05

TEXT Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Tentang Kami | The Founder | Cara Pemesanan |

Footer

Shopping Chart Check out | Detail

Gambar III-45 Perancangan Antarmuka Tentang Kami

6. Perancangan Antarmuka The Founder

Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu the founder tersebut diantaranya menu seperti gambar III-47 berikut ini :

Nama layar : A06 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik belanja menuju form A01

- klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik tentang kami menuju form A05 -klik cara pemesanan menuju form A07 A06

TEXT Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Tentang Kami | The Founder | Cara Pemesanan |

Footer

Shopping Chart Check out | Detail

Foto

Gambar III-46 Perancangan Antarmuka The Founder

7. Perancangan Antarmuka Cara Pemesanan

Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya cara pemesanan seperti gambar III-48 berikut ini :

Nama layar : A07 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik belanja menuju form A01

- klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik the founder menuju form A06 -klik tentang kami menuju form A05 A07

Keterangan Gambar Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Tentang Kami | The Founder | Cara Pemesanan |

Footer

Shopping Chart Check out | Detail

Gambar CaraPemesanan

Gambar III-47 Perancangan Antarmuka Cara Pemesanana

8. Perancangan Antarmuka Registrasi

Halaman ini adalah halaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi antarmuka regstrasi seperti gambar III-49 berikut ini :

Nama layar : A07 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik belanja menuju form A01

- klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik the founder menuju form A06 -klik cara pemesanan menuju form A07 A08

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Registrasi

Footer

Shopping Chart Check out | Detail

Form Registrasi

Gambar III-48 Perancangan Antarmuka Registrasi

9. Perancangan Antarmuka Login

Halaman ini adalah halaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari halaman antarmuka login pengunjung III-50 berikut ini :

Nama layar : A09 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik belanja menuju form A01

- klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik the founder menuju form A06 -klik cara pemesanan menuju form A07 A09

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Footer

Shopping Chart Check out | Detail

Form Login Sales online/offline --- Promo Produk --- Banner

Gambar III-49 Perancangan Antamuka Login

10.Perancangan Antarmuka Preview Produk

Halaman ini adalah halaman ketika pengunjung memilih salah satu produk di aplikasi e-commerce, dan akan mucul halaman preview produk seperti gambar III-51 berikut ini :

Nama layar : A10 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik belanja menuju form A01

- klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 - klik the founder menuju form A06 -klik cara pemesanan menuju form A07 A10

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Kategori Pilihan

Footer

Shopping Chart Check out | Detail

Gambar Produk

Gambar III-50 Perancangan Antarmuka Preview Produk

11.Perancangan Antarmuka Shopping Chart

Halaman ini adalah halaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan muncul halaman antarmuka untuk shopping chart pada gambar III-52 berikut ini :

Nama layar : A11 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik ikutan nyok menuju A02

- klik belanja menuju form A01

- klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11

- klik the founder menuju form A06

-klik cara pemesanan menuju form A07 - klik lanjut belanja menuju form A01 - klik next menuju form A12

A11

text

text Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Shopping Chart

Footer

Shopping Chart Check out | Detail

Produk | Jumlah | Harga | Diskon | Subtotal

Total Bayar :

Lanjut Belanja Next

Pilih Paket Pengiriman

Gambar III-51 Perancangan Antarmuka Shopping Chart

12.Perancangan Antarmuka Halaman Member

Halaman ini adalah haaman ketika pengunjung melakukan login dan berhasil , dan akan mucul halaman seperti gambar III-54 berikut ini :

Nama layar : A13 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja untuk menuju A01 - klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11 -klik akun kamu menuju form A013 -klik ubah password menuju form A14 - klik upload desain menuju form A15 - klik upload foto mtnuju form A16 - klik history menuju form A17

A13

Informasi Akun Member Slider Foto

Logo Belanja | Ikutan Nyok | Info | Akun Kamu | Logout

Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History

Footer

Shopping Chart Check out | Detail

Foto Member

Gambar III-52 Perancangan Antarmuka Halaman Member

13.Perancangan Antarmuka Ubah Password

Halaman ini adalah halaman ketika member memilih menu ubah password di halaman member, dan halaman akan muncul seperti gambar III-55 berikut ini :

Nama layar : A14 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja untuk menuju A01 - klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

A14

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Akun Kamu | Logout

Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History

Footer

Shopping Chart Check out | Detail Password Lama :

Password Baru : Konfirmasi Password Baru :

submit reset

Gambar III-53 Perancangan Antarmuka Ubah Password

14.Perancangan Antarmuka Upload Desain

Halaman ini adalah halaman member saat member memilih tab upload desain, dan akan muncul halaman upload desain seperti gambar III-56 berikut ini :

Nama layar : A15 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja untuk menuju A01 - klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11

-klik akun kamu menuju form A013 -klik ubah password menuju form A14 - klik upload desain menuju form A15 - klik upload foto mtnuju form A16

- klik history menuju form A17

A15

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Akun Kamu | Logout

Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History

Footer

Shopping Chart Check out | Detail Upload Desain :

Keterangan :

submit reset browse

Gambar III-54 Perancangan Antarmuka Upload Desain

15.Perancangan Antarmuka Upload Foto

Halaman ini adalah halaman member saat member memilih tab upload foto, dan akan muncul halaman upload foto seperti gambar III-57 berikut ini :

Nama layar : A16 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja untuk menuju A01 - klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

A16

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Akun Kamu | Logout

Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History

Footer

Shopping Chart Check out | Detail Upload Foto :

submit

browse

Gambar III-55 Perancangan Antarmuka Upload Foto

16.Perancangan Antarmuka History

Halaman ini adalahhalaman member saat member memilih tab history, dan akan mucul halaman history seperti gambar III-58 berikut ini :

Nama layar : A17 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja untuk menuju A01 - klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

A17

TEXT Slider Foto

Logo Belanja | Ikutan Nyok | Info | Akun Kamu | Logout

Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History

Footer

Shopping Chart Check out | Detail

Kolom History Pemesanan Member

Gambar III-56 Perancangan Antarmuka History

17.Perancangan Antarmuka Konfirmasi Pembayaran

Halaman ini adalah halaman member apabila melakukan pemesanan dan harus melakukan pembayran, dan akan muncul halaman konfirmasi pembayaran seperti gambar III-59 berikut ini :

Nama layar : A18 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja untuk menuju A01 - klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

- klik login menuju A09 - klik gambar produk untuk menuju form 10 - klik checkout menuju form A11

-klik akun kamu menuju form A013 -klik ubah password menuju form A14 - klik upload desain menuju form A15 - klik upload foto mtnuju form A16

- klik history menuju form A17

A18

Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Konfirmasi Pembayaran

Footer

Shopping Chart Check out | Detail Id_pesanan :

Total Bayar : submit

Gambar III-57 Perancangan Antarmuka Konfirmasi Pembayaran

18.Perancangan Antarmuka Detail Chart

Halaman ini adalah halaman ketika pengunjung memilih salah satu menu di navigasi menu aplikasi e-commerce, dan akan muncul halaman detail chart seperti gambar III-60 berikut ini :

Nama layar : A19 Ukuran : 1024 x 640 Backgorund : Abu-abu, putih Font : Arial, verdana

- klik belanja untuk menuju A01 - klik ikutan nyok menuju A02

- klik info menuju A05 - klik Registrasi menuju A08

A19

text Slider Foto

Logo Belanja | Ikutan Nyok | Info | Registrasi | Login

Detail Chart

Footer

Total Bayar :

Gambar III-58 Perancangan Antarmuka Detail Chart

Dalam dokumen Pembangunan Website E-Commerce Pada Toko Osmoes Kaos Muslimah (Halaman 158-176)