PERANCANGAN SITUS WEB INTERAKTIF TENTANG SEJARAH PERGERAKAN ORGANISASI
FORUM KOTA UNTUK MAHASISWA
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Vanesa
NIM : 00000018314
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG
2021
ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Vanesa
NIM : 00000018314
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
Universitas Multimedia Nusantara Judul Tugas Akhir:
PERANCANGAN SITUS WEB INTERAKTIF TENTANG SEJARAH PERGERAKAN ORGANISASI FORUM KOTA UNTUK MAHASISWA
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
iii
gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang berlaku di Universitas Multimedia Nusantara.
Tangerang, 29 Juni 2021
Vanesa
iv
HALAMAN PENGESAHAN TUGAS AKHIR
PERANCANGAN SITUS WEB INTERAKTIF TENTANG SEJARAH PERGERAKAN ORGANISASI
FORUM KOTA UNTUK MAHASISWA
Oleh
Nama : Vanesa
NIM : 00000018314
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
Tangerang, 29 Juni 2021 Pembimbing .
Mohammad Rizaldi, S.T., M.Ds.
Ketua Program Studi
Mohammad Rizaldi, S.T., M.Ds.
Penguji
Dr. Anne Nurfarina, M.Sn.
Ketua Sidang
Frindhinia Medyasepti, S.Sn., M.Sc.
v
KATA PENGANTAR
Puji syukur saya panjatkan kepada Tuhan yang Maha Esa ata berkatnya sehingga laporan tugas akhir tentang perancangan situs web interaktif tentang sejarah peristiwa Mei 1998 ini dapat disusun.
Dibuatnya perancangan buku akan topik ini agar para mahasiswa sadar akan kuatnya pengaruh suara mereka terhadap sekitarnya dan dapat termotivasi untuk bersuara secara organisasi sekaligus belajar lebih banyak tentang peristiwa bersejarah ini.
Penulisan laporan tugas akhir ini juga dibantu oleh beberapa pihak lain, karena itu penulis ingin menyampaikan rasa terima kasih kepada:
1. Mohammad Rizaldi, S.T., M.Ds. selaku Ketua Program Studi Desain Komunikasi Visual pada Fakultas Seni & Desain, Universitas Multimedia Nusantara sekaligus pembimbing penulis yang telah membantu mengarahkan penulis dalam proses perancangan tugas akhir.
2. Yosef D. M. Djakababa P.hD. yang sudah bersedia menjadi narasumber dalam proses perancangan tugas akhir.
3. Para mahasiswa yang bersedia untuk mengisi kuesioner dalam proses perancangan tugas akhir.
4. Teman-teman penulis yang telah mendukung, dan membantu penulis dalam perancangan tugas akhir.
5. Paiman Salim & Shanty Atmadja selaku keluarga dari penulis yang telah memberikan dukungan dalam perancangan tugas akhir.
vi Tangerang, 29 Juni 2021
Vanesa
vii
ABSTRAKSI
Organisasi mahasiswa seharusnya tidak asing lagi di telinga mahasiswa. Organisasi mahasiswa merupakan tempat dimana selain untuk berkumpul dan berkarya, mahasiswa juga dapat berekspresi dan menuangkan suara mereka, namun pada saat ini kebanyakan organisasi mahasiswa kurang dijadikan sarana untuk beropini.
Kebanyakan mahasiswa sekarang lebih menganggap organisasi kemahasiswaan sekedar tempat untuk bersosialisasi dan mencari pengalaman atau tempat untuk mengembangkan hobi. Padahal sejarah membuktikan bahwa suara organisasi mahasiswa memiliki dampak yang besar dalam perubahan kondisi di sekitarnya.
Oleh karena itu penulis memilih untuk merancang sebuah media informasi berupa situs web interaktif tentang sejarah peristiwa Mei 1998 untuk mahasiswa dengan harapan dapat memotivasi mahasiswa zaman sekarang untuk berani berekspresi dan menyuarakan pendapat mereka seacra organisasi
Kata kunci: Media Informasi, Situs Web, interaktif, mahasiswa, Mei 1998, organisasi
viii
ABSTRACT
Student organization should be a familiar concept to students. Student Organization is a place where in addition to connecting with other students and creating something, students can also express their opinions, but at now most student organizations are not used as a means to share their opinions. Most students these days think that student organization is just a place to socialize and find experiences or a place to develop a hobby. Whereas history proves that the voice of student organizations has a great impact on changing the world around them. Therefore, the author chose to design an information media in the form of an interactive website about the history of May 1998 event for students with the hope of motivating students today to dare to express and voice their opinions as an organization.
Keywords: Information media, website, interactive, student, May 1998, Organization
ix
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... II HALAMAN PENGESAHAN TUGAS AKHIR ... IV ... IV
KATA PENGANTAR ... IV ABSTRAKSI ... VII
ABSTRACT ... VIII
DAFTAR ISI ... IX DAFTAR GAMBAR ... XII
DAFTAR TABEL ... XVII DAFTAR LAMPIRAN ... XVIII
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
Desain ... 5
Media... 5
x
2.2.1 Media Digital ... 6
Situs web ... 7
2.3.1. Prinsip Desain Situs Web ... 8
2.3.2. Elemen Desain Situs Web ... 11
2.3.3. Web Usability ... 26
2.3.4. Sitemap ... 28
2.3.5. Wireframe ... 28
2.3.6. Icon ... 30
2.3.7. Motion Graphic ... 32
2.3.8. Tata cara penulisan Situs Web ... 33
Storytelling ... 34
2.4.1. Digital Storytelling ... 37
Interaktivitas ... 37
2.5.1. Scrollytelling ... 37
2.5.2. Parallax Scrolling ... 38
2.5.3. Button ... 39
Responsive Web Design (RWD) ... 45
Organisasi Kemahasiswaan ... 45
Peristiwa Mei 1998 ... 46
2.8.1. Forum Kota ... 47
BAB III METODOLOGI ... 48
Metodologi Pengumpulan Data ... 48
3.1.2. Kuesioner ... 49
xi
3.1.3. Studi Referensi ... 56
Metodologi Perancangan ... 62
3.2.1. Metode Perancangan Situs Web ... 63
3.2.2. Publikasi ... 80
BAB IV ANALISIS ... 81
Analisis Alpha Test ... 81
Prototype ... 81
Analisis Pengguna ... 83
Revisi Pasca Alpha Test ... 88
Analisis Beta Test ... 96
Analisis Desain ... 97
Analisis Pengguna ... 111
BAB V PENUTUP ... 114
Kesimpulan ... 114
Saran ... 114
DAFTAR PUSTAKA ... 118
xii
DAFTAR GAMBAR
Gambar 2.1. Situs web “The Walking Dead Zombified” ... 6
Gambar 2.2. Tata letak pada situ web “Interactions 2.0” ... 8
Gambar 2.3. Situs web “Vans” ... 9
Gambar 2.4. Situs web “Neil patel Digital” ... 10
Gambar 2.5. Situs web “The Boat” ... 10
Gambar 2.6. Kolom ... 12
Gambar 2.7. Baris ... 12
Gambar 2.8. Modules ... 13
Gambar 2.9. Gutters ... 14
Gambar 2.10. Margin ... 14
Gambar 2.11. Block grid ... 15
Gambar 2.12. Column grid ... 16
Gambar 2.13. Modular grid ... 16
Gambar 2.14. Hierarchical grid ... 17
Gambar 2.15. Roda warna ... 18
Gambar 2.16. Font karakter Sans Serif ... 20
Gambar 2.17. Situs web “Ali Wong Structure of Stand Up Comedy”... 21
Gambar 2.18. Old style typeface ... 21
Gambar 2.19. Transitional typeface ... 22
Gambar 2.20. Modern typeface ... 22
Gambar 2.21. Sans serif typeface ... 23
Gambar 2.22. Slab serif typeface ... 23
xiii
Gambar 2.23. Graphic typeface ... 24
Gambar 2.24. Situs web “Make Me Pulse” ... 25
Gambar 2.25. Sitemap ... 28
Gambar 2.26. Wireframe ... 29
Gambar 2.27. Icon sederhana ... 30
Gambar 2.28. Icon dan estetika ... 31
Gambar 2.29. Situs web “Bond: License to Drive” ... 34
Gambar 2.30. Situs web “Every Last Drop” ... 37
Gambar 2.31. Situs web “Firewatch” ... 38
Gambar 2.32. CTA button ... 39
Gambar 2.33. Dropdown button ... 40
Gambar 2.34. Text button ... 40
Gambar 2.35. Hamburger button ... 41
Gambar 2.36. Plus button... 41
Gambar 2.37. Expendable button ... 42
Gambar 2.38. Share button ... 43
Gambar 2.39. Ghost button ... 43
Gambar 2.40. Adaptasi tampilan pada situs web ... 44
Gambar 3.1. Bukti wawancara ... 49
Gambar 3.2. Hasil kuesioner 1 ... 50
Gambar 3.3. Hasil kuesioner 2 ... 50
Gambar 3.4. Hasil kuesioner 3 ... 51
Gambar 3.5. Hasil kuesioner 4 ... 52
xiv
Gambar 3.6. Hasil kuesioner 5 ... 52
Gambar 3.7. Hasil kuesioner 6 ... 53
Gambar 3.8. Hasil kuesioner 7 ... 54
Gambar 3.9. Hasil kuesioner 8 ... 54
Gambar 3.10. Hasil kuesioner 9 ... 55
Gambar 3.11. Hasil kuesioner 10 ... 55
Gambar 3.12. Homepage situs “Millenials are Screwed”... 56
Gambar 3.13. Konten situs “Millenials are Screwed” ... 57
Gambar 3.14. Homepage situs “If the Moon Were Only 1 Pixel” ... 58
Gambar 3.15. Konten situs “If the Moon Were Only 1 Pixel” ... 59
Gambar 3.16. Tampilan situs “The Qode Interactive Catalog” ... 60
Gambar 3.17. Ilustrasi dari situs “The Qode Interactive Catalog” ... 60
Gambar 3.18. Tampilan Situs “Hobolobo” ... 61
Gambar 3.19. Persona... 65
Gambar 3.20. Mind map... 67
Gambar 3.21. Moodboard arstyle & overall vibe ... 68
Gambar 3.22. Moodboard typeface ... 69
Gambar 3.23. Moodboard warna ... 69
Gambar 3.24. Kumpulan sketsa awal ilustrasi ... 70
Gambar 3.25. Kumpulan ilustrasi final yang digunakan... 71
Gambar 3.26. Proses pembuatan icon ... 72
Gambar 3.27. Proses pembuatan button ... 73
Gambar 3.28. Aset foto ... 74
xv
Gambar 3.29. Sitemap ... 76
Gambar 3.30. Sketsa situs ... 78
Gambar 3.31.Wireframe situs ... 79
Gambar 3.32. Prototype situs ... 80
Gambar 4.1. Tampilan situs saat prototype day. ... 81
Gambar 4.2. Hasil test play 1. ... 83
Gambar 4.3. Hasil test play 2. ... 84
Gambar 4.4. Hasil test play 3. ... 85
Gambar 4.5. Hasil test play 4 ... 85
Gambar 4.6. Hasil test play 5. ... 86
Gambar 4.7. Hasil test play 6. ... 87
Gambar 4.8. Hasil test play 7. ... 88
Gambar 4.9. Desain final situs web. ... 97
Gambar 4.10. Grid system ... 98
Gambar 4.11. Halaman landing page. ... 99
Gambar 4.12. Halaman bagian 1. ... 100
Gambar 4.13. Halaman bagian 2. ... 101
Gambar 4.14. Halaman bagian 3 beserta interaksinya. ... 102
Gambar 4.15. Halaman bagian 4 beserta interaksinya. ... 103
Gambar 4.16. Halaman bagian 5. ... 105
Gambar 4.17. Isi konten bagian 5. ... 106
Gambar 4.18. Isi konten bagian 6. ... 107
Gambar 4.19. Fitur split page pada bagian 6. ... 109
xvi
Gambar 4.20. Fitur scroll-to-top button. ... 110
Gambar 4.21. Pertanyaan beta test 1. ... 111
Gambar 4.22. Pertanyaan beta test 2. ... 111
Gambar 4.23. Pertanyaan beta test 3. ... 112
Gambar 4.24. Pertanyaan beta test 4. ... 113
xvii
DAFTAR TABEL
Tabel 4.1. Tabel perubahan desain ... 88
xviii
DAFTAR LAMPIRAN
LAMPIRAN A: LEMBAR BIMBINGAN TUGAS AKHIR ... 122IV LAMPIRAN B: TRANSKRIP BUKTI WAWANCARA ... XXVI
