18
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.

Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

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

Page 17: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

xvi

DAFTAR TABEL

Tabel 4.1. Tabel Budgeting ................................................................................ 89

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

Page 18: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5763/6/HALAMAN AWAL.pdf · membuat perekonomian dan devisa negara menurun, khususnya di kota Semarang. Maka dari

xvii

DAFTAR LAMPIRAN

LAMPIRAN A : DISPLAY..........................................................................XVII

LAMPIRAN B : KUISIONER.....................................................................XVIII

LAMPIRAN C : ABSENSI...........................................................................XXI

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