BAB V ULASAN KARYA PERANCANGAN
A. Konsep Perancangan Domain Setelah melalui tahap kajian maka nama yang akan digunakan sebagai domain website duvet shop adalah www.myduvetshop.com
Teknologi Menggunakan teknologi Content Management System (CMS)
Peta Situs Home Bed Cover Sprei Bantal Promo Accessories Blog
Media Sosial Facebook Twitter
Delivery Order Jasa pengiriman Cash On Delivery (COD)
32
1. Sketsa Website
Gambar 5.1 Sketsa Layout Home Sumber : Priyo Adi Pamuji, 2014
33
Gambar 5.2 Sketsa Layout Halaman Sumber : Priyo Adi Pamuji, 2014
34
2. Story Board No
Kategori
Keterangan
1
Home
Menampilkan menu utama halaman depan website
2
Bed Cover
Menampilkan aneka produk bed cover
3
Sprei
Menampilkan aneka produk sprei
4
Bantal
Menampilkan aneka produk bantal
5
Promo
Menampilkan produk yang sedang diskon
6
Accessories
Menampilkan produk lainnya
7
Blog
Menampilkan artikel seputar produk duvet shop
Gambar 5.3 Tabel Story Board
35
3. Site Map/Peta Situs
Gambar 5.4 Tabel Site Map
36
Site Map www.myduvetshop.com •
Home
•
Produk o Sprei o Bed Cover o Bantal
•
Accessories o Gorden o Wallpaper o Mukena
•
Blog o Blog o Facebook o Twitter
•
About Us o Tentang Duvet Shop
•
Contact Us o Alamat Toko dan No. Telp.
37
B. Karya Perancangan 1. Layout
Gambar 5.5 Layout Website Sumber : www.myduvetshop.com, 2014
38
Pada gambar 5.5 diatas, penulis ingin menampilkan kesan minimalis dalam tampilan website duvet shop. Dapat diperhatikan pada halaman depan tampilan website bahwa warna dominan putih memberikan kesan yang simple dan pandangan yang bersih bagi pengunjung.
Gambar 5.6 Layout Header Sumber : www.myduvetshop.com, 2014
Header Header memiliki tampilan navigasi sebagai berikut •
Logo Toko Mengklik pada logo ini akan mengarahkan pelanggan kembali ke halaman depan toko.
•
Teks Selamat Datang Menyambut pengunjung dan memberikan mereka pilihan untuk “login” atau “create a new account”.
•
Link Link pelanggan ke halaman depan, daftar belanja, akun saya, keranjang belanja, dan checkout.
•
Return Jaminan barang dapat dikembalikan apabila terdapat kerusakan akibat produksi.
•
24 Jam Online Jaminan website toko akan aktif selama 24 jam untuk memberikan kenyamanan bagi konsumen.
39
•
Keranjang Belanja Menampilkan jumlah barang yang dibeli, dan harga total pesanan. Mengklik pada ikon ini akan menampilkan kotak drop-down yang berisi semua produk yang dimasukkan kedalam keranjang dan pilihan untuk “lihat keranjang” atau “checkout”.
•
Kotak Pencarian Para pelanggan dapat mengetik dikotak pencarian untuk mencari produk dalam kategori produk toko.
Gambar 5.7 Layout Kategori Sumber : www.myduvetshop.com, 2014
Kategori Kategori menampilkan produk yang ada pada toko online duvet shop, ketika kategori induk diklik maka akan menampilkan semua produk dalam kategori tersebut. •
Home Menampilkan menu utama halaman depan website
•
Bed Cover Menampilkan aneka produk bed cover
•
Sprei Menampilkan aneka produk sprei
•
Bantal Menampilkan aneka produk bantal
•
Promo Menampilkan produk yang sedang diskon
•
Accessories Menampilkan produk lainnya
•
Blog Menampilkan artikel seputar produk duvet shop
40
Slide Foto Konsep slideshow dalam website ini menampilkan spanduk atau banner beberapa produk pilihan dengan selingan gambar dalam tayangan slide. Setelah jangka waktu tertentu, satu banner akan bergeser ke banner berikutnya. Banner ditayangan slide ini berguna untuk menyoroti produk tertentu agar mudah diakses oleh pelanggan. Ketika banner diklik, pelanggan akan diarahkan ke produk pada halaman banner tersebut.
Gambar 5.8 Layout Slide Foto Sumber : www.myduvetshop.com, 2014
41
Banner Banner bertujuan untuk menampilkan gambar pilihan yang akan dijadikan sebuah banner iklan.
Gambar 5.9 Layout Banner Sumber : www.myduvetshop.com, 2014
Promo Toko
menampilkan
pilihan
pada
produk
unggulan
tertentu
dan
memberikan potongan harga sebagai promo.
Gambar 5.10 Layout Promo Sumber : www.myduvetshop.com, 2014
42
Footer Footer tidak hanya terletak pada bagian bawah halaman depan toko, tapi disetiap halaman website duvet shop. Berguna untuk memilah halaman yang relevan bagi pelanggan.
Gambar 5.11 Layout Footer Sumber : www.myduvetshop.com, 2014
43
Halaman Produk
Gambar 5.12 Layout Halaman Produk Sumber : www.myduvetshop.com, 2014
Halaman produk dapat dibagi menjadi beberapa bagian sebagai berikut: •
Kategori, semua produk di toko akan disusun dalam kategori, link kategori disebelah kiri pada sisi halaman produk akan memungkinkan pelanggan untuk menelusuri produk lainnya berdasarkan kategori.
•
Gambar Produk, gambar produk ditampilkan dibawah judul disebelah kiri bersama dengan gambar alternatif dari produk dibawahnya dalam kotak kecil. Ketika mengklik gambar utama akan memperluas gambar dalam jendela bagi pelanggan untuk melihatnya secara lebih rinci.
•
Rincian Produk, kode produk, ketersediaan barang, dan harga yang ditampilkan sesuai untuk gambar produk.
•
Beli/Keranjang, Pelanggan dapat memilih jumlah dan menambahkan produk kedalam keranjang “wish list” mereka atau “membandingkan”.
•
Penilaian/Bagikan, dibawah keranjang belanja konsumen dapat menilai produk/berbagi produk diberbagai situs sosial media.
•
Keterangan, area untuk memberikan penjelasan rinci tentang produk.
•
Review, area bagi konsumen untuk menulis review pada produk.
44
Shopping Cart/Keranjang Belanja Setelah pelanggan menambah produk kedalam keranjang belanja, mereka dapat mengakses keranjang belanja di header di bawah “keranjang belanja”.
Gambar 5.13 Layout Shopping Cart Sumber : www.myduvetshop.com, 2014
Keranjang Belanja memberikan gambaran produk yang dipilih dengan adanya kategori gambar, nama produk, model, kuantitas, harga per unit, dan total. Konsumen memiliki opsi untuk menambahkan kupon diskon atau voucher hadiah yang bisa didapatkan apabila telah mendaftarkan emailnya sebagai pelanggan website duvet shop, sebelum selesai. Klik tombol “Lanjut Berbelanja” maka konsumen akan kembali ke halaman depan toko.
45
Creating an Account/Membuat Akun Sebelum konsumen dapat terus memeriksa produk dari keranjang belanja, konsumen perlu untuk memilih “create an account” atau “login” ke akun mereka. Adapun cara untuk membuat akun baru adalah Header “Create an Account”
Gambar 5.14 Layout Header Sumber : www.myduvetshop.com, 2014
Mengklik “create an account” di header kiri atas akan mengarahkan pelanggan ke halaman “daftar akun”. Rincian pribadi mengenai nama dan alamat serta telephone akan perlu untuk dilengkapi
46
Gambar 5.15 Layout Create an Account Sumber : www.myduvetshop.com, 2014
47
Checkout Setelah produk telah dimasukkan dalam keranjang belanja, konsumen dapat melanjutkan ke “checkout” untuk melakukan pembelian produk mereka. Halaman checkout dapat diakses di bagian header dari setiap halaman (dapat juga ditemukan dibawah kotak pencarian). Checkout konsumen adalah proses sederhana yang dapat diselesaikan dalam 6 (enam) langkah
Gambar 5.16 Layout Checkout Sumber : www.myduvetshop.com, 2014
48
Langkah 1: Pilihan CheckOut Konsumen dapat login ke akun mereka atau mendaftar (seperti dijelaskan diatas).
Langkah 2: Rincian Penagihan Rincian pribadi termasuk nama depan, nama belakang, email, dan telephone yang diisi kedalam formulir. Halaman ini juga memerlukan rincian alamat pelanggan.
Langkah 3: Rincian Pengiriman Dalam rincian penagihan, konsumen dapat memeriksa kotak untuk menunukkan bahwa rincian pengiriman dan rincian penagihan sama. Hal ini akan menyebabkan konsumen melewatkan langkah ini kemetode pengiriman. Jika rincian pengiriman berbeda dari rincian tagihan konsumen dapat memasukan dalam bentuk informasi dibagian ini.
Langkah 4: Cara Pengiriman Sebuah metode pengiriman yang dipilih disini. Sebuah kotak komentar disisipkan bagi pelanggan untuk menambah komentar tentang pesanan mereka. Langkah 5: Cara Pembayaran Pelanggan memilih metode pembayaran mereka disini dan dapat menambahkan komentar dikotak komentar
Langkah 6: Konfirmasi Pesanan Pada langkah terakhir, konsumen akan melihat gambaran dari pembelian mereka,
termasuk
deskripsi
produk,
jumlah
dan
harga
(dengan
pengiriman).
49
2. Warna Duvet shop memiliki produk serta warna yang menjadi andalan dari setiap produknya, oleh sebab itu disini penulis hanya akan menerapkan unsur warna tersebut kedalam perancangan website agar lebih memperkuat image serta brand dari duvet shop itu sendiri.
Gambar 5.17 Warna Layout Website Sumber : www.myduvetshop.com, 2014
Pemilihan warna dilakukan berdasarkan pilihan dari pemilik toko duvet shop, warna dominan yang diambil dari beberapa pilihan warna adalah warna merah muda dengan keterangan R:252, G:103,
B:
169
warna
ini
dipilih
karena
dianggap
dapat
menggambarkan brand dari produk duvet shop.
50
3. Tipografi Pemilihan font yang tepat sangat diperlukan demi mempermudah keterbacaan navigasi web dan teks pada isi halaman website.
Gambar 5.18 Tipografi Website Sumber : www.myduvetshop.com, 2014
Dalam hal ini penulis bersama pemilik usaha duvet shop akhirnya memutuskan untuk menggunakan font verdana karena memiliki keterbacaan yang jelas serta memiliki unsur yang minimalis.
51
4. Media Sosial Media sosial juga memiliki peranan penting dalam kegiatan promosi suatu produk ataupun badan usaha. Maka duvet shop juga akan menggunakan media sosial untuk melakukan pendekatan yang lebih untuk memberikan kepercayaan dimasyarakat.
Gambar 5.19 Link Media Sosial Sumber : www.myduvetshop.com, 2014
52
C. Media Pendukung Ada beberapa media promosi cetak yang digunakan untuk membantu mempromosikan website duvet shop, diantaranya
Gambar 5.20 Brosur Duvet Shop Sumber : Priyo Adi Pamuji, 2014
53
Ada dua bentuk brosur yang digunakan sebagai media promosi, dengan bentuk portrait dan landscape. Tujuannya selain untuk mencantumkan alamat toko duvet shop juga tercantum nama website duvet shop pada bagian bawah beserta alamat email. Ukuran yang digunakan adalah kertas A5 (14,8 cm x 21 cm) agar nyaman dipegang oleh konsumen serta font yang digunakan masih terbaca dengan jelas.
Gambar 5.21 Brosur Duvet Shop Sumber : Priyo Adi Pamuji, 2014
54
Gambar 5.22 Banner Duvet Shop
55
Selain brosur media promosi lain yang digunakan adalah banner serta spanduk dengan ukuran yang lebih besar bertujuan untuk dapt menarik perhatian dari masyarakat yang sekiranya sedang melintas disekitar area toko duvet shop. Ukuran yang digunakan untuk banner adalah 80 cm x 180 cm, sedangkan untuk spanduknya 100 cm x 200 cm.
Gambar 5.23 Spanduk Duvet Shop Sumber : Priyo Adi Pamuji, 2014
56
Media promosi katalog produk juga digunakan untuk memberikan informasi
produk
terbaru
kepada
konsumen.
Ukuran
yang
digunakan adalah A4 (21 cm x 29,7 cm)
Gambar 5.24 Katalog Produk Duvet Shop
57
D. Perincian Biaya
:;<('(0"#,!="$"
!"#$"%
&"'("#
)"*+",&"'("#
-(./"0,
12'"/
A;@"=#,B;*"#E"#+"# D
!"#$%&'%#()%*%
+,(-../...
0&%#1,2&*%1'
+,(-../...
!&'#*(!&2,21%3(4"5'#%& !
6(+%#78%,
9"5:%&
+,(6..
+,(6-/;..
B*2F(%@=,:"*$" <21*'#7(=()25%'#
0%>?#
+,(@6-/;..
+,(@;./...
+,(@;./...
B".;*"#,B*",1D
G
A
A&21?&
B.
9"5:%&
+,(C;.
+,(D./...
E%*%327(!&2F?8
G.
9"5:%&
+,(-/;..
+,(D./...
H3I"&(J6
B
9"5:%&
+,(6/...
+,(@G/...
A%##"&
-
K5
+,(-@;/...
+,(-@;/...
4,%#F?8(A%$8F&2,
-
K5
+,(;;/...
+,(;;/...
!'#(4"#I?5
@.
A?%>
+,(6/...
+,(D./...
4*'$8"&
-
9"5:%&
+,(6./...
+,(6./...
L?7
-.
A?%>
+,(-C/...
+,(-C./...
M2*"1(A?8?(0%5?
@
A?%>
+,(;/...
+,(-./...
-
A?%>
+,(GO./...
+,(GO./...
B".;*"#,1D 4"N%(!%&*'1'
12'"/
+,(;OG/...
+,(GO./... 34,567876799
1;*<=/"#+,>,?.4"',3"'(@,A;/"4"#,B(/(0,&"'(,3=<(,C=.",3"'(@,3(4="0
Gambar 5.25 Perincian Biaya Perancangan Pameran TA Sumber : Priyo Adi Pamuji, 2014
58
E. Pameran Tugas Akhir Pada tanggal 5 dan 6 Juli 2014 diadakan pameran tugas akhir di Atrium Universitas Mercu Buana. Dengan mengambil konsep miniatur toko duvet shop, yang dilengkapi dengan stand untuk menampilkan koleksi sprei dan bed cover duvet shop. Berikut adalah liputan foto dekorasi stan pameran
Gambar 5.26 Stan Pameran Tampak Depan Sumber : Priyo Adi Pamuji, 2014
59
Gambar 5.27 Stan Pameran Media Promosi Sumber : Priyo Adi Pamuji, 2014
60
Gambar 5.28 Stan Pameran Tampak Samping Sumber : Priyo Adi Pamuji, 2014
61
Gambar 5.29 Bersama Rekan Didepan Stan Pameran Sumber : Priyo Adi Pamuji, 2014
62
F. Kesimpulan dan Saran 1. Kesimpulan Dalam perancangan website toko duvet shop sebagai media informasi online terdapat beberapa hal yang perlu diperhatikan yaitu: a. Website merupakan media informasi yang bersifat online dimana diperlukan koneksi internet untuk dapat melihat dan melakukan akses didalamnya b. Website toko duvet shop bersifat dinamis, dimana setiap materi didalamnya akan selalu mendapatkan perubahan sesuai dengan produk yang dipasarkan. c. Website toko duvet shop juga bersifat responsif sehingga dapat diakses disetiap perangkat seperti komputer desktop, laptop, gagdet smartphone maupun tablet. d. Selain
sebagai
media
informasi,
konsumen
juga
dapat
melakukan sistem belanja secara online dengan mengikuti tahapan yang telah diberikan. e. Konsumen juga dapat menghubungi pihak duvet shop baik secara langsung melalui datang ketoko ataupun melalui media email dan telephone yang telah tercantum pada website.
2. Saran Dalam perancangan media informasi online berupa website ini, diharapkan dapat membantu mahasiswa lain dalam merancang sebuah website untuk keperluan online shopping. Selain itu juga sebelum merancang sesuatu diharapkan memahami selain ilmu dasar perancangan, tetapi semua aspek yang dibutuhkan dalam perancangan.
63
