PENGANTAR TUGAS AKHIR
PERANCANGAN TAMPILAN ANTARMUKA
APLIKASI KODE DARURAT SURAKARTA (DESAK)
Diajukan Guna Mencapai Gelar Ahli Madya Diploma III Program Studi Desain Komunikasi Visual
Riski Rahayu NIM. C9517056
PROGRAM STUDI DIPLOMA III DESAIN KOMUNIKASI VISUAL SEKOLAH VOKASI
UNIVERSITAS SEBELAS MARET SURAKARTA
HALAMAN PERSETUJUAN
Telah diterima dan disetujui oleh
Program Studi Diploma III Desain Komunikasi Visual Sekolah Vokasi Universitas Sebelas Maret
Surakarta
Mengetahui,
Ketua Program Studi
Diploma III Desain Komunikasi Visual,
Hermansyah Muttaqin, S.Sn., M.Sn. NIP. 19711115 200604 1 001
Pembimbing Tugas Akhir,
Anugrah Irfan Ismail, S.Sn. M.Sn. NIK/NIP. 198307022008121003
HALAMAN PENGESAHAN
Pengantar Tugas Akhir
telah diterima dan disetujui oleh Panitia Tugas Akhir Pada tanggal 21 Agustus 2020
Panitia Penguji
Ketua Sidang Tugas Akhir
Anugrah Irfan Ismail, S.Sn. M.Sn. NIP. 198307022008121003
…….………..……
Sekretaris Sidang Tugas Akhir
Arif Ranu Wicaksono, S.Kom, M.Kom.
NIP.198604232019031008 …….………..……
Penguji Tugas Akhir
Jauhari, S.Sn, M,Sn
NIK. 1983010520161001 …….………..……
Mengetahui,
Direktur Sekolah Vokasi Universitas Sebelas Maret,
Drs. Santoso Tri Hananto, M.Acc, Ak. NIP. 19690924 199402 1 001
Ketua Program Studi
Diploma III Desain Komunikasi Visual,
Hermansyah Muttaqin, S.Sn, M.Sn. NIP. 19711115 200604 1 001
MOTTO
“Fakta bahwa kamu berpikir untuk melakukan yang lebih baik adalah bukti kamu mengalami kemajuan.”
- Huang Renjun -
PERSEMBAHAN
Karya Tugas Akhir ini Penulis persembahkan untuk:
1. Orang tua dan keluarga yang tidak henti-hentinya memberikan semangat, do’a, dan dukungannya, sehingga Tugas Akhir ini dapat terselesaikan. 2. Teman-teman TBB dan semua sahabat-sahabat penulis yang telah terlibat
secara langsung maupun tidak dalam pembuatan serta penyelesaian Tugas Akhir ini.
3. Haechan, Felix, Nom, NCT, WayV, dan Stray Kids yang telah menjadi motivasi dan penyemangat penulis hingga Tugas Akhir ini selesai.
4. Cahyo Satrio Rey Ferani yang tak henti-hentinya memberi semangat dan motivasi selama pengerjaan Tugas Akhir ini.
5. Diri penulis sendiri, karena tetap semangat dan berjuang untuk mengerjakan Tugas Akhir hingga selesai.
KATA PENGANTAR
Puji syukur Penulis ucapkan kehadirat Tuhan Yang Maha Esa, atas rahmat dan karunia-Nya, maka Penulis dapat menyelesaikan Pengantar Tugas Akhir ini dengan baik. Penulisan Pengantar Karya Tugas Akhir ini merupakan salah satu tugas dan prasyarat dalam mata kuliah Tugas Akhir di Program Studi Diploma III Desain Komunikasi Visual, Sekolah Vokasi, Universitas Sebelas Maret Surakarta. Dalam penyusunan Pengantar Tugas Akhir ini tidak lepas dari dukungan dan bantuan dari berbagai pihak. Untuk itu, Pengantar Tugas Akhir dengan judul
PERANCANGAN TAMPILAN ANTARMUKA APLIKASI KODE
DARURAT SURAKARTA (DESAK) ini dapat terselesaikan dengan baik.
Dengan demikian, Penulis ingin mengucapkan terima kasih kepada semua pihak yang telah membantu, diantaranya:
1. Drs. Santoso Tri Hananto, M.Acc., Ak. selaku Direktur Sekolah Vokasi Universitas Sebelas Maret Surakarta.
2. Hermansyah Muttaqin, S.Sn., M.Sn. selaku Ketua Program Studi Diploma III Desain Komunikasi Visual.
3. Anugrah Irfan Ismail, S.Sn., M.Sn. selaku Pembimbing Akademik serta Pembimbing Tugas Akhir.
4. Tenaga Pendidikan dan Kependidikan di Sekolah Vokasi.
5. Seluruh keluarga besar D III Desain Komunikasi Visual UNS tanpa terkecuali yang tidak dapat disebutkan satu persatu.
6. Teman-teman yang telah terlibat secara langsung maupun tidak dalam pembuatan serta penyelesaian Tugas Akhir ini.
7. Keluarga serta teman-teman yang selalu mengingatkan dan memberikan dukungan serta dorongan untuk segera meneyelesaikan Tugas Akhir ini. 8. Almamater tercinta yang selalu mengingatkan Penulis untuk bertanggung
jawab dalam menyelesaikan apa yang telah dimulai, memberi doa, serta dukungan, sehingga Tugas Akhir ini dapat terselesaikan dengan baik dan
Dalam penyusunan Pengantar Tugas Akhir ini, Penulis merasa masih banyak kekurangan baik pada teknis penulisan, kualitas karya, maupun materi, mengingat berbagai keterbatasan yang dimiliki. Untuk itu, kritik dan saran dari semua pihak sangat Penulis harapkan demi penyempurnaan Pengantar Tugas Akhir ini.
Surakarta, 22 Juli 2020
Penulis, Riski Rahayu
DAFTAR ISI
HALAMAN JUDUL i
HALAMAN PENGESAHA ii
HALAMAN PERSETUJUAN iii
HALAMAN MOTTO iv
HALAMAN PERSEMBAHAN v
KATA PENGANTAR vi
DAFTAR ISI viii
DAFTAR GAMBAR xi
DAFTAR TABEL xiv
DAFTAR BAGAN xv
BAB I PENDAHULUAN 1
A. Latar Belakang 1
B. Rumusan Masalah 2
C. Tujuan Perancangan 2
BAB II IDENTIFIKASI DATA 4
A. Data Produk 4
1. Keadaan Darurat 4
a. Pengertian Keadaan Darurat 4
b. Jenis Keadaan Darurat 5
c. Penyebab Keadaan Darurat 5
2. Layanan Darurat 112 6
a. Polisi 6
b. Tim Medis 7
c. Badan SAR Nasional 8
d. Pemadam Kebakaran 9
3. SWOT (Strenght, Weaknesess,Oppurtunities, Threats) 10
1. Segmentasi Demografis 12
2. Segmentasi Geografis 12
3. Segmentasi Psikografis 12
C. Komparasi 13
1. Telepon Darurat dan Penting Kota Bandung 13
a. Deskripsi Darurat dan Penting Kota Bandung 13
b. Kekuatan dan Kelemahan Darurat dan Penting Kota Bandung 14
2. Tanggap Darurat 14
a. Deskripsi Tanggap Darurat 14
b. Kekuatan dan Kelemahan Tanggap Darurat 15
BAB III KONSEP PERANCANGAN 16
A. Konsep Karya 16
1. Riset Terhadap Potensial User 18
2. Pemilihan Perangkat Lunak 19
3. Pembuatan User Flow 20
4. Pembuatan Low-Fidelity Design (Wirefram) 21
5. Pembuatan High Fidelity Design (Mockup) 22
6. Pembuatan Prototype 23
7. Pengujian dan Evaluasi 23
8. Publikasi 23
B. User Persona 24
C. Konsep Perancangan 26
1. Strategi Kreatif 26
a. Gaya Desain 26
b. USP (Unique Selling Propitition) 27
2. Strategi Visual 28
a. Strategi Visual Secara Umum 28
3. Perancangan Media 37
a. Media Utama 37
b. Media Pendukung 38
4. Referensi Perancangan 40
5. Estimasi Biaya Produksi 41
6. Pra Produksi dan Produksi 42
a. Pra Produksi 42
b. Produksi 42
D. Visualisasi Karya 54
1. Karya Utama Desain Antarmuka 54
a. Halaman Awal Aplikasi (splash screen) 54
b. Onboarding Screen 55
c. Beranda/Home 57
d. Halaman Instansi 58
e. Halaman Petaa/Maps 61
f. Tampilan Menu More 62
g. Halaman Tentang Aplikasi 63
2. Karya Pendukung 64
a. Poster 64
b. X-banner 65
c. Landing Page Website 66
d. Iklan di Media Sosial 67
e. Iklan di Instagram Story 68
BAB IV PENUTUP 69
DAFTAR PUSTAKA LAMPIRAN
DAFTAR GAMBAR
Gambar 2.1. Analisi SWOT 10
Gambar 2.2. Logo dan Rampilan Aplikasi Telepon Darurat dan Penting Kota
Bandung 13
Gambar 2.3. Logo dan Tampilan Aplikasi Tanggap Darurat 14
Gambar 3.1. Contoh User Flow Proses Pembelian Buku di
BookDepository.com 20
Gambar 3.2. Contoh LowFidelity Design 21
Gambar 3.3. High Fidelity Design Aplikasi Desak 22
Gambar 3.4. Proses Pembuatan Prototype dengan Software Figma 23
Gambar 3.5. Referensi DesainAplikasi Desak 27
Gambar 3.6. Konfigurasi Logo Aplikasi Desak 30
Gambar 3.7. Color Guide Logo Aplikasi Desak 31
Gambar 3.8. Grid Logo Aplikasi Desak 31
Gambar 3.9. Logo Scale Aplikasi Desak 32
Gambar 3.10. Icon Dengan Gaya Outline Style dan Solid Style 32
Gambar 3.11. Warna Merah Pernacangan 35
Gambar 3.12. Warna Putih Perancangan 35
Gambar 3.15. Warna Abu-abu Perancangan 36
Gambar 3.16. Referensi Perancangan Moodboard Aplikasi Desak 40
Gambar 3.17. User Flowchart Aplikasi Desak 43
Gambar 3.18. Lo-fi Design Splah Screen 44
Gambar 3.19. Lo-fi Design Splash Screen 45
Gambar 3.20. Lo-fi Design Halaman Home 46
Gambar 3.21. Lo-fi Design Instansi 47
Gambar 3.22. Lo-fi Design Maps 48
Gambar 3.23. Lo-fi Design More 49
Gambar 3.24. Lo-fi Design Tombol Darurat 50
Gambar 3.25. Lo-fi Design Maps 51
Gambar 3.26. High Fidelity Design 52
Gambar 3.27. Proses prototyping 52
Gambar 3.28. Splash Screem 54
Gambar 3.29. Onboarding Screen 55
Gambar 3.30. Halaman Beranda/Home 57
Gambar 3.31. Halaman Instansi 58
Gambar 3.32. Halaman Instansi Polisi 59
Gambar 3.33. Halaman Instansi Pemadam Kebakaran 59
Gambar 3.34. Halaman Instansi Ambulans/Rumah Sakit 60
Gambar 3.36. Halaman peta/Maps 61
Gambar 3.37. Detail Menu More 62
Gambar 3.38. Hlaman Tentang Aplikasi 63
Gambar 3.39. Desain Poster 64
Gambar 3.40. Dsain X-banner 65
Gambar 3.41. Desain Landing Page Website 66
Gambar 3.42. Desain Iklan Media Sosial 67
DAFTAR TABEL
Tabel 2.1. SWOT Aplikasi Desak 12
Tabel 2.2. Kekuatan dan Kelemahan Aplikasi Telepon Darurat dan Penting
Kota Bandung 14
Tabel 2.3. Kekuatan dan Kelemahan Aplikasi Tanggap Darurat 15
Tabel 3.1. Estimasi Biaya Pembuatan dan Media Pendukung Aplikasi 41
