BAB IV KONSEP PERANCANGAN 4.1 TATARAN LINGKUNGAN Dari hasil perancangan website Resto Jagarawa sebagai media informasi dan promosi diharapkan dapat berpengaruh bagi pihak Resto Jagarawa untuk meningkatkan dalam memperkenalkan produknya maupun fasilitas dan meningkatkan citra usaha resto jagarawa. Dan dengan adanya media website resto jagarawa dapat dimanfaatkan oleh masyarakat terutama yang ingin mengetahui segala jenis menu dan fasilitas apa saja yang ditawarkan pihak resto jagarawa untuk konsumen terutama yang di kawasan Tangerang maupun di luar kota Tangerang. 4.2 TATARAN SISTEM a) Penyebaran Karya : Sebelum proses penyebaran karya / produk dibutuhkan sebuah hosting dan domain untuk menyimpan sebuah database yang berisi informasi resto jagarawa yang di upload ke halaman admin untuk perpindahan data dari komputer (localhost) ke dalam server hosting untuk menampung data data sehingga dapat diakses lewat internet. Dan sebuah domain untuk mempermudah pengguna internet (website) dan mengingat nama subdomain pada saat mengakses ke website tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai alamat IP (Internet Protocol Address). Dan untuk mempublikasikan website resto jagarawa ke masyarakat dibutuhkan sebuah jaringan internet untuk menagaksesnya. 30
Gambar 4.1 : Hosting + domain + internet Sumber : www.google.com b) Pemanfaatan Karya / Produk : 1. Pemanfaatan karya website resto jagarawa dapat dimanfaatkan sebagai sarana informasi berupa info seputar produk / fasilitas yang ditawarkan resto jagarawa kepada konsumen. 2. Media website resto jagarawa nantinya juga dapat dimanfaatkan sebagai media promosi resto jagarawa secara global melalui jaringan internet yang dapat diakses kapan saja dimana saja. c) Cara Kerja Karya / Produk : Untuk cara kerja produk cukup di akses website resto jagarawa dan hanya dibutuhkan sebuah pc/smartphone/handphone dan internet browser serta sebuah jaringan internet. Dengan adanya tiga hal tersebut maka website resto jagarawa sudah dapat diakses dengan mengetik alamat address www.jagarawaresto.com. 4.3 TATARAN PRODUK 4.3.1 SITE MAP Fungsi dari sitemap adalah : 1. Sitemap atau peta situs bertujuan untuk mempermudah pengunjung untuk melihat seluruh isi artikel atau konten yang terdapat di dalam sebuah website atau blog 2. Sitemap atau peta situs juga bertujuan untuk mempermudah search engine seperti google mengindeks seluruh isi artikel maupun konten yang terdapat di dalam website dan blog. Dengan kata lain, sitemap atau peta situs bertindak sebagai alat bantu navigasi dengan memberikan gambaran umum tentang isi sebuah website atau blog. 31
Sitemap atau peta situs dapat meningkatkan mesin pencari optimasi situs dengan memastikan bahwa semua halaman dapat ditemukan. Gambar 4.2 : sitemap halaman website jagarawaresto.com Sumber : data perancangan penulis 4.3.2 Penjelasan rinci tentang website resto jagarawa 1. Tampilan Halaman home Halaman home pada website resto jagarawa berisikan slide show gambar yang memberikan efek membesar dan dapat berubah ubah setiap beberapa saat. Serta posisi navigasi bar yang berada di bagian footer dan button yang berada pada posisi header. 32
Gambar 4.3 : Tampilan Halaman Home website Sumber : www.jagarawaresto.com a. Navigasi bar (navbar) Navigasi bar pada tampilan home berada pada posisi bawah (footer) dengan logo resto jagarawa yang berada pada tengah navigasi bar serta beberapa konten link yang mengarah pada beberapa halaman yang ada di website tersebut. Ukuran navigasi bar tersebut 1400px x 366px Gambar 4.4 : Navigasi bar website Sumber : www.jagarawaresto.com b. Button Terdapat button di bagian header di halaman utama yang berfungsi sebagai akses untuk masuk ke dalam halaman tertentu. Berikut adalah penjelasan mengenai button tersebut. 33
Gambar 4.5 : ukuran button Sumber : data perancangan penulis Tabel 4.1 : tabel penjelasan button Sumber : data perancangan penulis c. Size image slide show Pada tampilan slideshow terdapat gambar yang beberapa saat dapat berganti. Pada tampilan gambar tersebut dapat berubah ubah setiap beberapa saat. ketika admin mengupload gambar yang ingin di tampilkan pada slideshow tidak sembarang ukuran. Ukuran gambar tersebut berukuran 1700px x 1200px agar tidak terlalu berat pada saat diakses oleh pengunjung. 34
Gambar 4.6 : ukuran image slideshow sumber : jagarawaresto.com 2. Tampilan Halaman Konten G ambar 4.7 : tampilan halaman konten Pada tampilan halaman konten berisikan beberapa kolom gambar yang ketika di arahkan cursor akan terdapat penjelasan, dan ketika di klik akan dapat mengakses langsung ke beberapa halaman tertentu yang terdapat di website jagarawaresto.com. namun berbeda untuk posisi navigasi bar pada halaman konten dengan halaman sebelumnya yaitu tampilan halaman home. Navigasi bar akan bergerak berpindah posisi dari bawah ke atas dari footer menjadi header sama halnya dengan tampilan navigasi bar pada halaman yang lainnya kecuali tampilan home. Berikut adalah penjelasan fungsi 35
kolom tabel dan ukuran gambar yang terdapat pada kolom tersebut dan perubahan posisi navigasi bar Tabel 4.2 : tabel penjelasan tampilan halaman konten Sumber : data perancangan penulis Gambar 4.8 : perbedaan posisi navigasi bar 36
3. Tampilan Halaman Menu Makanan & Minuman Pada tampilan halaman menu makanan dan minuman keduanya terdapat pada satu navigasi yang di bagi menjadi dua sub navigasi yaitu menu makanan dan minuman, pada tampilan kedua menu tersebut hanya berisi mengenai foto produk makanan & minuman serta harga yang terdapat di resto jagarawa. Gambar 4.9 : tampilan menu makanan dan minuman Untuk tampilan halaman menu makanan terdapat kategori menu makanan yang dipisahkan berdasarkan kategori jenis masakan yang terdapat di menu resto jagarawa. Hal ini dapat membedakan jenis masakan yang terdapat di resto jagarawa serta mengurangi jumlah foto pada satu halaman website yang begitu banyak dengan total 6 ketegori menu makanan 72 jenis foto masakan, untuk ukuran foto kategori adalah 560 x 220px dan foto makanan dan minuman 300 x 220px Gambar 4.10 : ukuran foto makanan & minuman Sumber : jagarawa resto 37
Gambar 4.11 : kategori menu makanan Pada kolom gambar daftar menu makanan atau minuman. Jika cursor diarahkan ke gambar masakannya maka akan keluar tampilan daftar harga makanan atau minuman di gambar tersebut yang telah di tetapkan pihak jagarawa resto. gambar 4.12 : kolom harga pada gambar 38
4. Tampilan Halaman Fasilitas Pada tampilan halaman fasilitas terdiri dari 4 kolom slideshow yang berupa gambar - gambar tentang fasilitas yang terdapat di resto jagarawa serta keterangan fasilitas yang terdapat di bawah gambar. Gambar 4.13 : tampilan halaman fasilitas Pada tampilan halaman fasilitas terdapat gambar tentang fasilitas yang sudah diatur ukurannya agar tidak berat saat di akses oleh pengguna website, untuk ukuran gambarnya 300 x 220px. Gambar 4.14 : ukuran gambar pada tampilan halaman fasilitas 39
5. Tampilan Halaman Resto Pada tampilan halaman resto terdapat dua sub navigasi, yaitu kontak dan sejarah yang isi halamannya menapilkan isi sejarah, visi & misi serta motto perusahaan resto jagarawa. Dan untuk kontak menampilkan peta lokasi,alamat lengkap dan kontak yang dapat dihubungi dan kolom kritik dan pesan serta social media yang dapat diikuti. gambar 4.15 : tampilan halaman kontak sumber : jagarawaresto.com Gambar 4.16 : tampilan halaman sejarah 40
6. Penjelasan tentang layout website jagarawa resto Untuk tampilan website jagarawaresto menggunakan tampilan layout yang responsive. Sehingga tampilan layout mengikuti ukuran layar pada monitor yang digunakan contohnya pada tablet, pc, smartphone. Tampilan website akan berubah secara automatis mengikuti ukuran layar jadi sangat flexible digunakan baik itu dengan pc, tablet, smartphone. Gambar 4.17 : tampilan pada desktop & mobile 4.4 TATARAN ELEMEN 4.4.1 Warna & Texture Pemilihan warna dan texture pada website jagarawaresto hasil dari observasi di lapangan pemilihan warna yang identik dengan warna bangunan pada resto jagarawa dimulai dari interior maupun eksterior yang menggunakan bahan dasar kayu, bagian tersebut digunakan sebagai acuan untuk pemilihan warna dan texture. Warna gradasi untuk warna navigasi bar sedangkan texture kayu untuk bagian background. 41
Gambar 4.18 : acuan pemilihan warna Sumber : jagarawa resto Warna coklat juga mempresentasikan dari objek alam : tanah, kayu, tanaman dan mempunyai citra positif dan warna coklat adalah warna netral yang memberikan kesan kenyamanan. 4.4.2 Typografi Penggunaan typografi pada website jagarawaresto menggunakan jenis font sans-serif : Arial karena jenis font ini ialah font yang tidak memiliki kait sama sekali, jenis font dari sans-serif paling tepat digunakan pada sebuah website, karena font ini tetap nyaman dibaca dilayar monitor yang resolusinya lebih kecil ketimbang cetak. Semua karakter font dari sans-serif memiliki karakter yang bersih dan mudah dibaca walau berukuran kecil. 42