V. ULASAN KARYA PERANCANGAN
A. Proses Perancangan Desain Logo Konsep perancangan dimulai dengan perancangan logo aplikasi mobile “Komuter Tracker” sesuai dengan pernyataan, "Logos play an increasingly important role in the identification and personalization of product, services, and organizations
(8)
". Pencarian dan pengumpulan
beberapa kata kunci yang berhubungan dengan aplikasi ini melalui brain mapping dan pembuatan sketsa kasar pada logo aplikasi mulai dilakukan yang tetap mengacu kepada tujuan dari aplikasi tersebut. Nantinya logo yang dikembangkan haruslah dapat menyampaikan bahwa aplikasi ini merupakan sebuah aplikasi untuk membantu masyarakat khususnya pengguna Commuter Line agar dapat melacak posisi pasti commuter yang ingin digunakan dengan sistem pada aplikasi mobile ini.
Gambar 9 Brainmapping dan sketsa kasar aplikasi mobile “Komuter Tracker” 8 Jack Gernsheimer. Designing Logos, Allworth Press. Hal.18
58
Beberapa hasil sketsa kasar dipilih dan divisualisasikan dalam bentuk digital menggunakan software pembuat vektor Adobe Illustrator. Hasil visualisasi digital ini meliputi bentuk dan pemilihan font yang digunakan pada logo tersebut. Pemilihan warna belum ditentukan untuk memperkuat terlebih dahulu bentuk dari logo tersebut, dan juga agar logo tersebut tetap dapat diaplikasikan walau hanya dalam warna hitam putih, seperti pada pernyataan, "Ultimately, the logo will have to work without the aid of color, but equally important, the designer can more effectively observe such things as balance, composition, positive and negative space and general legibility if color is not yet introduced. Once the icon works effectively in black and white, color should only enhance it, provided it's sensibily introduced
(9)
". Hasil visualisasi logo dari sketsa
kasar yang ada, adalah sebagai berikut.
Gambar 10 Hasil visual alternatif logo
9 Jack Gernsheimer. Designing Logos, Allworth Press. Hal.43
59
1. Konsep Visual Logo Aplikasi mobile “Komuter Tracker” merupakan aplikasi dengan fitur pelacakan posisi commuter. Berdasarkan tujuan tersebut, maka visualisasi untuk logo aplikasinya Perancang menggunakan visual ikon pin point pada peta-peta digital yang mewakili pengertian sebuah “posisi yang ditunjuk”. Beberapa alternatif logo juga menggunakan visual ikon commuter atau kereta yang dijadikan bentuk vektor, untuk memvisualkan sasaran aplikasi ini yang akan digunakan untuk melacak posisi commuter. 2. Konsep Tipografi pada Logo Penggunaan jenis font yang sama pada setiap alternatif logo menggunakan font bawaan dari logo asli PT KAI Commuter Line Jabodetabek, dengan mengkreasikan huruf-huruf yang belum ada pada logo asli tersebut. Font yang dikreasikan adalah jenis font yang dipakai pada huruf “Commuter” pada logo di bawah ini.
Gambar 11 ….
Penambahan huruf yang ada pada logo aplikasi adalah huruf-huruf yang ada pada kata “Komuter Tracker”.
Gambar 12 Font tambahan pada logo aplikasi “Komuter Tracker”
60
Berdasarkan
hasil
penjabaran
konsep
visual
dan
konsep
tipografi di atas. Pada akhirnya logo yang dipilih adalah logo alternatif 2. Dengan bentuk logo yang terkesan solid dan kuat dengan tampilan visual blok-blok warna untuk space penulisan nama aplikasi. Penambahan ikon pin point dalam lingkaran pada logo juga menguatkan fungsi yang ingin ditawarkan aplikasi mobile “Komuter Tracker” yaitu melacak posisi commuter yang aktif beroperasi area wilayah tertentu, Jabodetabek.
Gambar 13 Logo pilihan
Selanjutnya, logo pilihan aplikasi mobile “Komuter Tracker” dipadukan
dengan
warna pada
branding PT
KAI
Commuter Line
Jabodetabek. Menggunakan warna merah pada logo PT KAI Commuter Line dengan komposisi RGB dan kode hexadesimal sebagai berikut.
Gambar 14 Color palette pada logo aplikasi “Komuter tracker”
61
Hasil logo pilihan dipadukan dengan kombinasi warna-warna yang telah dipilih adalah.
Gambar 15 Visual akhir logo aplikasi “Komuter Tracker”
Gambar 16 Logo launcher aplikasi “Komuter Tracker” pada smartphone
62
B. Proses Perancangan Desain Layout Graphic User Interfaces Pada perancangan desain layout aplikasi “Komuter Tracker”, sketsa penyusunan wireframe digunakan sebagai gambaran dan acuan untuk programmer, bagaimana nantinya aplikasi tersebut berwujud dalam tampilan hasil akhirnya. Penyusunan sketsa wireframe juga memperlihatkan tahap-tahap dari halaman awal, menuju halaman menu utama berlanjut ke halaman lainnya. Pada tahapan proses perancangan ini kita juga mulai melayout tampilan dari Graphic User Interfaces aplikasi “Komuter tracker”.
Gambar 17 Sketsa kasar wireframe aplikasi “Komuter Tracker” (1)
63
Gambar 18 Sketsa kasar wireframe aplikasi “Komuter Tracker” (2)
Gambar 19 Sketsa kasar wireframe aplikasi “Komuter Tracker” (3)
64
Berdasarkan hasil penyusunan sketsa wireframe di atas, maka pembagian halaman-halaman yang ada pada aplikasi “Komuter Tracker” terbagi menjadi seperti bagan di bawah ini.
MENU T a r if K e r e ta
S p las h S creen
MENU P o s is i K e r e ta
MENU S ta s iu n te r d e k a t
Halaman Perhitungan Tarif
Halaman Hasil Perhitungan
Jalur Commuter 1
Tampilan Tracking 1
Jalur Commuter 2
Tampilan Tracking 2
Jalur Commuter 3
Tampilan Tracking 3
Jalur Commuter 4
Tampilan Tracking 4
Jalur Commuter 5
Tampilan Tracking 5
Jalur Commuter 6
Tampilan Tracking 6
Halaman yang menampilkan petunjuk stasiun terdekat user (dalam bentuk peta dan daftar)
Gambar 20 Bagan wireframe/ User Interfaces Flowchart aplikasi “Komuter Tracker”
1. Halaman Splash Screen Pada halaman “Splash Screen” menampilkan logo aplikasi mobile “Komuter Tracker”, PT KAI Commuter Line, dan logo KAI. Dengan latar belakang warna gradasi hitam ke abu-abu gelap dipadukan dengan kolase gambar commuter yang sedang melintas dan diberi efek blur. Halaman ini hanya tampil dalam beberapa detik saja dan dilanjutkan dengan tampilan halaman “Menu Utama”.
65
Gambar 21 Tampilan halaman Splash Screen
2. Halaman Menu Utama / Home Halaman
“Home”
menampilkan
3
menu
utama
untuk
mengakses keseluruhan halaman-halaman informasi pada aplikasi “Komuter Tracker”. Dengan layout center, di bagian atas pada halaman “Home” ini dihiasi dengan logo aplikasi “Komuter Tracker” dan logo KAI Commuter Line sebagai bentuk pengulangan agar tersimpan di benak user branding aplikasi “Komuter Tracker” dan juga 66
KAI Commuter Line sebagai penyedia aplikasi. Tampilan menu-menu utama nya menggunakan efek slider ke kiri dan ke kanan, yang menampilkan menu apa saja yang aktif dan tidak aktif dengan indikator posisi di tengah layar.
Gambar 22 Tampilan halaman “Home” (1)
67
Gambar 23 Tampilan halaman “Home” (2)
Gambar 24 Ikonografi pada halaman “Home”
68
3. Halaman Menu Tarif Kereta Pada
halaman
“Tarif
Kereta”,
user
dapat
melakukan
perhitungan tarif yang dibutuhkan jika ingin berpergian dari stasiun awal sampai dengan stasiun akhir yang dipilih oleh user. Pada halaman ini menampilkan 2 tombol dropdown untuk meng-input pilihan stasiun awal dan stasiun akhir. Jika user sudah melakukan pilihan stasiun awal dan akhir yang diinginkan, user selanjutnya menekan tombol “Hitung”, yang kemudian aplikasi akan melakukan perhitungan secara otomatis mengenai perhitungan tarif, estimasi jarak dan waktu stasiun yang sebelumnya sudah di-input oleh user.
Gambar 25 Tampilan halaman “Tarif Kereta” (1)
69
Gambar 26 Tampilan halaman “Tarif Kereta” (2)
4. Halaman Menu Posisi Kereta Pada halaman “Posisi Kereta”, Menampilkan rute perjalanan dari semua kereta Commuter Line, berikut dengan estimasi waktu kedatangan kereta Commuter Line yang ingin ditumpangi dan 70
estimasi sisa jarak tempuh ke stasiun terdekatnya. Pada halaman “Posisi Kereta”, user dapat memilih satu di antara 6 rute perjalanan commuter yang disediakan oleh KAI Commuter Line. Ketika user memilih salah satu rute tersebut, selanjutnya user dapat melihat semua pergerakan posisi commuter-commuter pada pilihan rutenya tersebut.
Gambar 27 Tampilan halaman “Posisi Kereta” (1) – Enam pilihan rute perjalanan KAI Commuter Line Jabodetabek
71
Gambar 28 Ikonografi pada halaman “Posisi Kereta” – Ikonografi 6 pilihan rute perjalanan KAI Commuter Line Jabodetabek
Pergerakan posisi commuter yang telah dipilih user, dapat ditekan setiap ikon commuter yang sedang bergerak yang mana akan menampilkan informasi yang lebih detail.
Gambar 29 Tampilan halaman “Posisi Kereta” (2) – Rute perjalanan Stasiun Tangerang – Stasiun Duri (PP)
72
Jika pilihan rute perjalanan commuter melewati jumlah stasiun yang banyak, tampilan pergerakan posisi commuter dapat discroll secara vertikal untuk melihat keseluruhan rute perjalanan dari stasiun awal sampai stasiun akhir.
Gambar 30 Tampilan halaman “Posisi Kereta” (3) – Rute perjalanan Stasiun Bekasi-Jatinegara-Manggarai-Kakarta Kota (PP)
5. Halaman Menu Stasiun Terdekat Anda Pada
halaman
“Stasiun
Terdekat
Anda”,
user
dapat
mengetahui posisi Stasiun Commuter Line yang terdekat dengan 73
posisi user pada saat itu. Aplikasi ini akan sangat membantu para turis domestik dan mancanegara yang ingin menggunakan jasa kereta Commuter Line ketika berwisata di wilayah Jabodetabek. Tampilan pada halaman “Stasiun Terdekat Anda” dibuat menjadi 2 tampilan, tampilan dalam bentuk peta dan tampilan dalam bentuk daftar.
Gambar 31 Tampilan halaman “Stasiun Terdekat Anda” (1)
74
Gambar 32 Tampilan halaman “Stasiun Terdekat Anda” (2)
C. Pasca Produksi Rencana pasca produksi setelah aplikasi mobile “Komuter Tracker” selesai dirancang hingga tahap peng-instalan dan uji coba produk adalah apakah aplikasi ini akan ditawarkan kepada PT KAI Commuter Line atau di-publish secara pribadi ke Apps Store baik itu milik Google ataupun Apple. Jika aplikasi ini ditawarkan kepada pihak KAI Commuter Line maka akan menggunakan sistem beli putus. Sedangkan
75
jika di-publish secara pribadi ke Apps Store, maka aplikasi tersebut dapat dipasangkan space untuk menempatkan iklan-iklan promosi.
D. Perancangan Media Pendukung Aplikasi
mobile
“Komuter
Tracker”
yang
telah
dirancang
tentunya memerlukan media pendukung lain yang dapat mengenalkan aplikasi mobile ini kepada khalayak ramai, masyarakat luas pada umumnya
dan
pengguna
Commuter
Line
pada
khususnya.
KAI
Commuter Line, memiliki media promosi yang sampai saat ini sudah mereka gunakan untuk iklan atau promosi bagi perusahaan pribadi dan juga untuk disewakan kepada pengiklan lainnya. Media promosi yang dimiliki oleh PT KAI Commuter Line, yaitu website
perusahaan
PT
KAI
Commuter
Line,
akun
Twitter
@CommuterLine yang sampai saat ini memiliki jumlah follower di atas 100.000 orang, bagian body commuter yang dapat ditempel stiker juga sering menjadi media beriklan oleh PT KAI Commuter Line, begitu juga dengan bagian dalam commuter. Media pendukung yang dirancang untuk mendukung promosi aplikasi mobile “Komuter Tracker”, memfokuskan pada pengenalan fitur utama aplikasi, yaitu dengan aplikasi ini user dapat menemukan lokasi commuter yang ingin user gunakan. Informasi untuk mendapatkan aplikasi ini di Google Play dan Apple Apps Store juga menjadi perhatian utama pada media pendukung yang telah dirancang. Tampilan media pendukung
aplikasi
“Komuter
Tracker”
sebagai
berikut
beserta
pengaplikasiannya ke berbagai media yang dapat digunakan langsung di commuter.
76
Gambar 33 Tampilan media pendukung aplikasi “Komuter Tracker” (1)
Gambar 34 Tampilan media pendukung aplikasi “Komuter Tracker” (2)
77
Gambar 35 Pengaplikasian media pendukung aplikasi “Komuter Tracker” (1)
78
Gambar 36 Pengaplikasian media pendukung aplikasi “Komuter Tracker” (2)
79
