Perancangan Layar yang telah dirancang dapat dilihat pada Gambar 3.29 sampai Gambar 3.34. Perancangan ini dibuat terlebih dahulu sebelum sistem aplikasi dibuat. Sistem aplikasi akan disesuaikan dengan rancangan layar ini agar kios informasi yang menarik dapat terealisasikan.
Pada aplikasi kios informasi ini, terdapat menu-menu yang menarik dan alur pemilihan menu yang secara tidak langsung memandu user sehingga user mendapat kemudahan didalam pengoperasian aplikasi. Pada setiap pemilihan menu akan ditampilkan animasi yang menarik.
3.4.3.1 Rancangan Layar Menu Utama
Rancangan layar menu utama dapat dilihat pada Gambar 3.29 dibawah. Menu-menu yang terdapat pada layar ini berbentuk tombol yang direalisasikan dalam gambar dan pewarnaan yang menarik.
Shop Event Info
Logo Logo
Latar Belakang History
Gambar3.29 Rancangan Layar Menu Utama
Layar menu utama ini merupakan layar kontrol utama dari keseluruhan aplikasi, terdapat tiga menu utama didalam aplikasi ini. Dibagian atas dan bawah layar ini terdapat logo dari Plaza Senayan berupa gambar pohon palem dan berwarna hijau, serta teks Plaza Senayan berwarna hitam disamping logo bagian atas aplikasi. Pewarnaan latar belakang menggunakan warna abu-abu, emas, hijau dan putih sehingga dapat memberikan kesan elegan. Untuk tiga menu utama digunakan tombol-tombol yang berbentuk bulat dan terdapat teks yang menunjukkan nama dari menu tersebut, tombol “Shop” berfungsi untuk mencari lokasi toko-toko yang ada di Plaza Senayan, tombol “Event” berfungsi untuk menampilkan event yang sedang dan akan diadakan di Plaza Senayan, dan tombol “Info” berfungsi untuk menampilkan informasi penawaran khusus dari
toko-toko di Plaza Senayan. Tombol “History” berfungsi untuk menampilkan sejarah dari Plaza Senayan. Dari segi audio ditambahkan lagu sebagai pelengkap dan juga terdapat animasi sehingga menjadi lebih menarik untuk dilihat.
3.4.3.2 Rancangan Layar Categories
Logo Logo
Latar Belakang Fashion
Entertainment
Food & Beverages
Home Decor
Books & Cards
Health & Beauty
Facilities
Music & Gadgets
Wathces & Jewelry
Categories Floor Alphabet
Shop Event Info
History
Gambar3.30 Rancangan Layar Categories
Ketika menu “Shop” dipilih pada menu utama akan ditampilkan layar seperti pada gambar 3.30 diatas, secara default tombol “Categories” dipilih dan layar kategori yang ditampilkan. Layar ini berisi menu-menu kategori toko berdasarkan pembagian dari Plaza Senayan. Layar ini dirancang semenarik mungkin dengan adanya elemen-elemen multimedia seperti gambar, animasi, teks, dan audio yang disesuaikan dengan hasil kuisioner berdasarkan tabel 3.8.
Untuk menu kategori digunakan tombol berbentuk kotak dengan warna abu-abu dan emas juga disertai gambar yang menarik.
3.4.3.3 Rancangan Layar Sub-Categories
Logo Logo
Latar Belakang Fashion
Entertainment
Food & Beverages
Home Decor
Books & Cards
Health & Beauty
Facilities
Music & Gadgets
Wathces & Jewelry
Categories Floor Alphabet
Sub1 Sub2 Sub3 Sub4 Sub5
Shop Event Info
History
Gambar3.31 Rancangan Layar Sub-Categories
Ketika tombol menu di dalam layar kategori ditekan, maka tampilan layar akan berubah seperti gambar 3.31 diatas. Tampilan layar menampilkan sub- kategori dari kategori yang telah ditekan, sub-kategori tersebut berupa tombol berbentuk kotak dengan warna emas dan garis berwarna abu-abu. Banyaknya tombol sub-kategori tergantung dari jenis kategori yang dipilih. Terdapat animasi menarik ketika tombol sub kategori akan dimunculkan. Pada layar ini tetap digunakan lagu, animasi dan warna dari menu utama.
3.4.3.4 Rancangan Layar Toko
Logo
Latar Belakang Fashion
Entertainment
Food & Beverages
Home Decor
Books & Cards
Health & Beauty
Facilities
Music & Gadgets
Wathces & Jewelry
Categories Floor Alphabet
Sub1 Sub2 Sub3 Sub4 Sub5
Toko
Shop Event Info
History
Gambar 3.32 Rancangan Layar Toko
Ketika tombol di dalam layar sub-kategori ditekan maka tampilan layar akan berubah seperti Gambar 3.28 diatas. Lalu akan ditampilkan toko-toko yang sesuai dengan sub-kategori yang telah dipilih dengan animasi menarik. Layar toko mengggantikan logo Plaza Senayan berupa pohon palem yang sebelumnya terdapat dibawah. Toko-toko tersebut berupa tombol dengan gambar dari masing-masing logo toko yang dipadukan dengan teks berupa nama toko tersebut yang diletakkan tepat dibawah gambar logo toko tersebut. Ketika tombol toko ditekan tampilan layar akan berubah seperti pada Gambar 3.33 dibawah. Sebelum layar peta dimunculkan, akan terjadi animasi yang menarik. Lokasi toko ditunjukkan didalam peta yang berbentuk denah dengan wana hitam yang berkedap-kedip dan ditampilkan gambar toko beserta keterangannya disamping
kanan peta. Selain itu toko lain yang berada didalam peta tersebut juga dapat ditekan untuk menampilkan gambar dan keterangan toko yang dipilih. Untuk menutup layar peta, terdapat tombol “Close” di kanan atas peta.
Logo
Categories Floor Alphabet
Close
Gambar dan keterangan
toko
Toko
Shop Event Info
History
3.4.3.5 Rancangan Layar Floor
Logo
Categories Floor Alphabet
Ground Floor 2nd Floor 3rd Floor Close
Gambar dan keterangan
toko
Toko
Shop Event Info
History
Gambar 3.34 Rancangan Layar Floor
Ketika tombol “Floor” ditekan maka tampilan layar akan berubah seperti pada Gambar 3.34. Tampilan layar mirip dengan tampilan layar peta tetapi yang membedakan adalah diatas peta terdapat tiga tombol yang masing-masing tombol berfungsi untuk menunjukkan peta dan toko yang terdapat pada lantai yang dipilih. Tombol toko dan peta dapat ditekan untuk menampilkan gambar dan keterangan toko yang dipilih. Dan juga terdapat tombol close yang berfungsi untuk menutup peta.
3.4.3.6 Rancangan Layar Alphabet Logo Logo Latar Belakang A-B-C J-K-L D-E-F M-N-O T-U-V G-H-I P-Q-R-S W-X-Y-Z
Categories Floor Alphabet
Shop Event Info
History
Gambar 3.35 Rancangan Layar Alphabet
Ketika tombol “Alphabet” ditekan maka tampilan layar akan berubah seperti pada Gambar 3.35. Tampilan layar sekilas mirip dengan tampilan layar Categories, yang berbeda adalah jumlah tombol dan isi dari tombol-tombol tersebut. Tombol-tombol di atas memiliki bentuk yang sama dengan tombol-tombol pada layar kategori tetapi tidak memiliki gambar. Ketika tombol-tombol tersebut ditekan maka akan ditampilkan toko-toko yang sesuai dengan abjad yang terdapat pada tombol yang dipilih dan ketika tombol toko dipilih maka tampilan layar akan sama dengan layar peta. Tombol toko dan peta dapat ditekan dan juga terdapat tombol close yang berfungsi untuk menutup peta.
3.4.3.7 Rancangan Layar Event
Logo
Latar Belakang Layar Event
Logo
Shop Event Info
History
Gambar 3.36 Rancangan Layar Event
Ketika tombol “Event” ditekan tampilan layar akan berubah seperti pada Gambar 3.36 di atas. Layar ini berisi seluruh event yang sedang dan akan diadakan di Plaza Senayan. Event tersebut ditampilkan berupa teks yang mudah dibaca. Ketika layar Event ditampilkan, akan terjadi animasi. Sedangkan untuk background, audio, dan warna lainnya masih sama seperti pada layar menu utama.
3.4.3.8 Rancangan Layar Info
Logo
Latar Belakang Layar Info
Logo
Shop Event Info
History
Gambar 3.37 Rancangan Layar Info
Ketika tombol “Info” ditekan tampilan layar akan berubah seperti pada Gambar 3.37 diatas. Layar ini berisi seluruh penawaran khusus dari toko. Penawaran khusus tersebut ditampilkan berupa teks yang mudah dibaca. Ketika layar info ditampilkan, akan terjadi animasi. Selain itu teks dalam layar info ini dapat ditekan untuk menampilkan lokasi peta dan keterangan toko seperti pada layar peta. Untuk background, audio, dan warna lainnya masih sama seprti pada layar menu utama.
3.4.3.9 Rancangan Layar Profile
Logo
Latar Belakang Profile
Logo
Shop Event Info
History
Gambar 3.38 Rancangan Layar Profile
Ketika tombol “History” ditekan tampilan layar akan berubah seperti pada Gambar 3.38 diatas. Layar ini berisi sejarah dari Plaza Senayan yang ditampilkan berupa teks yang mudah dibaca. Ketika layar profile ditampilkan, akan terjadi animasi. Selain itu terdapat juga tombol “Close” yang berfungsi untuk menutup layar profile.