TUGAS AKHIR
DESAIN LAYOUT DAN FOTO WEBSITE E-COMMERCE TOKO ONLINE BLUETOSCA.COM
Oleh :
Debby Yuniasari Handoko NIM 41910110013 Program Studi Desain Produk Grafis dan Multimedia
Dosen Pembimbing: Lukman Arief, S.Ds., M.Sn.
FAKULTAS DESAIN DAN SENI KREATIF UNIVERSITAS MERCU BUANA JAKARTA 2014 i
DESAIN LAYOUT DAN FOTO WEBSITE E-COMMERCE TOKO ONLINE BLUETOSCA.COM Written Project Report Study Program Product Design Department of Graphic Design and Multimedia Mercu Buana University Jakarta, 2014 By: Debby Yuniasari Handoko
ABSTRACT The transition of conventional shopping to online shopping is getting wider nowadays. The potential of online e-commerce market in the world, especially in Indonesia, has grow rapidly that many consumers prefer to use online media to fill the primary to tertiary needs in their lives. This is evidenced by the increasing number of online stores in social networking and in search engines. This phenomenon also give great opportunities to meet the consumers demand. Online store offers great opportunities of e-commerce bussiness in this period. Website bluetosca.com arise from the response in addressing the high positive behavior of communities in facing the rapid development of online ecommerce in bussiness world and global economy. Website bluetosca.com intends to build an alternative online shopping media specialty in secondhand fashion stuff and book with affordable prices. Designing a website requires creativity bluetosca.com overall layout is not only limited but also the overall appearance include logo design, photo illustration, promotional materials, and common concepts per page. The author notes that this is a big challenge but it gives the totality of design experience in the work demanded. The author hopes bluetosca.com provide new online shopping experience for the community and is able to present to compete with other online stores that sell similar products. Bluetosca.com also expected to provide inspiration for fellow designers design other website design.
Keywords: photo illustration, web e-commerce, fashion
iv
DESAIN LAYOUT DAN FOTO WEBSITE E-COMMERCE TOKO ONLINE BLUETOSCA.COM Laporan Proyek Tertulis Program Studi Desain Produk Departemen Desain Grafis & Multimedia Universitas Mercu Buana, Jakarta, 2014 Oleh: Debby Yuniasari Handoko
ABSTRAK Pergeseran transaksi belanja konvensional ke online semakin terlihat nyata. Potensi pasar online e-Commerce di dunia khususnya di Indonesia mengalami kemajuan begitu pesat dimana banyak konsumen lebih memilih menggunakan media online untuk memenuhi kebutuhan primer hingga tersier dalam kehidupan mereka. Hal ini dibuktikan dengan bertambahnya jumlah toko online yang terlihat baik di situs jejaring sosial maupun di mesin pencari Fenomena inilah yang juga memberikan peluang besar untuk memenuhi tuntutan konsumen yang melesat tinggi. Toko online menawarkan peluang e-commerce yang tak tertandingi di masa ini. Website bluetosca.com muncul dari respon dalam menyikapi tingginya perilaku positif dari masyarakat dalam menghadapi perkembangan dunia online e-commerce yang kian pesat hadir di dunia bisnis & perekonomian secara mendunia. Website bluetosca.com berkeinginan mewujudkan media yang memberikan alternatif belanja online produk fashion berkualitas dan buku bacaan kepemilikan tangan kedua dengan harga terjangkau. Perancangan website bluetosca.com membutuhkan kreatifitas yang menyeluruh tidak hanya sebatas layout namun juga tampilan secara menyeluruh mencakup logo, desain foto ilustrasi, materi promosi, dan kesamaan konsep per halaman. Penulis melihat bahwa hal ini merupakan tantangan yang besar namun memberikan pengalaman desain yang menuntut totalitas dalam berkarya. Penulis berharap bluetosca.com memberikan pengalaman belanja online baru bagi masyarakat dan mampu hadir bersaing dengan toko online lainnya yang menjual produk serupa. Bluetosca.com juga diharapkan mampu memberikan inspirasi desain bagi sesama perancang desain website lainnya.
Kata kunci: foto ilustrasi, web e-commerce, fashion
v
KATA PENGANTAR Puji syukur penulis panjatkan ke hadirat Tuhan Yang Maha Esa, atas segala rahmat dan karunia-Nya yang tak pernah surut bagi kita semua. Dengan pertolonganNya penulis dapat menyelesaikan penulisan Tugas Akhir yang berjudul Desain Layout Dan Foto Website E-Commerce Toko Online Bluetsca.com. Meskipun banyak rintangan dan hambatan yang penulis alami dalam proses pengerjaannya, tapi penulis berhasil menyelesaikannya hingga selesai. Dalam melakukan penulisan Tugas Akhir ini, segala kesukaran dan kesulitan yang ditemui oleh penulis akhirnya dapat teratasi dan tidak menjadi beban yang berarti berkat arahan dan bimbingan dari semua pihak yang terkait, hingga akhirnya penulis dapat membuat hingga menyelesaikan Tugas Akhir ini. Oleh karena itu pada kesempatan kali ini penulis hendak menyampaikan rasa terimakasih kepada : 1. Tuhan Yesus yang Maha Baik atas segala rahmat dan karunia-Nya yang telah memberikan kemampuan penulis dalam melakukan kegiatan maupun menyelesaikan Tugas Akhir ini. 2. Keluarga penulis, khususnya kedua orang tua tercinta Papa Robby Handoko & Mama Ety R. Ester atas dukungan dan doa yang luar biasa, Kakak Deddy Febrianto beserta Istri Citra Kurnia Sari sekeluarga yang mendoakan dan menemani di masa-masa berat, Peterson sekeluarga yang selalu mendoakan dan memberi dukungan di hari-hari penulis dalam mengerjakan Tugas Akhir ini. Kalian semua membuatku percaya bahwa mukjizat itu nyata melalui tangan-tangan pertolongan dan doa kalian. 3. Freska Paramita, Ika Dini R, dan Sunarti atas dukungan dan kebersamaan dalam masa-masa berat. 4. Seluruh teman-teman se-angkatan, khususnya DG17 yang turut saling membantu, memberikan semangat, dan bertukar pikiran dalam mencari referensi-referensi untuk pengerjaan Tugas Akhir ini dan sahabat-sahabat penulis yang selalu memberikan doa, semangat dan dukungan yang tiada henti.
vi
5. Bapak Lukman Arief, S.Ds., M.Sn. selaku dosen pembimbing. Terima kasih untuk bimbingan dan arahan selama ini. Dan seluruh pihak yang terkait yang telah memberikan dukungan dan bantuan kepada penulis hingga terselesaikannya Tugas Akhir ini, terimakasih sedalam-dalamnya kepada seluruh pihak yang tidak dapat penulis sebutkan satu persatu yang telah turut memberikan bantuan dan masukan kepada penulis. Semoga semua pihak tersebut selalu mendapatkan berkah dan karunia dari Tuhan Yesus yang Maha Baik serta mendapatkan balasan dari segala budi baik yang telah diberikan. Penulis menyadari bahwa masih ada banyak kekurangan dalam penulisan Tugas Akhir ini. Semoga Tugas Akhir ini dapat bermanfaat bagi kita semua. Akhir kata, penulis ucapkan mohon maaf sebesar-besarnya apabila ada penulisan kata yang salah dalam penulisan Laporan Tugas Akhir ini. Atas segala bantuan dan seluruhnya, penulis ucapkan terimakasih yang sebesar-besarnya.
Jakarta, 10 Oktober 2014
Penulis, Debby Yuniasari Handoko
vii
DAFTAR ISI COVER DALAM ................................................................................................................ i HALAMAN PENGESAHAN ........................................................................................... ii HALAMAN PERNYATAAN .......................................................................................... iii ABSTRACT ......................................................................................................................... iv ABSTRAK ............................................................................................................................. v KATA PENGANTAR ...................................................................................................... vi DAFTAR ISI ........................................................................................................................vii DAFTAR GAMBAR .......................................................................................................... ix DAFTAR LAMPIRAN ....................................................................................................... x BAB I PENDAHULUAN .................................................................................................. 1 A. Latar Belakang Perancangan .................................................................................. 1 B. Orisinalitas (State Of The Art) .............................................................................. 1 C. Tujuan Dan Manfaat Perancangan ....................................................................... 2 D. Menggambarkan Peluang Dan Tantangan Studi ..................................................... 3 E. Relevansi Dan Konsekuensi Studi .................................................................................... 4 BAB II METODOLOGI PERANCANGAN ................................................................ 5 A. Kerangka Berpikir Studi ........................................................................................... 5 B. Proses Perancangan (Strategi Desain) .................................................................... 6 C. Rincian Proses Peramcangan ................................................................................... 7 BAB III DATA PERANCANGAN .................................................................................10 A. Tentang Bluetosca.com ...........................................................................................10 B. Web Desain ...............................................................................................................12 C. Tabel Data Perancangan ..........................................................................................15 D. Obyek Referensi & Inspirasi ..................................................................................15 BAB IV KONSEP RANCANGAN .................................................................................18 A. Ide / Gagasan Perancangan ....................................................................................18 B. Sasaran Desain ..........................................................................................................18 C. Pendekatan Estetis Desain .......................................................................................19 D. Muatan Lokal .............................................................................................................19 BAB V ULASAN KARYA PERANCANGAN .............................................................20 A. Site Map Website ......................................................................................................20 B. Konsep Desain Layout .............................................................................................20 C. Foto Ilustrasi Produk Dalam Website ....................................................................38 KEPUSTAKAAN ...............................................................................................................43
viii
DAFTAR GAMBAR Gambar
Halaman
Gb. 1. Diagram Proses Perancangan Website Bluetosca.com ........................................ 7 Gb. 2. Warna corporate bluetosca.com .......................................................................... 10 Gb. 3. Logo bluetosca.com .............................................................................................. 11 Gb. 4. Screenshot salah satu artikel dalam startupbisnis.com ...................................... 11 Gb. 5. Screenshot salah satu artikel dalam startupbisnis.com ...................................... 12 Gb. 6. Tabel Data Perancangan ........................................................................................ 15 Gb. 7. Screenshot zalora.co.id .......................................................................................... 16 Gb. 8. Screenshoot berrybenka.com ............................................................................... 17 Gb. 9. Kerangka Desain Halaman Home Page-Versi Desktop ................................... 21 Gb. 10. Screenshoot Halaman Home Page-Versi Desktop .......................................... 22 Gb. 11. Kerangka Desain Halaman Sub Page / Menu Aksesoris-Versi Desktop .... 23 Gb. 12. Screenshoot Halaman Sub Page / Menu Blouse-Versi Desktop ................. 24 Gb. 13. Kerangka Desain Halaman About-Versi Desktop........................................... 25 Gb. 14. Screenshoot Halaman About-Versi Desktop ................................................... 26 Gb. 15. Kerangka Desain Halaman Help-Versi Desktop ............................................. 27 Gb. 16. Screenshoot Halaman Help-Versi Desktop ...................................................... 28 Gb. 17. Kerangka Desain Halaman Blog-Versi Desktop .............................................. 29 Gb. 18. Screenshoot Halaman Blog-Versi Desktop ...................................................... 30 Gb. 19. Kerangka Desain Halaman Chart-Versi Desktop ............................................ 31 Gb. 20. Screenshoot Halaman Chartg-Versi Desktop................................................... 32 Gb. 21. Kerangka Desain Halaman Home Page; Sub Page/Menu, About-Versi Mobile .................................................................................................................... 33 Gb. 22. Kerangka Desain Halaman Help, Blog-Versi Mobile...................................... 34 Gb. 23. Screenshoot halaman website versi mobile ....................................................... 35 Gb. 24. Screenshoot halaman website versi mobile ....................................................... 36 Gb. 25. Screenshoot halaman website versi mobile ....................................................... 37 Gb. 26. Still banner ............................................................................................................. 38 Gb. 27. Still banner ............................................................................................................. 39 Gb. 28. Still banner ............................................................................................................. 39 Gb. 29. Sub page menu ...................................................................................................... 40 Gb. 30. Ilustrasi Foto Detail Produk ................................................................................ 41 Gb. 31. Ilustrasi Foto Detail Produk ................................................................................ 42
ix
DAFTAR LAMPIRAN Lampiran
Halaman
Lamp1. 1. Lembar Asistensi .............................................................................................. 44
x
