PENGANTAR TUGAS AKHIR
PERANCANGAN INTERFACE APLIKASI SEBAGAI SARANA KOMUNUIKASI TERHADAP PENYAKIT BIPOLAR DAN DEPRESI
“TEMANKU”
Disusun Sebagai Salah Satu Syarat Penyusunan Tugas Akhir Untuk Memperoleh Gelar Ahli Madya Diploma III
Desain Komunikasi Visual
Oleh :
SANIYA NUR INDAH SALSABILA C9517059
PROGRAM STUDI DIPLOMA III DESAIN KOMUNIKASI VISUAL SEKOLAH VOKASI
UNIVERSITAS SEBELAS MARET SURAKARTA
2020 commit to user
PERSETUJUAN
Konsep Karya Tugas Akhir Dengan Judul
PERANCANGAN INTERFACE APLIKASI SEBAGAI SARANA KOMUNUIKASI TERHADAP PENYAKIT BIPOLAR DAN DEPRESI
“TEMANKU”
Mengetahui,
Ketua Program Studi
D3 Desain Komunikasi Visual Pembimbing Tugas Akhir
Hermansyah Muttaqin, S.Sn., M.Sn. Arif Ranu Wicaksono S. Kom, M. Kom NIP. 19711115 200604 1 001 NIP. 19860423 201903 1 008
commit to user
iii commit to user
MOTTO
“Starting a business is a huge amount of hard work, You had better enjoy it!”
- Richard Branson –
“You must have some kind of vision for your life”
- Oprah Winfrey-
commit to user
v
PERSEMBAHAN
Karya Tugas Akhir ini Penulis persembahkan untuk :
1. Kepada Allah SWT yang telah membantu saya mengerjakan Karya saya sampai selesai
2. Ibu yang selalu mendukung dan mendoakan apapun yang penulis lakukan.
3. Eyang putri dan kakak tercinta yang senantiasa berdoa dan berkeja keras tanpa kenal lelah demi mewujudkan impian penulis dan selalu mengingatkan penulis untuk jangan lupa beribadah dan berdoa.
4. Program Studi Diploma III Desain Komunikasi Visual, Sekolah Vokasi, Universitas Sebelas Maret.
5. Kepada Dosen Pembimbing dan Dosen Penguji yang sudah mau melihat karya saya dan dengan sabar membimbing sampai selesai.
commit to user
KATA PENGANTAR
Puji syukur atas kehadirat Allah SWT berkat segalah limpahan Rahmat, Taufik dan Hidayah-Nya, sehingga penulis dapat menyelesaikan Tugas Akhir yang
berjudul “PERANCANGAN INTERFACE APLIKASI SEBAGAI SARANA KOMUNUIKASI TERHADAP PENYAKIT BIPOLAR DAN DEPRESI TEMANKU” .
Tugas Akhir ini disusun guna mencapai gelar Ahli Madya Diploma III Program Studi D III Desain Komunikasi Visual, Sekolah Vokasi, Universitas Sebelas Maret. Penulis menyadari bahwa Tugas Akhir ini tidak akan tersusun dengan baik tanpa adanya bantuan dari berbagai pihak, Oleh karena itu penulis mengucapkan banyak terima kasih kepada semua pihak yang telah membantu dalam pembuatan Tugas Akhir ini, Ucapan terima kasih penulis sampaikan kepada :
1. Drs. Santoso Tri Hananto, M.Acc., Ak., selaku Direktur Sekolah Vokasi Universitas Sebelas Maret
2. Hermansyah Muttaqin, S.Sn., M.Sn., selaku Ketua Program Studi D III Desain Komunikasi Visual Sekolah Vokasi Universitas Sebelas Maret.
3. Arief Iman Santoso, S.Sn., M.Sn., selaku Pembimbing Akademis.
4. Arif Ranu Wicaksono, S. Kom, M. Kom., selaku Pembimbing Tugas Akhir yang senantiasa membimbing dan mengarahkan hingga terselesaikan Tugas Akhir panulis.
5. Allah SWT yang Maha Mengetahui dan Maha Mendengarkan . Dan Maha Segala-Nya.
6. Seluruh Dosen D III Desain Komunikasi Visual yang telah membimbing serta memberikan ilmunya selama masa perkuliahan.
7. Kakak saya , dan eyang putri saya yang senantiasa berdo’a dan berusaha memenuhi kebutuhan penulis.
commit to user
vii
8. Seluruh teman-teman dan keluarga besar D III Desain Komunikasi Visual Universitas Sebelas Maret yang senantiasa memberi bantuan dan semangat dari awal hingga akhir.
9. Semua pihak yang telah membantu dalam penyusunan Tugas Akhir baik secara langsung ataupun tidak langsung yang tidak bisa penulis sebutkan satu persatu.
Penulis menyadari bahwa dalam penyusunan Tugas Akhir ini masih jauh dari kesempurnaan untuk itu penulis mengharapkan kritik dan saran dari pembaca agar dapat membangun penulis menjadi lebih baik kedepannya. Semoga Tugas Akhir ini dapat bermanfaat bagi kita semua.
Surakarta, Juli 2020
Penulis
commit to user
DAFTAR ISI
HALAMAN JUDUL ... i
HALAMAN PERSETUJUAN ... ii
HALAMAN PENGESAHAN ... iii
HALAMAN MOTTO ... iv
HALAMAN PERSEMBAHAN ... v
KATA PENGANTAR ... vi
DAFTAR ISI ... viii
DAFTAR GAMBAR ... xii
DAFTAR TABEL ... xvi
DAFTAR BAGAN ………. xvii
BAB I PENDAHULUAN ... 1
A. Latar Belakang Masalah ... 1
B. Rumusan Masalah ... 4
C. Tujuan Perancangan ... 4
BAB II KARANGANYAR ... 5
A. Depresi & Bipolar …………..………... 5
B. Profil Rumah Sakit Moewardi …….…………... 8
C. Visi dan Misi ………. 9
D. Struktur Organisasi ... 9
1. Direktur ... 10
2. Wakil Direktur Pelayanan ………,. 10
3. Wakil Direktur Keuangan ……….. 10
4. Wakil Direktur Umum ………... 10 5. Bidang Pelayanan Medis ………. 10 commit to user
ix
6. Bidang Pelayanan Keperawatan ……….... 11
7. Bidang Pelayanan Penunjang ……… 11
8. Bidang Anggaran dan Perbendaharaan ……… 12
9. Bidang Akuntansi dan Verifikasi ………. 12
10. Bidang Pengelolaan Pendapatan ……….. 12
11. Bidang Perencanaan ………. 13
12. Bidang Sekretariat ……… 13
13. Bagian Organisasi dan Kepegawaian ………...…… 14
14. Bagian Pendidikan dan Penelitian ……… 14
E. Jenis Pelayanan Poliklinik Psikologi ………... 14
a. Tes Psikologi ………...14
b. Gender ………..….. 14
c. Jenis Konsultasi ………..……… 14
F. Sub Spesialis Kesehatan Jiwa …….……… 15
G. Fasilitas Pelayanan Kesehatan Jiwa ……… 15
H. Target Market ……….. 15
a. Geografi ………... 15
b. Demografis ……….. 15
BAB III PROSES PERANCANGAN ... 16
A. Konsep Karya ……… 16
1. Riset Pengguna ……… 18
2. Pemilihan Perangkat Lunak ………. 18
3. Pembuatan User Flow ………. 19
4. Pembuatan Low Fidelity Prototype ………. 19
5. Pembuatan High Fidelity Prototype ……… 20
6. Pembuatan Prototype ……….. 21
7. Pengujian dan Evaluasi ………... 21
8. Publikasi ……….. 21
B. Konsep Perancagan ... 21
1. Strategi Kreatif ……… 22 a. Gaya Desain ………... 22 commit to user
b. USP (Unique Selling Preposition) ………. 23
2. Strategi Visual ………... 23
a. Strategi Visual Secara Umum ……….. 23
b. Strategi Visual Herbal ………... 23
1. Onboarding Screen ……… 23
2. Burger Menu Tab ………... 24
3. Sebuah Sapaan ……….. 24
4. Text Inti ………. 24
c. Strategi Visual Non Herbal ……….. 24
1. Logo ………... 24
2. Icon ……… 26
3. Tipografi ……… 27
4. Warna ………. 28
3. Perancangan Media ... 29
a. Media Utama ……….……….. 29
1. Splash Screen ………. 29
2. Onboarding screen ………..30
3. Profil ………... 30
4. Chat ……… 30
5. Diary ……….. 30
b. Media Pendukung ……… 30
1. Poster ………. 31
2. Instagram Feed ……….. 31
3. X-Banner ………... 31
4. Iklan di Facebook, Twitter, dan Instagram ……….. 31
5. Iklan di Play Store & Apple Store ……… 32
6. Billboard ………... 32
7. Via SMS ……….. 32
4. Referensi Perancangan ... 32
5. Estimasi Biaya Produksi ……… 33 6. Pro Produksi dan Produksi ……… 35 commit to user
xi
a. Pra Produksi ……….. 35
b. Produksi ………... 35
1. Perangkat Lunak ………. 35
2. User Flowmap ……… 36
3. Low Fidelity Design berupa wireframe ……….. 36
4. Pembuatan High Fidelity Design ………... 49
5. Proses Prototyping ………. 49
6. Pengujian Desain Antarmuka ………. 50
7. Pembuatan Media Promosi Pendukung ………... 51
C. Visualisasi Karya ………. 52
a. Karya Utama Desain Antarmuka (User Interface) ……….. 52
1. Halaman Awal aplikasi ………. 52
2. Halaman Login dan Daftar ………... 53
3. Halaman Profil Info ……….. 56
4. Halaman Home ………. 57
5. Halaman Burger Menu ……… 58
6. Halaman Profil ………. 59
7. Halaman Chat ……….. 60
8. Halaman Tambah Postingan ……… 61
9. Halaman My Diary ……… 62
10. Halaman Postingan ……… 63
b. Karya Pendukung ……… 64
1. Poster ……….. 64
2. Instagran Feed ……… 65
3. X-Banner ……… 66
4. Iklan di Facebook,Twitter dan Instagram ………….. 67
5. Iklan di Play Store dan Apple Store ………... 68
6. Billboard ………. 69
7. Via SMS ………. 70
BAB IV PENUTUP ... 71 DAFTAR PUSTAKA ……… 72 commit to user
DAFTAR GAMBAR
Gambar 1 Gedung Rumah Sakit Moewardi ……….. 8
Gambar 2 Pembuatan Proses User Flow ………... 19
Gambar 3 Proses Pembuatan Low Fidelity Prototype ……….. 20
Gambar 4 Proses Pembuatan High Fidelity Prototype ………. 20
Gambar 5 Proses Pembuatan Prototype ………... 21
Gambar 6 Gaya Design Aplikasi Temanku ………... 22
Gambar 7 Konfigurasi Logo Aplikasi Temanku ……….. 25
Gambar 8 Color Guide Logo Aplikasi Temanku ……….. 25
Gambar 9 Grid Logo Aplikasi Temanku ……….. 26
Gambar 10 Scale Logo Aplikasi Temanku ……… 26
Gambar 11 Icon Apps Aplikasi Temanku ……… 26
Gambar 12 Warna Background Aplikasi Temanku ………. 28
Gambar 13 Warna pada Area Kosong Aplikasi Temanku ………... 29
Gambar 14 Kotak warna pada Kolom Chat atau Kontak Aplikasi Temanku ……….. 29
Gambar 15 Referensi Aplikasi Temanku ………. 33
Gambar 16 User Flowmap ……….. 36
Gambar 17 Lo-fi Design Splash Screen ………………... 37
Gambar 18 Lo-fi Design Onboarding Design ………. 38
Gambar 19 Lo-fi Design Login ………... 39
Gambar 20 Lo-fi Design Daftar ……….. 40 Gambar 21 Lo-fi Design Profile Info ………...……….. 41 commit to user
xiii
Gambar 22 Lo-fi Design Home ………...………... 42
Gambar 23 Lo-fi Design Burger Menu ……….……….. 43
Gambar 24 Lo-fi Design Profile ………. 44
Gambar 25 Lo-fi Design Chat ……….……… 45
Gambar 26 Lo-fi Design Tambah Posting ………... 46
Gambar 27 Lo-fi Design My Diary ………. 47
Gambar 28 Lo-fi Design Postingan ………. 48
Gambar 29 High Fidelity Design ………. 49
Gambar 30 High Fidelity Design Prototype ……… 49
Gambar 31 Halaman Awal Aplikasi ………...……… 52
Gambar 32 Halaman Onboarding Aplikasi ………. 53
Gambar 33 Halaman Login Aplikasi ………... 54
Gambar 34 Halaman Registrasi Aplikasi ………... 55
Gambar 35 Halaman Profile Info Aplikasi ………. 56
Gambar 36 Halaman Home Aplikasi ……….. 57
Gambar 37 Halaman Burger Menu Aplikasi ……….. 58
Gambar 38 Halaman Profile Aplikasi ………...……… 59
Gambar 39 Halaman Chat Aplikasi ………...……… 60
Gambar 40 Halaman Tambah Postingan Aplikasi ………... 61
Gambar 41 Halaman My Diary Aplikasi ……….………... 62
Gambar 42 Halaman Postingan Aplikasi ……….………... 63
Gambar 43 Poster Promosi Aplikasi ……… ……….. 64
Gambar 44 Feed Instagram Promosi Aplikasi ……… 65 Gambar 45 X- Banner Promosi Aplikasi ……… 66 commit to user
Gambar 46 Sosial Media Advertisement Promosi Aplikasi ………… 67 Gambar 47 Iklan Di Vendor Google Play dan Apple Store ………… 68 Gambar 48 Billboard Promosi Aplikasi ………. 69 Gambar 49 Via SMS Promosi Aplikasi ………. 70
commit to user
xvi
DAFTAR TABEL
Tabel 1 Estimasi Biaya Produksi ………... 33 Tabel 2 Pengujian Antar Muka ……… 50
commit to user
Tabel 1 Perancangan user interface ……….. 17 Tabel 2 Susunan Struktur Organisasi ……… 10
commit to user
