Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP
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.
i
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
ii
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
v
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.
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
vii
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.
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
viii
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.
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
ix
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
x
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
xi
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
xii
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
xiii
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
xiv
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
xv
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
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
xvi
DAFTAR TABEL
Tabel 4.1. Tabel Budgeting ................................................................................ 89
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017
xvii
DAFTAR LAMPIRAN
LAMPIRAN A : DISPLAY..........................................................................XVII
LAMPIRAN B : KUISIONER.....................................................................XVIII
LAMPIRAN C : ABSENSI...........................................................................XXI
Perancangan Website Sebagai..., Vicensia Oselina, FSD UMN, 2017