BAB V PERANCANGAN TOKO ONLINE

BAB V
PERANCANGAN TOKO ONLINE
5.1 Konsep Dasar Perancangan
Dari hasil analisa dan data yang dikumpulkan dengan melakukan riset, penulis
mendapatkan solusi untuk membuat sebuah konsep Toko online Handicraft, dimana
memiliki sebuah system transaksi yang mudah untuk para konsumen dengan
bantuan beberapa image atau icon untuk membantu mengarahkan para konsumen
untuk mendapatkan produknya, dan di hias dengan warna-warna yang lembut dan
font standar supaya mudah di baca, dan penepatan picture produk dengan simple
dan elegan.
Konsep ini banyak dipengaruhi dari beberapa toko online yang sudah booming
di Indonesia, simple dan elegan menjadi keunggulan yang harus di keluarkan,
sedangkan mudah di akses dan ringan menjadi misi penulis dalam merancang web
ini.
5.2 Proses Perancangan
5.2.1 Menentukan Tujuan Pembuatan Website dan Jenis Website
Web Komersial (Company Profile Website, biasa menggunakan .com,
.co.id, dsb), yaitu situs yang dipakai untuk menunjukkan produk dan jasa
suatu perusahaan, atau juga dapat melakukan transaksi penjualan online
(dengan sistem shopping cart system).
63
5.2.2 Site Map
Gambar 5.2.2 : (Site Map)
Sitemap merupakan bagian yang sangat vital, karena akan menjadi
gambaran alur informasi yang jelas mengenai website yang akan kita buat.
Tentukan navigasi dan fitur yang di perlukan di tahap ini dan buang fitur yang
tidak efektif.
64
5.2.3 Sketsa layout
Gambar 5.2.3A : (Sketsa 1)
Gambar 5.2.3B : (Sketsa 2)
65
5.2.4 Perancangan Icon /Image
Icon atau image adalah sebuah gambar karakter yang dibuat dan
disesuaikan dengan projet toko online ini, yang di fungsikan untuk
membantu konsumen dalam mengarahakan untuk melakukan transaksi pada
toko online ini.
Gambar 5.2.4A (Icon Shop)
Gambar 5.2.4B (Icon Tentang Kami)
66
Gambar 5.2.4C : (Icon Cara pesan)
Gambar 5.2.4D (Icon delivery)
67
5.2.5 Sistem Transaksi Toko Online
Gambar 5.2.5 : (Sistem Transaksi Toko Online)
5.2.6 Sistem Penjualan Perusahaan
Gambar 5.2.6 : (Sistem penjualan perusahaan)
68
5.2.7 Typografi
Kerning atau disebut jarak antar baris. tidak terlalu rapat. Tulisan akan
susah terbaca dan terasa penuh. jenis font Heading mengadopsi dari tema
minimalis,dengan memilih jenis font Arial pada Arial, agar isi lebih mudah di
baca standart 14 point.
Gambar 5.2.7 : ( Font arial)
5.2.7 Warna
Warna menjadi suatu ciri dalam suatu disain karena dengan warna orang
bisa menampilkan identitas, menyampaikan pesan atau membedakan sifat
dari bentuk-bentuk bentuk visual secara jelas.
Warna yang digunakan tidak terlalu kuat dan tidak terlalu lemah, warna
putih dominan menjadikan website ini terlihat sangat familiar dan simple,
namun diberi garis ungu/purple menunjukan keseriusan dalam berbisnis
ditambah beberapa warna yang sarat dengan kontras warna putih
69
Gambar 5.2.7 : (RGB Color system)

Warna Merah Muda, identik dengan kelembutan, sopan, cinta, sexualitas,
berkepribadian yang lemah lembut.

Warna Biru Muda, identik dengan misterius, tenang dengan kepribadian
yang pendiam dan dingin.

Warna Orange Muda, identik berkarakter, lembut dan menawan.

Ungu identik dengan ketegasan, berpengalaman ,misterius dan lembut.
70
5.3
Layout website
5.3.1 Bentuk
Bentuk button dibuat hanya dengan menggunakan text dan
diberikan garis bawah, terkesan sederhana dan familiar. Sedangkan garis
pada menu text, diasumsikan penegasan bahwa hal yang di garis bawah
itu penting.
Gambar 5.3.1 : (explotasi bentuk button)
5.3.2 Header
Gambar 5.3.2 (explotasi bentu header)
Cakupan dalam Header pada Benggol shop online

Bagian paling atas terdiri dari View chart dan sign in

Dibawahnya digunakan untuk logo

Dan dibagian paling bawah terdapat menu
71
5.3.3 Banner
Gambar 5.3.3 (Explotasi Benner)
Banner berfungsi untuk memunculkan item-item yang terbaik ke
tampilan awal supaya konsumen melihat produk yang sedang di
promokan sebelum melihat produk yang lain.
5.3.4 Footer
Gambar 5.3.4 (Explotasi footer)
Dengan mengikuti konsep yang sudah ada bagian footer dibuat lebih
sederhana namun menjadi informasi yang sangat penting dari website.
72
5.3.5
Detail Produk
Gambar 5.3.5 : (Detail produk)
5.3.6 Chat On
Gambar 5.3.6 (Aplikasi Chat ON)
73
Chat on berfungsi untuk chat dengan admin secara langsung
hanya dengan fungsi untuk mengajukan beberapa pertanyanan atau
complain, serta melakukan negosiasi.
5.4 Konsep Pameran
a. Lokasi dan waktu
Pameran diadakan pada tanggal 15 desember 2013 at car free day Thamrin pukul
06:00 WIB sampai dengan pukul 10:00 WIB.
b. Tempat
Pameran menggunakan 1 sarnavil dengan ukuran 3x3m dengan menggunakan
floring setebal 15cm dengan 2 pasang meja dan bangku, untuk kapasitas 2
peserta pameran, jadi masing masing mendapatkan 3x1,5m luas stand yang
didapatkan.
c. Peralatan
karena ini pameran toko online Handicraft, peralatan yang di butuhkan adalah :
1unit Pc computer, 1unit Tablate smartphone, 1unit smartphone, untuk
keperluan mobaile. Sedangkan untuk penambahan menggunakan design meja
yang di buat secara costum, kabel roll dan peralatan perkakas lainnya.
d. Media pendukung
Membuat sticker
bergambarkan logo dengan ukuran 42x20cm, yang di
tempelkan pada meja, kemudian membuat kalender dengan tema di sesuaikan
produk, Pin dengan logo perusahaan, guest book untuk pengunjung, X-benner,
shoping Bag.
74
e. Penataan
Secara keseluruhan semua peralatan yang bukan produk di taruh level meja
paling atas sedangkan untuk produk berada pada level ditengah meja dan level
bagian bawah meja, tampak seperti :
Gambar 5.4.1 (Design Meja untuk Pameran)
Gambar 5.4.2 (Penempatan booth pameran)
75
Gambar 5.4.3 (Pin)
Gambar 5.4.4 (Guest Book)
76
Gambar 5.4.5 Pc Komputer
Gambar 5.4.6 (Shoping Bag)
77
Gambar 5.5.7 (Lampiran 1)
78
Gambar 5.5.8 (Lampiran 2)
Gambar 5.5.9 (Lampiran 3)
5.4.1
5.4.2
Tujuan Pameran

Memperkenalkan Toko Online yang telah dirancang

Menunjukan cara mengakses toko online yang dirancang

Menunjukan cara kerja toko online tersebut

Mengenalkan identitas perusahaan dari Benggol ART

Memamerkan produk dan media pendukungnya
Target Pengunjung

Para pengguna sepeda yang melintas jalur car free day
79
5.4.3
Jadwal Kegiatan TA
Tabel 5.5.4 (Jadwal Kegiatan TA)
80
5.4.4 Rincian Biaya
Kebutuhan TA
Uraian
Banyak
Harga Satuan
Pengumpulan data
Biaya jild dan print
CD Blank
Cover CD + Tempat
Perancangan Design
Proposal 4 rangkap
Proposal 4 rangkap Rp.10.000
Beli
1unit
Rp.3000
Beli
1unit
Rp.5000
Kalender print
shoping bag print A1
Pin
X-banner
Sticker Vinil A2
print A3 art carton
Media Pendukung
Design
5pcs
Design
2pcs
Design
50pcs
Design
1pcs
Design
1pcs
design
15pcs
Sewa sarnavil
Costum meja
Biaya hosting
Biaya tak terduga
Rp.30.000
Rp.50.000
Rp.4.500
Rp.100.000
Rp.25.000
Rp.10.000
Kebutuhan untuk Stand Pameran
Sewa
1pcs
Rp.750.000
Beli
1pcs
Rp.2.500.000
Jasa
6 bulan
Rp.250.000
SUB TOTAL
Jumlah
Rp.148.000
Rp.750.000
Rp.3.250.000
Rp.1.500.000
Rp.300.000
5.948.000
Tabel 5.5.5 (Tabel Perincian)
81