TUGAS AKHIR
DESAIN WEBSITE TOKO DEMONTEEN OUTDOOR SEBAGAI MEDIA PROMOSI DAN PENJUALAN ONLINE Diajukan Guna Melengkapi Sebagian Syarat dalam Mencapai Gelar Sarjana Strata Satu (S1)
Disusun Oleh :
Heru Yulyanto NIM 42313010191 Program Studi Desain Komunikasi Visual
Dosen Pembimbing :
Diean Arjuna D, S.Ds, M,Ds
FAKULTAS DESAIN DAN SENI KREATIF UNIVERSITAS MERCU BUANA JAKARTA 2016
i
http://digilib.mercubuana.ac.id/
ii
http://digilib.mercubuana.ac.id/
iii
http://digilib.mercubuana.ac.id/
KATA PENGANTAR Dengan memanjatkan puji syukur kehadirat Tuhan Yang Maha Esa atas karunia serta rahmat-Nya sehingga penulis dapat menyelesaikan penulisan laporan Tugas Akhir ini yang berjudul “DESAIN WEBSITE TOKO DEMONTEEN OUTDOOR SEBAGAI MEDIA PROMOSI DAN PENJUALAN ONLINE”. Laporan Tugas Akhir ini berisi tentnag kumpulan data informasi mengenai perancangan website Toko Demonteen Outdoor yang menggunakan media website tentunya sebagai media utama yang telah penulis susun. Dalam penyusunan Tugas Akhir ini banyak pihak yang mendukung baik langsung maupun tidak langsung, untuk itu penulis dalam kesempatan ini memberikan terima kasih kepada: 1. Edy Muladi, Ir. Msi selaku Dekan Fakultas Fakultas Desain dan Seni Kreatif 2. Lukman Arief, S.D.s, M.Sn selaku Ketua Program Studi Desain Komunikasi Visual 3. Diean Arjuna, S.Ds, M.Ds selaku dosen pembimbing 4. Kedua Orang tua dan keluarga yang selalu memberi dukungan baik moril maupun materil. 5. Pihak Toko Demonteen Outdoor dan Team Programmer. 6. Rekan – rekan seperjuangan Octa Syahrinaldi, Fanny Ainur Ramadhan, Ridho Pratama, Fazar Rizki Fadilah dan Jenni Widiastuti. Penulis menyadari penyusunan laporan Tugas Akhir ini masih jauh dari kata sempurna. Untuk itu saran serta kritik yang membangun sangat diharapkan. Semoga laporan Tugas Akhir ini dapat bermanfaat bagi kita semua. Jakarta, 24 Juni 2016 Penulis
Heru Yulyanto vi
http://digilib.mercubuana.ac.id/
DAFTAR ISI COVER DALAM ...................................................................................................... i HALAMAN PERNYATAAN ...................................................................................... ii HALAMAN PENGESAHAN .................................................................................... iii ABSTRACT ........................................................................................................... iv KATA PENGANTAR ............................................................................................... vi DAFTAR ISI ......................................................................................................... viii DAFTAR GAMBAR .................................................................................................ix BAB I PENDAHULUAN ........................................................................................... 1 A. Latar Belakang ........................................................................................ 1 BAB II METODE PERANCANGAN ........................................................................... 3 A. Orisinalitas ............................................................................................. 3 B. Kelompok Pengguna Produk ................................................................... 4 1. Target Market .................................................................................. 4 2. Target Audience ............................................................................... 4 C. Tujuan Dan Manfaat Perancangan.......................................................... 5 1. Tujuan Dari Pembuatan Desain Website Toko Demonteen Outdoor Sebagai Media Promosi Dan Penjualan Online .................................. 5 2. Manfaat Pembuatan Desain Website Promosi Toko Demonteen Outdoor............................................................................................ 5 D. Revelansi Dan Konsekuensi Studi ........................................................... 6 1. Logika Dasar Perancangan ................................................................ 6 2. Teknologi Yang Digunakan ................................................................ 7 3. Biaya Perancangan Dan Produksi ...................................................... 8 E. Skema Perancangan ............................................................................... 9 1. Briefing Desain ................................................................................. 9 2. Data Collection ............................................................................... 10 3. Analisa Dan Metode Perancangan .................................................. 11 F. Analisa Swot ......................................................................................... 12 G. Sketsa Layout ....................................................................................... 13 H. Proses Digital........................................................................................ 14 I. Penyisipan Coding ................................................................................ 14 BAB III DATA PERANCANGAN ............................................................................. 15 A. Kelompok Data Berkaitan Dengan Aspek Fungsi Produk Rancangan ..... 15 1. Data Primer .................................................................................... 15 2. Data Sekunder ................................................................................ 17 B. Kelompok Data Berkaitan Dengan Estetika Fungsi Produk Rancangan .. 23 C. Kelompok Data Berkaitan Dengan Aspek Teknis Produk Rancangan ..... 28 1. Pre-Production Web ....................................................................... 28 2. Production Web ............................................................................. 29 3. Post-Production Web ..................................................................... 29 D. Kelompok Data Berkaitan Dengan Aspek Ekonomi Produk Rancangan . 29 BAB IV KONSEP PERANCANGAN ......................................................................... 30 vii
http://digilib.mercubuana.ac.id/
A. Tataran Lingkungan .............................................................................. 30 1. Pengguna Atau Sasaran Karya......................................................... 30 2. Kontribusi Karya Pada Masyarakat.................................................. 30 3. Lifecycle Karya ................................................................................ 32 B. Tataran Sistem ..................................................................................... 32 1. Strategi Desain ............................................................................... 32 2. Analisa Dan Metode Perancangan .................................................. 32 3. Sketsa Layout ................................................................................. 35 4. Proses Digital .................................................................................. 35 5. Penyisipan Coding .......................................................................... 36 6. Cara Menggunakan/Mengaplikasikan Karya ................................... 36 7. Cara Pengguna/Sasaran Memahami Karya ..................................... 35 C. Tataran Produk..................................................................................... 40 1. Identitas Karya ............................................................................... 41 2. Site Map ......................................................................................... 42 3. Penjelasan Rinci Tentang Website Demonteen Outdoor................. 43 4. Cost Production .............................................................................. 52 5. Harga Jual Karya ............................................................................. 51 D. Tataran Elemen .................................................................................... 52 1. Konsep Visual ................................................................................. 52 2. Konsep Warna ................................................................................ 61 3. Konsep Warna ................................................................................ 62 4. Konsep Tipografi............................................................................. 63 5. Konsep Proteksi Karya .................................................................... 64 BAB V PAMERAN ................................................................................................ 64 A. Desain Final .......................................................................................... 64 B. Konsep Pameran .................................................................................. 66 C. Respon Pengunjung .............................................................................. 69 DAFTAR PUSTAKA .............................................................................................. 71 LAMPIRAN ......................................................................................................... 70
viii
http://digilib.mercubuana.ac.id/
DAFTAR GAMBAR Gambar 1. Desain Web Consina dan Avtech ......................................................... 3 Gambar 2. Struktur proses kerja ........................................................................... 9 Gambar 3. Dokumentasi Demonteen Outdoor ................................................... 17 Gambar 4. Selembaran (pamflet) website demonteen.com ............................... 31 Gambar 5. Struktur proses kerja ......................................................................... 32 Gambar 6. Hosting + Domain + Internet ............................................................. 37 Gambar 7. Keyword alamat website ................................................................... 38 Gambar 8. Halaman awal website demonteen outdoor ..................................... 38 Gambar 9. Halaman shop.demonteen.com ........................................................ 39 Gambar 10. Tampilan website pada Dekstop/PC ................................................ 40 Gambar 11. Tampilan website pada Handphone/mobile .................................... 41 Gambar 12. Sitemap halaman website demonteen.com .................................... 42 Gambar 13. Tampilan Halaman Home website Demonteen Outdoor ................. 43 Gambar 14. Navigasi bar website Demonteen Outdoor ...................................... 44 Gambar 15. Konten About Us Website Demonteen Outdoor ............................. 45 Gambar 16. Konten Product Website Demonteen Outdoor................................ 46 Gambar 17. Konten Contact Website Demonteen Outdoor ................................ 47 Gambar 18. Konten Load More Product Website Demonteen Outdoor .............. 48 Gambar 19. Zoom otomatis pada konten detail produk ..................................... 49 Gambar 20. Konten cara pemesanan produk Demonteen Outdoor .................... 50 Gambar 21. Contoh desain website parallax scrolling ........................................ 52 Gambar 22. Contoh desain parallax scrolling pada website Demonteen Outdoor .......................................................................................................................... 55 Gambar 23. Foto-foto produk pada website Demoonten Outdoor .................... 55 Gambar 24. Icon pemesanan pada website Demoonten Outdoor ...................... 56 Gambar 25. Button pada navigasi bar website Demoonten Outdoor .................. 57 Gambar 26. Button kategori produk pada website Demoonten Outdoor............ 58 Gambar 27. Iklan stastis pada website Demoonten Outdoor .............................. 59 Gambar 28. Web banner pada website Demoonten Outdoor............................. 59 Gambar 29. Foto pemandangan gunung bromo ................................................. 60 Gambar 30. Acuan pemilihan warna ................................................................... 61 Gambar 31. Warna pada icon/button pemesanan .............................................. 62 Gambar 32. Typface Arial ................................................................................... 63 Gambar 33. Proteksi karya ................................................................................. 63 Gambar 34. Tampilan website demoonten.com ................................................. 66 Gambar 35. Kondisi pameran dan media pendukung pameran .......................... 68 Gambar 36. Respon pengunjung pameran ......................................................... 70
ix
http://digilib.mercubuana.ac.id/
