lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/halaman awal.pdfdesain...

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

Upload: hoangnhu

Post on 29-Apr-2019

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

xv

DAFTAR TABEL

Tabel 3.1. Tabel SWOT ........................................................................................ 40  

Tabel 3.2. Tabel Kesimpulan ................................................................................ 49

Perancangan Aplikasi..., Amelia Banaya, FSD UMN, 2015

Page 17: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2340/1/HALAMAN AWAL.pdfdesain karena belum adanya media yang mewadahi informasi-informasi tersebut. Oleh karena

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