lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/halaman awal.pdf3. bapak...

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

Upload: others

Post on 05-Nov-2019

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

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

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1977/1/HALAMAN AWAL.pdf3. Bapak Soenaweng Sasongko selaku Kepala Bagian Pembangunan PT Pembangunan Jaya Ancol dan

Perancangan Aplikasi Direktori..., Windy, FSD UMN, 2013