Perancangan Website Sebagai Media Informasi Kawasan Pecinan Di Semarang

Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.. Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP.

PERANCANGAN WEBSITE SEBAGAI MEDIA INFORMASI KAWASAN PECINAN DI SEMARANG Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.). Nama. : Vicensia Oselina. NIM. : 13120210020. Program Studi. : Desain Komunikasi Visual. Fakultas. : Seni & Desain. UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG 2017 i Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT. Saya yang bertanda tangan di bawah ini:. Nama. : Vicensia Oselina. NIM. : 13120210020. Program Sudi : Desain Komunikasi Visual Fakultas. : Seni & Desain Universitas Multimedia Nusantara. Judul Tugas Akhir:. PERANCANGAN WEBSITE SEBAGAI MEDIA INFORMASI KAWASAN PECINAN DI SEMARANG. dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas Multimedia Nusantara maupun di perguruan tinggi lainnya. Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali arahan pembimbing akademik dan nara sumber. Demikian surat Pernyataan Originalitas ini saya buat dengan sebenarnya, apabila di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam pernyataan ini, maka saya bersedia menerima sanksi akademik berupa pencabutan. ii Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

KATA PENGANTAR Puji Syukur kepada Tuhan Yang Maha Esa karena telah memberikan rahmat dan berkat kepada penulis sehingga penulis dapat melaksanakan proses pengerjaan Tugas Akhir hingga tuntas. Topik yang diangkat oleh penulis adalah menginformasikan kampung pecinan di Semarang sebagai wisata yang memiliki banyak kuliner, sejarah, dan budaya di Semarang dan menjadikan kawasan pecinan di Semarang lebih dikenal oleh masyarakat luar kota Semarang. Tugas Akhir ini bertujuan untuk memajukan perekonomian, wisatawan, dan melestarikan sejarah serta budaya di Semarang agar tetap utuh dan menarik perhatian wisatawan. Dalam. pembuatan. Tugas. Akhir,. penulis. membuat. karya. yang. menampilkan visual dan informasi dari bagian – bagian yang ada di kampung pecinan di Semarang. Pembuatan tugas akhir ini didukung oleh orang – orang yang bersangkutan. Penulis juga menyampaikan rasa terimakasih kepada: 1. Yusup Sigit Martyastiadi, S.T., M.Inf.Tech., selaku Ketua Program Studi Desain. Komunikasi Visual di Universitas Multimedia. Nusantara. 2. Drs. Daru Paramayuga, M.Ds., selaku Dosen Pembimbing yang mengarahkan pengerjaan Tugas Akhir dari awal hingga akhir 3. Erwin Alfian, S.Sn., M.Ds., atas pengarahan dalam pembuatan logo dan pengaplikasian font. 4. Toufik Pandji, M.Sn., atas masukan dalam pemilihan pembuatan media informasi kawasan pecinan di Semarang sesuai dengan target.. v Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

ABSTRAKSI Kawasan pecinan di Semarang memiliki banyak tempat – tempat bersejarah, budaya, dan kuliner yang sudah ada sejak jaman sebelum pemerintahan Belanda hingga sekarang. Masyarakat kawasan pecinan di Semarang sangat mempertahankan budaya dan tradisinya. Tempat ini merupakan salah satu tujuan wisata di Semarang. Namun kurangnya keterbatasan dalam mengakses media informasi kawasan pecinan di Semarang ini membuat para wisatawan tidak mengetahui potensi yang dimiliki kawasan pecinan di Semarang. Hal ini dapat membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari itu dibuatlah media informasi yang tepat agar wisatawan dapat mengakses potensi yang dimiliki kawasan pecinan di Semarang. Data – data di ambil dari hasil pengamatan, observasi, wawancara, kuisioner, dan literatur dengan menargetkan generasi muda. Penggunaan media nantinya berupa website yang menginformasikan kuliner, bangunan bersejarah, tempat ibadah, hotel, transportasi, toko, dan pasar yang sudah dipercayai oleh masyarakat sekitar. Data tersebut nantinya akan dijadikan media informasi berupa website. Website dirancang dengan informasi yang menggunakan teks dan foto kawasan pecinan di Semarang serta pemilihan warna khas pecinan Semarang. Website ini dibuat untuk informasi wisatawan yang akan berkunjung atau sedang berkunjung supaya mereka mengetahui letak kampung Pecinan di Semarang dan bagaimana cara menuju ke Pecinan. Kata kunci : Media Informasi, Wisata Kuliner, Wisata Budaya, Tempat Wisata, Kawasan Pecinan, Semarang.. vii Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

ABSTRACT Chintatown in Semarang have various kind of culinary, culture and historical places which already been there even before the Dutch come to Semarang. The people in the city respect their culture and history a lot. However, the information available for this area is limited which make many tourist that come to Semarang unaware about the existance of Semarang's Chinatown. That kind of thing will make the economy and the country’s income especially in Semarang will decrease. That is why the right marketing strategy is needed to increase the information available to the people who don’t know about this place. The data here was collected by interviewing, observasing and from the books or journals. The media that are used here will be focused in website that provide culinary, historical building, temple, hotel, transport, store that are famous in the public. Many text and places that describe Semarang's Chinatown will be available in the website. It will also be supported by using the right colour that will give feel about Chinatown. This website is made to be a guide for tourist that will go to Semarang so they will know where is the Chinatown in Semarang and how to go there. Keyword : Media Informations, Tourism, Travel, Culnary Tourism, Culture, China Town, Semarang.. viii Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

DAFTAR ISI. LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT.................... II HALAMAN PENGESAHAN SKRIPSI ..........................................................IV KATA PENGANTAR ....................................................................................... V ABSTRAKSI .................................................................................................. VII ABSTRACT ..................................................................................................VIII DAFTAR ISI ....................................................................................................IX DAFTAR GAMBAR ..................................................................................... XIII DAFTAR TABEL ......................................................................................... XVI DAFTAR LAMPIRAN ............................................................................... XVII BAB I PENDAHULUAN ................................................................................... 1 1.1. Latar Belakang ......................................................................................... 1 1.2. Rumusan Masalah .................................................................................... 3 1.3. Batasan Masalah ....................................................................................... 3 1.4. Tujuan Tugas Akhir ................................................................................. 4 1.5. Manfaat Tugas Akhir ............................................................................... 4 BAB II TINJAUAN PUSTAKA ........................................................................ 6 2.1. Definisi....................................................................................................... 6. ix Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

2.1.1. Desain Grafis ............................................................................................. 6 2.1.2.. Desain Komunikasi Visual ...................................................................... 6. 2.1.3.. Media ...................................................................................................... 7. 2.1.4.. Media Informasi ...................................................................................... 7. 2.1.5.. World Wide Web ..................................................................................... 7 Pemahaman ............................................................................................... 8. 2.2.1.. Tahap Pembuatan Desain dalam media .................................................... 8. 2.2.2.. Grid ........................................................................................................ 8. 2.2.3.. Layout ................................................................................................... 14. 2.2.4.. Tipografi ............................................................................................... 14. 2.2.5.. Hierarki ................................................................................................. 17. 2.2.6.. Logo ...................................................................................................... 18. 2.2.7.. Warna ................................................................................................... 18. 2.2.8.. Bentuk dan Ruang ................................................................................. 19. 2.2.9.. Aturan Desain ....................................................................................... 20. 2.2.10. Media Teks dan Gambar ...................................................................... 22 2.2.11. Tujuan Pembuatan Brosur .................................................................... 22 2.2.12. Proses pembuatan brosur ...................................................................... 23 2.2.13. Tipe brosur ........................................................................................... 23 2.2.14. Dasar Segmentasi Pasar ........................................................................ 23 2.2.15. Konseptual Desain ............................................................................... 24 2.2.16. Pembuatan Postcard ............................................................................. 24 2.2.17. Fotografi .............................................................................................. 24. x Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

2.2.18. Komposisi Fotografi ............................................................................. 26 2.2.19. Lampion ............................................................................................... 27 Sejarah .................................................................................................... 27 2.3.1.. Semarang .............................................................................................. 27. 2.3.2.. Pecinan di Semarang ............................................................................. 28. 2.3.3.. Gang Pecinan ........................................................................................ 30. 2.3.4.. Kawasan Pecinan di Masa Pemerintahan Belanda.................................. 30. BAB III METODOLOGI ............................................................................... 32 Metodologi Pengumpulan Data ............................................................. 32 3.1.1.. Wawancara............................................................................................ 32. 3.1.2.. Focus Group Discussion ........................................................................ 41. 3.1.3.. Kuesioner .............................................................................................. 41. 3.1.4.. Study Existing........................................................................................ 48. 3.1.5.. Referensi ............................................................................................... 50 Metodologi Perancangan ........................................................................ 54. BAB IV PERANCANGAN DAN ANALISIS.................................................. 55 Perancangan............................................................................................ 55 4.1.1.. Tagline .................................................................................................. 57. 4.1.2.. Warna ................................................................................................... 58. 4.1.3.. Tipografi ............................................................................................... 59. 4.1.4.. Elemen Visual ....................................................................................... 61. 4.1.5.. Logo ...................................................................................................... 62. xi Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

4.1.6.. Layout & Grid ....................................................................................... 65. 4.1.7.. Website.................................................................................................. 66. 4.1.8.. Brosur ................................................................................................... 73. 4.1.9.. Iklan di Majalah .................................................................................... 75. 4.1.10. Merchandise......................................................................................... 76 4.1.11. Media Online ....................................................................................... 82 Analisis .................................................................................................... 84 Budgeting ................................................................................................. 88 BAB V PENUTUP ........................................................................................... 90 Kesimpulan ............................................................................................. 90 Saran ....................................................................................................... 90 DAFTAR PUSTAKA .................................................................................... XIV. xii Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

DAFTAR GAMBAR. Gambar 2.1. Unit dalam grid .............................................................................. 11 Gambar 2.2. Gutter ............................................................................................ 11 Gambar 2.3. Kolom grid .................................................................................... 12 Gambar 2.4. Rule of third ................................................................................... 13 Gambar 2.5. Color Wheel................................................................................... 19 Gambar 3.1. Penulis menghampiri klenteng Tay kak Sie .................................... 33 Gambar 3.2. Buku Sejarah Klenteng Tay Kak Sie yang ...................................... 34 Gambar 3.3. Penulis befoto dengan pengurus Semawis ...................................... 36 Gambar 3.4. Penulis di dalam Toko Obat ........................................................... 37 Gambar 3.5. Penulis mewawancarai chef lumpia ................................................ 38 Gambar 3.6. Penulis mewawancarai tukang becak ............................................. 40 Gambar 3.7. Diagram Umur ............................................................................... 42 Gambar 3.8. Diagram Pekerjaan Audiens ........................................................... 43 Gambar 3.9. Grafik Kota Tempat Tinggal .......................................................... 44 Gambar 3.10. Diagram Audiens yang pernah ke Semarang ................................ 45 Gambar 3.11. Diagram Audiens yang Mengetahui Pecinan di Semarang ............ 45 Gambar 3.12. Diagram Audiens yang pernah ke Semarang ................................ 46 Gambar 3.13. Diagram Audiens yang tidak pernah ke Semarang........................ 46 Gambar 3.14. Diagram Alasan Audiens Pergi ke Semarang ............................... 47 Gambar 3.15. Bagian depan Leaflet.................................................................... 48 Gambar 3.16. Bagian Isi Leaflet ......................................................................... 49. xiii Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

Gambar 3.9. Penjelasan Semawis di leaflet ........................................................ 50 Gambar 3.10. Tampilan landing page website Chinatown UK ............................ 51 Gambar 3.11. Tampilan isi website Chinatown UK ............................................ 51 Gambar 3.12. Tampilan isi website Indonesia Travel ......................................... 52 Gambar 3.13. Tampilan header website Indonesia Travel .................................. 52 Gambar 3.14. Tampilan website Chinatown NewYork ....................................... 53 Gambar 3.15. Tampilan website Chinatown Melbourne ..................................... 53 Gambar 3.16. Tampilan website Chinatown Los Angeles ................................... 54 Gambar 3.1. Mind Mapping ............................................................................... 55 Gambar 4.2. Brainstorming ................................................................................ 56 Gambar 4.3. Warna dasar dalam pembuatan karya ............................................. 59 Gambar 4.4. Moodboard Tipografi..................................................................... 60 Gambar 4.5. Elemen Visual Lampion................................................................. 61 Gambar 4.6. Elemen Visual Lampion di website ................................................ 62 Gambar 4.7. Logo Pecinan Semarang awal......................................................... 63 Gambar 4.8. Sketsa Logo ................................................................................... 63 Gambar 4.9. Logo Digital yang digunakan ......................................................... 64 Gambar 4.10. Penetapan Grid Website ............................................................... 65 Gambar 4.11. Skema Website ............................................................................ 66 Gambar 4.12. Moodboard Tipografi ................................................................... 67 Gambar 4.13. Tampilan grid 1 ........................................................................... 68 Gambar 4.14. Tampilan grid 2 ........................................................................... 68. xiv Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

Gambar 4.15. Tampilan Home ........................................................................... 69 Gambar 4.16. Navigasi dan Head Website ......................................................... 70 Gambar 4.17. Isi artikel 1 ................................................................................... 71 Gambar 4.18. Isi Artikel ke-2 ............................................................................. 71 Gambar 4.19. Elemen Visual bentuk .................................................................. 72 Gambar 4.20. Footer Website ............................................................................. 73 Gambar 4.21. Brosur bagian Belakang ............................................................... 74 Gambar 4.22. Brosur Bagian Depan ................................................................... 74 Gambar 4.23. Iklan Majalah ............................................................................... 76 Gambar 4.24. Desain Postcard ........................................................................... 78 Gambar 4.25. Desain Postcard 2 ........................................................................ 78 Gambar 4.26. Desain Tumbler ........................................................................... 79 Gambar 4.27. Tas Kanvas .................................................................................. 80 Gambar 4.28. Pin ............................................................................................... 81 Gambar 4.29. Kertas Angpao ............................................................................. 81 Gambar 4.30. Notebook ..................................................................................... 82 Gambar 4.31. Web Banner ................................................................................. 83 Gambar 4.32. Instagram .................................................................................... 83. xv Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

DAFTAR TABEL. Tabel 4.1. Tabel Budgeting ................................................................................ 89. xvi Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.

DAFTAR LAMPIRAN. LAMPIRAN A : DISPLAY..........................................................................XVII LAMPIRAN B : KUISIONER.....................................................................XVIII LAMPIRAN C : ABSENSI...........................................................................XXI. xvii Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017.