Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1985/1/HALAMAN AWAL.pdf · 2. Yusup Sigit Martyastiadi, S.T.,M.Inf.Tech, selaku dosen pembimbing yang telah memberikan

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.

DESAIN GUI DAN INTERAKTIVITAS PADA ILUSTRASI

INTERAKTIF “ LIFE AT THE FREAKSHOW”

LAPORAN TUGAS AKHIR

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

Nama : Willy Yana Tan

Nim : 10120210252

Program Studi : Desain Komunikasi Visual

Fakultas : Seni & Desain

UNIVERSITAS MULTIMEDIA NUSANTARA

TANGGERANG

2014

Desain Gui..., Willy Yana Tan, FSD UMN, 2014

ii

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT

Saya yang bertanda tangan di bawah ini :

Nama : Willy Yana Tan

NIM : 101202101252

Program Studi : Desain Komunikasi Visual

Fakultas : Seni dan Desain

Universitas Multimedia Nusantara

Judul Tugas Akhir :

DESAIN GUI DAN INTERAKTIVITAS PADA ILUSTRASI INTERAKTIF

“LIFE AT THE FREAKSHOW”

Dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan

belum pernah diajukan untuk mendapat gelar sarjana, baik di Universitas

Multimedia Nusantara maupun di perguruan tinggi lainnya.

Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan

pelaksanaan 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


iii

gelar (S.Sn.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang

berlaku di Universitas Multimedia Nusantara.

Tangerang, 7 Januari 2014

Willy Yana Tan


iv


v

KATA PENGANTAR

Puji syukur penulis panjatkan kepada Tuhan yang Maha Esa yang telah

memberikan rahmat dan karunianya, sehingga penulis dapat menyelesaikan

laporan tugas akhir dengan judul “ Desain GUI dan Interaktivitas pada Ilustrasi

Interaktif “Life at the Freakshow” dengan baik.

Ilustrasi interaktif selain dapat menyampaikan informasi kepada pengguna,

pengguna juga mampu meresponkannya. Hal tersebut membuat pengguna dapat

mengakses lebih dari satu informasi dan dapat berinteraksi dengan media

tersebut.Ilustrasi interaktif sangat pengaruh dengan dunia pendidikan. Masyarakat

lebih tertarik dengan media yang memiliki tampilan visual gambar dibandingkan

dengan media yang berbasis teks.

Diharapkan dengan laporan ini, masyarakat lebih mengetahui tentang

bagaimana desain ilustrasi interaktif yang dapat menarik perhatian pengguna,

mampu memberikan informasi yang penting, beserta hal yang perlu diperhatikan

ketika desain ilustrasi interaktif . Salah satu contoh masalah yang ditemukan

penulis dalam menyelesaikan tugas akhir ini yaitu perancangan pola interaksi

yang kurang matang dapat menyebabkan interaktivitas menjadi tidak

menarik.Sehingga penulis menyarankan untuk mencoba menggunakan produk

ilustrasi interaktif terlebih dahulu sebelum masuk ke tahap praproduksi.

Dalam menyelesaikan laporan tugas akhir ini, penulis mendapat bantuan

dari berbagai pihak. Penulis ingin mengucapkan terima kasih atas bimbingan dan

masukan dari :


vi

1. Desi Dwi Kristanto, S.Ds.,M.Ds., selaku Ketua program studi Desain

Komunikasi Visual dan dosen Desain Komunikasi Visual yang telah

memberi masukan tentang karya tugas akhir.

2. Yusup Sigit Martyastiadi, S.T.,M.Inf.Tech, selaku dosen pembimbing

yang telah memberikan bimbingan dan arahan di dalam menyusun tugas

akhir ini.

3. Edwin Hartono Sutiono, M.A., selaku dosen Desain Komunikasi Visual

yang telah memberi masukan terhadap laporan tugas akhir.

4. Vania Angelique, selaku desainer karakter pada projek tugas akhir yang

juga merupakan rekan kerja dalam menyelesaikan projek secara bersama.

Demikian yang ingin disampaikan penulis dalam kata pengantar ini, penulis

menyadari bahwa tugas akhir masih kurang sempurna.Sehingga penulis

mengharapkan masukan yang bersifat membangun kesempurnaan tugas akhir ini.

Tangerang, 7 Januari 2014

Willy Yana Tan


vii

ABSTRAKSI

Manusia memerlukan interaksi antara satu dengan yang lain untuk perkembangan

dan pembentukan kepribadian. Perkembangan dimasa kecil merupakan salah satu

hal yang perlu diperhatikan walaupun hanya terhadap objek kecil. Life at the

Freakshow merupakan animasi interaktifyang dibuat dengan target penonton anak

perempuan berusia enam hingga delapan tahun. Animasi interaktif ini dapat

memberi pengetahuan dan informasi.

Pengguna mampu melakukan interaksi dengan media interaktif. Kemajuan

teknologi mampu meningkatkan efesiensi dan efektivitas pada media

pembelajaran interaktif. Media interaktif menjadi bagian integral dari dunia

pendidikan, sehingga sangat sulit untuk membayangkan tanpa media interaktif

berbasis komputer dan elektronik lainnya yang sangat membantu di dunia

pendidikan. Media interaktif yang mudah digunakan akan menarik perhatian

pengguna.

Kata Kunci : Media Interaktif, desain tampilan, interaksi, target pemain.


ABSTRACT

Human need interaction with each other for grow and develop an identity. The

development of a child is one thing we should know even for small object. Life at

the Freakshow is interactive animation was made with target audience six until

eight years old young girl. This interactive animation able to provide knowledge

and information.

Users are able to interaction with interactive media. Advances in

technology are able to improve efficiency and effectiveness in interactive learning

media. Interactive media become anwhole part of the educational world, so it is

hard to imagine without interactive media komputer based on and other

electronics that are very helpful for education. Interactive media is easy to use, so

it will attract more user attention.

Keywords: Interactive Media, display design, interaction,target audience.


ix

DAFTAR ISI

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ..................... ii

HALAMAN PENGESAHAN TUGAS AKHIR .... Error! Bookmark not defined.

KATA PENGANTAR ........................................................................................... v

ABSTRAKSI ........................................................................................................ vii

ABSTRACT ......................................................................................................... viii

DAFTAR ISI ......................................................................................................... ix

DAFTAR GAMBAR ........................................................................................... xii

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

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

1.2. Rumusan Masalah .................................................................................. 2

1.3. Batasan Masalah ..................................................................................... 3

1.4. Tujuan Perancangan .............................................................................. 3

1.5. Metode Pengumpulan Data ................................................................... 3

1.6. Skematika Perancangan ........................................................................ 4

BAB II TINJAUAN PUSTAKA .......................................................................... 6

2.1. Media Interaktif ..................................................................................... 6

2.1.1. Sejarah dan perkembangan ............................................................... 8

2.2. Ilustrasi .................................................................................................. 12

2.3. Desain Media Interaktif ....................................................................... 13


x

2.3.1. Interaktivitas .................................................................................... 15

2.3.2. Pola Interaksi ................................................................................... 16

2.4. Graphical Users Interface ( GUI ) ...................................................... 19

2.4.1. Layout ............................................... Error! Bookmark not defined.

2.4.2. Animasi ........................................................................................... 28

2.5. Freakshow .............................................................................................. 29

BAB IIIMETODOLOGI .................................................................................... 33

3.1. Gambaran Umum ................................................................................. 34

3.1.1. Sinopsis ........................................................................................... 35

3.1.2. Posisi Penulis .................................................................................. 36

3.2. Praproduksi .......................................................................................... 36

3.2.1. Pola Interaksi ................................................................................... 37

3.2.2. Penyusunan Konsep ........................................................................ 42

3.2.3. Pembuatan Sketsa............................................................................ 47

3.3. Konsep Warna ...................................................................................... 52

3.4. Produksi ................................................................................................ 54

3.4.1. Desain Graphical User Interface (GUI) .......................................... 54

3.5. Navigasi ................................................................................................. 61

3.6. Pascaproduksi ....................................................................................... 63

BAB IVANALISIS .............................................................................................. 64


xi

4.1. Desain Tampilan ................................................................................... 64

4.2. Pola Interaksi ........................................................................................ 64

4.3. Analisis Tampilan ................................................................................. 67

4.4. Interaktivitas ......................................................................................... 72

BAB VPENUTUP ................................................................................................ 76

5.1. Kesimpulan ........................................................................................... 76

5.2. Saran ...................................................................................................... 77

DAFTAR PUSTAKA .......................................................................................... xii


xii

DAFTAR GAMBAR

Gambar 2.1. Cairn ................................................................................................ 9

Gambar 2.2. Morse Code Transmitter .............................................................. 10

Gambar 2.3. WordStar ........................................................................................ 11

Gambar 2.4. Nodal Plot ....................................................................................... 17

Gambar 2.5. Modulated Plot ............................................................................... 17

Gambar 2.6. Open Plot ........................................................................................ 18

Gambar 2.7.Chaotic Screen ................................................................................ 20

Gambar 2.8. Internal Consistency ...................................................................... 21

Gambar 2.9. External Consistensy ..................................................................... 21

Gambar 2.10. Real World Consistency ............................................................... 22

Gambar 2.11. Relationship ................................................................................. 23

Gambar 2.12. Navigability .................................................................................. 24

Gambar 2.13. Simplicity ...................................................................................... 24

Gambar 2.14. Clarity ........................................................................................... 25

Gambar 2.15. Percillia Berjano .......................................................................... 30

Gambar 2.16. Boy Fishes .................................................................................... 31

Gambar 3.1. Proses Pembuatan Ilustrasi Interaktif ........................................ 34

Gambar 3.2. Amy dan Jimmy ............................................................................ 37

Gambar 3.3. Anak Mandiri ................................................................................ 38

Gambar 3.4. Konsep Pola Interaksi .................................................................. 40

Gambar 3.5. Site Map pada Life at the Freakshow ........................................... 41

Gambar 3.6. Pemetaan Ilustrasi Interaktif....................................................... 44


file:///H:/Laporan/bab%201-bab5.docx%23_Toc380581696

xiii

Gambar 3.7. Referensi Tampilan ...................................................................... 45

Gambar 3.8. Referensi Desain Tombol ............................................................. 46

Gambar 3.9. Wireframe Media Interaktif Live at the Freakshow ................... 46

Gambar 3.10. Sketsa Tombol Permainan ......................................................... 47

Gambar 3.11. Alternatif Tombol ....................................................................... 48

Gambar 3.12. Sketsa Tampilan Menu Utama .................................................. 49

Gambar 3.13. Sketsa Tampilan Pemilihan Interaktif ..................................... 50

Gambar 3.14. Sketsa Tampilan Permaianan .................................................... 50

Gambar 3.15. Sketsa Tampilan Instruksi ......................................................... 51

Gambar 3.16. Warna Background pada Tampilan Permainan ..................... 52

Gambar 3.17. Tombol Play and Quit ................................................................. 55

Gambar 3.18. Tombol Next and Previous ......................................................... 56

Gambar 3.19. Tombol Permainan ..................................................................... 56

Gambar 3.20. Tampilan Menu Utama .............................................................. 57

Gambar 3.21. Tampilan Pemainan Cotton Candy .......................................... 58

Gambar 3.22. Tampilan Permainan The Claw ................................................ 58

Gambar 3.23. Tampilan Permainan Duck Shooter ......................................... 59

Gambar 3.24. Tampilan Throw the Bottle........................................................ 60

Gambar 3.25. Tampilan Instruksi Permainan ................................................. 61

Gambar 3.26. Bagian Tombol dalam Flash ...................................................... 62

Gambar 3.27. Script Tombol ............................................................................. 62

Gambar 3.28. Perintah Publishing .................................................................... 63

Gambar 4.1. Bagan Isi Halaman Ilustrasi Interaktif Greta ........................... 65


xiv

Gambar 4.2. Bagan Isi Halaman Ilustrasi Interaktif the Hunchboy ............ 66

Gambar 4.3. Tampilan Menu Utama ................................................................ 67

Gambar 4.4. Tombol Navigasi ........................................................................... 68

Gambar 4.5. Perubahan Keyframe pada Tombol Navigasi ............................ 68

Gambar 4.6. Perubahan Desain pada Tampilan Pemilihan Interaktif .......... 69

Gambar 4.7. Tampilan Permainan .................................................................... 70

Gambar 4.8. Perubahan Desain Tombol .......................................................... 71

Gambar 4.9. Gerakan Transisi Tampilan Permainan ..................................... 72

Gambar 4.10. Pilihan Interaktif Berupa Enviroment pada Halaman Greta 73

Gambar 4.11. Interaktivitas Permainan Cotton Candy ................................... 73

Gambar 4.12. Animasi Tombol .......................................................................... 74

Gambar 4. 13. Pilihan Interaktif Berupa EnviromentPada halaman The

Hunchboy ............................................................................................................. 74

Gambar 4.14. Interaktivitas Permainan ........................................................... 75


file:///H:/Laporan/bab%201-bab5.docx%23_Toc380581726file:///H:/Laporan/bab%201-bab5.docx%23_Toc380581727file:///H:/Laporan/bab%201-bab5.docx%23_Toc380581728file:///H:/Laporan/bab%201-bab5.docx%23_Toc380581730

Documents

Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1985/1/HALAMAN AWAL.pdf · 2. Yusup Sigit Martyastiadi, S.T.,M.Inf.Tech, selaku dosen pembimbing yang telah memberikan