lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/halaman awal.pdf3. bapak...
TRANSCRIPT
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.
PERANCANGAN APLIKASI DIREKTORI DIGITAL
DUNIA FANTASI ANCOL Ditulis sebagai salah satu syarat untuk memperoleh gelar Sarjana Seni (S.Sn)
Laporan Tugas Akhir
Nama : Windy
NIM : 09120210001
Program Studi : Desain Komunikasi Visual
Fakultas : Seni & Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2013
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
HALAMAN PENGESAHAN TUGAS AKHIR
PERANCANGAN APLIKASI DIREKTORI DIGITAL DUNIA FANTASI ANCOL
Oleh
Nama : Windy
NIM : 09120210001
Program Studi : Desain Komunikasi Visual
Fakultas : Seni & Desain
Tangerang, 11 Januari 2013
Dekan Fakultas Seni & Desain
M.S. Gumelar, M.A.
Ketua Program Studi Desain Komunikasi Visual
Desi Dwi Kristanto, S.Ds., M.Ds.
Penguji
Ketua Sidang
Pembimbing I
Naldo Yanuar Heryanto, S.Sn., M.T.
Pembimbing II
Ratna Cahaya Rina, S.Sos., M.Ds.
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
KATA PENGANTAR
Puji dan syukur penulis panjatkan kepada kehadirat Tuhan Yang Maha Esa atas
segala berkat anugerah yang telah dilimpahkan sehingga penulis dapat
menyelesaikan Laporan Tugas Akhir berjudul Perancangan Aplikasi Direktori
Digital Dunia Fantasi Ancol beserta dengan bentuk karya Tugas Akhir.
Laporan Tugas Akhir ini bertujuan untuk memenuhi salah satu syarat dalam
memperoleh gelar sarjana seni (S.Sn.) dalam proses menyelesaikan studi di
Universitas Multimedia Nusantara. Seiring dengan berkembangnya teknologi dan
juga kebutuhan masyarakat akan sebuah informasi, maka penulis memilih topik
Tugas Akhir yang berjudul “Perancangan Aplikasi Direktori Digital Dunia
Fantasi Ancol” yang bertujuan untuk menyampaikan informasi kepada para
pengunjungnya dengan cepat dan tepat.
Selama proses pembuatan karya dan laporan ini berlangsung, penulis banyak
dibantu dan didukung oleh banyak pihak. Oleh karena itu penulis mengucapkan
banyak terima kasih kepada:
1. Bapak Naldo Yanuar, S.Sn., M.T. selaku dosen pembimbing yang dengan
sabar membimbing, mengoreksi, membantu, dan mendukung proses
pembuatan laporan dan karya Tugas Akhir ini dari awal hingga akhir
proses pembuatan Tugas Akhir ini berlangsung.
2. Ibu Ratna Cahaya Rina, S.Sos, M.Ds. selaku dosen pembimbing yang
dengan sabar dan penuh semangat membimbing dan mendukung proses
pembuatan laporan dan karya Tugas Akhir.
3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT
Pembangunan Jaya Ancol dan Donny Witarsah yang membantu
memberikan informasi dan data mengenai Dunia Fantasi Ancol.
4. Dosen-dosen Universitas Multimedia Nusantara yang membantu dan
memberikan dukungan dalam proses pembuatan Tugas Akhir
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
5. Papa, Mama, dan Adik yang dengan penuh cinta kasih mendukung,
memberikan semangat, dan membantu penyelesaian Tugas Akhir.
6. Andri Murfih yang dengan sabar dan penuh semangat membantu dan
mendukung proses pembuatan Tugas Akhir dari awal hingga akhir.
7. Jessica Maria, Lianna Tjiakra, Michelle Gracia, Fanny Indriani, Christian
Bachtiar yang dengan penuh semangat, canda dan tawa membantu serta
mendukung proses pembuatan Tugas Akhir.
8. Teman-teman dari segala angkatan dan jurusan Universitas Multimedia
Nusantara yang telah membantu, mendukung, dan memberikan semangat
selamaproses perkuliahan berlangsung hingga proses pembuatan Tugas
Akhir ini selesai.
9. Para teman-teman, bapak/ibu, dan saudara-saudari yang telah
menyempatkan waktu untuk mengisi kuisioner dan membantu proses
pengumpulan data.
Demikian Laporan Tugas Akhir ini penulis susun dengan harapan dapat
bermanfaat bagi penulis maupun pembaca. Dalam penyusunan Laporan Tugas
Akhir ini penulis juga menyadari bahwa masih Laporan Tugas Akhir ini masih
jauh dari sempurna dan terdapat banyak kekurangan, oleh karena itu penulis
mengharapkan saran dan kritik yang membangun.
Tangerang, 6 Januari 2013
Penulis
Windy
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
ABSTRAKSI
Penulis membahas mengenai Perancangan Aplikasi Direktori Digital Dunia Fantasi sebagai pemenuhan Tugas Akhir. Seperti yang diketahui, Dufan atau Dunia Fantasi Ancol merupakan salah satu tempat wisata di Jakarta yang dikunjungi oleh banyak pengunjung tiap tahunnya. Bahkan Dufan sendiri sudah menjadi kunjungan wajib jika seseorang berkunjung ke Jakarta. Sebagai salah satu tempat yang berpengaruh dalam pariwisata Jakarta, tentunya Dufan seharusnya memiliki teknologi yang mendukung bukan hanya pada wahananya, melainkan juga pada petunjuk dan desain direktorinya. Untuk memudahkan para pengunjung yang kesulitan, Dufan memang telah membuat sistem petunjuk. Namun, ternyata petunjuk ini kurang membantu para pengunjung. Oleh sebab itu, penulis ingin membantu pihak Dufan dalam perancangan aplikasi direktori digital yang menyajikan peta informasi untuk meningkatkan kualitas pelayanan mereka. Aplikasi direktori ini juga diharapkan dapat membantu kedua pihak, yaitu pihak Dufan sendiri dan pengunjung untuk saling memperoleh dan memberikan informasi lokasi dan wahana yang tersedia. Keywords: Dunia Fantasi, Aplikasi, Direktori, Digital, Peta Informasi.
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
ABSTRACT
The author discusses the use of Digital Directory Application for Dunia Fantasi Ancol as a fulfillment of my Final Project. Dunia Fantasi Ancol (or usually shortened as Dufan) is one of the most visited tourism attractions in Jakarta each year. Dufan has even been a-must-visit place in the city. As one of the most influential tourism spots in the city, it is an absolute requirement for Dufan to have advanced technology which supports not only its rides, but also other essential matters such as its service and directory sign system. Dufan, in fact, has made directory sign system to help the visitors in need. However, the author found it less helpful to guide the visitors. Therefore, the author wanted to help Dufan make a Digital Directory Application for Dufan which presents informative map to improve the quality of its services. This Digital Directory is also expected to help the two parties, namely for Dufan itself and its visitors to mutually provide and obtain the locations and information regarding the rides and other facilities. Keywords: Dunia Fantasi, Application, Directory, Digital, Information Map.
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
Daftar Isi
HALAMAN PENGESAHAN TUGAS AKHIR ...................................................... i
KATA PENGANTAR ............................................................................................ ii
ABSTRAKSI.......................................................................................................... iv
ABSTRACT ............................................................................................................. v
DAFTAR ISI .......................................................................................................... vi
DAFTAR GAMBAR ............................................................................................. ix
DAFTAR TABEL ................................................................................................. xii
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 .................................................................................. 5
1.6 Metodologi .................................................................................................. 5
BAB II TINJAUAN PUSTAKA .............................................................................. 8
2.1 Prinsip Desain ................................................................................................. 8
2.1.1 Prinsip Dasar ............................................................................................ 8
2.1.2 Elemen Desain ....................................................................................... 12
2.2 Infografis ...................................................................................................... 22
2.2.1 Sejarah dan Pengertian Infografis .......................................................... 22
2.2.2 Tolak Ukur Infografis ............................................................................ 24
2.2.3 Karakter Infografis yang Baik ............................................................... 25
2.2.4 Komponen Infografis ............................................................................. 29
2.2.5 Infografis Peta ........................................................................................ 32
2.2.5.1 Pengertian Infografis Peta .............................................................. 32
2.2.5.2 Ciri Infografis Peta ......................................................................... 34
2.2.5.3 Unsur-Unsur pada Infografis Peta .................................................. 35
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
2.3 Figure Ground .............................................................................................. 39
2.4 Media Komputer dan Gadget ....................................................................... 44
2.5 Interactive Design ........................................................................................ 45
2.5.1 Pengertian Interactive Design................................................................ 45
2.5.2 Peran Semiotik pada Interactive Design ............................................... 47
2.5.3 Graphic User Interface .......................................................................... 54
2.5.3.1 User Centered Design .................................................................... 55
2.5.3.2 Elemen dan Komponen Graphic User Interface ........................... 58
2.5.3.3 Prinsip Graphic UserDesign .......................................................... 60
2.6 Direktori Digital (Interaktif Desain pada Media Peta) ................................. 68
2.7 Taman Bermain Tematik .............................................................................. 73
2.7.1 Pengertian Taman Bermain Tematik ..................................................... 73
2.7.2 Karakter dan Komponen Utama Taman Bermain Tematik ................... 74
2.7.3 Tema pada Taman Bermain Tematik .................................................... 75
BAB III HASIL PENELITIAN ............................................................................. 77
3.1 Gambaran Umum Penelitian ........................................................................ 77
3.2 Metodologi Penelitian .................................................................................. 79
3.2.1 Metodologi Wawancara ......................................................................... 79
3.2.2 Metodologi Observasi ............................................................................ 80
3.2.3 Metodologi Kuisioner ............................................................................ 81
3.3 Tahapan Kerja .............................................................................................. 83
3.4 SWOT (Strengths, Weaknesses, Opportunities, Threats) ............................ 88
3.5 Mind Map ..................................................................................................... 90
3.6 Positioning .................................................................................................... 91
3.7 Alternatif Sketsa ........................................................................................... 92
BAB IV ANALISIS ............................................................................................... 95
4.1 Desain Interface ............................................................................................ 95
4.1.1 Site Map ................................................................................................. 95
4.1.2 Peta ........................................................................................................ 97
4.1.3 Navigasi ............................................................................................... 115
4.1.4 Legenda ............................................................................................... 120
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
4.1.5 Window Pop Up ................................................................................... 126
4.2 Animasi ....................................................................................................... 132
4.2.1 Navigasi ............................................................................................... 132
4.2.2 Window Pop Up ................................................................................... 136
4.2.3 Looping Animation .............................................................................. 138
4.2.4 Screen Saver ........................................................................................ 149
4.3 Interaktifitas ................................................................................................ 150
4.3.1 Navigasi ............................................................................................... 150
4.3.2 Musik ................................................................................................... 151
BAB V KESIMPULAN DAN SARAN ............................................................... 153
5.1 Kesimpulan ................................................................................................. 153
5.2 Saran ........................................................................................................... 154
DAFTAR PUSTAKA .......................................................................................... 156
LAMPIRAN ......................................................................................................... 159
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
DAFTAR GAMBAR
Gambar 2.1 Prinsip Keseimbangan ........................................................................ 9
Gambar 2.2 Prinsip Kesatuan ............................................................................... 10
Gambar 2.3 Prinsip Repetisi dan Irama ................................................................ 11
Gambar 2.4 Prinsip Kontras ................................................................................. 11
Gambar 2.5 Prinsip Penekanan ............................................................................. 12
Gambar 2.6 Elemen Garis .................................................................................... 14
Gambar 2.7 Panjang Gelombang Cahaya ............................................................. 15
Gambar 2.8 Contoh Penggunaan Elemen Ruang pada Koran .............................. 17
Gambar 2.9 Jenis-Jenis Huruf .............................................................................. 19
Gambar 2.10 Tolak Ukur Infografis ..................................................................... 25
Gambar 2.11 Contoh Infografis Peta .................................................................... 33
Gambar 2.12 Unsur Jalan Raya pada Infografis Peta ........................................... 36
Gambar 2.13 Unsur Sungai pada Infografis Peta ................................................. 37
Gambar 2.14 Penunjuk Arah ................................................................................ 38
Gambar 2.15 Teknik Closed Form pada Figure Ground ..................................... 41
Gambar 2.16 Teknik Color Value ........................................................................ 41
Gambar 2.17 Teknik Detail .................................................................................. 43
Gambar 2.18 Proses Penyaluran Informasi pada Media Komputer ..................... 45
Gambar 2.19 Contoh Bentuk Ikon, Simbol, dan Pictogram ................................. 50
Gambar 2.20 Sistem Grafis Bertin ....................................................................... 51
Gambar 2.21 Ikon pada Toolbars ......................................................................... 52
Gambar 2.22 Proses Pembuatan User Centered Design ...................................... 57
Gambar 2.23 Scroll Bars dari Masa ke Masa ....................................................... 59
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
Gambar 2.24 Penjelasan Elemen Dasar pada GUI ............................................... 60
Gambar 2.25 Bagan Gabungan Kebiasaan Manusia dan Sistem Aplikasi ........... 65
Gambar 2.26 Reminder pada Aplikasi .................................................................. 66
Gambar 2.27 Alternatif Layout Direktori Digital ................................................. 70
Gambar 2.28 Interactive Static Map..................................................................... 71
Gambar 2.29 Animated Map ................................................................................. 72
Gambar 2.30 Interactive Animated Map .............................................................. 72
Gambar 3.1 Suasana di Dunia Fantasi ................................................................. 78
Gambar 3.2 Tahap Perancangan Aplikasi Direktori Digital................................. 84
Gambar 3.3 Sketsa Ikon Wahana ......................................................................... 85
Gambar 3.4 Sketsa Legenda dan Button Aplikasi ................................................ 86
Gambar 3.5 Salah Satu Contoh Penggunaan Script pada Ikon Wahana .............. 87
Gambar 3.6 Lokasi Direktori Digital pada Tiap Kawasan Dufan ........................ 88
Gambar 3.7 Pengaplikasian Direktori Digital pada Multimedia Kiosk ................ 89
Gambar 3.8 Mind Map Dunia Fantasi dan Direktori Digital ............................... 91
Gambar 3.9 Peta Dunia Fantasi ........................................................................... 92
Gambar 3.10 Alternatif Pertama ........................................................................... 93
Gambar 3.11 Alternatif Kedua ............................................................................. 94
Gambar 4.1 Site Map Aplikasi Direktori Digital .................................................. 96
Gambar 4.1 Site Map Aplikasi Direktori Digital .................................................. 78
Gambar 4.2 Ikon Balon ...................................................................................... 108
Gambar 4.3 Penggunaan Simbol Warna pada Kawasan Hikayat ...................... 113
Gambar 4.4 Informasi Simbol Warna pada Slidder Menu ................................. 114
Gambar 4.5 Peta Informasi Dunia Fantasi ......................................................... 115
Gambar 4.6 Slidder Menu ................................................................................... 116
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
Gambar 4.7 Highlight pada Button yang Dipilih ................................................ 117
Gambar 4.8 Jenis Typeface Futura Light dan Futura Medium .......................... 118
Gambar 4.9 Penggunaan Typeface pada Aplikasi Direktori Digital Dufan ....... 118
Gambar 4.10 Window Pop Up Wahana pada Aplikasi ....................................... 130
Gambar 4.11 Window Pop Up Tutorial pada Aplikasi ....................................... 131
Gambar 4.12 Window Pop Up Zoom In Wahana ............................................... 131
Gambar 4.13 Slidder Menu Sebelum Berinteraksi ............................................. 134
Gambar 4.14 Slidder Menu Setelah Berinteraksi .............................................. 134
Gambar 4.15 Contoh Animasi pada Button Wahana dan Restoran ................... 135
Gambar 4.16 Animasi pada Button Home .......................................................... 135
Gambar 4.17 Tahapan Animasi pada Window Pop Up ...................................... 137
Gambar 4.18 Tampilan pada Window Pop Up Wahana ..................................... 137
Gambar 4.19 Screen Shot Tutorial .................................................................... 138
Gambar 4.20 Penggunaan Animasi Ikon Balon pada Ikon Wahana ................. 139
Gambar 4.21 Screen Saver Direktori Digital...................................................... 149
Gambar 4.22 Interaksi pada Slidder Menu ......................................................... 150
Gambar 4.23 Fungsi Button Kiri dan Kanan ...................................................... 151
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
DAFTAR TABEL
Tabel 4.1 Daftar Ikon pada Aplikasi Direktori Digital Dufan............................... 98
Tabel 4.2 Daftar Simbol pada Aplikasi Direktori Digital Dufan ........................ 109
Tabel 4.3 Daftar Ikon Button pada Aplikasi Direktori Digital Dufan ................. 119
Tabel 4.4 Daftar Legenda dan Simbol pada Aplikasi Direktori Digital Dufan ... 121
Tabel 4.5 Daftar Simbol pada Window Pop Up Wahana .................................... 127
Tabel 4.6 Daftar Animasi pada Ikon Wahana ..................................................... 139
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013
Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013