lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1805/1/halaman awal.pdf · iii...

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 MEDIA INTERAKTIF UNTUK APLIKASI WISATA KULINER KOTA SOLO

LAPORAN TUGAS AKHIR

Ditulis sebagai syarat untuk memperoleh gelar Sarjana Seni (S.Sn)

Nama : Agnes Retno Prima Hapsari

NIM : 09120210305

Program Studi : Desain Komunikasi Visual

Fakultas : Seni & Desain

UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2013

Perancangan Media..., Agnes Retno, FSD UMN, 2013

ii

Ketua Program Studi

Desi Dwi Kristanto, M.Ds.

Penguji

Desi Dwi Kristanto, M.Ds.

Ketua Sidang

Annita, S.Pd., M.A.

HALAMAN PENGESAHAN TUGAS AKHIR PERANCANGAN MEDIA INTERAKTIF UNTUK APLIKASI

WISATA KULINER KOTA SOLO

Oleh


NIM : 09120210305


Fakultas : Seni & Desain

Tangerang, 21 Agustus 2013

Dosen Pembimbing

Yusup S. Martyastiadi, S.T., M.Inf.Tech.


iii

KATA PENGANTAR

Sungguh merupakan anugerah dari Tuhan yang Maha Esa bagi penulis untuk

memiliki kesempatan menulis laporan Tugas Akhir yang berjudul

"PERANCANGAN MEDIA INTERAKTIF UNTUK APLIKASI WISATA

KULINER KOTA SOLO" ini. Laporan Tugas Akhir ini diajukan kepada Program

Studi Desain Komunikasi Visual, fakultas Seni dan Desain Universitas Multimedia

Nusantara.

Terselesaikannya laporan Tugas Akhir ini tidak lepas dari kerja sama banyak

pihak. Penulis ingin mengucapkan terima kasih kepada:

1. Desi Dwi Kristanto, M.Ds. selaku Ketua Program Studi Desain Komunikasi

Visual.

2. Yusup Sigit Martyastiadi, S.T., M.Inf.Tech. selaku Dosen Pembimbing yang

telah banyak memberi masukan dalam pembuatan karya dan penulisan

laporan Tugas Akhir ini.

3. Keluarga, terutama mama dan papa yang mengingatkan dan menyemangati

untuk menyelesaikan Tugas Akhir ini tepat pada waktunya.

4. Ekki Barli, Christian Lie, Mario Wijaya, Yogi dan Cracker sebagai pihak

yang telah banyak membantu dalam memberi masukan untuk Tugas Akhir ini.

5. Thres Karania, Danny Hartono, Derry Arianto, Krisna Leonardi, Maxi Trois,

Irvan Dharmaputra dan Amanda Iswandari yang setia menyemangati.


iv

Akhir kata penulis berharap laporan tugas akhir ini dapat bermanfaat bagi para

pembaca yang mengembangkan teknologi informasi dan komunikasi.


Penulis


v

PERNYATAAN TIDAK MELAKUKAN PLAGIAT TUGAS AKHIR PERANCANGAN MEDIA INTERAKTIF UNTUK

APLIKASI WISATA KULINER KOTA SOLO

Yang bertanda tangan di bawah ini:


NIM : 09120210305


Peminatan : Animasi

Judul Laporan Tugas Akhir : PERANCANGAN MEDIA

INTERAKTIF UNTUK APLIKASI WISATA

KULINER KOTA SOLO

Dengan ini penulis menyatakan bahwa Tugas Akhir ini adalah hasil karya saya

sendiri dan tidak mengambil bahan hasil penelitian baik untuk satu gelar atau diploma

yang sudah ada pada suatu universitas maupun hasil penelitian lain. Dalam tugas

akhir ini, penulis tidak mengambil bahan atau rujukan dari pihak lain, kecuali yang

telah disebutkan dalam daftar pustaka. Saya bersedia menerima sanksi bila terbukti

melakukan plagiat. Saya bersedia menerima sanksi jika dikemudian hari terbukti

ditemukan kecurangan maupun penyimpangan baik dalam pelaksanaan dan penulisan

tugas akhir.


Agnes Retno Prima Hapsari


vi

ABSTRAKSI Membuat desain sebuah aplikasi interaktif yang berisi informasi kuliner berbasis Flash dengan wilayah Kota Solo sebagai objeknya. Pembuatan desain ini mengacu pada tingginya pemakaian media interaktif sebagai salah satu cara komunikasi manusia dengan teknologi yang menghasilkan suatu fungsi pertukaran informasi. Proses pembuatan media interaktif ini hanya sampai pada perancangan sementara dengan format *.swf yang dapat diunggah ke dalam situs dan dimasukkan ke dalam CD. Pengguna dapat menggunakan aplikasi dan langsung mengakses informasi yang diinginkan berkaitan dengan kuliner. Informasi yang diberikan berupa nama tempat, gambar, jam operasional, dan nomor telepon. Kata kunci: aplikasi interakif, pengguna, desain layout, kuliner Kota Solo


vii

ABSTRACT This final project is designing and producing an interactive culinary application. This application is based on Solo’s culinary using Flash software. As we know, an interactive media design has been developed based on intergration of design and human computer interaction. The project is published to *.swf format, so that could be used through the Internet and execuble CD.

Users could use the application and directly access on demand information about the Solo’s culinary. The information content menu, recipe, food illustration, operation hours, phone number, location and the place itself. Keywords: interactive application, user, layout design, Solo’s culinary


viii

DAFTAR ISI

KATA PENGANTAR ................................................................................................. iii

ABSTRAKSI ............................................................................................................... vi

ABSTRACT ................................................................................................................ vii

DAFTAR ISI .............................................................................................................. viii

TABEL GAMBAR ...................................................................................................... xi

DAFTAR TABEL ....................................................................................................... xv

BAB I PENDAHULUAN ............................................................................................. 1

1.1. Latar Belakang ................................................................................................... 1

1.2. Rumusan Masalah .............................................................................................. 3

1.3. Batasan Masalah ................................................................................................. 4

1.4. Tujuan Tugas Akhir............................................................................................ 4

1.5. Manfaat Perancangan ......................................................................................... 5

1.6. Metode Perancangan .......................................................................................... 5

1.7. Sistematika Penulisan ......................................................................................... 6

BAB II TELAAH LITERATUR .................................................................................. 8

2.1. Interaktif ............................................................................................................ 8

2.2. Definisi Multimedia ......................................................................................... 13

2.3. Definisi New Media ......................................................................................... 14

2.4. Media Komputer .............................................................................................. 15

2.5. Desain Interaktif ............................................................................................... 15

2.6. Elemen Desain Interaktif .................................................................................. 19

2.6.1. Prinsip Desain ............................................................................................... 19

2.6.2. Teks ............................................................................................................... 20

2.6.3. Warna ............................................................................................................ 20

2.5.4. Skema Warna ................................................................................................ 27

2.5.5. Pengaruh Warna ............................................................................................ 27


ix

2.7. Interface .......................................................................................................... 33

2.8. Navigasi ............................................................................................................ 39

2.8.1. Symbol dan Ikon ............................................................................................ 43

2.9. Aspek Psikologis .............................................................................................. 43

2.10. Windows ......................................................................................................... 47

2.11. Sejarah Media Interaktif ................................................................................. 47

BAB III METODOLOGI ............................................................................................ 50

3.1. Gambaran Umum ............................................................................................. 50

3.2. Praproduksi ....................................................................................................... 50

3.3. Metode Survei .................................................................................................. 51

3.3.1. Observasi ....................................................................................................... 51

3.3.2. Data Usia ....................................................................................................... 52

3.3.3 Jenis Kelamin ................................................................................................. 52

3.3.4. Data Daerah Asal .......................................................................................... 53

3.3.5. Data Tempat Tinggal ..................................................................................... 53

3.3.6. Data Penggunaan Gadget .............................................................................. 54

3.3.7. Data Tempat Makan yang Paling Dicari ....................................................... 54

3.3.8. Data kesulitan pencarian informasi kuliner makanan khas ........................... 55

3.3.9. Data Informasi yang Dibutuhkan .................................................................. 55

3.3.10. Data Media Informasi yang Dibutuhkan ..................................................... 56

3.3.11. Data Pilihan Layout ..................................................................................... 56

3.4. Penyusunan Konsep ........................................................................................ 57

3.4.1. Pemetaan ....................................................................................................... 59

3.4.2. Pola Interaksi ................................................................................................. 61

3.4.3. Wireframe ...................................................................................................... 64

3.4.4. Sketsa ............................................................................................................ 65

3.4.5. Konsep Warna ............................................................................................... 67

3.5. Pengembangan Desain ..................................................................................... 69


x

3.6. Navigasi ............................................................................................................ 72

3.7. Pascaproduksi ................................................................................................... 73

BAB IV ANALISIS .................................................................................................... 74

4.1. Desain Interface ............................................................................................... 74

4.2. Site Map ............................................................................................................ 74

4.3. Interface ........................................................................................................... 75

4.4. Animasi ............................................................................................................ 85

BAB V PENUTUP ..................................................................................................... 87

5.1. Kesimpulan ....................................................................................................... 87

5.2. Saran ................................................................................................................. 88

DAFTAR PUSTAKA ................................................................................................ xvi

LAMPIRAN ............................................................................................................. xviii


xi

TABEL GAMBAR

Gambar 2.1. Architecture of Interactive System .........................................................8

Gambar 2.2. Narrative ................................................................................................10

Gambar 2.3. Nodal Plot ..............................................................................................12

Gambar 2.4. Modulated Plot ......................................................................................12

Gambar 2.5. Open Plot............................................................................................... 13

Gambar 2.6. Jam Alarm Ayam ...................................................................................16

Gambar 2.7. RYB...................................................................................................... 21

Gambar 2.8. RGB ......................................................................................................21

Gambar 2.9. CMYK ..................................................................................................22

Gambar 2.10. Color Wheel........................................................................................ 23

Gambar 2.11. Warna Primer ......................................................................................23

Gambar 2.12. Warna Sekunder...................................................................................24

Gambar 2.13. Warna Tertier.......................................................................................24

Gambar 2.14. Warm Color dan Cool Color ..............................................................24

Gambar 2.15. Hot Color ............................................................................................25

Gambar 2.16. Warm Color ........................................................................................25

Gambar 2.17. Dark Color .........................................................................................26

Gambar 2.18. Cool Color ..........................................................................................26

Gambar 2.19. Achromatic Scheme ............................................................................27

Gambar 2.20. Analogous Scheme .............................................................................27

Gambar 2.21. Complementary Scheme ....................................................................27


xii

Gambar 2.22. Margin .................................................................................................31

Gambar 2.23. Sistem Grid Vertikal............................................................................ 31

Gambar 2.24. Aplikasi Grid Vertikal......................................................................... 32

Gambar 2.25. Urutan Membaca .................................................................................32

Gambar 2.26. Text-based User Interface................................................................... 34

Gambar 2.27. Graphical User Interface .....................................................................34

Gambar 2.28. Elemen Graphical User Interface ........................................................35

Gambar 2.29. Situs Sony ...........................................................................................41

Gambar 2.30. Navigasi yang Mengurangi Kredibilitas............................................. 42

Gambar 2.31. Symbol dan Icon .................................................................................43

Gambar 2.32. Objek Pokok dan Latar Belakang .......................................................45

Gambar 2.33. Resolusi............................................................................................... 47

Gambar 2.34. Lukisan Goa........................................................................................48

Gambar 3.1. Media Interactive Workflow ...............................................................50

Gambar 3.2. Pemetaan Aplikasi Interaktif ...............................................................60

Gambar 3.3. Pola Interaksi....................................................................................... 61

Gambar 3.4. Aplikasi Pola Interaksi......................................................................... 62

Gambar 3.5. Sistem Interaktif ..................................................................................63

Gambar 3.6. Wireframe.............................................................................................64

Gambar 3.5. Logo Solo ............................................................................................65

Gambar 3.6. Logo Aplikasi Interaktif...................................................................... 65

Gambar 3.7. Sketsa Akhir .......................................................................................65

Gambar 3.8. Pilihan Warna...................................................................................... 65


xiii

Gambar 3.9.Alternatif Pertama Halaman Sampul ....................................................66

Gambar 3.10.Alternatif Kedua Halaman Sampul................................................... 67

Gambar 3.11.Alternatif Ketiga Halaman Sampul ....................................................69

Gambar 3.12. Bagian Tombol dalam Flash.............................................................. 70

Gambar 3.13. Action Script Tombol .......................................................................71

Gambar 3.14. Perintah Publish................................................................................. 72

Gambar 3.15. Action Script Tombol 7.....................................................................73

Gambar 3.16. Perintah Publish ................................................................................73

Gambar 4.1. Site Map Aplikasi Kuliner....................................................................74

Gambar 4.2. Logo Aplikasi Kuliner .........................................................................75

Gambar 4.3. Halaman Loading ................................................................................76

Gambar 4.4. Latar Belakang .....................................................................................77

Gambar 4.5. Gambar Makanan ................................................................................77

Gambar 4.6. Gambar Makanan................................................................................ 78

Gambar 4.7. Cabuk Rambak ....................................................................................78

Gambar 4.8. Isi Aplikasi Interaktif ..........................................................................78

Gambar 4.9. Transisi pada Halaman Menu.............................................................. 79

Gambar 4.10. Aplikasi Prinsip Interaktif..................................................................80

Gambar 4.11. Menu Utama...................................................................................... 81

Gambar 4.12. Animasi Tombol............................................................................... 81

Gambar 4.13. Halaman Makanan ............................................................................82

Gambar 4.14. Halaman Tengkleng.......................................................................... 82

Gambar 4.15. Halaman Minuman............................................................................ 83


xiv

Gambar 4.16.Halaman Informasi ........................................................................83

Gambar 4.17.Halaman Resep ............................................................................. 84

Gambar 4.18. Tombol Navigasi Halaman Isi ......................................................84

Gambar 4.19. Animasi Asap pada Makanan........................................................ 85


xv

DAFTAR TABEL

Tabel 3.1. Usia dari Sumber Isian Kuisioner.............................................................. 52

Tabel 3.2. Jenis kelamin............................................................................................. 53

Tabel 3.3. Tabel Daerah Asal .....................................................................................53

Tabel 3.4. Tempat Tinggal......................................................................................... 53

Tabel 3.5. Pengguna banyak Gadget ..........................................................................54

Tabel 3.6. Data Tempat Makan.................................................................................. 54

Tabel 3.7. Tabel Kesulitan Pencarian Kuliner ...........................................................55

Tabel 3.8. Tabel Informasi yang Dibutuhkan ............................................................55

Tabel 3.9. Data Informasi yang Dibutuhkan ..............................................................56

Tabel 3.10. Data Pilihan Layout..............................................................................................56


lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1805/1/halaman awal.pdf · iii...

Documents