PERANCANGAN ULANG DESAIN UI/UX WEBSITE SMA XAVERIUS BANDAR LAMPUNG

(1)

PERANCANGAN ULANG DESAIN UI/UX WEBSITE SMA XAVERIUS BANDAR LAMPUNG

LAPORAN TUGAS AKHIR

Jesica Melatin 00000030897

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2022

(2)

i

Perancangan Ulang Desain UI/UX Website SMA Xaverius Bandar Lampung, Jesica Melatin, Universitas Multimedia Nusantara

PERANCANGAN ULANG DESAIN UI/UX WEBSITE SMA XAVERIUS BANDAR LAMPUNG

LAPORAN TUGAS AKHIR

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

Jesica Melatin 00000030897

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2022

(3)

(4)

iii

HALAMAN PENGESAHAN

Tugas Akhir dengan judul

PERANCANGAN ULANG DESAIN UI/UX WEBSITE SMA XAVERIUS BANDAR LAMPUNG

Oleh

Nama : Jesica Melatin NIM : 00000030897

Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain

Telah diujikan pada hari Senin , 3 Januari 202 2 Pukul 1 4 . 30 s.d 1 5 . 15 dan dinyatakan

LULUS

Dengan susunan penguji sebagai berikut.

Ketua Sidang

Dr.Sn. Yusup S. Martyastiadi, S.T., M.Inf.Tech.

0319037807/E023902

Penguji

Nadia Mahatmi, M.Ds.

0416038705/E039375 Pembimbing

Cennywati, S.Sn., M.Ds.

1024128201/E071277

Ketua Program Studi Desain Komunikasi Visual

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

0313068301/E023907

(5)

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

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

Nama : Jesica Melatin

NIM : 00000030897

Program Studi : Desain Komunikasi Visual

Fakultas : Seni dan Desain

JenisKarya : *Tesis/Skripsi/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 ULANG DESAIN UI/UX WEBSITE SMA XAVERIUS BANDAR LAMPUNG

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, 5 Januari 2022 Yang menyatakan,

(Jesica Melatin)

(6)

v

KATA PENGANTAR

Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa sehingga penulis dapat menyelesaikan proposal Tugas Akhir yang berjudul “Perancangan Ulang Desain UI/UX Website SMA Xaverius Bandar Lampung”. Topik ini dipilih karena penulis melihat adanya fenomena website sekolah SMA Xaverius Bandar Lampung ini tidak mempresentasikan sekolah dan tidak berfungsi secara maksimal.

Topik ini penting untuk dibahas dikarenakan fenomena tersebut memberikan dampak buruk yakni website tersebut menyulitkan para pengguna terutama dalam mengeksplor website SMA Xaverius Bandar Lampung. Oleh karena itu, penulis ingin merancang ulang desain tampilan UI/UX website SMA Xaverius Bandar Lampung. Target pembaca dari proposal ini adalah siswa-siswi SMP yang tinggal di provinsi Lampung. Hal ini dilakukan dengan maksud agar para siswa yang tertarik untuk mengenal sekolah SMA Xaverius Bandar Lampung dapat memakai fitur yang disediakan dan menerima informasi secara efektif dari website.

Penulis berharap dengan menulis proposal ini, pembaca dapat memperoleh pengetahuan baru yang berguna, dan dapat menjadi referensi untuk mahasiswa lainnya yang tertarik dengan perancangan UI/UX.

Selama penulisan tugas akhir tentu banyak yang terlibat, maka dari itu penulis ingin mengucapkan terima 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 Seni dan Desain Universitas Multimedia Nusantara.

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

4. Cennywati, S.Sn., M.Ds., sebagai Pembimbing pertama yang telah memberikan bimbingan, arahan, dan motivasi atas terselesainya Tugas Akhir Ini.

(7)

5. Robertus Ferdianto dan F. Joko Winarno sebagai Narasumber yang telah memberikan informasi mengenai sekolah dan website sekolah.

6. Willy Santori sebagai Narasumber yang telah memberikan informasi mengenai UI/UX khususnya pada website.

7. Keluarga saya yang telah memberikan bantuan dukungan material dan moral, sehingga penulis dapat menyelesaikan Laporan Tugas Akhir ini.

8. Felicia Ivana Riyandani, Evelyn Angela Citra, Paramita Tanarya, Kevina, dan Nathalia Tjayana yang telah menemani dan juga memberikan semangat selama proses tugas akhir.

Tangerang, 5 Januari 2022

(Jesica Melatin)

(8)

vii

PERANCANGAN ULANG DESAIN UI/UX WEBSITE SMA XAVERIUS BANDAR LAMPUNG

(Jesica Melatin) ABSTRAK

Website menjadi salah satu platform terbaik di jaman teknologi seperti sekarang dikarenakan website tidak hanya memberikan seputar informasi tetapi juga identitas, promosi, juga edukasi. Sekolah SMA Xaverius Bandar Lampung sudah berdiri sejak tahun 1961 dan hingga sekarang sudah terakreditasi A. Pada tahun 2020, sekolah SMA Xaverius Bandar Lampung memutuskan untuk mendirikan website dengan tujuan untuk menampilkan identitas dan informasi seputar sekolah itu sendiri. Namun website tersebut memiliki masalah yakni UI/UX yang berantakan dan tidak berfungsi secara maksimal. Maka dari itu rumusan masalahnya adalah bagaimana bentuk UI/UX website SMA Xaverius Bandar Lampung dapat memberikan tampilan yang bagus dan berfungsi secara maksimal kepada para pengguna. Metode penelitian yang digunakan adalah mix method meliputi kuisioner, wawancara, forum group discussion, studi eksisting, dan studi referensi. Hasil penelitian yang diharapkan adalah UI/UX SMA Xaverius Bandar Lampung menjadi menarik dan memenuhi kebutuhan para pembaca terutama anak SMP yang ingin menuju jenjang ke sekolah menengah atas.

Kata kunci: UI/UX, Sekolah, Website

(9)

REDESIGN UI/UX OF XAVERIUS BANDAR LAMPUNG HIGH SCHOOL WEBSITE

(Jesica Melatin)

ABSTRACT (English)

Website is one of the best platforms in the technological era as it is now because website not only provides information but also identity, promotion, and education.

Xaverius Bandar Lampung High School has been established since 1961 and until now has been accredited A. In 2020, Xaverius Bandar Lampung High School decided to establish a website with the aim of displaying identity and information about the school itself. However, the website has a problem, namely the UI/UX is messy and doesn't work optimally. Therefore, the formulation of the problem is how the UI/UX of Xaverius Bandar Lampung high school website can provide a good appearance and work optimally for users. The research method used is a mix method including questionnaires, interviews, group discussion forums, existing studies, and reference studies. The expected result of the research is that the UI/UX display of Xaverius Bandar Lampung High School will be attractive and fulfil the needs of readers, especially junior high school students who want to advance to high school.

Keywords: UI/UX, School, Website

(10)

ix

DAFTAR ISI

HALAMAN PERNYATAAN TIDAK PLAGIAT ... ii

HALAMAN PENGESAHAN ... iii

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

KATA PENGANTAR ... v

ABSTRAK ... vii

ABSTRACT (English) ... viii

DAFTAR ISI ... ix

DAFTAR TABEL ... xii

DAFTAR GAMBAR ... xiii

DAFTAR LAMPIRAN ... xvi

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 ... 4

Teori Perancangan ... 4

2.1.1 Elemen Grafis ... 4

2.1.2 Prinsip Desain ... 7

2.1.3 Tipografi ... 11

2.1.4 Grid ... 13

Website ... 16

2.2.1 Jenis-Jenis Website ... 16

2.2.2 Elemen-Elemen pada Website ... 17

2.2.3 Anatomi Halaman Website ... 18

2.2.4 Gaya Desain Website ... 20

User Interface ... 25

2.3.1 Minimun Design ... 26

2.3.2 Simplicity ... 26

(11)

2.3.3 Accessibility ... 26

2.3.4 Consistency ... 27

2.3.5 Feedback ... 27

2.3.6 Forgiveness ... 27

2.3.7 User Driven ... 27

User Experience ... 27

2.4.1 The Surface Plane ... 28

2.4.2 The Skeleton Plane ... 29

2.4.3 The Structure Plane ... 29

2.4.4 The Scope Plane ... 29

2.4.5 The Strategy Plane ... 30

Fotografi ... 30

2.5.1 Teknik Blur ... 31

2.5.2 Teknik Depth of Field ... 32

2.5.3 Teknik Panning ... 32

2.5.4 Teknik Slow & Stop Action ... 33

2.5.5 Teknik Zooming ... 33

2.5.6 Teknik Bulb ... 34

2.5.7 Teknik Key Lighting ... 35

Sekolah SMA Xaverius Bandar Lampung ... 35

BAB III METODOLOGI PENELITIAN ... 37

3.1 Metode Pengumpulan Data ... 37

3.1.1 Wawancara ... 37

3.1.2 Focus Group Discussion ... 43

3.1.3 Kuesioner ... 46

3.1.4 Study Existing ... 49

3.1.5 Studi Referensi ... 52

Metode Perancangan ... 57

BAB IV STRATEGI & ANALISIS PERANCANGAN ... 59

4.1 Strategi Perancangan ... 59

4.1.1 Inspiration ... 59

(12)

xi

4.2 Alpha Test ... 106

4.2.1 Analisis Hasil Alpha Test ... 107

4.2.2 Get Feedback ... 110

4.2.3 Revisi Pasca Alpha Test ... 111

4.2.4 Hasil Perbaikan Keseluruhan ... 118

4.3 Implementation ... 120

4.3.1 Beta Test ... 120

4.3.2 Analisis Hasil Beta Test ... 121

4.3.3 Keep Getting Feedback ... 124

4.4 Budgeting ... 125

BAB V PENUTUP ... 126

5.1 Simpulan ... 126

5.2 Saran ... 126

DAFTAR PUSTAKA ... xvii

LAMPIRAN ... xxi

(13)

DAFTAR TABEL

Tabel 3.1. Hasil Analisa Sesi Kedua FGD ... 45

Tabel 3.2. Diagram Lingkaran Jumlah Usia Responden ... 46

Tabel 3.3. Diagram Lingkaran Jumlah Pengunjung Sekolah ... 47

Tabel 3.4. Diagram Batang Hasil Preferensi Responden ... 48

Tabel 3.5. Diagram Lingkaran Hasil Preferensi Desain ... 49

Tabel 3.6. Tabel SWOT SMA Kanisius ... 50

Tabel 3.7. Tabel SWOT SMAK BPK Penabur Bandar Lampung ... 51

Tabel 3.8. Tabel SWOT Shopee Karir ... 53

Tabel 3.9. Tabel SWOT Website Sinarmas World Academy ... 54

Tabel 3.10. Tabel SWOT Website Universitas Gajah Mada ... 56

Tabel 4.1. Tabel Pembagian Halaman ... 68

Tabel 4.2. Tabel Warna ... 72

Tabel 4.3. Tabel Bentuk Ikon ... 74

Tabel 4.4. Tabel Segi Tampilan Desain ... 107

Tabel 4.5. Tabel System Usability Scale ... 108

Tabel 4.6. Tabel Beta Test Hasil Segi Tampilan Desain... 121

Tabel 4.7. Tabel Beta Test Hasil Segi System Usability Scale... 123

Tabel 4.8. Tabel Budgeting ... 125

(14)

xiii

DAFTAR GAMBAR

Gambar 2.1 Pengaplikasian Garis dalam Website ... 5

Gambar 2.2 Pengaplikasian Bentuk dalam Website ... 5

Gambar 2.3 Warna Primer Aditif ... 6

Gambar 2.4 Warna Primer Subraktif ... 7

Gambar 2.5 Screenshot Bentuk Komposisi ... 8

Gambar 2.6. Bentuk Simetris pada Website ... 8

Gambar 2.7. Bentuk Asimetris pada Website... 9

Gambar 2.8. Layout Dengan Irama Visual... 9

Gambar 2.9. Golden Ratio Pada Website ... 10

Gambar 2.10. Kesatuan dalam Website... 11

Gambar 2.11. Screenshot Bentuk Klasifikasi Typeface ... 11

Gambar 2.12. Screenshot Website Dengan Grid Single Column Grid ... 14

Gambar 2.13. Multicolumn Grid dalam Website ... 15

Gambar 2.14. Modular Grid dalam Website ... 15

Gambar 2.15. Anatomi Halaman Website ... 18

Gambar 2.16. Screenshot Website Dengan Gaya Left-column Navigation ... 20

Gambar 2.17. Screenshot Website Dengan Gaya Right-column Navigation ... 21

Gambar 2.18. Screenshot Website Dengan Gaya Three-column Navigation... 21

Gambar 2.19. Screenshot Website Dengan Gaya Navigationless Magazine Style 22 Gambar 2.20. Screenshot Website Dengan Gaya Bare-bones Minimalism ... 23

Gambar 2.21. Screenshot Website Dengan Gaya Break the Mould Layouts ... 23

Gambar 2.22. Screenshot Website Dengan Gaya Video Backgrounds ... 24

Gambar2.23. Screenshot Website Dengan Gaya Masonry Layouts ... 24

Gambar 2.24. Screenshot Website Dengan Gaya Parallax Scrolling ... 25

Gambar 2.25. Implementasi UI Dalam Kehidupan Sehari-Hari ... 26

Gambar 2.26. Bentuk User Interface ... 27

Gambar 2.27. Elemen User Experience Menurut Garret ... 28

Gambar 2.28. Camera Obscura (Aristoteles), Yunani 384-322 SM ... 31

Gambar 2.29. Penggunaan Teknik Blur ... 31

Gambar 2.30. Teknik Depth Of Field ... 32

Gambar 2.31. Teknik Panning ... 32

Gambar 2.32. Teknik Slow & Stop Action ... 33

Gambar 2.33. Teknik Zooming ... 34

Gambar 2.34. Hasil Gambar Dengan Teknik Bulb ... 34

Gambar 2.35. Hasil Foto Dengan Memainkan Cahaya Lampu ... 35

Gambar 2.36. Logo Sekolah SMA Xaverius Bandar Lampung... 35

Gambar 2.37. Screenhot Lokasi Sekolah SMA Xaverius Bandar Lampung ... 36

Gambar 3.1. Proses Wawancara dengan Penanggung Jawab Website... 38

Gambar 3.2. Proses Wawancara dengan Ahli UI/UX ... 39

Gambar 3.3. Foto Dokumentasi Bersama Joko Selaku Kepala Sekolah... 41

(15)

Gambar 3.4. Proses Forum Group Discussion berlangsung ... 43

Gambar 3.5. Screenshot Tampilan Website SMA Xaverius Bandar Lampung .... 44

Gambar 3.6. Screenshot Tampilan Website Sekolah Lain Yakni SMA Kanisius . 44 Gambar 3.7. Screenshot Tampilan Website dan Logo SMA Kanisius ... 50

Gambar 3.8. Screenshot Tampilan Website dan Logo SMAK BPK Penabur Bandar Lampung ... 51

Gambar 3.9. Screenshot Tampilan Website dan Logo Shopee Karir ... 52

Gambar 3.10. Screenshot Tampilan Website dan Logo Sinarmas World Academy ... 54

Gambar 3.11. Screenshot Tampilan Website Universitas Gadjah Mada ... 55

Gambar 4.1. Mind Map Tentang SMA Xaverius Bandar Lampung ... 61

Gambar 4.2. Mind Map Tone Of Voice Dari Big Idea ... 62

Gambar 4.3. Moodboard ... 63

Gambar 4.4. Persona Remaja SMP ... 64

Gambar 4.5. Persona Sekunder Orang Tua ... 65

Gambar 4.6. User Journey Hani ... 66

Gambar 4.7. User Journey Maria ... 67

Gambar 4.8. Sitemap ... 68

Gambar 4.9. Triadic Color ... 70

Gambar 4.10. Warna Website ... 71

Gambar 4.11. Typography ... 73

Gambar 4.12. Icon Asset ... 74

Gambar 4.13. Icon Grid System ... 76

Gambar 4.14. Button ... 76

Gambar 4.15. Google Maps Sekolah ... 77

Gambar 4.16. Video Background ... 78

Gambar 4.17. Foto-Foto Bangunan Sekolah ... 79

Gambar 4.18. Foto Santo Fransiskus Xaverius ... 79

Gambar 4.19. Foto-Foto untuk Artikel ... 80

Gambar 4. 20. Foto-Foto Galeri Hari Pangan ... 80

Gambar 4.21. Foto-Foto Galeri Hari Pramuka... 81

Gambar 4.22. Foto-Foto Galeri Live In ... 81

Gambar 4.23. Foto-Foto Galeri Santiaji ... 82

Gambar 4.24. Foto-Foto Galeri Edufair ... 82

Gambar 4.25. Foto-Foto Galeri Teater ... 83

Gambar 4.26. Low Fidelity ... 84

Gambar 4.27. Contoh Layout ... 84

Gambar 4.28. High Fidelity ... 85

Gambar 4.29. Halaman Home ... 86

Gambar 4.30. Halaman Sejarah Sekolah... 87

Gambar 4.31. Halaman Visi Misi & Logo ... 88

(16)

xv

Gambar 4.34. Halaman Daftar ... 91

Gambar 4.35. Halaman Artikel ... 92

Gambar 4.36. Halaman Panduan Kurikulum ... 93

Gambar 4.37. Halaman Waktu Belajar ... 94

Gambar 4.38. Halaman Syarat Kelulusan ... 94

Gambar 4.39. Halaman Kontak ... 95

Gambar 4.40. Halaman Alumni ... 96

Gambar 4.41. Wireframe Low Fidelity ... 97

Gambar 4.42. Prototype ... 98

Gambar 4.43. Prototype Tentang Sekolah 1 ... 98

Gambar 4.44. Prototype Tentang Sekolah 2 ... 99

Gambar 4.45. Prototype Daftar ... 99

Gambar 4.46. Prototype Artikel ... 100

Gambar 4.47. Prototype Kurikulum ... 101

Gambar 4.48. Prototype Kontak ... 101

Gambar 4.49. Prototype Alumni ... 102

Gambar 4.50. Tabel Hover Effect ... 103

Gambar 4.51. Instagram Post ... 104

Gambar 4.52. Instagram Story ... 104

Gambar 4.53. Facebook Post ... 104

Gambar 4.54. Mockup Website ... 105

Gambar 4.55. Mockup Media Sekunder ... 106

Gambar 4.56. Before (Atas) dan After (Bawah) Jarak Header ... 111

Gambar 4.57. Before (Atas) dan After (Bawah) Drop Down ... 111

Gambar 4.58. Isi Konten Sejarah Sekolah Before (Kiri) dan After (Kanan)... 112

Gambar 4.59. Layout Isi Konten Artikel Before (Kiri) dan After (Kanan) ... 113

Gambar 4.60. Posisi Logo Pada Footer Before (Kiri) dan After (Kanan)... 113

Gambar 4.61. Posisi Kotak Notifikasi Before (Atas) dan After (Bawah) ... 114

Gambar 4.62. Size Huruf Before (Atas) dan After (Bawah) ... 115

Gambar 4.63. Warna Pembatas Before (Atas) dan After (Bawah) ... 115

Gambar 4.64. Size Kotak Kategori Pada Artikel Before (Kiri) dan After (Kanan) ... 116

Gambar 4.65. Prototype Daftar Revisi ... 117

Gambar 4.66. Low Fidelity Revisi ... 118

Gambar 4.67. High Fidelity Revisi ... 119

Gambar 4.68. Prototype Ulang ... 120

Gambar 4.69. Bukti Pelaksaan Beta Test ... 120

(17)

DAFTAR LAMPIRAN

Lampiran 1 ... xxi

Lampiran 2 ... xxiii

Lampiran 3 ... xxvi

Lampiran 4 ... xxviii

Lampiran 5 ... xxxv Lampiran 6 ... xliii Lampiran 7 ... xlvii Lampiran 8 ... li Lampiran 9 ... lvii