PERANCANGAN INTERACTIVE WEBSTORY TENTANG PERILAKU TIDAK MENGHAKIMI UNTUK ANAK BERUSIA 7-12 TAHUN

(1)

PERANCANGAN INTERACTIVE WEBSTORY TENTANG PERILAKU TIDAK MENGHAKIMI

UNTUK ANAK BERUSIA 7-12 TAHUN

LAPORAN TUGAS AKHIR

Grace Imanda Gandi

00000017058

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2022

(2)

i

Perancangan Webstory tentang Perilaku Tidak Menghakimi untuk Anak Berusia 7-12 tahun, Grace Imanda Gandi, Universitas Multimedia Nusantara

PERANCANGAN INTERACTIVE STORYTELLING TENTANG PERILAKU TIDAK MENGHAKIMI

UNTUK ANAK BERUSIA 7-12 TAHUN

LAPORAN TUGAS AKHIR

Diajukan sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Desain (S.Ds.)

Grace Imanda Gandi 00000017058

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2022

(3)

ii

(4)

iii

Ketua Sidang

Lalitya Talitha Pinasthika, M.Ds.

0308078801/E034812

Penguji

Ken Natasha Violeta, S.Sn., M.Ds.

0309089201/E066120 Pembimbing

Fonita Theresia Yoliando, S.Ds., M.A.

E043487/0311099302

Ketua Program Studi Desain Komunikasi Visual

Mohammad Rizaldi, S.T., M.Ds.

0313068301/E023907

HALAMAN PENGESAHAN

Tugas Akhir dengan judul

PERANCANGAN INTERACTIVE WEBSTORY TENTANG PERILAKU TIDAK MENGHAKIMI UNTUK ANAK USIA 7-12 TAHUN

Oleh

Nama : Grace Imanda Gandi

NIM : 00000017058

Program Studi : Desain Komunikasi Visual

Fakultas : Seni dan Desain

Telah diujikan pada hari Jumat, 07 Januari 2022 Pukul 16.45 s.d 17.30 dan dinyatakan

LULUS

Dengan susunan penguji sebagai berikut.

(5)

iv

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Sebagai civitas academica Universitas Multimedia Nusantara, saya yang bertanda tangan di bawah ini:

Nama : Grace Imanda Gandi

NIM : 00000017058

Program Studi : Desain Komunikasi Visual

Fakultas : Seni dan Desain

Jenis Karya : Tugas Akhir

Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Multimedia Nusantara Hak Bebas Royalti Nonekslusif (Non-exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul.

PERANCANGAN INTERACTIVE WEBSTORY TENTANG PERILAKU TIDAK MENGHAKIMI UNTUK ANAK USIA 7-12 TAHUN

Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Noneksklusif ini, Universitas Multimedia Nusantara berhak menyimpan, mengalihmediakan/mengalihformatkan, mengelola dalam bentuk pangkalan data (database), merawat, dan memublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai penulis/pencipta dan sebagai pemilik Hak Cipta. Demikian pernyataan ini saya buat dengan sebenarnya.

Tangerang, 21 Januari 2022 Yang menyatakan,

Grace Imanda Gandi

(6)

v

KATA PENGANTAR

Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa karena penulis berhasil menyelesaikan perancangan tugas akhir ini. Laporan ini disusun sebagai syarat untuk memenuhi gelar S1 jurusan Desain Komunikasi Visual di Universitas Multimedia Nusantara. Banyaknya dukungan yang penulis dapatkan dalam menjalankan perancangan tugas akhir ini. Maka itu, penulis ingin berterima kasih kepada:

1. Dr. Ninok Leksono, M.A., selaku Rektor Universitas Multimedia Nusantara.

2. Muhammad Cahya Mulya Daulay, S.Sn., M.Ds., selaku Dekan Fakultas Universitas Multimedia Nusantara.

3. Mohammad Rizaldi, S.T., M.Ds., selaku Ketua Program Studi Universitas Multimedia Nusantara.

4. Fonita Theresia Yoliando, S.Ds., M.A., sebagai Pembimbing yang telah memberikan bimbingan, arahan, dan motivasi atas terselesainya tugas akhir ini.

5. Keluarga saya yang telah memberikan bantuan dukungan material dan moral,

6. Teman-teman saya, baik dari dalam kampus atau di luar kampus yang setia mendukung dan menemani penulis saat mengerjakan tugas akhir ini.

Dengan adanya Perancangan Tugas Akhir ini, penulis berharap masyarakat dapat lebih sadar bahwa perilaku menghakimi ini dapat memberi dampak yang awalnya terlihat ringan dapat perlahan-lahan menjadi berat.

Tangerang, 21 Januari 2022

(Grace Imanda Gandi)

(7)

vi

PERANCANGAN INTERACTIVE STORYTELLING TENTANG PERILAKU TIDAK MENGHAKIMI

UNTUK ANAK BERUSIA 7-12 TAHUN

(Grace Imanda)

ABSTRAK

Penulis memilih topik Tugas Akhir “Perancangan Interactive Storryteling tentang Perilaku Tidak Menghakimi untuk Anak usia 7-12 tahun”. Memberi pemahaman apa itu menghakimi seperti apa itu menghakimi dan dampak menghakimi untuk orang lain. Dibuatlah interactive storytelling dalam bentuk interactive webstory dengan disajikan ilustrasi yang memiliki gamifikasi untuk interaksi. Edukasi tentang perilaku jangan menghakimi sejak usia dini penting agar anak-anak sadar dampaknya bagi sesama dan lebih berhati-hati dalam bersikap serta menentukan tindakan. Rumusan masalah proposal tugas akhir ini adalah bagaimana cara merancang interactive storytelling dengan tema perilaku jangan menghakimi pada anak-anak. Metode pengumpulan data menggunakan cara campuran yaitu kualitatif dan kuantitatif. Metode pengumpulan data kualitatif menggunakan wawancara dan studi referensi, sedangkan pengumpulan data kuantitatif menggunakan kuesioner. Tujuan tugas akhir ini adalah menghasilkan sebuah interactive storytelling sebagai edukasi tentang perilaku jangan menghakimi anak usia 7-12 tahun.

Kata kunci: Interactive storytelling, menghakimi, label

(8)

vii

DESIGNING INTERACTIVE WEBSTORY ABOUT NON- JUDGMENTAL BEHAVIOR FOR 7-to-12 YEAR OLD

CHILDREN

(Grace Imanda Gandi)

ABSTRACT (English)

The author chose the topic of “Designing Interactive Storytelling about Non-Judgmental Behavior for 7-to-12 year old Children”. Giving the education about what is judging how is judging and the effect of judging to other people. Interactive storytelling is made in the form of interactive webstory with gamification provided to play or interact. Education about non-judgmental behavior since early age is crucial for children to understand the effect of it to people and to teach them to be careful in action. The purpose of the final project is how to design an interactive storytelling about non-judgmental behavior for children. The procedure to collect data is using the qualitative and quantitative method. The qualitative method is done by doing interview and reference study. Meanwhile the quantitative method is done by doing questionnaire. The goal of the final project is to create an interactive webstory to teach about non-judgmental behavior for children in the age of 7-12 years old.

Keywords: Interactive Storytelling, judging, label

(9)

viii

DAFTAR ISI

HALAMAN PERNYATAAN TIDAK PLAGIAT ... ii

HALAMAN PENGESAHAN ... iii

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ... iv

KATA PENGANTAR ... v

ABSTRAK ... vi

ABSTRACT (English) ... vii

DAFTAR ISI ... viii

DAFTAR TABEL ... x

DAFTAR GAMBAR ... xi

DAFTAR LAMPIRAN ... xiii

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 2

1.3 Batasan Masalah ... 2

1.4 Tujuan Tugas Akhir ... 3

1.5 Manfaat Tugas Akhir ... 3

BAB II TINJAUAN PUSTAKA ... 1

Desain Komunikasi Visual ... 1

2.1.1 Prinsip Desain ... 1

2.1.2 Elemen Desain ... 5

Desain Interaktif ... 8

2.2.1 Pendekatan Desain Interaktif ... 9

2.2.2 Ideasi dan Prinsip Desain ... 11

2.3 Status Ekonomi Sosial ... 13

2.4 Perilaku Menghakimi ... 14

2.4.1 Perbedaan Menghakimi dan Menilai ... 14

2.4.2 Jenis-Jenis Menghakimi ... 15

2.4.3 Menghakimi dan Labelling ... 16

2.4.4 Dampak Menghakimi ... 16

BAB III METODOLOGI PENELITIAN ... 18

(10)

ix

3.1 Metode Pengumpulan Data ... 18

3.1.1 Wawancara ... 18

3.1.2 Focus Group Discussion ... 20

3.1.3 Kuesioner ... 21

3.2 Metode Perancangan ... 30

3.2.1 Discovering Requirements ... 32

3.2.2 Design, Prototyping and Construction ... 32

BAB IV STRATEGI & ANALISIS PERANCANGAN ... 35

4.1 Strategi Perancangan ... 35

4.1.1 Discovering Requirements ... 35

4.1.2 Design, Prototyping and Construction ... 35

4.2 Analisis Alpha ... 56

4.2.1 Analisis Visual ... 57

4.2.2 Analisis Interface ... 58

4.2.3 Analisis Interaktivitas ... 59

4.2.4 Hasil Perbaikan ... 60

4.3 Analisis Beta ... 65

4.3.1. Analisis Desain ... 65

4.3.2. Analisis Beta Test ... 66

4.4 Budgeting ... 67

BAB V PENUTUP ... 69

5.1 Kesimpulan ... 69

5.2 Saran ... 69

DAFTAR PUSTAKA ... xiii

LAMPIRAN ... xvii

(11)

x

DAFTAR TABEL

Tabel 4.2 Pertanyaan mengenai Visual dalam Prototype... 61 Tabel 4.2 Pertanyaan mengenai interface………..62 Tabel 4.2 Pertanyaan mengenai interaktivitas ... 63

(12)

xi

DAFTAR GAMBAR

Gambar 2.1 Contoh bentuk keseimbangan ... 1

Gambar 2.2 Contoh bentuk kesatuan ... 2

Gambar 2.3 Contoh bentuk kedekatan / proximity... 3

Gambar 2.4 Contoh-contoh kontras ... 3

Gambar 2.5 Contoh penekanan dalam desain ... 4

Gambar 2.6 Contoh bentuk penyusunan / penjajaran ... 5

Gambar 2.7 Contoh gambar garis ... 5

Gambar 2.8 Contoh gambar bentuk ... 6

Gambar 2.9 Contoh gambar wujud ... 7

Gambar 2.10 Contoh warna ... 7

Gambar 2.11 Contoh serif, sans-serif dan dekoratif ... 8

Gambar 3.12 Zoom dengan Sandra Dewi S.Psi ... 19

Gambar 3.13 Zoom dengan Patricia Elfira Vinny ... 19

Gambar 3.14 FGD dengan anak-anak ... 20

Gambar 3.15 Rumus Slovin ... 21

Gambar 3.16 Bagan usia ... 22

Gambar 3.17 Bagan agama ... 23

Gambar 3.18 Bagan pengeluaran ... 24

Gambar 3.19 Bagan domisili ... 24

Gambar 3.20 Hasil pertanyaan menghakimi 1 ... 25

Gambar 3.23 Bagan pertanyaan uji menghakimi 1 ... 27

Gambar 3.25 Pertanyaan uji menghakimi 3 ... 28

Gambar 3.29 Mindmap tentang topik Menghakimi ... 36

Gambar 3.30 Gambar persona 1... 38

Gambar 3.31 Gambar persona 2... 39

Gambar 3.32 Moodboard ... 40

Gambar 3.33 Storyline secara garis besar ... 41

Gambar 3.34 Storyline bab 1 ... 42

Gambar 3.37 Gambar Storyboard ... 44

Gambar 3.38 Jenis brush yang digunakan untuk lineart... 45

Gambar 3.39 Palet warna karakter ... 46

Gambar 4.40 Paperland ... 46

(13)

xii

Gambar 4.41 ChildrenSans ... 47

Gambar 4.42 Desain awal Hazel, alternatif pewarnaan 1 dan pewarnaan 2 ... 48

Gambar 4.43 Sketsa karakter Valen dan warna alternatif ... 49

Gambar 3.44 Proses ilustrasi adegan 1 ... 49

Gambar 3.45 Proses ilustrasi adegan akhir ... 50

Gambar 3.47 Ekspresi lainnya dari ilustrasi skenario 2 ... 51

Gambar 3.48 Proses ilustrasi adegan 3 dan 4 ... 51

Gambar 4.49 Proses ilustrasi adegan 5 dan 6 ... 52

Gambar 4.50 Proses ilustrasi skenario 7 ... 52

Gambar 4.51 Ekspresi lain dari ilustrasi skenario 7 ... 53

Gambar 3.57 Screenshot dalam proses membuat prototype di Adobe XD... 56

Gambar 4.58 Zoom meeting saat Prototype Day kedua ... 57

Gambar 4.59 Alternatif icon penunjuk... 60

Gambar 4.60 Hasil akhir icon penunjuk ... 61

Gambar 4.61 Bentuk narasi saat alpha test ... 61

Gambar 4.62 Bentuk narasi saat prototype diperbaiki ... 62

Gambar 4.63 Rangkaian prototype di Figma ... 63

Gambar 4.64 Objek pintu yang ditunjuk untuk ditekan ... 63

Gambar 4.65 Interaksi kertas pada punggung ... 64

Gambar 4.66 Panel interaksi ... 65

Gambar 4.67 Ratio kanvas ... 66

Gambar 4.68 Pelaksanaan beta test ... 67

(14)

xiii

DAFTAR LAMPIRAN

Lampiran A: Form Bimbingan ... xvii

Lampiran B: Kuesioner ... xix

Lampiran C: Wawancara dengan Sandra Dewi ... xxiii

Lampiran D: Wawancara dengan Patricia Elfira Vinny ... xxiv

Lampiran E: TURNITIN ... xxvii