PERANCANGAN PETA DIGITAL INTERAKTIF TRANSJAKARTA

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

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


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.


v

Penulis berharap agar laporan tugas akhir ini dapat menjadi sarana

membagi ilmu dan membagi pengalaman bagi orang lain.

Tangerang, 29 Juli 2013

Penulis


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


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.


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


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


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


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


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


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


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


xv

Gambar 3.35 Reference icon home, about, help.....................................................72

Gambar 3.36 Reference 1....................................................................................... 72





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


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.16 Warna koridor 10-12...................................................................... 105


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 INTERAKTIF TRANSJAKARTA

Documents

Transcript of PERANCANGAN PETA DIGITAL INTERAKTIF TRANSJAKARTA