Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
PERANCANGAN PETA DIGITAL INTERAKTIF
TRANSJAKARTA
Diajukan Untuk Memenuhi Syarat dalam Memperoleh Gelar S1 Sarjana Seni (S.Sn)
Laporan Tugas Akhir
Nama : Dwi Kurnianingrum Rahayuni
NIM : 09120210252
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
Tangerang
2013
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
iii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Dengan ini saya:
Nama : Dwi Kurnianingrum Rahayuni
NIM : 09120210252
Program Studi : Desain Komunikasi Visual
Menyatakan bahwa tugas akhir saya ini adalah karya ilmiah saya sendiri, bukan
plagiat dari karya ilmiah dibuat oleh orang lain, semua karya ilmiah yang dirujuk
dalam karya ilmiah ini telah disebutkan sumber dan kutipannya di Daftar Pustaka.
Apabila kemudian hari saya terbukti melakukan plagiat atau kecurangan atas
tugas akhir ini, saya bersedia dikenai sanksi tidak lulus tugas akhir.
Tangerang, 29 Juli 2013
Dwi Kurnianingrum Rahayuni
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
iv
KATA PENGANTAR
Segenap puji syukur penulis haturkan kehadirat Tuhan Yang Maha Esa, atas
selesainya laporan tugas akhir yang berjudul Perancangan Peta Digital Interaktif
Transjakarta ini sebagai salah satu persyaratan untuk memperoleh gelar Sarjana
Seni (S.Sn.) pada program studi Desain Komunikasi Visual, Fakultas Seni dan
Desain, Universitas Multimedia Nusantara.
Terselesaikannya laporan ini tidak terlepas dari dukungan dan bantuan
berbagai pihak. Ungkapan rasa terima kasih tersebut penulis sampaikan kepada:
1. Desi Dwi Kristanto, M.Ds. selaku Ketua Program Studi Desain Komunikasi
Visual.
2. Dra. Enny Raraswati dan Ardyansyah, S.Sn., M.M. selaku dosen
pembimbing.
3. Zamzami Almakki, S.Pd., M.Ds. dan Mohammad Rizaldi, S.T., M.Ds selaku
dosen penguji.
4. Kedua orang tua dan seluruh keluarga yang senantiasa mendukung penulis
untuk menyelesaikan kerja magang ini dengan maksimal.
5. Pihak Humas Transjakarta yang sudah memberikan informasi dan data
mengenai Transjakarta.
6. Sahabat-sahabat yang selalu memberikan bantuan dukungan maupun saran.
7. Pihak-pihak lain yang penulis belum sebutkan satu per satu.
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
v
Penulis berharap agar laporan tugas akhir ini dapat menjadi sarana
membagi ilmu dan membagi pengalaman bagi orang lain.
Tangerang, 29 Juli 2013
Penulis
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
vi
ABSTRAKSI
Transjakarta adalah sarana transportasi massal yang digunakan oleh masyarakat Jakarta,Transjakarta dibuat oleh pemerintah karena masalah kemacetan yang menganggu aktifitas masyarakat. Dengan adanya transportasi masssal ini kemacetan dapat dikurangi dan menjadi salah satu transportasi yang dapat digunakan oleh semua masyarakat Jakarta. Tetapi dengan banyaknya koridor yang ada, pengguna Transjakarta mengalami kesulitan dalam mencari informasi mengenai rute-rute dan tempat tujuan. Dengan adanya aplikasi Transjakarta ini diharapkan dapat membantu masyarakat untuk mencari informasi mengenai layanan Transjakarta dan rute yang ada.
Kata kunci: Transjakarta, kemacetan, informasi, aplikasi
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
vii
ABSTRACT
Transjakarta is a mass transport service in Jakarta. Transjakarta was made to handle severe traffic-jam in Jakarta which interfered people activities already. By this mass transport service, traffic can be reduced and had become one of the reliable transportation in the city. With numbers of corridors nowadays often confused the passengers to search about routes and destinations. By using the application about Transjakarta, people is expected to find an easy way to search and know about Transjakarta and their routes
Keyword : Transjakarta, traffic-jam, information, application.
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
viii
DAFTAR ISI
HALAM PEGESAHAN TUGAS AKHIR ......................................................... ii
PERNYATAAN TIDAK MELAKUKAN PLAGIAT....................................... iii
KATA PENGANTAR .......................................................................................... iv
ABSTRAKSI ......................................................................................................... vi
ABSTRACT ......................................................................................................... vii
DAFTAR ISI .......................................................................................................viii
DAFTAR GAMBAR .............................................................................................xii
BAB I PENDAHULUAN
1.1 Latar Belakang ............................................................................ .............1
1.2 Rumusan Masalah........................................................................... ..........2
1.3 Batasan Masalah..................................................................................... ..3
1.4 Tujuan Tugas Akhir....................................................................... ...........3
1.5 Manfaat Tugas Akhir............................................................................. ...4
1.6 Metode Perancangan........................................................................... ......4
1.7 Sistematika Penulisan........................................................................... ....5
BAB II TELAAH LITERATUR
2.1 Teori Umum..............................................................................................7
2.1.1 Desain Komunikasi Visual............................................................. 7
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
ix
2.1.2 Prinsip Desain........................................................... ......................8
2.1.3 Teori Media.....................................................................................9
2.1.4 Teori Warna ................................................................................ 10
2.1.5 Komunikasi .................................................................................. 12
2.1.6 Layout .......................................................................................... 13
2.1.7 Interaktifitas ................................................................................. 14
2.1.8 Media Interaktif ........................................................................... 17
2.1.9 Interaktif Desain pada Media Peta................................................ 18
2.1.10 Graphic User Interface............................................................... 23
2.1.11Tipografi...................................................................................... 35
2.1.12 Ilustrasi .......................................................................................36
2.2 TEORI KHUSUS ................................................................................... 39
2.2.1 Peta................................................................................................39
2.2.2 Transportasi.................................................................................. 41
2.2.3 Telepon Pintar............................................................................... 41
2.2.4 Transjakarta.................................................................................. 43
2.2.5 Bis................................................................................................. 46
2.2.6 Jalur Bus....................................................................................... 46
2.2.7 Rute............................................................................................... 46
2.2.8 Transit........................................................................................... 46
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
x
BAB III TELAAH LITERATUR
3.1 METODE PENELITIAN KUALITATIF............................................... 47
3.1.1 Observasi Lembaga Pendukung................................................... 47
3.1.2 Observasi Target Audiens.............................................................47
3.1.3 Hasil Wawancara.......................................................................... 48
3.2 METODE PENELITIAN KUANTITATIF............................................ 49
3.2.1 Hasil Survey..................................................................................49
3.2.2 Analisa Studi Lapangan................................................................ 61
3.2.2.1 Dokumentasi.....................................................................61
3.3 HASIL ANALISA SWOT...................................................................... 64
3.4 Data Terkait Eksisting............................................................................. 65
3.5 Proses Pra Produksi................................................................................ 68
3.5.1 Skema Alur Interaksi.................................................................... 68
3.5.2 Konsep Layout.............................................................................. 68
3.5.3 Konsep Icon.................................................................................. 70
3.5.4 Konsep Graphic User Interface....................................................77
BAB IV ANALISA PERANCANGAN VISUAL
4.1 Analisis STRATEGI PERANCANGAN................................................ 91
4.1.1 Analisis Komunikasi..................................................................... 91
4.1.2 Analisis Strategi Kreatif................................................................92
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
xi
4.1.3 Analisis Perancangan Visual........................................................ 93
4.2 ANALISA STRATEGI PERANCANGAN MEDIA............................. 93
4.2.1 Above the Line.............................................................................. 93
4.3 ELEMEN PERANCANGAN............................................................... 103
4.3.1 Jenis Huruf.................................................................................. 103
4.3.2 Warna.......................................................................................... 104
4.3.3 Layout......................................................................................... 106
BAB V PENUTUP
5.1 Kesimpulan.............................................................................................109
5.2 Saran.......................................................................................................110
DAFTAR PUSTAKA...........................................................................................xviii
LAMPIRAN.......................................................................................................... xx
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
xii
DAFTAR GAMBAR
Gambar 2.1 Contoh Gambar warna primer............................................................ 11
Gambar 2.2 Contoh Gambar warna sekunder.........................................................12
Gambar 2.3 Contoh Gambar warna tersier.............................................................12
Gambar 2.4 Inteaction Nodal Plot......................................................................... 16
Gambar 2.5 Interaction Modulated Plot................................................................ 16
Gambar 2.6 Interaction Open Plot......................................................................... 17
Gambar 2.7 View Only Map................................................................................... 20
Gambar 2.8 Interactive Static Map........................................................................ 21
Gambar 2.9 Animated Map.................................................................................... 22
Gambar 2.10 Interactive Static Map...................................................................... 22
Gambar 2.11 Alur interaksi menu 1....................................................................... 24
Gambar 2.12 Alur interaksi menu 2....................................................................... 25
Gambar 2.13 Alur interaksi menu 3....................................................................... 25
Gambar 2.14 Tampilan desain asli dan abstrak......................................................26
Gambar 2.15 Roda Warna...................................................................................... 27
Gambar 2.16 Keteraturan elemen...........................................................................28
Gambar 2.17 Area negatif...................................................................................... 29
Gambar 2.18 Pergerakan 1..................................................................................... 30
Gambar 2.19 Pergerakan 2..................................................................................... 30
Gambar 2.2 Pergerakan mata 1.............................................................................. 31
Gambar 2.21 Pergerakan mata 2............................................................................ 31
Gambar 2.22 Keseimbangan.................................................................................. 32
Gambar 2.23 Angka Ganjil.................................................................................... 33
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
xiii
Gambar 2.24 Pembagian Gambar.......................................................................... 34
Gambar 2.25 Perpotongan...................................................................................... 34
Gambar 2.26 Tipografi........................................................................................... 35
Gambar 2.27 Huruf Serif Georgia..........................................................................35
Gambar 2.28 Huruf Sans Serif Arial...................................................................... 36
Gambar 2.29 Huruf Script English......................................................................... 36
Gambar 2.30 Ilustrasi Realistis.............................................................................. 37
Gambar 2.31 Ilustrasi Dekoratif............................................................................. 38
Gambar 2.32 Ilustrasi Surealistis........................................................................... 38
Gambar 2.33 Peta Planimetri................................................................................. 39
Gambar 2.34 Peta Stereometri............................................................................... 40
Gambar 2.35 Peta Digital....................................................................................... 40
Gambar 2.36 Aspek rasio 4:3................................................................................. 42
Gambar 2.37 Aspek rasio 16:9............................................................................... 43
Gambar 2.38 Logo lama Transjakarta.................................................................... 44
Gambar 2.39 Logo baru Transjakarta.....................................................................45
Gambar 3.1 Survey 1.............................................................................................. 49
Gambar 3.2 Survey 2.............................................................................................. 50
Gambar 3.3 Survey 3.............................................................................................. 51
Gambar 3.4 Survey 4.............................................................................................. 51
Gambar 3.5 Survey 5.............................................................................................. 52
Gambar 3.6 Survey 6.............................................................................................. 53
Gambar 3.7 Survey 7.............................................................................................. 53
Gambar 3.8 Survey 8.............................................................................................. 54
Gambar 3.9 Survey 9.............................................................................................. 55
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
xiv
Gambar 3.10 Survey 10.......................................................................................... 56
Gambar 3.11 Survey 11.......................................................................................... 57
Gambar 3.12 Survey 12.......................................................................................... 58
Gambar 3.13 Survey 13.......................................................................................... 59
Gambar 3.14 Survey 14.......................................................................................... 60
Gambar 3.15 Survey 15.......................................................................................... 60
Gambar 3.16 Homepage Transjakarta.................................................................... 61
Gambar 3.17 Peta Transjakarta pada Website........................................................ 62
Gambar 3.18 Informasi mengenai bis Transjakarta............................................... 62
Gambar 3.19 Map Transjakarta.............................................................................. 63
Gambar 3.20 Petunjuk arah koridor 1.................................................................... 63
Gambar 3.21 Petunjuk arah koridor 1.................................................................... 63
Gambar 3.22 Grafik perkembangan jumlah penumpang Transjakarta.................. 64
Gambar 3.23 Home Screen Dubai Metro............................................................... 65
Gambar 3.24 Apikasi Dubai Metro........................................................................ 66
Gambar 3.25 Menu Aplikasi Dubai Metro.............................................................66
Gambar 3.26 Menu Aplikasi Milan Metro............................................................. 66
Gambar 3.27 Menu Aplikasi Milan Metro............................................................. 66
Gambar 3.28 Skema alur interaksi......................................................................... 68
Gambar 3.29 Layout menu awal.............................................................................69
Gambar 3.30 Layout menu logo............................................................................. 69
Gambar 3.31 Layout menu cari rute....................................................................... 70
Gambar 3.32 Reference icon Map.......................................................................... 71
Gambar 3.33 Reference icon corridor....................................................................71
Gambar 3.34 Reference icon search.......................................................................71
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
xv
Gambar 3.35 Reference icon home, about, help.....................................................72
Gambar 3.36 Reference 1....................................................................................... 72
Gambar 3.37 Reference 2....................................................................................... 72
Gambar 3.38 Reference 3....................................................................................... 73
Gambar 3.39 Reference 4....................................................................................... 73
Gambar 3.40 Reference 5....................................................................................... 74
Gambar 3.41 Eksplorasi menu icon....................................................................... 74
Gambar 3.42 Eksplorasi menu help....................................................................... 75
Gambar 3.43 Eksplorasi menu about..................................................................... 75
Gambar 3.44 Eksplorasi menu home......................................................................75
Gambar 3.45 icon menu......................................................................................... 76
Gambar 3.46 icon menu pop up............................................................................. 76
Gambar 3.47 Modulated plot................................................................................. 77
Gambar 3.48 Eksplorasi splash screen.................................................................. 78
Gambar 3.49 Splash screen.................................................................................... 79
Gambar 3.50 Eksplorasi menu 1............................................................................ 79
Gambar 3.51 Eksplorasi menu 2............................................................................ 80
Gambar 3.52 Eksplorasi menu 3............................................................................ 80
Gambar 3.53 Menu home....................................................................................... 81
Gambar 3.54 Eksplorasi hasil menu map............................................................... 81
Gambar 3.55 Eksplorasi menu koridor 1............................................................... 82
Gambar 3.56 Eksplorasi menu koridor 2................................................................82
Gambar 3.57 Menu koridor.................................................................................... 83
Gambar 3.58 Eksplorasi menu cari rute................................................................. 84
Gambar 3.59 Menu cari rute.................................................................................. 84
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
xvi
Gambar 3.60 Hasil pencarian map......................................................................... 85
Gambar 3.61 Eksplorasi menu koridor dan hasil pencarian...................................85
Gambar 3.62 Menu cari rute dan hasil pencarian...................................................86
Gambar 3.63 Eksplorasi menu help........................................................................87
Gambar 3.64 Menu help......................................................................................... 87
Gambar 3.65 Eksplorasi menu about..................................................................... 88
Gambar 3.66 Menu about.......................................................................................88
Gambar 3.67 Menu about Transjakarta..................................................................89
Gambar 3.68 Menu about application................................................................... 90
Gambar 4.1 Splash screen Transjakarta................................................................. 94
Gambar 4.2 Menu pada aplikasi dan interaksi....................................................... 95
Gambar 4.3 Hasil menu peta..................................................................................96
Gambar 4.4 Hasil menu koridor........................................................................... ..97
Gambar 4.5 Hasil menu cari rute........................................................................... 98
Gambar 4.6 Menu pop up pada menu peta.............................................................99
Gambar 4.7 Menu about.......................................................................................100
Gambar 4.8 Menu about tentang Transjakarta.................................................... 101
Gambar 4.9 Menu about tentang aplikasi............................................................ 102
Gambar 4.10 Menu help....................................................................................... 103
Gambar 4.11 Font yang digunakan...................................................................... 104
Gambar 4.12 Warna yang digunakan................................................................... 105
Gambar 4.13 Warna koridor 1-3.......................................................................... 105
Gambar 4.14 Warna koridor 4-6.......................................................................... 105
Gambar 4.15 Warna koridor 7-9.......................................................................... 105
Gambar 4.16 Warna koridor 10-12...................................................................... 105
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013
xvii
Gambar 4.17 Grid splash screen.......................................................................... 106
Gambar 4.18 Grid splash screen.......................................................................... 107
Gambar 4.19 Grid header 1................................................................................. 107
Gambar 4.20 Grid header 2................................................................................. 107
Gambar 4.21 Grid list koridor 1........................................................................... 108
Gambar 4.22 Grid list koridor 2........................................................................... 108
Perancangan Peta Digital..., Dwi Kurnianingrum Rahayuni, FSD UMN, 2013