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 MEDIA INTERAKTIF WAHANA - WAHANA DUNIA FANTASI ANCOL
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Seni (S.Sn)
Nama : Reyvi Pratama Tjahja
NIM : 10120210268
Program Studi : Desain Komunikasi Visual Fakultas : Seni & Desain
UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG
2014
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Reyvi Pratama Tjahja
NIM : 10120210268
Program Sudi : Desain Komunikasi Visual Fakultas : Seni & Desain
Universitas Multimedia Nusantara Judul Tugas Akhir:
PERANCANGAN MEDIA INTERAKTIF WAHANA - WAHANA DUNIA FANTASI ANCOL
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
gelar (S.Sn.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang berlaku di Universitas Multimedia Nusantara.
Tangerang, 27 Agustus 2014
Reyvi Pratama Tjahja
HALAMAN PENGESAHAN TUGAS AKHIR PERANCANGAN MEDIA INTERAKTIF WAHANA-WAHANA DUNIA FANTASI ANCOL
Oleh
Nama : Reyvi Pratama Tjahja
NIM : 10120210268
Program Studi : Desain Komunikasi Visual Fakultas : Seni & Desain
Tangerang, 27 Agustus 2014
Ketua Program Studi
Desi Dwi Kristanto, M.Ds.
Penguji
Ratna Cahaya Rina, S.Sos., M.Ds..
Ketua Sidang
Desi Dwi Kristanto, M.Ds.
Pembimbing
Yusup Sigit Martyastiadi, S.T., M.Inf.Tech.
KATA PENGANTAR
Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa karena atas berkat dan rahmat-Nya lah, penulis dapat menyelesaikan Laporan Tugas Akhir ini. Penulis akan melaporkan tentang Perangcangan Media Interaktif Wahana- Wahana Dunia Fantasi Ancol selama penulis melaksanakan tugas akhir ini.
Sekiranya, laporan ini dapat memberi gambaran kepada mahasiswa tentang bagaimana melaksanakan tugas akhir media interaktif dalam bentuk website berbasis flash. Selesainya Laporan Tugas Akhir ini tidak lepas dari berbagai pihak yang ikut membantu dan memberi dukungan dalam menyelesaikan penulisan dengan baik.
Untuk itu, penulis ingin mengucapkan terima kasih kepada:
1. Desi Dwi Kristanto, M.Ds., selaku Ketua Program Studi Desain Komunikasi Visual sekaligus penguji sidang yang telah memberikan kesempatan kepada penulis untuk melaksanakan sidang akhir.
2. Yusup Sigit Martyastiadi, S.T., M.Inf.Tech, selaku Dosen pembimbing yang telah banyak memberikan masukan dalam pembuatan karya dan penulisan laporan Tugas Akhir ini.
3. Dewan Penguji yang telah memberikan masukan selama sidang akhir.
4. Pihak Dufan yang sudah memberikan ijin dan bantuan kepada penulis dalam proses perancangan tugas akhir.
5. Orang tua, saudara dan teman yang memberikan dorongan dan semangat dalam menjalankan pelaksanaan tugas akhir dan penulisannya.
Akhir kata penulis berharap laporan tugas akhir ini dapat bermanfaat bagi para pembaca yang ingin mengoptimalkan teknologi informasi dan komunikasi.
Tangerang, 27 Agustus 2014
Reyvi Pratama Tjahja
ABSTRAKSI
Dunia Fantasi (Dufan), yang didirikan pada tanggal 29 Agustus 1985, merupakan sebuah tempat hiburan yang terletak di kompleks Taman Impian Jaya Ancol, Jakarta Utara, Indonesia. Dufan, yang memiliki luas yang mencapai 9,5 hektar memiliki beberapa permainan wahana yang terletak pada kawasan-kawasan yang berbeda dengan tema sesuai dengan ciri-ciri kawasan tersebut. Dengan adanya berbagai ragam permainan wahana disertai dengan aturan-aturan yang berbeda- beda, tentunya para pengunjung akan kesulitan untuk menikmati semua permainan wahana yang ada mengingat ketentuan dan aturan untuk memainkan wahana tersebut bermacam-macam. Untuk mengatasi masalah tersebut, dibutuhkan sebuah media yang dapat memberikan informasi sejak dini. Namun belum ada media yang digunakan oleh pihak Dufan untuk memberikan informasi sejak dini tentang wahana-wahana Dufan
Salah satu cara yang diperlukan untuk mengatasi masalah tersebut adalah dibuatnya sebuah perancangan desain website interaktif yang dapat memberikan informasi sejak dini. Website ini dirancang dengan menggunakan lebih banyak gambar dan animasi daripada teks. Oleh karena itu, perancangan ini diharapkan dapat memenuhi kebutuhan pengunjung untuk menikmati wahana-wahana Dufan.
Kata kunci : perancangan, website, dunia fantasi, media interaktif
ABSTRACT
Dunia Fantasi (Dufan), which was established on August 29, 1985, is an entertainment venue located in the complex of Taman Impian Jaya Ancol, North Jakarta, Indonesia. Dufan, which has an area of 9.5 hectares, have some game rides located in areas with different themes according to the characteristics of the region. With many varieties of rides games accompanied that have the different rules, visitors will find it hard to enjoy all the rides game considering the provisions and rules to play the various rides. To overcome these problems, it needs a media that can provide an early information. But there has been no media used by the Dufan to provide early information about the vehicles of Dufan.
One way that is necessary to solve the problem is made a design of an interactive website design that can provide early information. This website is designed to use more pictures and animations rather than text. Therefore, this design is expected to meet the needs of visitors to enjoy the rides Dufan.
Keywords: designs, website, dunia fantasi, interactive media
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... ii
HALAMAN PENGESAHAN TUGAS AKHIR ... iv
KATA PENGANTAR ... v
ABSTRAKSI ... vii
ABSTRACT ... viii
DAFTAR ISI ... ix
DAFTAR GAMBAR ... xiv
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
1.6. Metode Pengumpulan Data ... 4
1.7. Skematika Penulisan ... 5
1.8. Skematika Perancangan ... 6
BAB II TINJAUAN PUSTAKA ... 7
2.1. Media Interaktif ... 7
2.2. Interactivity ... 7
Pola Interaksi ... 10
2.2.1. 2.3. Elemen Desain ... 12
2.3.1. Prinsip Desain ... 12
2.3.2. Text ... 14
2.3.3. Warna ... 15
2.3.4. Layout ... 22
2.4. GUI (Graphical User Interface) ... 25
2.5. Navigasi ... 26
2.6. Character Design ... 28
2.6.1. Dimensi Psikologi ... 28
2.6.2. Dimensi Fisiologi ... 30
2.6.3. Dimensi Sosiologi ... 30
BAB III METODOLOGI ... 31
3.1. Gambaran Umum ... 31
3.2. Praproduksi ... 31
3.3. Proses Penelitian ... 32
3.3.1. Observasi ... 32
3.3.2. Data Usia ... 33
3.3.3. Data Jenis Kelamin ... 33
3.3.4. Data Penggunaan Internet... 34
3.3.5. Data Lama Anak-Anak Menggunakan Internet ... 35
3.3.6. Data Gadget untuk Anak-Anak ... 35
3.3.7. Sepuluh Wahana Ekstrim Dufan ... 36
3.3.8. Data Anak yang Takut dengan Wahana Ekstrim Dufan ... 37
3.3.9. Data Anak yang Tahu Ukuran Bahaya Wahana Dufan ... 38
3.3.10. Data Kendala Anak Ketika Bermain Wahana Dufan ... 38
3.3.11. Data Kebutuhan Anak akan Informasi Sejak Dini Dufan ... 39
3.3.12. Data Media yang Efektif untuk Anak-Anak ... 39
3.3.13. Data Kebutuhan Informasi Dufan (Tinggi dan Ketentuan) ... 40
3.3.14. Data Pilihan Desain ... 40
3.4. Analisa SWOT dan 5W+1H ... 41
3.5. Konsep Kreatif ... 43
3.5.1. Mind Mapping ... 43
3.5.2. Pola Interaksi ... 44
3.5.3. Wireframe ... 47
3.5.4. Sketsa ... 47
3.5.5. Konsep Warna ... 50
3.6. Pengembangan Desain ... 51
3.7. Navigasi ... 54
3.8. Pascaproduksi ... 55
BAB IV ANALISIS ... 56
4.1. Desain Interface ... 56
4.2. Site Map ... 56
4.3. Desain Latar Belakang ... 57
4.3.1. Halaman Utama ... 57
4.3.2. Halaman Wahana Dufan ... 59
4.3.3. Halaman Informasi Wahana Dufan ... 61
4.3.4. Halaman Cara Kerja Wahana ... 63
4.3.5. Halaman Ketentuan Wahana ... 65
4.3.6. Halaman Rating Wahana ... 67
4.4. Pemilihan Jenis Huruf ... 69
4.4.1. Jenis Huruf Logo (Judul) ... 69
4.4.2. Jenis Huruf Body Text ... 70
4.5. Desain Wahana Dufan ... 71
4.6. Desain Tombol ... 72
BAB V PENUTUP ... 75
5.1. Kesimpulan ... 75
5.2. Saran ... 76
DAFTAR PUSTAKA ... xvii
LAMPIRAN A: TAMPILAN HALAMAN OPENING ... xix
LAMPIRAN B: TAMPILAN HALAMAN UTAMA ... xx
LAMPIRAN C: TAMPILAN HALAMAN PILIHAN WAHANA ... xxi
LAMPIRAN D: TAMPILAN HALAMAN INFORMASI ... xxii
LAMPIRAN E: TAMPILAN SURAT IJIN DUFAN ... xxiii
LAMPIRAN F: TAMPILAN KARTU BIMBINGAN ... xxv
LAMPIRAN G: TAMPILAN KUISIONER ... xxviii
DAFTAR GAMBAR
Gambar 1.1. Skematika Perancangan ... 6
Gambar 2.1. Struktur Dasar Narasi ... 8
Gambar 2.2. Nodal Plot ... 10
Gambar 2.3. Modulated Plot ... 11
Gambar 2.4. Open Plot ... 11
Gambar 2.5. Contrast ... 12
Gambar 2.6. Repetition ... 13
Gambar 2.7. Alignment ... 13
Gambar 2.8. Proximity ... 14
Gambar 2.9. Color Wheel ... 16
Gambar 2.10. Complementary Color ... 17
Gambar 2.11. Analogus Color ... 17
Gambar 2.12. Color Triad ... 18
Gambar 2.13. Color Tetrad ... 18
Gambar 2.14. A Single Column Grid ... 23
Gambar 2.15. A Two Column Grid ... 23
Gambar 2.16. Multicolumn Grid ... 24
Gambar 2.17. Modular Grid ... 24
Gambar 2.18. Hierarchical Grid ... 25
Gambar 3.1. Interactive Media Workflow ... 31
Gambar 3.2. Data Usia Responden ... 33
Gambar 3.3. Data Jenis Kelamin ... 34
Gambar 3.4. Data Pengguna Internet ... 34
Gambar 3.5. Data Lama Anak Menggunakan Internet (Hitungan Jam) ... 35
Gambar 3.6. Data Gadget Untuk Anak-Anak ... 35
Gambar 3.7. Data 10 Wahana Ekstrim Dufan ... 36
Gambar 3.8. Data Ketakutan Anak pada Wahana Ekstrim Dufan ... 37
Gambar 3.9. Data Anak yang Tahu Ukuran Bahaya Wahana Dufan ... 38
Gambar 3.10. Data Kendala Anak Ketika Bermain Wahana Dufan ... 38
Gambar 3.11. Data Kebutuhan Anak akan Informasi Sejak Dini Dufan ... 39
Gambar 3.12. Data Media yang Efektif untuk Anak Usia 10-15 Tahun ... 39
Gambar 3.13. Data Kebutuhan Informasi Dufan (Tinggi dan Ketentuan)... 40
Gambar 3.14. Data Pilihan Desain ... 40
Gambar 3.15. Mind Mapping Media Interaktif ... 43
Gambar 3.16. Pola Interaksi ... 44
Gambar 3.17. Site Map ... 45
Gambar 3.18. Wireframe Layout Interaktif Wahana Dufan... 47
Gambar 3.19. Logo Dufan ... 48
Gambar 3.20. Logo Media Interaktif Dufan ... 48
Gambar 3.21. Sketsa Akhir ... 49
Gambar 3.22. Pilihan Warna dalam Media Interaktif ... 50
Gambar 3.23. Proses Gambar Tampilan Halaman Utama ... 52
Gambar 3.24. Gambar Alternatif Kedua ... 52
Gambar 3.25. Gambar Alternatif Ketiga ... 53
Gambar 3.26. Hasil Akhir Tampilan Utama ... 53
Gambar 3.27. Bagian Tombol Pada Flash ... 54
Gambar 3.28. Action Script 2.0 ... 54
Gambar 3.29. Hasil Jadi Media Interaktif Wahana Dufan ... 55
Gambar 4.1. Site Map Media Interaktif Dufan ... 56
Gambar 4.2. Halaman Utama ... 57
Gambar 4.3. Grid System Halaman Utama ... 57
Gambar 4.4. Palet Warna Halaman Utama ... 58
Gambar 4.5. Halaman Pilihan Wahana Dufan ... 59
Gambar 4.6. Grid System Halaman Pilihan Wahana Dufan ... 59
Gambar 4.7. Palet Warna Halaman Wahana Dufan... 60
Gambar 4.8. Halaman Informasi Wahana Dufan ... 61
Gambar 4.9. Grid System Halaman Informasi Wahana Dufan ... 61
Gambar 4.10. Palet Warna Halaman Informasi ... 62
Gambar 4.11. Halaman Cara Kerja Wahana ... 63
Gambar 4.12. Grid System Halaman Cara Kerja Wahana ... 63
Gambar 4.13. Palet Warna Halaman Cara Kerja Wahana ... 64
Gambar 4.14. Halaman Ketentuan Wahana ... 65
Gambar 4.15. Grid System Halaman Ketentuan Wahana ... 65
Gambar 4.16. Palet Warna Halaman Ketentuan Wahana ... 66
Gambar 4.17. Halaman Rating Wahana Dufan... 67
Gambar 4.18. Grid System Halaman Rating Wahana ... 67
Gambar 4.19. Palet Warna Halaman Rating Wahana ... 68
Gambar 4.20. Font “Gretoon”... 69
Gambar 4.21. Font “Komika Axis” ... 69
Gambar 4.22. Font Judul Website ... 70
Gambar 4.23. Palet Warna Judul ... 70
Gambar 4.24. Font Body Text ... 70
Gambar 4.25. Wahana Tornado ... 71
Gambar 4.26. Wahana Tornado Pada Media Interaktif ... 71
Gambar 4.27. Palet Warna Wahana Dufan ... 72
Gambar 4.28. Preview Tombol Start ... 72
Gambar 4.29. Preview Tombol Return ... 72
Gambar 4.30. Preview Tombol Wahana ... 72 Gambar 4.31. Preview Tombol Close ... 73 Gambar 4.32. Palet Warna Tombol ... 73