lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/halaman awal.pdfdesain...
TRANSCRIPT
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP
Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.
PERANCANGAN APLIKASI DIREKTORI DESAIN GRAFIS UNTUK MAHASISWA DESAIN GRAFIS
DI TANGERANG
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Amelia Benaya
NIM : 11120210331
Program Studi : Desain Komunikasi Visual
Fakultas : Seni & Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2015
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Amelia Benaya
NIM : 11120210331
Program Sudi : Desain Komunikasi Visual
Fakultas : Seni & Desain
Universitas Multimedia Nusantara
Judul Tugas Akhir:
PERANCANGAN APLIKASI DIREKTORI DESAIN GRAFIS UNTUK MAHASISWA DESAIN GRAFIS
DI TANGERANG
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 nara sumber.
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
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
iii
gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang
berlaku di Universitas Multimedia Nusantara.
Tangerang, 12 Januari 2015
Amelia Benaya
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
iv
HALAMAN PENGESAHAN TUGAS AKHIR
PERANCANGAN APLIKASI DIREKTORI DESAIN GRAFIS UNTUK MAHASISWA DESAIN GRAFIS
DI TANGERANG
Oleh
Nama : Amelia Benaya
NIM : 11120210331
Program Studi : Desain Komunikasi Visual
Fakultas : Seni & Desain
Tangerang, 4 Februari 2015
Pembimbing
Ratna Cahaya Rina Wirawan Putri, S.Sos., M.Ds.
Penguji
Ardyansyah, S.Sn., M.M., M.Ds.
Ketua Sidang
Mohammad Rizaldi, S.T., M.Ds.
Ketua Program Studi
Desi Dwi Kristanto, M.Ds.
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
v
KATA PENGANTAR
Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas rahmat dan
karunia-Nya, penulis dapat menyelesaikan Tugas Akhir yang berjudul
Perancangan Aplikasi Direktori Desain Grafis untuk Mahasiswa Desain Grafis di
Tangerang. Tugas Akhir ini merupakan syarat kelulusan untuk memperoleh gelar
Sarjana Seni Desain Komunikasi Visual di Universitas Multimedia Nusantara.
Penulis memilih topik ini karena banyak mahasiswa-mahasiswa Desain
Grafis yang mengalami kesulitan dalam mencari tempat-tempat seperti percetakan
yang disebabkan karena tidak adanya sebuah wadah informasi yang menampung
informasi-informasi tersebut menjadi satu. Oleh sebab itu, penulis membuat
direktori berupa aplikasi mobile untuk mahasiswa desain grafis khususnya di
Tangerang dan diharapkan aplikasi ini dapat membantu mahasiswa-mahasiswa
desain grafis tersebut untuk memenuhi kebutuhannya.
Dalam pembuatan Tugas Akhir ini penulis banyak mendapat saran,
dorongan, serta bimbingan dari berbagai pihak. Oleh karena itu penulis juga ingin
mengucapkan terima kasih kepada:
1. Bapak Desi Dwi Kristanto, M.Ds., sebagai Ketua Program Studi
Desain Komunikasi Visual.
2. Ibu Ratna Cahaya Rina Wirawan Putri, S.Sos., M.Ds. sebagai dosen
pembimbing yang telah membimbing penulis selama melakukan Tugas
Akhir.
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
vi
3. Mahasiswa desain grafis dari Universitas Multimedia Nusantara,
Universitas Pelita Harapan, dan Universitas Bina Nusantara
Tangerang.
4. Orang tua, keluarga penulis, serta teman-teman yang memberikan
dukungan secara moril maupun materiil selama pembuatan Tugas
Akhir.
Tangerang, 12 Januari 2015
Amelia Benaya
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
vii
ABSTRAKSI
Penulis membuat tugas akhir berupa sebuah aplikasi mobile berbasis android bagi mahasiswa desain komunikasi visual di Tangerang. Pembuatan ini ditujukan bagi mahasiswa yang kesulitan mencari informasi tentang penyedia jasa atau alat desain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena itu, direktori online ini dapat menjadi sebuah sarana informasi untuk pemenuhan kebutuhan mahasiswa desain grafis. Metode yang digunakan untuk perancangan aplikasi ini adalah wawancara yang melibatkan beberapa mahasiswa di Universitas Multimedia Nusantara, Universitas Pelita Harapan, dan Universitas Bina Nusantara serta observasi untuk mencari data yang akan digunakan sebagai konten pada aplikasi. Penulis berharap aplikasi ini akan membantu mahasiswa desain grafis untuk memenuhi kebutuhan desainnya. Kata kunci : aplikasi mobile, desain grafis, direktori, online
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
viii
ABSTRACT
The writer made a mobile application based on Android platform as the final project, which is made for graphic design student in Tangerang. This application is made for graphic design students who are having trouble in finding informations about graphic design services and providers because there isn’t any interactive media, which contain such information. Therefore, the writer hopes that this online directory can be a main source of information to fulfill the graphic design students’ needs. The design of this application is using interview methods with some of Multimedia Nusantara University’s, Pelita Harapan University’s, and Bina Nusantara University’s students for data resource. Beside that, this application is also using observation methods for the contents on the application. The writer hopes that this application could help graphic design students to fulfill their design needs. Keywords : mobile application, graphic design, directory, online
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
ix
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ..................... ii
HALAMAN PENGESAHAN TUGAS AKHIR ................................................. iv
KATA PENGANTAR ........................................................................................... v
ABSTRAKSI ........................................................................................................ vii
ABSTRACT ......................................................................................................... viii
DAFTAR ISI ......................................................................................................... ix
DAFTAR GAMBAR ........................................................................................... xii
DAFTAR TABEL ................................................................................................ xv
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
1.6. Metode Penelitian ....................................................................................... 5
BAB II TINJAUAN PUSTAKA .......................................................................... 6
2.1. Media Interaktif .......................................................................................... 6
2.1.1. Mobile Apps ...................................................................................... 11
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
x
2.1.2. Navigasi ............................................................................................. 15
2.2. User .......................................................................................................... 17
2.2.2. Psikologi Pengguna ........................................................................... 19
2.2.3. Fisik Pengguna .................................................................................. 19
2.3. Graphical User Interface (GUI) ............................................................... 21
2.3.2. Elemen Desain .................................................................................. 22
2.3.3. Prinsip Desain ................................................................................... 24
2.3.4. Tipografi ............................................................................................ 27
2.4. Desain Komunikasi Visual ....................................................................... 27
BAB III METODOLOGI .................................................................................. 29
3.1. Gambaran Umum ..................................................................................... 29
3.2. Kuisioner .................................................................................................. 30
3.2. Penyedia Jasa dan Alat Desain Grafis ...................................................... 37
3.3. Mind Mapping .......................................................................................... 38
3.4. Studi Visual .............................................................................................. 41
3.5. Kesimpulan ............................................................................................... 49
BAB IV ANALISIS ............................................................................................. 50
4.1. Pengembangan Konsep ............................................................................ 50
4.1.1. Konten Visual .................................................................................... 50
4.1.2. Sketsa Perancangan ........................................................................... 56
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
xi
4.2. Aplikasi Kreatif ........................................................................................ 58
4.3. Perencanaan Media ................................................................................... 69
BAB V PENUTUP ............................................................................................... 73
5.1. Kesimpulan ............................................................................................... 73
5.2. Saran ......................................................................................................... 74
DAFTAR PUSTAKA ......................................................................................... xvi
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
xii
DAFTAR GAMBAR
Gambar 2.1. Tujuan dari prinsip usability .............................................................. 9
Gambar 2.2. Mobile Web (Youtube) ..................................................................... 12
Gambar 2.3. Facebook untuk platform Android ................................................... 13
Gambar 2.4. HTML5 Apps (Zillow, Kayak, Twitter) ........................................... 13
Gambar 2.5. Hybrid Apps (Untappd) .................................................................... 14
Gambar 2.6. Pemetaan jenis-jenis apps ................................................................ 15
Gambar 2.7. Struktur Linear ................................................................................. 15
Gambar 2.8. Struktur Linear with Side Streets ..................................................... 16
Gambar 2.9. Struktur Tree .................................................................................... 16
Gambar 2.10. Struktur Tree and Linear ................................................................ 17
Gambar 2.11. Pengaplikasian garis pada aplikasi ................................................. 22
Gambar 2.12. Macam-macam bentuk dalam aplikasi ........................................... 23
Gambar 2.13. Warna Additive dan Warna Substractive ....................................... 23
Gambar 2.14. Symmetric Balance ......................................................................... 25
Gambar 2.15. Ritme tombol pada aplikasi ............................................................ 26
Gambar 2.16. Unity from Proximity ...................................................................... 27
Gambar 3.1. Mindmap .......................................................................................... 39
Gambar 3.2. Aplikasi Shop Finder – Indonesia di Android ................................. 41
Gambar 3.3. Pilihan Menu dan Categories ........................................................... 42
Gambar 3.4. Tampilan Ulasan dari Tempat Perbelanjaan .................................... 43
Gambar 3.5. Aplikasi Bango – Warisan Kuliner Nusantara ................................. 44
Gambar 3.6. Tampilan menu dan ulasan kuliner .................................................. 45
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
xiii
Gambar 3.7. Aplikasi Qraved dan tampilan halaman utama ................................ 46
Gambar 3.8. Tampilan & fitur dari sebuah ulasan restoran .................................. 47
Gambar 3.9. Tampilan & fitur dari sebuah ulasan restoran .................................. 48
Gambar 4.1. Brainstorming konten visual ............................................................ 50
Gambar 4.2. Pola interaktivitas dalam navigasi .................................................... 52
Gambar 4.3. Tone Warna Aplikasi ....................................................................... 54
Gambar 4.4. Tipografi Aplikasi ............................................................................ 54
Gambar 4.5. Icon Aplikasi .................................................................................... 55
Gambar 4.6. Sketsa 1 ............................................................................................ 56
Gambar 4.7. Sketsa 2 ............................................................................................ 57
Gambar 4.8. Perancangan Logo Graphify dari elemen ......................................... 58
Gambar 4.9. Logo Graphify dalam Golden ratio dan Grid .................................. 59
Gambar 4.10. Logo Graphify ................................................................................ 59
Gambar 4.11. Layout Menu Utama ....................................................................... 61
Gambar 4.12. Layout Drawer Menu ..................................................................... 62
Gambar 4.13. Layout Menu Pencarian ................................................................. 63
Gambar 4.14. Layout dalam Kategori ................................................................... 64
Gambar 4.15. Layout dalam Menu Featured ........................................................ 65
Gambar 4.16. Layout dari Halaman Review ......................................................... 66
Gambar 4.17. Layout dari Halaman Bookmark .................................................... 67
Gambar 4.18. Layout dari Halaman Profil ............................................................ 68
Gambar 4.19. Layout dari Halaman Settings ........................................................ 69
Gambar 4.20. Print Ads ......................................................................................... 70
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
xiv
Gambar 4.21. Tampilan home website .................................................................. 71
Gambar 4.22. X-Banner, Flyer, Iklan Majalah, Iklan Website ............................. 72
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
xv
DAFTAR TABEL
Tabel 3.1. Tabel SWOT ........................................................................................ 40
Tabel 3.2. Tabel Kesimpulan ................................................................................ 49
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015
xvi
DAFTAR LAMPIRAN
LAMPIRAN A : LEMBAR KUISIONER ..................................................... xviii
LAMPIRAN B : DAFTAR PERTANYAAN WAWANCARA ..................... xxii
LAMPIRAN B : LEMBAR BIMBINGAN .................................................... xxiii
Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015