BAB V IMPLEMENTASI DESAIN

BAB V IMPLEMENTASI DESAIN 5.1. Warna Gambar 5.1 Palet warna pada Aplikasi Mobile Travel Guide Objek Wisata Kota Surabaya Tone warna yang digunakan diambil berdasarkan gambar dari hasil pencarian teratas di google dengan keyword metropolis. Kombinasi warna ini diterapkan pada tema visual layout dan juga icon pada aplikasi mobile travel guide objek wisata kota Surabaya. Tone warna yang digunakan juga berfungsi sebagai kode pembeda antar kategori, seperti pada gambar 5.2. Kode warna ini terdapat pada category label di setiap objek wisata. Gambar 5.2 Kode warna pembagian antar kategori

5.2. Huruf Gambar 5.3 Huruf SF Movie Poster dan implementasinya Jenis huruf pada gambar 5.2 merupakan huruf dengan nama SF Movie Poster. Jenis huruf ini digunakan pada action bar sebagai screen title, top bar sebagai nama tempat, category label sebagai penanda, dan category filter. Sedangkan jenis huruf pada gambar 5.3 merupakan huruf dengan nama Roboto. Yang digunakan sebagai body text, terdapat 3 macam jenis huruf Roboto, yaitu Regular, Bold, dan Light. Jenis Regular dan Light berfungsi sebagai pembeda bahasa, antara bahasa Inggris dan bahasa Indonesia. Dan jenis Bold berfungsi untuk memperjelas pada suatu kata.

Gambar 5.4 Huruf Roboto jenis Regular, Bold, Light dan implementasinya 5.3. Elemen Visual Visual yang digunakan untuk mempresentasikan konsep dari aplikasi mobile travel guide ini terinspirasi dari tren gaya visual tentang user interface saat ini, yaitu flat design. Gaya visual ini memiliki kesan simple dan juga modern. Objek objek yang digunakan pada icon aplikasi mobile ini menggunakan objek yang menjadi ikon atau ciri khas dari kota Surabaya yang disederhanakan agar terlihat lebih santai dan tidak rumit. Gambar 5.5 Implementasi flat design pada icon

Gambar 5.6 Implementasi flat design pada elemen grafis 5.4. Logo Gambar 5.7 Logo Aplikasi Mobile Travel Guide Objek Wisata Kota Surabaya, dengan nama HiSurabaya 5.4.1 Overflow Menu Icon Overflow Menu Icon adalah sebuah ikon yang berfungsi sebagai tombol menu pada suatu aplikasi mobile. Berfungsi untuk memudahkan pengguna untuk mengeksplorasi sebuah aplikasi mobile.

Gambar 5.8 Overflow Menu Icon pada Aplikasi HiSurabaya 5.4.2 Launcher Icon Launcher Icon adalah tampilan visual yang dapat mempresentasikan atau mewakili sebuah aplikasi mobile, launcher icon berfungsi untuk memudahkan pengguna dalam mengenali sebuah aplikasi mobile karena juga berfungsi sebagai identitas dari sebuah aplikasi dan juga sebagai button utama untuk memulai menjalankan sebuah aplikasi mobile. Ukuran launcher icon yang digunakan pada sebuah perangkat berukuran 48 x 48 dp, sedangkan icon yang akan digunakan pada Google Play berukuran 512 x 512 pixels. Gambar 5.9 Launcher Icon pada Aplikasi HiSurabaya

5.5. Graphic User Interface 5.6.1. GUI Layout 5.6.1.1. Loading Page Gambar 5.10 Tampilan pada halaman aplikasi HiSurabaya saat loading 5.6.1.2. Home / Explore Gambar 5.11 Tampilan pada halaman aplikasi HiSurabaya saat berada di home dan explore

5.6.1.3. Search Gambar 5.12 Tampilan pada halaman aplikasi HiSurabaya saat mengatifkan fitur search 5.6.1.4. About Gambar 5.13 Tampilan pada halaman aplikasi HiSurabaya saat berada di about

5.6.1.5. Map Gambar 5.14 Tampilan pada halaman aplikasi HiSurabaya saat mengaktifkan fitur go to 5.6.1.6. Photocards location dan saat berada di map Gambar 5.15 Tampilan pada halaman aplikasi HiSurabaya saat mengaktifkan fitur photocards

5.6.1.7. Trip Journal Gambar 5.16 Tampilan pada halaman aplikasi HiSurabaya saat berada di My Trip Journal 5.6.1.8. My List Gambar 5.17 Tampilan pada halaman aplikasi HiSurabaya saat berada di my list 5.6.2. GUI Component 5.6.2.1. Action Bar Action Bar adalah fitur yang menampilkan dimana pengguna aplikasi sedang berada.dengan adanya action bar di dalam sebuah aplikasi mobile dapat

membuat pengguna akrab dengan antar muka tersebut karena biasanya setiap aplikasi mobile memiliki action bar yang konsisten. Gambar 5.18 Action Bar pada aplikasi HiSurabaya 5.6.2.2. Action Button Action Button merupakan ikon yang berfungsi sebagai button atau tombol yang yang mengandung fungsi fungsi tertentu. Dengan adanya action button di dalam sebuah aplikasi mobile, akan dapat memudahkan pengguna dalam mengoperasikan suatu fungsi tertentu pada sebuah aplikasi mobile. Action button pada aplikasi ini terdapat pada action bar, top bar, dan juga bottom bar. Ukuran yang digunakan untuk action bar icon adalah 32 x 32 dp. Dibawah ini adalah beberapa action button yang ada di Aplikasi Mobile Travel Guide Objek Wisata Kota Surabaya ini, yaitu: a) Search Gambar 5.19 Ikon Search

Search merupakan sebuah icon yang memiliki fungsi utama untuk mengarahkan pengguna membuka halaman category filter, untuk melakukan penyaringan tentang konten tempat wisata apa saja yang ingin ditampilkan. Selain itu dapat digunakan pengguna untuk mencari seluruh data yang ada pada database aplikasi mobile ini, seperti event, related search dan lain-lain. b) Back Gambar 5.20 Ikon Back Back merupakan icon yang digunakan pengguna aplikasi mobile ini untuk kembali pada halaman sebelumnya. c) Add List Gambar 5.21 Ikon Add List Add List merupakan sebuah ikon dimana pengguna dapat menyimpan atau memasukkan konten yang di add ke dalam daftar pribadi yang ada pada halaman My List. Tujuannya adalah nantinya akan memudahkan pengguna untuk membuka kembali tempat tempat dari objek wisata di Surabaya ketika ingin mengunjungi atau mencariya.

d) Go To Gambar 5.22 Ikon Go To Go To merupakan ikon dimana pengguna akan mendapatkan panduan untuk menuju lokasi objek wisata yang diinginkan e) Taxi Gambar 5.23 Ikon Taxi Taxi merupakan sebuah ikon dimana pengguna dapat mengetahui informasi tentang taksi yang aktif di Surabaya, seperti alamat atau telepon, sehingga pengguna akan lebih mudah untuk menuju ke lokasi objek wisata yang diinginkan.

f) Share Gambar 5.24 Ikon Share Share merupakan sebuah ikon dimana pengguna dapat berbagi mengenai konten seperti objek wisata, event, juga hasil foto menggunakan fitur photocards ke teman kerabat, atau saudara melalui aplikasi atau media sosial pribadi. g) About Surabaya Gambar 5.25 Ikon About About merupakan sebuah ikon dimana pengguna dapat mencari informasi mengenai kota Surabaya, seperti fakta fakta tentang Surabaya atau sejarah dari Surabaya, dan lain sebagainya.

h) Map Gambar 5.26 Ikon Map Map merupakan sebuah ikon dimana pengguna dapat mencari lokasi dari objek objek wisata kota Surabaya yang terkoneksi dengan Google Map. i) Event Gambar 5.27 Ikon My Trip Journal My Trip Journal merupakan sebuah ikon dimana pengguna dapat melakukan check-in, yang berfungsi sebagai penyimpanan suatu tempat wisata

. j) My List Gambar 5.28 Ikon My List My List merupakan sebuah ikon dimana pengguna menyimpan atau memasukkan ke daftar pribadi tentang tempat wisata ataupun event yang ingin dikunjungi sehingga memudahkan pengguna untuk mengakses kembali lokasi yang diinginkan k) Photocards Gambar 5.29 Ikon Photocards Photocards merupakan sebuah ikon dimana pengguna dapat melakukan aksi selfie, dalam artian pengguna dapat mengambil gambar atau memfoto menggunakan fitur kamera yang di dalamnya terdapat sebuah template menarik yang bias dibagikan kepada teman atau kerabat melalui media social pribadi.

l) All categories Gambar 5.30 Ikon All Categories All categories merupakan sebuah ikon pada fitur search, dimana pengguna dapat menampilkan seluruh kategori dan diurutkan berdasarkan abjad dari nama objek objek wisata. m) Let s Shop Gambar 5.31 Ikon Let s Eat Up Let s Eat Up merupakan sebuah ikon pada fitur search, dimana pengguna dapat melakukan penyaringan dari seluruh kategori yang ada menjadi hanya kategori wisata kuliner. Let s Learn Culture & History Gambar 5.32 Ikon Let s Learn Culture & History Let s Learn Culture & History merupakan sebuah ikon pada fitur search, dimana pengguna dapat melakukan penyaringan dari seluruh kategori yang ada menjadi hanya kategori wisata budaya dan sejarah.

n) Let s Go Outside Gambar 5.33 Ikon Let s Go Outside Let s Go Outside merupakan sebuah ikon pada fitur search, dimana pengguna dapat melakukan penyaringan dari seluruh kategori yang ada menjadi hanya kategori wisata alam. o) Let s Shop Gambar 5.34 Ikon Let s Shop Let s Shop merupakan sebuah ikon pada fitur search, dimana pengguna dapat melakukan penyaringan dari seluruh kategori yang ada menjadi hanya kategori wisata belanja. p) Let s Play Gambar 5.35 Ikon Let s Play Let s Play merupakan sebuah ikon pada fitur search, dimana pengguna dapat melakukan penyaringan dari seluruh kategori yang ada menjadi hanya kategori wisata rekreasi dan hiburan.

q) Rate Location Gambar 5.36 Action Button Rate Location Rate Location merupakan sebuah ikon dimana pengguna dapat melakukan atau memberikan penilaian terhadap objek wisata yang juga dapat disertakan komentar, sehingga pengguna lain akan mendapatkan informasi atau pendapat tentang tempat wisata tersebut dari banyak pengguna. 5.6.2.3. Alert Dialog Alert Dialog adalah sebuah fitur yang berupa window berukuran kecil, yang muncul secara pop-up, yang berfungsi memberikan pilihan kepada pengguna untuk memutuskan atau memilih sebuah pilihan, atau untuk mengisi tambahan informasi. Pada aplikasi ini, alert dialog digunakan pada saat pengguna akan melakukan atau menilai rating pada suatu lokasi objek wisata, dan disertakan nama dan komentar pengguna. Sistem rating pada aplikasi ini menggunakan sistem 5 Star. Kemudian saat pengguna akan melakukan sharing. Gambar 5.37 Alert Dialog pada Aplikasi HiSurabaya

5.6.2.4. Dokumentasi Dokumentasi yang digunakan pada aplikasi ini berupa fotografi. Yang menjadi objek dari fotografi ini adalah, sisi unik atau keunggulan dari tempat wisata itu sendiri, baik dari eksterior tempat wisata, interior tempat wisata, suasana tempat wisata, dan makanan atau minuman atau produk. 5.6.2.5. Dokumentasi Gambar 5.38 Preview foto dokumentasi pada Aplikasi HiSurabaya 5.6. Navigasi Gambar 5.39 Wireframe hierarchy aplikasi HiSurabaya

Gambar 5.40 Navigasi dari loading menuju ke home Pada gambar 5.40 merupakan tampilan pada saat loading yang menampilkan logo HiSurabaya, yang kemudian berganti menjadi kata sapa kepada pengguna, setelah itu masuk ke halaman utama yaitu halaman home. Gambar 5.41 Navigasi overflow menu icon button Pada gambar 5.41 merupakan tampilan yang menunjukkan tampilan overflow icon menu pilihan pada aplikasi HiSurabaya. Menu tersebut menggunakan logo, yang ketika di tab maka akan keluar pilihan alternative menu. Overflow icon menu ada pada setiap halaman aplikasi, kecuali pada halaman search.

Gambar 5.42 Navigasi dari home menuju ke search Pada gambar 5.42 merupakan tampilan yang menunjukkan tampilan search. Untuk menampilkan halaman ini, pengguna dapat melakukan tab pada ikon bergambar lup atau dengan melakukan swap dengan menggeser layar dari kanan ke kiri. Kemudian setelah muncul halaman search, pengguna dapat memilih sub-menu yang merupakan kategorisasi dari tempat tempat wisata di Surabaya.

Gambar 5.43 Navigasi dari home menuju ke explore Pada gambar 5.43 merupakan tampilan yang menunjukkan tampilan home menuju halaman explore / konten isi. Dapat dilakukan dengan melakukan tab pada gambar foto tempat wisata. Dan ikon bergambar panah pada sisi kanan atas layar akan mengembalikan ke halaman home yang merupakan halaman sebelumnya. Pada bagian pojok kanan atas dapat menampilkan fitur search yang berbeda pada halaman home. Pada bagian ini search berfungsi sebagai filterisasi konten Gambar 5.44 Navigasi dari home menuju ke about

Pada gambar 5.44 merupakan tampilan yang menunjukkan tampilan home menuju halaman about. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar kertas dengan huruf I. Dan melakukan tab pada ikon bergambar panah pada sisi kanan atas layar akan mengembalikan ke halaman home. Gambar 5.45 Navigasi dari home menuju ke map Pada gambar 5.45 merupakan tampilan yang menunjukkan tampilan home menuju halaman map. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar peta. Kemudian setelah masuk halaman map, pengguna dapat melakukan tab pada ikon bergambar lup untuk mengaktifkan fitur search yang juga berfungsi sebagai filter. Dan melakukan tab pada ikon bergambar panah pada sisi kiri atas layar akan mengembalikan ke halaman sebelumnya.

Gambar 5.46 Navigasi dari home menuju ke my list Pada gambar 5.46 merupakan tampilan yang menunjukkan tampilan home menuju halaman my list. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar kertas yang berisi catatan atau daftar. Dan melakukan tab pada ikon bergambar panah pada sisi kiri atas layar akan mengembalikan ke halaman sebelumnya. Gambar 5.47 Navigasi dari home menuju ke my trip journal Pada gambar 5.47 merupakan tampilan yang menunjukkan tampilan home menuju halaman my trip journal. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar buku yang berisi tempat wisata yang pernah pernah

dikunjungi oleh pengguna dengan melakukan fitur check-in (lihat gambar 5.48). Dan melakukan tab pada ikon bergambar panah pada sisi kiri atas layar akan mengembalikan ke halaman sebelumnya. Gambar 5.48 Navigasi fitur check-in Gambar 5.49 Navigasi dari home menuju ke photocards Pada gambar 5.49 merupakan tampilan yang menunjukkan tampilan home menuju halaman photocards. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar kamera. Setelah pengguna mengambil gambar, hasil pengambilan gambar akan secara otomatis tersimpan di galeri ponsel. Dan

melakukan tab pada tombol back pada ponsel untuk mengembalikan ke halaman sebelumnya. Gambar 5.50 Navigasi fungsi fitur Go To Location Pada gambar 5.50 merupakan tampilan yang menunjukkan fungsi fitur go to location. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar anak panah yang mengarah ke kanan. Kemudian setelah masuk halaman tersebut, pengguna dapat melakukan tab pada ikon bergambar taksi atau mobil untuk menampilkan tambahan informasi yang muncul dari bagian bawah yang berisikan informasi tentang kendaraan umum taksi yang ada di Surabaya. Dan melakukan tab pada ikon bergambar panah pada sisi kiri atas layar akan mengembalikan ke halaman sebelumnya.

Gambar 5.51 Navigasi fungsi fitur sharepada halaman explore Pada gambar 5.51 merupakan tampilan yang menunjukkan fungsi fitur share. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar tiga lingkaran yang dihubungkan dengan garis pada action bar atau bagian sisi atas layar. Kemudian akan muncul pop up yang disebut dengan alert dialog, dimana terdapat pilihan alternatif ikon media social dan kotak tulisan. Dan melakukan tab pada tulisan cancel atau tab pada bagian luar pop up akan menutup pop up kembali. Gambar 5.52 Navigasi fungsi fitur rate dan comment

Pada gambar 5.54 merupakan tampilan yang menunjukkan fungsi fitur rate dan comment. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar lima bintang yang kosong seperti pada gambar 5.54. Kemudian akan muncul pop up yang disebut dengan alert dialog, dimana terdapat lima bintang untuk diisi pengguna dimana semakin penuh bintang maka akan semakin tinggi nilainya, kemudian kolom tulisan untuk nama dan komentar. Dan melakukan tab pada tulisan cancel atau tab pada bagian luar pop up akan menutup pop up kembali. Gambar 5.53 Navigasi fungsi fitur add photo Pada gambar 5.53 merupakan tampilan yang menunjukkan fungsi fitur add photo. Dapat dilakukan dengan melakukan tab pada ikon menu bergambar plus (+) yang ada pada sisi kanan bawah foto. Kemudian akan muncul pop up yang disebut dengan alert dialog, dimana terdapat pilihan mengambil foto atau dari galeri ponsel, yang kemudian pengguna dapat memberikan caption atau deskribsi singkat tentang foto yang akan ditambahkan. Dan melakukan tab pada tulisan cancel atau tab pada bagian luar pop up akan menutup pop up kembali. 5.7. Strategi Promosi 5.4.1. Online Strategi online yang digunakan sebagai media promosi aplikasi mobile ini adalah dengan menggunakan media sosial atau situs jejaring sosial dari

HiSurabaya sendiri, yaitu Facebook, Twitter, dan Instagram. Pada akun resmi media sosial HiSurabaya, akan berbagi mengenai berbagai informasi tentang Surabaya yang ditujukan guna menarik pengunjung untuk mengunduh aplikasi mobile ini. Nantinya pengguna dapat melakukan share tentang info dari objek wisata yang ada pada aplikasi mobile ini. Selain itu pengguna dapat menggunakan fitur Photocards yang hasil dari fotonya juga dapat di-share ke akun media sosial pribadi seperti Facebook, Twitter, Path, Instagram, Line, Whatsapp, BBM, dan lain sebagainya. 5.4.2. Offline Strategi offline yang digunakan sebagai media promosi aplikasi mobile ini adalah dengan diberikannya flyer mengenai aplikasi mobile ini yang terdapat QR Code pada saat event event yang diselenggarakan di Surabaya yang bekerjasama dengan Dinas Perhubungan dan Pariwisata kota Surabaya, juga akan diberikan pada tempat tempat wisata di Surabaya dan bandara atau stasiun. Selain flyer, nantinya juga akan digunakan poster yang akan dipasang pada tempat tempat wisata.