PERANCANGAN PRACTICAL GUIDE UNTUK
ANGER MANAGEMENT
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Richard
NIM : 00000014086
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Richard
NIM : 00000014086
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
Universitas Multimedia Nusantara
Judul Tugas Akhir:
PERANCANGAN PRACTICAL GUIDE UNTUK ANGER MANAGEMENT
dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas Multimedia Nusantara maupun di perguruan tinggi lainnya.
Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali arahan pembimbing akademik dan narasumber.
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 gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang berlaku di Universitas Multimedia Nusantara.
Tangerang, 12 Juni 2020
iv
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Tuhan yang Maha Esa karena atas berkat dan kuasaNya, penulis mampu membuat dan menyelesaikan Tugas Akhir yang berjudul, “Perancangan Practical Guide untuk Anger Management” sebagai syarat untuk mendapatkan gelar Sarjana Desain (S.Ds).
Amarah adalah sesuatu yang lazim dirasakan oleh setiap manusia. Namun seringkali, emosi marah diasosiasikan sebagai sesuatu yang negatif. Hal ini mendorong meningkatnya masyrakat yang memilih memendam amarah. Memendam amarah merupakan sesuatu yang buruk. Selain dapat berdampak buruk pada diri sendiri, memendam amarah juga dapat memperburuk hubungan seseorang dengan sesamanya. Banyak orang yang telah menyadari hal ini, tetapi belum memiliki pengetahuan dan pemahaman yang cukup tentang anger management. Hal ini mendorong penulis untuk melakukan perancangan website anger management yang tepat untuk mengatasi permasalahan ini.
Tujuan perancangan media informasi ini adalah untuk membantu masyarakat memiki anger management yang baik dengan mengenalkan informasi lengkap serta metode anger management.
Dalam perancangan website ini, penulis belajar untuk berkontribusi lebih sebagai mahasiswa desain komunikasi visual. Penulis belajar untuk menerapkan ilmu yang penulis miliki guna dapat membantu masyarakat untuk lebih memahami suatu hal. Dalam perancangan ini pun penulis belajar untuk lebih peka dalam mengobservasi keadaaan dan situasi, penulis juga belajar untuk lebih peduli terhadap sesama.
v
Ada pun dalam perancangan proposal Tugas Akhir ini, penulis mendapatkan dukungan moral maupun akademik. Oleh sebab itu, penulis ingin mengucapkan terima kasih kepada:
1. Mohammad Rizaldi, S.T., M.Ds. selaku Ketua Program Studi Desain Komunikasi Visual UMN yang telah membantu dan meluangkan waktu dalam prosesnya sehingga perancangan ini dapat selesai dengan lancar dan tepat waktu.
2. Gideon K. F., S.T. M.Ds., sebagai dosen pembimbing Tugas Akhir yang telah mendidik, memotivasi, dan memberikan dukungan selama proses perancangan Tugas Akhir dan pengembangan laporan.
3. Adhreza Brahma, M.Ds., Tolentino, S.Ds., M.M., dan Frindhinia Medyasepti, S.Sn., M.Sc., selaku Dosen Pembimbing Spesialis Tugas Akhir penulis yang telah memberi saran dan masukan yang berguna dalam proses perancangan.
4. Erwin Alfian, S.Sn., M.Ds., selaku Ketua Sidang dan Juhri Selamet, S.ST., M.Des., selaku Dosen Penguji pada Pra Sidang penulis yang telah memberikan saran dan masukan yang berguna dalam proses perancangan dan pengembangan laporan.
5. Lalitya Talitha Pinasthika, M.Ds., selaku Ketua Sidang dan Roy Antonius Susanto, S.Sn., M.Ds, selaku Dosen Penguji pada Sidang Akhir penulis yang telah memberikan saran dan masukan yang berguna dalam proses revisi tahap akhir dan penyempurnaan karya dan laporan.
vi
6. dr. Anastasia, Sp.KJ., selaku narasumber utama dalam penyusunan konten website dan seluruh media dalam perancangan ini.
7. Erick Jowanna, S.Ds. dan Fanny Tania, S.Ds., selaku narasumber UI/UX yang telah memberi saran dalam pengembangan layout serta pengetahuan dasar mengenai UI/UX dalam perancangan.
8. Sharra Rusli, S.Ds., Gilang Permono Djati, S.Ds., Tamara Sananta, Cindy Yap, dan Teresa Anne selaku teman diskusi yang selalu mendukung penulis dalam pengembangan karya dan proses user test. 9. Brillianta, S.Ds., dan Chris Andrian, S.Ds., dan Vanessa Victoria
Saputra yang telah membantu memberikan dukungan moril serta saran dan masukan dalam proses peracangan dan pengembangan laporan. 10. Regita Silvani, S.E., CHRS., Marcel Wira, S.Kom., Timothy Jonathan,
Silvana Effendi, S.Ds., Martina, S.Ds., Julrinus, S.Sn., Stievensen, selaku teman baik penulis yang selalu memberikan dukungan moril dan semangat dalam menyelesaikan Tugas Akhir dengan baik.
11. Rosemarie Vania, Charis Christo Raranta, Sheryn Chelsea, Claresta Yuwana, Hilman Luthfi, Nissi Nathania, Rahmatsyah, Renno Mahendra, Cliff Ardana, Maychelle Riezellin, Leony, dan Velyan Theresa selaku teman-teman satu bimbingan yang telah berjuang bersama dan saling mendukung dalam proses Tugas Akhir
12. Papa, Mama, dan Raymond, atas dukungan yang selalu diberikan. 13. Adriana Hardinata, Nicholas Edward, Venina Winata, Alvin Jehian,
vii
Graciella Jan selaku sahabat yang senantiasa mendukung dan menyemangati.
14. Seluruh pihak yang membantu penulis dalam menyelesaikan peracangan ini.
Tangerang, 16 Juni 2020
viii
ABSTRAKSI
Amarah adalah emosi yang kerap kali dirasakan oleh masyarakat. Amarah yang terpendam dapat berdampak buruk bagi mental dan fisik. Bahayanya, kebanyakan orang hanya mengidentifikasi masalahnya ketika sudah berdampak menjadi suatu penyakit, padahal hal ini bisa dicegah dengan memahami anger management. Adapun, karena informasi yang kurang dan tingkat pengetahuan masyarakat yang rendah, penulis melakukan penelitian tentang bagaimana merancang media informasi yang baik hingga akhirnya menjadi sebuah perancangan practical guide untuk anger management setelah melalui proses penelitian dan pengumpulan data. Website selaku media utama didukung oleh beberapa media lain seperti aplikasi, e-journal, Instagram post, feeds, stiker LINE, line ads, serta web banner guna memaksimalkan informasi yang disampaikan. Penulis melakukan seluruh perancangan dengan tiga kata kunci yakni, menenangkan, progresif, dan bersahabat.
Kata kunci: Perancangan, Practical Guide, Anger Management, Menenangkan, Progresif.
ix
ABSTRACT
Anger is an emotion that is often felt by people. Unsolved anger may cause a negative mental and physical impact. Unfortunately, most people only able to identify the problem when it has an impact into a disease, this problem can only be prevented by understanding anger management. Meanwhile, due to lack of information and a low level of public knowledge, the author conducted a research on how to design a good information media until it finally became an anger management practical guide design after going through the process of research and data collection. Website as the main media is supported by several other media such as applications, e-journals, Instagram posts, feeds, LINE stickers, line ads, and web banners to maximize the information conveyed. The author does the design process entirely with these three key words as the fundaments, which is, soothing, progressive, and friendly.
x
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... II
HALAMAN PENGESAHAN TUGAS AKHIR ... III
KATA PENGANTAR ...IV
ABSTRAKSI ... VIII
ABSTRACT...IX
DAFTAR ISI ... X
DAFTAR GAMBAR ... XV
DAFTAR TABEL ... XXIII
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 ... 5
2.1. Desain ... 5
2.1.1. Elemen Desain ... 5
2.1.2. Prinsip Desain ... 11
xi 2.1.4. Komposisi ... 31 2.1.5. Layout ... 32 2.2. Media Massa ... 45 2.2.1. Fungsi Media ... 46 2.2.2. Jenis Media ... 47 2.2.3. Media Cetak... 49 2.2.4. Media Elektronik ... 51 2.2.5. Desain Informasi ... 52 2.3. Website ... 53 2.3.1. Anatomi Website ... 54
2.3.2. Metode Perancangan Website ... 55
2.3.3. Prototype ... 59
2.3.4. Homepage ... 60
2.3.5. Single Page Website ... 61
2.3.6. Sitemap ... 62
2.3.7. Mobile Website ... 63
2.4. Aplikasi ... 64
2.4.1. Desain Aplikasi dan Proses Pengembangan ... 64
2.4.2. Jenis Aplikasi ... 65
2.4.3. Kategori Aplikasi ... 66
2.5. User Persona ... 67
2.6. User Interface dan User Experience ... 68
xii
2.6.2. Memahami Hirarki Visual dan Pola UI ... 71
2.6.3. Elemen dan Prinsip UI Website ... 75
2.6.4. Implementasi terhadap Desain... 77
2.6.5. Tahap Perancangan UI/UX ... 78
2.7. Ilustrasi ... 79
2.7.1. Gaya Ilustrasi ... 79
2.7.2. Tipografi Ilustratif ... 84
2.7.3. Perancangan Karakter ... 86
2.8. Anger Management ... 89
2.8.1. Prinsip Anger Management ... 90
2.8.2. Tujuan Anger Management ... 91
2.8.3. Metode Anger Management ... 91
2.8.4. Teknik Anger management ... 95
BAB III METODOLOGI ... 97
3.1. Metodologi Pengumpulan Data... 97
3.1.1. Kuesioner... 97
3.1.2. Wawancara ... 98
3.1.3. Observasi Existing terhadap Media Informasi Anger Management ... 116
3.1.4. Observasi Referensi Media Informasi... 121
3.2. Metodologi Perancangan ... 127
3.2.1. Orientasi ... 127
xiii
3.2.3. Desain Konseptual ... 127
3.2.4. Pengembangan Desain ... 128
3.2.5. Implementasi ... 129
BAB IV STRATEGI DAN ANALISIS PERANCANGAN ... 130
4.1. Strategi Perancangan ... 130
4.1.1. Orientasi ... 130
4.1.2. Analisa dan Strategi ... 140
4.1.3. Desain Konseptual ... 148
4.1.4. Pengembangan Desain ... 155
4.1.5. Implementasi ... 184
4.2. Analisis Perancangan ... 219
4.2.1. Analisis Website... 219
4.2.2. Analisis Desain Aplikasi ... 234
4.2.3. Analisis desain e-journal ... 239
4.2.4. Analisis desain konten Instagram ... 241
4.2.5. Analisis stiker LINE ... 243
4.2.6. Analisis desain web banner ... 245
4.2.7. Analisis desain LINE ads ... 247
4.3. Budgeting ... 248
BAB V PENUTUP ... 250
5.1. Kesimpulan ... 250
xiv
xv
DAFTAR GAMBAR
Gambar 2.1. Figure & Ground ... 6
Gambar 2.2. Nomenklatur Warna ... 8
Gambar 2.3. Tree Structures ... 15
Gambar 2.4. Nest Structures... 15
Gambar 2.5. Stair Structures ... 16
Gambar 2.6. Similarity ... 17
Gambar 2.7. Proximity ... 18
Gambar 2.8. Continuity ... 18
Gambar 2.9. Closure ... 19
Gambar 2.10. Common Fate ... 19
Gambar 2.11. Continuing Line ... 20
Gambar 2.12. Fibonacci Numbers ... 22
Gambar 2.13. The Golden Ratio ... 23
Gambar 2.14. Classifications of Type ... 27
Gambar 2.15. Rencana Imposisi ... 32
Gambar 2.16. Pembagian Golden Section ... 33
Gambar 2.17. Golden Section ... 33
Gambar 2.18. Grid Simetris ... 34
Gambar 2.19. Menciptakan Grid Simetris ... 34
Gambar 2.20. Menambah ruang untuk teks ... 35
Gambar 2.21. Menambah anchor point ... 35
xvi
Gambar 2.23. Grid Kolom Tunggal... 36
Gambar 2.24. Grid Lima Kolom ... 37
Gambar 2.25. Grid Lima Kolom ... 37
Gambar 2.26. Kolom Grid Asimetris ... 42
Gambar 2.27. Grid Modular Asimetris ... 42
Gambar 2.28. Grid Modular Asimetris ... 42
Gambar 2.29. Mengembangkan Grid ... 44
Gambar 2.29. Variasi Grid ... 44
Gambar 2.30. Homepage... 53
Gambar 2.31. Single Page Website ... 54
Gambar 2.32. Sitemap ... 55
Gambar 2.33. Mobile Website ... 55
Gambar 2.34. Gambar Surealis ... 66
Gambar 2.35. Gambar Diagram ... 67
Gambar 2.36. Gambar Abstrak ... 68
Gambar 2.37. Gambar Hyperrealism ... 69
Gambar 2.38. Gambar Realis Bergaya ... 70
Gambar 2.39. Gambar Sequential Imagery ... 70
Gambar 2.40 Ilustrasi Karakter Persegi ... 73
Gambar 2.41. Ilustrasi Karakter Segitiga ... 73
Gambar 2.43. Ilustrasi Karakter Bulat ... 74
Gambar 2.44. Ilustrasi Karakter 5 sudut pandang ... 75
xvii
Gambar 3.2. Hasil Kuesioner 2 ... 85
Gambar 3.3. Wawancara dengan Fiona Damanik ... 87
Gambar 3.4. Wawancara dengan Naomi Tobing ... 88
Gambar 3.5. Wawancara dengan dr. Anastasia ... 93
Gambar 3.6. Bukti Wawancara dengan Vanessa ... 95
Gambar 3.7. Bukti Wawancara dengan Brillianta ... 97
Gambar 3.8. Bukti Wawancara dengan Larren ... 98
Gambar 3.9. Bukti Wawancara dengan Alvin Jehian ... 100
Gambar 3.10. Bukti Wawancara dengan Alvin Arianto ... 102
Gambar 3.11. Website: American Psychological Association ... 104
Gambar 3.12. Buku Anger Management for Dummies... 106
Gambar 3.13. Buku Cool It! ... 107
Gambar 3.14. Buku Lonely Planet’s: Instant Expert... 109
Gambar 3.15. Buku Le Tour de France ... 110
Gambar 3.16. Website Headspace ... 111
Gambar 3.17. Website 16 Personalities ... 112
Gambar 4.1. User Journey ... 117
Gambar 4.2. Preferensi dan alur media ... 118
Gambar 4.3. Alur konten Anger Management ... 122
Gambar 4.5. Mindmapping Tahap 1 ... 134
Gambar 4.6. Mindmapping Tahap 1 ... 135
Gambar 4.7. Korelasi antar konten dan media ... 136
xviii
Gambar 4.9.Font Goldplay Bold ... 139
Gambar 4.10. Font Volte Rounded Senubold ... 140
Gambar 4.11. Palet warna awal ... 142
Gambar 4.12. Palet warna kedua ... 143
Gambar 4.13. Palet warna final ... 143
Gambar 4.14. Sektsa ilus tahap 1... 146
Gambar 4.15. Digitalisasi ilus tahap 1 ... 146
Gambar 4.16. Referensi ilustrasi ... 147
Gambar 4.17. Sektsa ilus tahap 2... 148
Gambar 4.18. Digitalisasi ilus tahap 2 ... 148
Gambar 4.19. Sketsa ilustrasi tahap 3 ... 150
Gambar 4.20. Digitalisasi ilus tahap 3 ... 151
Gambar 4.21.Visual Progresif ... 152
Gambar 4.22.Implementasi visual Progresif ... 152
Gambar 4.23. Eksplorasi aset visual untuk guidelines ... 153
Gambar 4.24. Penyusunan konten setelah penggarapan ... 154
Gambar 4.25. Sitemap website ... 157
Gambar 4.26. Sketsa Logo ... 158
Gambar 4.27. Logo ... 158
Gambar 4.28. Layout awal ... 160
Gambar 4.29. Penerapan grid pada layout ... 161
Gambar 4.30. Layout akhir ... 162
xix
Gambar 4.32. Wireframe ... 163
Gambar 4.33. Lofi ... 164
Gambar 4.34. High fidelity landing page awal... 165
Gambar 4.35. High fidelity landing page akhir ... 166
Gambar 4.36. High fidelity akhir ... 169
Gambar 4.37. High fidelity seluruh halaman akhir ... 172
Gambar 4.38. Revisi visual pendukung ... 172
Gambar 4.39. Divider awal ... 173
Gambar 4.40. Divider akhir ... 174
Gambar 4.41. Landing page ... 174
Gambar 4.42. Penerapan visual terhadap pilihan poin ... 175
Gambar 4.43. Halaman dengan konten 1 level... 176
Gambar 4.44. Halaman dengan konten poin deskripsi ... 177
Gambar 4.45. Halaman terakhir website ... 177
Gambar 4.46. Halaman metode promotif ... 178
Gambar 4.47. Grid mobile website ... 179
Gambar 4.48. Penerapan grid mobile website ... 179
Gambar 4.49. Landing page mobile website ... 180
Gambar 4.50. Grid Aplikasi ... 181
Gambar 4.51. Penerapan grid pada aplikasi ... 182
Gambar 4.52. Landing page aplikasi ... 183
Gambar 4.53. Halaman pilihan layanan ... 184
xx
Gambar 4.55. Halaman olahraga dalam ruangan ... 186
Gambar 4.56. Halaman pilihan dan konsultasi ahli ... 187
Gambar 4.57. Favikon pada ponsel ... 188
Gambar 4.58. Grid e-journal ... 189
Gambar 4.59. Penerapan grid e-journal ... 189
Gambar 4.60. Halaman awal e-journal ... 190
Gambar 4.61. Halaman panduan e-journal... 190
Gambar 4.62. Halaman tips e-journal ... 191
Gambar 4.63. Halaman isi e-journal ... 192
Gambar 4.64. Halaman quote e-journal ... 192
Gambar 4.65. Grid Instagram post ... 193
Gambar 4.66. Penerapan grid Instagram post ... 193
Gambar 4.67. Instagram post ... 194
Gambar 4.68 Grid Instagram story ... 195
Gambar 4.69. Penerapan grid Instagram story ... 195
Gambar 4.70. Instagram story ... 196
Gambar 4.71. Sketsa stiker LINE ... 197
Gambar 4.72. Aturan stiker LINE ... 197
Gambar 4.73. Stiker LINE ... 198
Gambar 4.74. guide web banner CNN ... 199
Gambar 4.75. Penerapan grid pada web banner CNN ... 199
Gambar 4.76. Web banner CNN ... 200
xxi
Gambar 4.78. Penerapan grid pada web banner Kompas.com ... 201
Gambar 4.79. Web banner Kompas.com ... 201
Gambar 4.80. Grid web banner detik.com ... 201
Gambar 4.81. Penerapan grid pada web banner detik.com ... 202
Gambar 4.82. Web banner detik.com ... 202
Gambar 4.83. Grid web banner YouTube ... 202
Gambar 4.84. Penerapaan grid web banner YouTube ... 202
Gambar 4.85. Web banner YouTube ... 203
Gambar 4.86. Grid LINE ads ... 204
Gambar 4.87. Penerapan grid pada LINE ads ... 204
Gambar 4.88. LINE ads ... 205
Gambar 4.89. Landing Page ... 207
Gambar 4.90. Halaman kuis ... 208
Gambar 4.91. Halaman karakter adaptif ... 209
Gambar 4.92. Halaman anger management ... 210
Gambar 4.93. Halaman atur amarah ... 211
Gambar 4.94. Halaman cegah amarah ... 212
Gambar 4.95. Halaman bereskan amarah ... 213
Gambar 4.96. Halaman promotif ... 214
Gambar 4.97. Halaman pop-up ... 215
Gambar 4.98. Ilustrasi karakter utama ... 216
Gambar 4.99. Penerapan tipografi pada karya ... 218
xxii
Gambar 4.101. Landing Page aplikasi ... 222
Gambar 4.102. Halaman meditasi ... 223
Gambar 4.103. Halaman olahraga ... 224
Gambar 4.104. Halaman konsultasi ... 225
Gambar 4.105. Halaman awal e-journal ... 226
Gambar 4.106. Instagram post... 229
Gambar 4.107. Stiker LINE ... 230
Gambar 4.108. Web banner CNN... 231
Gambar 4.109. Web banner Kompas.com ... 231
Gambar 4.110. Web banner detik.com ... 232
Gambar 4.111. Web banner YouTube ... 232
xxiii
DAFTAR TABEL
Tabel 2.1. Korelasi UI/UX... 56
Tabel 3.1. Tabel Analisa Observasi Existing Media Informasi: Website APA .... 78
Tabel 3.2. Tabel Analisa Observasi Existing Media Informasi: Buku Anger Management 1 ... 78
Tabel 3.3. T abel Analisa Observasi Existing Media Informasi: Buku Anger Management 2 ... 80
Tabel 3.4. Tabel Analisa Referensi Buku: Lonely Planet’s ... 81
Tabel 3.5. Tabel Analisa Referensi Buku: Le Tour de France ... 82
Tabel 3.6. Tabel Analisa Referensi Website: Headspace... 84
Tabel 3.7. Tabel Analisa Referensi Website: 16 Personalities ... 85
Tabel 4.1. Tabel Analisa User Journey ... 119
Tabel 4.2. Tabel Analisa Konten ... 123
Tabel 4.3. Tabel Distribusi Konten ... 124
Tabel 4.4. Tabel Analisa SWOT Website ... 126
Tabel 4.5. Tabel Analisa Konten ... 128
Tabel 4.6. Tabel Analisa User Test... 167
xxiv
DAFTAR LAMPIRAN
LAMPIRAN A: FORM BIMBINGAN ... xvii
LAMPIRAN B: TRANSKRIP WAWANCARA AHLI – FIONA DAMANIK, S.PSI. ... xxii
LAMPIRAN C: TRANSKRIP WAWANCARA AHLI- NAOMI TOBING, M.PSI ... xxii
LAMPIRAN D: HASIL KUESIONER ... xxii
LAMPIRAN E: TRANSKRIP WAWANCARA AHLI – ...XL
DR. ANASTASIA., SP. KJ. ... XLV
