Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1985/1/HALAMAN AWAL.pdf · 2....
Transcript of Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1985/1/HALAMAN AWAL.pdf · 2....
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
iv
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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 :
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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.
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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.
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
-
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
Desain Gui..., Willy Yana Tan, FSD UMN, 2014
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