PERANCANGAN WEBSITE TENTANG BAHAYA PENYALAHGUNAAN OBAT TRAMADOL DI KALANGAN REMAJA

(1)

PERANCANGAN WEBSITE TENTANG BAHAYA PENYALAHGUNAAN OBAT TRAMADOL DI

KALANGAN REMAJA

Laporan Tugas Akhir

Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)

Nama : Didi Oktavidas

NIM : 00000019733

Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2021

(2)

ii

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT

Saya yang bertanda tangan di bawah ini:

NIM : 00000019733

Universitas Multimedia Nusantara Judul Tugas Akhir :

PERANCANGAN WEBSITE TENTANG BAHAYA

PENYALAHGUNAAN OBAT TRAMADOL DI KALANGAN REMAJA

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, 28 Juni 2021

Didi Oktavidas

(3)

iii

HALAMAN PENGESAHAN TUGAS AKHIR

PERANCANGAN WEBSITE TENTANG BAHAYA PENYALAHGUNAAN OBAT TRAMADOL DI

KALANGAN REMAJA

Oleh

NIM : 00000019733

Tangerang, 28 Juni 2021

.

Pembimbing

Clemens Felix Setiyawan, S.Sn., M.Hum.

Ketua Program Studi

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

Penguji

Aditya Satyagraha, S.Sn., M.Ds.

Ketua Sidang

Agatha Maisie Tjandra, S.Sn., M.Ds.

(4)

iv

KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa karena telah membantu penulis dalam segala hal, sehingga dapat menyelesaikan tugas akhir ini dengan judul “ Perancangan Website Tentang Penyalahgunaan Obat Tramadol di Kalangan Remaja “. Alasan penulis memilih topik ini karena telah banyak kasus penyalahgunaan obat Tramadol yang telah terjadi di Indonesia. Berdasarkan survei yang telah dilakukan oleh Badan Narkotika Nasional tentang penyalahgunaan dan peredaran gelap narkoba pada tahun 2018, menyebutkan bahwa Tramadol menjadi obat kategori zat adiktif non narkoba yang paling banyak dikonsumsi (BNN,2018).

Penyalahgunaan obat Tramadol sudah menjadi salah satu jenis penggunaan obat keras yang dilakukan oleh remaja dan dapat merusak generasi muda jika terus dibiarkan. Sehingga penulis ingin memberitahukan dampak bahaya dari obat Tramadol kepada remaja melalui perancangan website ini.

Penulis berharap dengan adanya penulisan laporan ini dapat memberikan hal serta nilai yang baru terhadap penulis dan juga pembaca, dan harapan penulis dalam laporan ini dapat terwujud keedepannya.

Ucapan terima kasih kepada orang-orang yang membantu TA/Skripsi.

Ucapan ini ditulis pada akhir kata pengantar (Eliza, 2009). Urutan nama sebagai berikut:

1. Mohammad Rizaldi, , S.T., M.Ds. selaku Ketua Program Studi Desain Komunikasi Visual, Universitas Multimedia Nusantara.

(5)

v

2. Clemens Felix Setiyawan, S.Sn., M.Hum. sebagai dosen pembimbing yang telah banyak membimbing dalam penulisan laporan tugas akhir.

3. Adhreza Brahma, M.Ds., selaku koordinator tugas akhir.

4. dr. Evi Furwanti, S.Ked., sebagai dokter umum dan narasumber wawancara yang telah bersedia membantu melengkapi data.

5. Ade Nover, S.Farm., Apt, sebagai apoteker dan sebagai narasumber yang telah bersedia untuk diwawancarai.

6. Kedua orang tua yang selalu memberikan semangat dan membantu dalam kebutuhan pengerjaan laporan tugas akhir.

7. Teman-teman penulis yang sudah mendukung dan membantu dalam memberikan semangat untuk mengerjakan laporan tugas akhir ini.

Tangerang,,28 Juni 2021

Didi Oktavidas

(6)

vi

ABSTRAKSI

Berdasarkan temuan kasus dan fenomena penyalahgunaan obat Tramadol yang sudah cukup banyak terjadi di Indonesia. Penyalahgunaan obat Tramadol dapat menyebabkan efek yang negatif bagi tubuh dan bisa menyebabkan kematian.

Banyak kasus yang telah terjadi dikarenakan minimnya pengetahuan dan peredaran obat Tramadol yang bisa didapatkan dengan mudah. Penulis merancang website tentang bahaya penyalahgunaan obat Tramadol yang ditunjukan kepada remaja untuk bisa lebih memahami dan menambah pengetahuan tentang obat Tramadol agar mereka dapat mengetahui bahaya dari penyalahgunaan obat tersebut. Remaja sebagai generasi muda dan penerus bangsa, akan sangat disayangkan jika menjadi korban dari peredaran dan penyalahgunaan obat Tramadol hanya dikarenakan kurangnya pengetahuan dan pengaruh lingkungan yang kurang mendukung. Metode penelitian yang digunakan penulis adalah metode kuantitatif (kuisioner) dan kualitatif berupa wawancara. Dengan perancangan ini diharapkan dapat memberikan pengetahuan dan pemahaman kepada masyarakat mengenai obat Tramadol dan mengurangi tingkat penyalahgunaan obat Tramadol.

Kata kunci : Tramadol, Website, Penyalahgunaan, Remaja

(7)

vii ABSTRACT

Based on the findings of cases and phenomena of Tramadol drug abuse that has occurred quite a lot in Indonesia. Misuse of the drug Tramadol can cause negative effects for the body and can lead to death. Many cases have occurred due to the lack of knowledge and circulation of Tramadol drugs that can be obtained easily. The authors designed the Tramadol drug abuse hazard website that is shown to teenagers to better understand and increase knowledge about Tramadol drugs so that they can know the dangers of drug abuse. Teenagers as a young generation and the successor of the nation, it would be a pity if they became victims of the circulation and abuse of Tramadol drugs only because of lack of knowledge and the influence of a less supportive environment. The research method used by the author is quantitative (questionnaire) and qualitative method in the form of interviews. With this design is expected to provide knowledge and understanding to the public about the drug Tramadol and reduce the level of drug abuse Tramadol.

Keywords: Tramadol, Website, Abuse, Teen

(8)

viii DAFTAR ISI

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... II

HALAMAN PENGESAHAN TUGAS AKHIR ... III KATA PENGANTAR ... III ABSTRAKSI ...VI

ABSTRACT... VII

DAFTAR ISI ... VIII

DAFTAR GAMBAR ... XII DAFTAR TABEL ... XVIII

DAFTAR LAMPIRAN ... XIX

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang ... 1

1.2. Rumusan Masalah ... 3

1.3. Batasan Masalah ... 3

1.4. Tujuan Tugas Akhir ... 4

1.5. Manfaat Tugas Akhir ... 4

BAB II TINJAUAN PUSTAKA ... 5

2.1. Elemen Formal Desain ... 5

2.1.1. Garis ... 5

2.1.2. Bentuk ... 6

(9)

ix

2.1.3. Warna ... 7

2.1.4. Tekstur... 8

2.1.5. Elemen Jenis Huruf ... 9

2.1.6. Jenis Pengukuran ... 10

2.1.7. Jenis Anatomi ... 10

2.1.8. Jenis Klasifikasi Huruf ... 11

2.1.9. Type family ... 13

2.1.10. Grid ... 14

2.2. Media Informasi ... 16

2.2.1. Media Informasi dan Kesehatan ... 17

2.2.2. Desain Media Informasi ... 17

2.3. Website ... 18

2.3.1. Anatomi Website ... 19

2.3.2. 960 Grid System ... 21

2.3.3. Balance ... 22

2.4. Tramadol ... 24

2.4.1. Peraturan Obat Tramadol ... 25

2.4.2. Dosis dan Aturan Pemakaian Obat Tramadol ... 25

2.4.3. Peringatan Sebelum Mengonsumsi Obat Tramadol ... 25

2.4.4. Interaksi Tramadol Dengan Obat Lain ... 26

2.4.5. Efek Samping dan Bahaya Obat Tramadol ... 27

2.4.6. Penyalahgunaan Obat Tramadol ... 28

BAB III METODOLOGI ... 30

(10)

x

3.1. Metodologi Pengumpulan Data... 30

3.1.1. Wawancara ... 30

3.1.2. Kuesioner... 34

3.2. Metodologi Perancangan ... 37

BAB IV STRATEGI DAN ANALISIS PERANCANGAN ... 39

4.1. Strategi Perancangan ... 39

4.1.1. Mindmapping ... 40

4.1.2. Big idea ... 43

4.1.3. Brainstorming ... 44

4.1.4. Moodboard ... 47

4.1.5. Penentuan Tipografi ... 52

4.1.6. Perancangan Logo ... 53

4.1.7. Background... 55

4.1.8. Elemen Grafis ... 58

4.1.9. Ikon ... 64

4.1.10. Perancangan Website... 68

4.1.11. Perancangan X-Banner... 79

4.1.12. Perancangan Media Sosial... 83

4.2. Analisis Perancangan ... 89

4.2.1. Analisis Website... 90

4.2.2. Analisis X-Banner ... 96

4.2.3. Analisis Media Sosial Instagram ... 99

4.2.4. Analisis Merchandise ... 102

(11)

xi

4.3. Budgeting ... 105

BAB V ... 106

5.1 Kesimpulan ... 106

5.2 Saran ... 107 DAFTAR PUSTAKA ... XX

(12)

xii

DAFTAR GAMBAR

Gambar 2.1. Variasi Garis dari Bermacam Media ... 5

Gambar 2.2. Basic Shapes and Forms ... 6

Gambar 2.3. Shapes ... 7

Gambar 2.4. . Subtractive Primary Hues ... 7

Gambar 2.5. Value Contrast and Hue Contrast ... 8

Gambar 2.6. Tactile Texture ... 9

Gambar 2.7. Visual Texture ... 9

Gambar 2.8. Metal Type Charts by Martin Holloway ... 10

Gambar 2.9. Anatomi Huruf... 11

Gambar 2.10. Classification of Type Chart by Martin Holloway ... 12

Gambar 2.11. Typeface Classification Examples ... 12

Gambar 2.12. Typeface Classification/Single Letterforms ... 13

Ganbar 2.13. Example of a Type Super Family ... 13

Gambar 2.14. Single Grids ... 14

Gambar 2.15. Contoh Penerapan Single Grids ... 15

Gambar 2.16 Multicolumn Grid ... 15

Gambar 2.17. Modular Grid... 16

Gambar 2.18. Harmony Republic ... 19

Gambar 2.19. Anatomy of website ... 20

Gambar 2.20. 960 Grid System with 16 column ... 22

Gambar 2.21. Symmetrical Balance ... 23

(13)

xiii

Gambar 2.22. Asymmetrical Balance... 23

Gambar 2.23. Survei BNN 2018 ... 28

Gambar 2.24. Video remaja membawa obat terlarang ... 29

Gambar 3.1. Wawancara Dengan dr. Evi Furwanti, S.Ked. ... 31

Gambar 3.2. Wawancara Dengan Pengguna Obat Tramadol ... 33

Gambar 3.3. Wawancara dengan Ade Novero, S.Farm., Apt ... 34

Gambar 3.4. Tanggapan 1 ... 35

Gambar 4.1. Mindmap Tramadol ... 40

Gambar 4.2. Mindmap Big idea... 41

Gambar 4.3. Mindmap brainstorming ... 45

Gambar 4.4. Moodboard ... 47

Gambar 4.5. Kesan Pengetahuan ... 48

Gambar 4.6. Kesan Labil ... 49

Gambar 4.7. Color Palette ... 50

Gambar 4.8. Moodboard Website ... 51

Gambar 4.9. Lexend ... 52

Gambar 4.10. Lexend Family ... 53

Gambar 4.11. Penerapan Font Lexend pada Logo ... 54

Gambar 4.12. Eksplorasi Logo Obat Keras... 54

(14)

xiv

Gambar 4.13. Logo dengan Grid ... 54

Gambar 4.14. Finalisasi Logo ... 55

Gambar 4.15. Alternatif Logo ... 55

Gambar 4.16. Referensi Tekstur Abstrak ... 55

Gambar 4.17. Background Abstrak ... 56

Gambar 4.18. Background Abstrak Fade 1... 57

Gambar 4.19. Background Abstrak Fade 2... 58

Gambar 4.20. Foto Gelas Obat Karya Adam Nieciouruk ... 59

Gambar 4.21. Elemen Gelas Obat ... 59

Gambar 4.22. Kapsul Tramadol ... 59

Gambar 4.23. Pil Tramadol ... 60

Gambar 4.24. Tablet Tramadol ... 60

Gambar 4.25. Foto Kapsul Karya Chritina Victoria ... 61

Gambar 4.26. Elemen Kapsul Tramadol ... 61

Gambar 4.27. Foto Pil Obat Karya Isaac Quesada ... 62

Gambar 4.28. Elemen Pil Tramadol ... 62

Gambar 4.29. Foto Injeksi Obat Karya Markus Spiske ... 63

Gambar 4.30. Elemen Injeksi Tramadol ... 63

Gambar 4.31. Elemen Botol Injeksi Tramadol ... 63

Gambar 4.32. Sketch Ikon ... 65

Gambar 4.33. Ikon Fungsi & Efek... 65

Gambar 4.34. Ikon Bahaya ... 66

Gambar 4.35. Ikon Kasus ... 66

(15)

xv

Gambar 4.36. Ikon Interaksi Obat ... 67

Gambar 4.37. Sitemap ... 68

Gambar 4.38. Wireframe Homepage ... 69

Gambar 4.39. Eksplorasi Sketsa Fungsi & Efek ... 70

Gambar 4.40. Wireframe Fungsi & Efek ... 70

Gambar 4.41. Eksplorasi Sketsa Bahaya... 71

Gambar 4.42. Wireframe Bahaya ... 72

Gambar 4.43. Eksplorasi Sketsa Kasus ... 73

Gambar 4.44. Wireframe Kasus ... 73

Gambar 4.45. Wireframe Website ... 74

Gambar 4.46. 960 Grid System Pada Website ... 74

Gambar 4.47. Low Fidelity Website... 75

Gambar 4.48. Contoh Penerapan Background Abstrak Fading ... 76

Gambar 4.49. Contoh Penerapan Background Abstrak ... 76

Gambar 4.50. Contoh Penerapan Elemen Grafis ... 77

Gambar 4.51. Contoh Penerapan Ikon Utama ... 78

Gambar 4.52. Contoh Penerapan Ikon Interaksi Obat ... 78

Gambar 4.53. Proses Layouting Halaman “Bahaya” ... 79

Gambar 4.54. Ekslporasi Sketsa X-Banner ... 80

Gambar 4.55. Sketsa X-Banner ... 80

Gambar 4.56. Penerapan Multi Column Grid Pada X-banner ... 81

Gambar 4.57. Penerapan Elemen Grafis ... 82

Gambar 4.58. Hasil Akhir X-Banner 1 ... 82

(16)

xvi

Gambar 4.59. Hasil Akhir X-Banner 2 ... 83

Gambar 4.60. Eksplorasi Sketsa Instagram Story ... 84

Gambar 4.61. Sketsa Instagram Story ... 84

Gambar 4.62. Penerapan Grid Instagram Story ... 85

Gambar 4.63. Eksplorasi Sketsa Instagram Post ... 85

Gambar 4.64. Sketsa Instagram Post ... 86

Gambar 4.65. Penerapan Grid Pada Instagram Post ... 86

Gambar 4.66. Penerapan Elemen Grafis Pada Instagram Story ... 87

Gambar 4.67. Hasil Akhir Instagram Story ... 87

Gambar 4.68. Penerapan Elemen Grafis Pada Instagram Post ... 88

Gambar 4.69. Layouting Instagram Post ... 89

Gambar 4.70. Hasil Akhir Instagram Post ... 89

Gambar 4.71. Analisis Homepage ... 90

Gambar 4.72. Finalisasi Homepage ... 91

Gambar 4.73. Analisis Halaman “Fungsi & Efek” ... 92

Gambar 4.74. Finalisasi Halaman “Fungsi & Efek” ... 94

Gambar 4.75. Finalisasi Halaman “Bahaya” ... 94

Gambar 4.76. Finalisasi Halaman “Kasus” ... 95

Gambar 4.77. Mockup Website ... 96

Gambar 4.78. Finalisasi X-banner 1 ... 97

Gambar 4.79. Finalisasi X-banner 2 ... 98

Gambar 4.80. Mockup X-Banner ... 98

Gambar 4.81. Finalisasi Instagram Story ... 99

(17)

xvii

Gambar 4.82. Finalisasi Instagram Post 1 ... 100

Gambar 4.85. Mockup Instagram Story ... 102

Gambar 4.86. Mockup Instagram Post ... 102

Gambar 4.87. Desain Kaos Bagian Depan ... 103

Gambar 4.88. Desain Kaos Bagian Belakang ... 103

Gambar 4.89. Mockup Kaos ... 103

Gambar 4.90. Desain Topi ... 104

Gambar 4.91. Mockup Topi ... 104

(18)

xviii

DAFTAR TABEL

Tabel 4.1. Budgeting ... 101

(19)

xix

DAFTAR LAMPIRAN

LAMPIRAN A: LEMBAR BIMBINGAN ... XXIII

LAMPIRAN B: TRANSKRIP WAWANCARA DOKTER EVI FURWANTI . ... XXV

LAMPIRAN C: TRANSKRIP WAWANCARA PENGGUNA TRAMADOL ... XXVI LAMPIRAN D: TRANSKRIP WAWANCARA ADE NOVERO ... XXVIII