Perancangan UI/UX Media Informasi Hewan Ternak Sapi

(1)

**PERANCANGAN UI/UX MEDIA INFORMASI HEWAN TERNAK SAPI**

LAPORAN TUGAS AKHIR

Arien Nindya 00000033451

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2023

(2)

i

Perancangan UI/UX Media…, Arien Nindya, Universitas Multimedia Nusantara

**PERANCANGAN UI/UX MEDIA INFORMASI HEWAN TERNAK SAPI**

LAPORAN TUGAS AKHIR

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

Arien Nindya 00000033451

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2023

(3)

(4)

(5)

iv

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

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

Nama : Arien Nindya

NIM : 00000033451

Program Studi : Desain Komunikasi Visual

Fakultas : Seni dan Desain

JenisKarya : 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 UI/UX MEDIA INFORMASI HEWAN TERNAK SAPI 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, 20 Januari 2023 Yang menyatakan,

(Arien Nindya)

(6)

v

KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas segala rahmat yang berlimpah, sehingga penulis dapat menyelesaikan Tugas Akhir dengan berjudul “Perancangan UI/UX Media Informasi Hewan Ternak Sapi” yang dilakukan sebagai salah satu syarat kelulusan untuk mencapai dan mendapatkan gelar Sarjana Desain (S.Ds.).

Tujuan dari tugas akhir ini tentunya agar para pembaca mendapatkan informasi mengenai sektor peternakan khususnya untuk hewan ternak sapi serta menambah ilmu mengenai tata cara perancangan dari user interface dan user experience. Tugas akhir ini penting juga dibahas dikarenakan untuk membantu masyarakat awam yang sedang mencari informasi peternakan serta masyarakat yang baru ingin terjun ke peternakan agar mendapatkan informasi yang terpercaya secara langsung yang di dapat dari peternakan sapi.

Penulis berharap dari penulisan perancangan ini, pembaca mendapatkan informasi dan pengetahuan yang baru dan berguna yang dapat digunakan dikemudian hari. Sangat disadari tanpa bantuan dan bimbingan dari berbagai pihak lainnya dimulai dari masa perkuliahan hingga penyusunan tugas akhir ini, sangatlah sulit bagi penulis untuk menyelsaikan tugas akhir ini.

Mengucapkan terima kasih

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. Fonita Theresia Yoliando, S.Ds., M.A., selaku Ketua Program Studi Desain Komunikasi Visual Universitas Multimedia Nusantara.

4. Ardiles Akyuwen, M.Sn., sebagai Pembimbing yang telah memberikan bimbingan, arahan, dan motivasi atas terselesainya tugas akhir ini.

5. Keluarga saya yang telah memberikan bantuan dukungan material, moral, dan doa sehingga penulis dapat menyelesaikan tugas akhir ini.

(7)

vi

6. Teman-teman saya, Niken, Dita, Sifa, Athiyah, Zahra, Vivi, dan Jose yang telah memberikan bantuan dan dukungan serta motivasi selama pengerjaan tugas akhir sehingga penulis dapat menyelsaikan tugas akhir ini.

7. Teman spesial yang selalu mendukung saya selama pengerjaan tugas akhir ini Geto, Riftan, Toji, Christian Yu, dan Johnny Suh.

8. Para narasumber interview Bapak Anggrohono Pulung dan Ibu Agnes Artha Ariadina yang telah meluangkan waktunya untuk dilakukan wawancara, serta memberikan informasi yang bermanfaat bagi Tugas Akhir ini.

9. Responden prototype day yang telah ikut membantu dan tidak dapat disebutkan satu persatu.

Semoga tugas akhir ini dapat bermanfaat bagi pembaca, baik sebagai informasi atau inspirasi serta dapat berguna kedepannya untuk

Tangerang, 20 Januari 2023

(Arien Nindya)

(8)

vii

**PERANCANGAN UI/UX MEDIA INFORMASI HEWAN TERNAK SAPI**

Arien Nindya

ABSTRAK

Media informasi digital sangat dibutuhkan pada perkembangan teknologi saat ini dikarenakan mempermudah masyarakat dalam mengakses suatu informasi secara cepat dan bisa dilakukan dimanapun. Namun untuk bagian sektor peternakan ini khusus nya hewa sapi masih begitu sangat minim dan cenderung sulit karena kebanyakan masyarakat yang ingin mengetahui informasi akan peternakan harus bergabung dalam suatu komunitas terlebih dahulu. Sebagian dari masyarakat bertanya ke kolega atau keluarga untuk seputar informasi peternakan khususnya hewan ternak sapi yang informasi nya tersebut belum tentu terpercaya. Hingga pada akhirnya peternakan Kandang Adi Lembu Farm siap untuk memberikan edukasi dan informasi seputar peternakan berdasarkan penngalaman peternakan yang telah mereka lakukan. Namun, masalah yang dihadapi oleh pihak peternak ialah mereka belum memiliki sarana penyebaran media informasi secara digital. Maka dari itu berasal dari kedua permasalahan tersebut dibutuhkannya sarana media informasi digital yang dapat membantu masyarakat agar dapat bisa mengakses informasi tentang peternakan sapi secara mudah dan efisien sehingga rumusan masalah yang ingin dibentuk ialah bagaimana membentu UI/UX Media Informasi Hewan Ternak Sapi. Metode penelitian dalam perancangan ini menggunakan metode kualitatif dan kuantitatif meliputi kuesioner, wawancara, dan studi eksisting. Hasil dari penelitian ini diharapkan agar sektor peternakan khususnya hewan ternak sapi memiliki sarana media informasi digital yang dapat dikases secara mudah dan terpercaya dan mudah dipahami untuk digunakan oleh masyarakat yang baru terjun ataupun lama di sektor peternakan sapi.

Kata kunci: Peternakan, Hewan Ternak Sapi, UI/UX, Media Informasi

(9)

viii

UI/UX DESIGN OF CATTLE LIVESTOCK INFORMATION MEDIA

Arien Nindya

ABSTRACT (English)

Digital information media is needed in today's technological developments because it makes it easier for people to access information quickly and can be done anywhere. However, for this part of the livestock sector, especially cattle, it is still very minimal and tends to be difficult because most people who want to know information about livestock must join a community first.

Some of the community asked colleagues or family about livestock information, especially cattle, whose information was not necessarily reliable. Until finally the Kandang Adi Lembu Farm farm is ready to provide education and information about animal husbandry based on the animal husbandry experience they have done. However, the problem faced by breeders is that they do not yet have the means of disseminating information media digitally. Therefore, from these two problems, a digital information media facility is needed that can help the public to be able to access information about cattle farming easily and efficiently so that the formulation of the problem to be formed is how to build a UI/UX for Cattle Animal Information Media. The research method in this design uses qualitative and quantitative methods including questionnaires, interviews, and existing studies. The results of this study are expected that the livestock sector, especially cattle, has digital information media facilities that can be accessed easily and reliably and easily understood for use by people who are new to or have been involved in the cattle breeding sector for a long time.

Keywords: Farm, Cattle Farm, UI/UX, Information Media

(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 ... 3

1.3 Batasan Masalah ... 3

1.4 Tujuan Tugas Akhir ... 4

1.5 Manfaat Tugas Akhir ... 4

BAB II TINJAUAN PUSTAKA ... 6

Media Informasi ... 6

2.1.1 Jenis-jenis Media Informasi... 6

2.1.2 Tujuan Media Informasi ... 8

User Interface (UI) ... 9

User Experience (UX) ... 11

Website ... 13

2.4.1 Elemen Website... 13

2.4.2 Jenis Website ... 14

Teori Desain Grafis ... 15

2.5.1 Elemen Desain ... 16

2.5.2 Prinsip-prinsip Desain ... 21

Tipografi ... 24

2.6.1 Terminologi Dasar Tipografi ... 24

(11)

x

2.6.2 Ukuran Tipografi UI ... 27

2.6.3 Hirarki Tipografi UI ... 28

2.6.4 Jenis Font UI ... 29

Grid... 30

2.7.1 Grid UI ... 31

2.7.2 Anatomi Grid UI ... 32

2.7.3 Tipe Grid UI ... 34

Illustrasi ... 36

Hewan Ternak Sapi ... 38

2.9.1 Pemilihan Bibit Sapi ... 38

2.9.2 Pemilihan Pangan Sapi ... 39

2.9.3 Penyediaan Kandang Sapi ... 40

2.9.4 Pengendalian Penyakit Sapi ... 41

2.9.5 Pengaturan Perkawinan Sapi ... 41

BAB III METODOLOGI PENELITIAN DAN PERANCANGAN ... 42

3.1 Metodologi Penelitian ... 42

3.1.1 Wawancara ... 42

3.1.2 Kuesioner ... 46

3.1.3 Studi Eksisting ... 55

3.2 Metodologi Perancangan ... 62

3.2.1 Conceptualization ... 62

3.2.2 Definition ... 62

3.2.3 Design and Development ... 62

3.2.4 Publishing ... 62

BAB IV STRATEGI DAN ANALISIS PERANCANGAN ... 63

4.1 Strategi Perancangan ... 63

4.1.1 Conceptualization ... 63

4.1.2 Definition ... 66

4.1.3 Design and Development ... 73

4.1.4 Publishing / Prototype Day ... 107

4.2 Analisis Alpha ... 107

4.2.1 Analisis Konten ... 108

(12)

xi

4.2.2 Analisis Interface dan Visual ... 110

4.2.3 Analisis Interaktivitas ... 112

4.2.4 Hasil Perbaikan ... 113

4.3 Analisis Beta ... 117

4.3.1 Analisis Konten ... 119

4.3.2 Analisis Visual ... 120

4.3.3 Analisis Interaktivitas ... 121

4.3.4 Hasil Perbaikan ... 122

4.4 Budgeting ... 123

BAB V PENUTUP ... 124

5.1 Simpulan ... 124

5.2 Saran ... 125

DAFTAR PUSTAKA ... xiii

LAMPIRAN ... xvi

(13)

xii

DAFTAR TABEL

Tabel 3. 1 Tabel data diri responden ... 48

Tabel 3. 2 Media Informasi yang digunakan ... 52

Tabel 3. 3 Analisis aplikasi Angon ... 56

Tabel 3. 4 Analisis aplikasi Sobaternak ... 57

Tabel 3. 5 Analisis website Sapibagus ... 59

Tabel 4 1 aset ikon ... 84

Tabel 4 2 button ... 86

Tabel 4 3 Analisis Konten Linear ... 108

Tabel 4 4 Analisi Konten Pilihan Ganda... 109

Tabel 4 5 Analisis Interface dan Visual ... 110

Tabel 4 6 Analisis Interaktivitas ... 112

Tabel 4 7 Analisis beta test konten ... 119

Tabel 4 8 Analisis beta test Konten Pilihan Ganda ... 120

Tabel 4 9 Analisis beta test Interface dan Visual ... 120

Tabel 4 10 Analis Beta test Interaktivitas ... 122

Tabel 4 11 Budgeting ... 123

(14)

xiii

DAFTAR GAMBAR

Gambar 2. 1 Statistic Website ... 15

Gambar 2. 2 Dynamic Website ... 15

Gambar 2. 3Garis ... 16

Gambar 2. 4 Bentuk ... 17

Gambar 2. 5 Figure/Ground ... 17

Gambar 2. 6 RGB Color ... 18

Gambar 2. 7 CMYK Color ... 19

Gambar 2. 8 Tekstur ... 20

Gambar 2. 9 Format ... 21

Gambar 2. 10 Keseimbangan ... 22

Gambar 2. 11 Hirarki Visual ... 23

Gambar 2. 12 Irama... 23

Gambar 2. 13 Unity ... 24

Gambar 2. 14 Serif / Sans Serif ... 25

Gambar 2. 15 Bounding boxes ... 25

Gambar 2. 16 Tracking ... 26

Gambar 2. 17 Kerning ... 26

Gambar 2. 18 Wordspacing... 26

Gambar 2. 19 Leading ... 27

Gambar 2. 20 Baseline ... 27

Gambar 2. 21 Font size ... 28

Gambar 2. 22 Hirarki Tipografi ... 29

Gambar 2. 23 Neu Helvetica, Rooto, dan Segoe ... 30

Gambar 2. 27 Column Grid ... 30

Gambar 2. 28 Modular Grid ... 31

Gambar 2. 29 Grid Hybrid and Combinations ... 31

Gambar 2. 30 Margins... 32

Gambar 2. 31 Column and Alley ... 33

Gambar 2. 32 Modules ... 33

Gambar 2. 33 Manuscript grid ... 34

Gambar 2. 34 Multicolumn Grid ... 35

Gambar 2. 35 Modular Grid ... 35

Gambar 2. 36 Baseline Grid ... 36

Gambar 2. 37 Teknik Tradisional ... 37

Gambar 2. 38 Teknik Digital ... 37

Gambar 2. 39 Pemilihan bibit sapi ... 39

Gambar 2. 40 Pemilihan pangan sapi ... 40

Gambar 2. 41 Penyediaan kandang sapi ... 40

Gambar 2. 42 Pengendalian penyakit sapi ... 41

(15)

xiv

Gambar 3. 1 Bukti foto hasil wawancara peternak sapi ... 44

Gambar 3. 2 Bukti hasil foto wawancara pemilk peternakan Kandang Adi Lembu Farm ... 46

Gambar 3. 3 Bukti Kuesioner tentang informasi perkembangan peternakan Indonesia ... 49

Gambar 3. 4 Bukti Kuesioner dasar pemahaman ternak sapi ... 49

Gambar 3. 5 Bukti Kuesioner tentang kemajuan peternakan Indonesia khusus hewan sapi ... 50

Gambar 3. 6 Bukti Kuesioner tentang ketertarikan beternak hewan sapi ... 50

Gambar 3. 7 Bukti Kuesioner tentang tanggapan beternak sapi yang sudah ketinggalan zaman ... 50

Gambar 3. 8 Bukti Kuesioner tentang kesulitan beternak sapi ... 51

Gambar 3. 9 Bukti kuesioner pandangan profesi betermak sapi ... 51

Gambar 3. 10 Bukti kuesioner pandangan peternak sapi yang dapat di isi dari kalangan muda ... 52

Gambar 3. 11 Bukti kuesioner kesulitan dalam pencarian informasi dalam beternak hewan sapi ... 52

Gambar 3. 12 Screenshoot aplikasi Angon Belajar Beternak Sapi ... 57

Gambar 3. 13 Screenshoot Aplikasi Sobaternak ... 59

Gambar 3. 14 Screenshoot website Sapibagus ... 60

Gambar 3. 15 Screenshoot website Sapibagus ... 61

Gambar 4. 1 Mindmap ... 66

Gambar 4. 2 Moodboard ... 68

Gambar 4. 3 Refrensi Ilustrasi ... 69

Gambar 4. 4 Color Pallete ... 69

Gambar 4. 5 Poppins Font ... 70

Gambar 4. 6 Righteous Font ... 70

Gambar 4. 7 User Persona Pertama... 71

Gambar 4. 8 User Persona kedua ... 71

Gambar 4. 9 User Journey Pertama ... 72

Gambar 4. 10 User Journey Kedua ... 73

Gambar 4. 11 Sitemap ... 74

Gambar 4. 12 Flowchart ... 77

Gambar 4. 13 Prototype Halaman Pertama ... 78

Gambar 4. 14 Prototype Halaman Kedua ... 79

Gambar 4. 15 Prototype Halaman Ketiga ... 80

Gambar 4. 16 Prototype Halaman Keempat ... 80

Gambar 4. 17 Prototype Halaman Kelima ... 81

Gambar 4. 18 Warna website ... 82

Gambar 4. 19 Tipografi Website ... 84

Gambar 4. 21 Sketsa Perancangan ... 87

Gambar 4. 22 Proses Pembuatan Tampilan Ilustrasi ... 88

(16)

xv

Gambar 4. 23 Skesta asset ilustrasi pendukung ... 88

Gambar 4. 24 Ilustrasi asset pendukung ... 89

Gambar 4. 25 Aset Foto Kegiatan ... 90

Gambar 4. 26 Hasil proses Aset Foto Kegiatan ... 90

Gambar 4. 27 Proses Edit Aset Foto ... 91

Gambar 4. 28 Low Fidelitiy ... 91

Gambar 4. 29 Contoh Layout ... 92

Gambar 4. 30 High Fidelity keseluruhan ... 92

Gambar 4. 31 High Fidelity Home ... 93

Gambar 4. 32 High Fidelity Peternakan ... 94

Gambar 4. 33 High Fidelity Sapi Kandang ... 95

Gambar 4. 34 High Fidelity Rawat Sapi ... 95

Gambar 4. 35 High Fidelity Mitra ... 96

Gambar 4. 36 High Fidelity Pendaftaran ... 96

Gambar 4. 37 High Fidelity Karir ... 97

Gambar 4. 38 Wireframe... 98

Gambar 4. 39 Prototype Home... 98

Gambar 4. 40 Prototype Peternakan... 99

Gambar 4. 41 Prototype Sapi Kandang ... 100

Gambar 4. 42 Prototype Rawat Sapi ... 100

Gambar 4. 43 Prototype Mitra ... 101

Gambar 4. 44 Sketsa Instagram Story ... 102

Gambar 4. 45 Finalisasi Instagram Story ... 103

Gambar 4. 46 Mockup Instagram Story ... 103

Gambar 4. 47 Sketsa Instgaram Post... 104

Gambar 4. 48 Finalisasi Instagram Post ... 104

Gambar 4. 49 Mockup Instagram Post ... 105

Gambar 4. 50 Sketsa Digital Banner ... 105

Gambar 4. 51 Finalisai Digital banner ... 106

Gambar 4. 52 Mockup Digital Banner (ads) ... 107

Gambar 4. 53 Perbaikan visual (button dan ikon sosmed)... 114

Gambar 4. 54 Perbaikan Visual ( Konten perawatan sapi) ... 115

Gambar 4. 55 Perbaikan Viusal ( Bahan pangan sapi)... 115

Gambar 4. 56 Perbaikan Interaktivitas Kegiatan Kandang ... 116

Gambar 4. 57 Perbaikan Interaktivitas Pangan Sapi ... 117

Gambar 4. 58 Perbaikan Interaktivitas tanya kami ... 117

Gambar 4. 59 Beta test ... 118

Gambar 4. 60 User Journey setelah Beta Test ... 118

Gambar 4. 61 Hasil Perbaikan Beta test ... 122

(17)

xvi

DAFTAR LAMPIRAN

LAMPIRAN A Lembar Bimbingan ... xvi

LAMPIRAN B Hasil Data ... xviii

LAMPIRAN C Turnitin ... xxxiii

LAMPIRAN D Hasil Alpha Test dan Beta Test ... xxxviii