BAB IV KONSEP PERANCANGAN

Laporan Tugas Akhir | 83

BAB IV KONSEP PERANCANGAN A. Tataran Terhadap L:ingkungan 1.

Tema Perancangan Tema IPTEK yang diambil dari perancangan kali ini merupakan sebuah

perancangan media publikasi berupa website yang merupakan sebuah produk hasil perkembangan teknologi yang telah merasuk dan menjadi bagian hidup bagi masyarakat modern. Dari hasil analisa observasi yang telah dilakukan, ditemukan beberapa aspek penting yang perlu diperhatikan dalam sebuah perancangan website pariwisata. Yang meliputi beberapa aspek informasi, layout serta kegunaan yang mengacu pada kebergunaan/tujuan website tersebut dibuat. Mengacu pada beberapa referensi yang ada bahwa sebuah website haruslah mampu memberikan informasi secara tepat dan lugas tanpa banyak basa-basi yang tidak perlu. Dengan itu dalam perancangan kali ini akan dirancang sebuah website yang benar-benar memaparkan data/informasi secara singkat dan jelas menurut kebutuhan yang benar-benar signifikan. Sehingga apa yang ingin disampaikan benarbenar dapat tersampaikan secara tepat dan mudah dimengerti. Dengan perancangan yang langsung mengacu pada poin penyampaian juga akan berimbas pada bentuk website yang lebih sederhana dan mudah diaplikasikan terhadap user karena tidak perlu memaksa user untuk berfikir dalam melakukan akses terhadap website ini karena seperti yang telah diungkapkan oleh steven krug bahwa sebuah website yang baik adalam website yang tidak memaksa user untuk berfikir saat mengakses website tersebut. 2.

Muatan Lokal Dalam Perancangan Karya Desain

a)

Informasi objek wisata dalam web, yang merupakan objek potensi wisata daerah Jember Website pariwisata kota Jember merupakan salah satu sarana untuk

mempublikasikan wisata daerah kota Jember kepada khalayak luas. Website promosi ini berisi tentang beberapa aspek informasi yang perlu diketahui oleh khalayak


tentang apa saja tempat tujuan wisata kota Jember yang layak untuk dikunjungi. Pariwisata yang meliputi beberapa aspek wisata seperti wisata kuliner, wisata seni dan budaya, serta wisata alam yang terdapat banyak sekali pilihan tempat-tempat yang menarik dikota Jember. Selain menjabarkan tempat-tempat tujuan wisata, website ini juga berisikan konten-konten penginapan serta tempat-tempat jajanan yang menarik yang bisa dikunjungi dan dinikmati di Jember. Kota Jember memiliki tempat-tempat wisata yang tidak kalah menarik dengan daerah lain. Kota Jember memiliki peluang yang baik untuk terus berkembang dan mengembangkan diri melalui aspek kepariwisataannya karena di kota Jember terdapat tempat-tempat wisata yang tidak kalah menarik jika dibandingkan dengan daerah lain yang sudah dikenal. Sebut saja air terjun tancak (gn pasang), tebing timur gn pasang, pantai watu ulo, pantai payangan dan masih banyak situs wisata lainnya yang menarik dan layak untuk dikunjungi.

Gambar 49. Objek pariwisata Jember (Sumber : www.google.com)

Dengan menggunakan website sebagai sarana promosi mungkin akan mendorong perkembangan pariwisata kota Jember agar lebih dikenal oleh masyarakat yang lebih luas.Hal tersebut dilakukan untuk mencapai tujuan agar Jember menjadi salah satu destinasi/ perjalanan wisata yang memiliki nilai kunjungan yang tinggi


b)

Unsur ornamen dan warna pada tampilan web Unsur warna dan ornament yang diterapkan pada layout website ini merupakan

sebuah perwujudan identitas / karakteristik yang ,elekat pada daerah Jember. Perwujudan tersebut ditampilkan melalui sebuah bentuk daun tembakau masak yang sudah menjadi salah satu motif yang menjadi ciri khas dan sering dipakai dalam pembuatan batik jember, selain itu tembakau juga merupakan sebuah produk olahan yang cukup besar terdapat di Jember. Demikian pula pemakaian warna yang diterapkan pada website yang sedang dirancang. Merupakan warna dasar yang diambil dari warna daun tembakau masak yang siap olah yakni warna kecoklatan yang difariasikan menurut gelap terang warna yang di susun untuk memberikan kesan elegan pada tampilan website. 3.

Pendekatan Estetis Desain

a)

Tata letak dalam layout website Website dalam perancangan kali ini menggunakan tema card yang didasari pada

penggayaan yang rapih dalam pengaplikasian tata letak. Konsep card yang dimaksud merupakan sebuah solusi dari tujuan dibuatnya website ini yang mengikuti pola perkembangan informasi yaitu sebuah akses website yang ditujukan untuk diakses menggunakan media smartphone yang sudah sangat umum untuk era saat ini.


Gambar 50. Bentuk tata letak website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Bentuk kotak-kotak tersebut dibuat untuk mempermudah peletakan setiap informasi yang disampaikan. Kesan yang dibangun melalui layout tersebut adalah kesan kerapihan dan penataan yang dinamis agar lebih enak dilihat ketika user sedang melakukan akses pada website menggunakan media desktop maupun smartphone.

Gambar 51. Template website Zyro Builder (Sumber : www.zyro.co.uk)


Gambar layout website diatas merupakan salah satu inspirasi penggunaan layout kartu (card) yang diaplikasikan pada website ini. Dari tampilan diatas dapat terlihat bagaimana penyusunan yang rapih dan terorganisir terhadap layout yang terpampang pada laman website. Setiap kolom merupakan bentuk pembagian jenis informasi yang berbeda agar penyampaian informasi tersebut lebih terorganisir dan lebih mudah dimengerti oleh pengguna.

B. Tataran Sistem 1.

Penyebaran produk Dalam sebuah kegiatan publikasi terhadap karya yang telah dibuat melalui

media jejaring sosial. Kegiatan pengenalan itu dilakukan terhadap masyarakat umum dan pihak Dinas Pariwisata dan Kebudayaan Jember selaku pihak yang mengelolah kepariwisataan daerah Jember. Dalam kegiatan tersebut didapatkan respon yang positif dari responden target publikasi yang dilakukan. Meskipun terdapat bebrapa bagian yang menjadi pekerjaan rumah yang harus dibenahi untuk memberikan hasil yang diharapkan terhadap karya media publikasi yang dibuat. Dari kegiatan publikasi karya tersebut didapatkan respon yang positif terhadap tampilan yang dianggap cukup menarik saat diakses menggunakan mobile karena sebagian besar responden melakukan kegiatan akses website tersebut menggunakan media mobile.

Gambar 52. E-mail dengann pihak Disparbud Jember


Gambar diatas adalah printscreen laman gmail mengenai respon pihak Disparbud

Jember

terhadap

terhadap

perancangan

website

www.beautyofjember.com sebagai media publikasi wisata alam jember . Pihak kepariwisataan Jember sendiri mendukung perancangan website publikasi wisata alam ini. Hal tersebut ditunjukkan dengan respon baik yang diberikan saat perancang melakukan eimail mengenai projek perancangan yang dilakukan dalam kegiatan perancangan kali ini. 2.

Cara kerja produk

a)

Desain Interface Website Desain antarmuka (Interface) meliputi hal-hal seperti desain interaksi (apa yang

terjadi berikutnya saat pengguna mengklik) dan arsitektur informasi atau bagaimana segala sesuatu diatur (Chairani, 2006, hal. 5). Desain interaksi meliputi struktur arus data pada tiap Button maupun konten website, sedangkan arsitektur informasi meliputi sistematika pengaturan letak konten informasi dan layout yang dirancang pada sebuah laman website, Sebuah web page menurut interface interaktif nya terdiri dari dua jenis yaitu statis dan dinamis. Webpage statis adalah webpage yang halamannya selalu memiliki tampilan yang sama saat diakses dengan media yang berbeda. Sedangkan webpage dinamis memiliki tampilan yang berbeda tergantung kondisi user maupun server (EMS, 2012, hal. 3). Beberapa kelebihan webpage statis yaitu bentuk selalu sama, loading-nya tidak terlalu lama namun memiliki kekurangan seperti sulitnya membuat kesan laman yang up to date, serta kurang menarik jika dinbandingkan dengan webpage dinamis yang sekarang sangat banyak digunakan pada laman website. b)

Desain interaksi user terhadap website Dalam perancangan sebuah media online seperti website ini harus memiliki

struktur arus informasi yang benar-benar tersturktur untuk mempermudah dalam kegiatan perancangan yang dilakukan. Demikian juga dengan arus interaksi yang merupakan arus kegiatan user dalam pencarian informasi terhadap website yang dibangun.


Dalam sebuah jurnal penelitian tentang tentang interaksi komunikasi di jelaskan, “Seemingly inconsistent findings regarding the effects of interactivity on communication outcomes such as attitude toward the website in two different interactivity research streams (i.e., actual interactivity vs. perceived interactivity) by proposing that perceived interactivity mediates the effect of actual interactivity on attitude toward the website”. Nampak ketidakkonsisten mengenai efek interaktivitas pada hasil komunikasi seperti sikap terhadap website di dua aliran penelitian interaktivitas yang berbeda (yaitu, interaktivitas yang sebenarnya vs interaktivitas dirasakan) dengan mengusulkan bahwa interaktivitas dirasakan mampu memberi efek interaktif yang sebenarnya terhadap website (Wua, 2013). Bagan

USER

arus

interaksi

disamping

meng-

gambarkan bagaimana arus kegiatan pencarian data yang

dilakukan

user

beautyofjember.com Web Page

yang

terhadap

website

merupakan

hasil

perancangan website pariwisata daerah Jember yang dibangun dalam kegiatan perancangan kali ini. Bagan tersebut menggambarkan bagai mana user yang mengakses website ini akan berinteraksi

Home page

langsung terhadap tampilan home website ini yang didalam nya terpampang informasi tentang wisata dan informasi lain yang berkaitan dengan kegiatan pariwisata

Informasi

False

daerah

Jember.

Jika

user

belum

mendapatkan informasi yang dicari dalam bagian laman website maka user dapat kembali kelaman awal tampilan website untuk mengulangi proses pencarian tersebut atau langsung mengakses menu

ok

navigasi yang secara teknis dibuat dan didesain pada laman home. Namun, jika user sudah mendapatkan informasi

User / End

yang

diinginkan

maka

user

dapat

mengakhiri aktifitas pencarian tersebut dan keluar dari laman web.

Bagan 8. Desain interaksi userterhadap website


c)

Desain interaksi user terhadap DISPARBUD Jember Demikian pula dengan arus informasi yang penting bagi user untuk lebih detail

mengetahui hal yang berhubungan dengan kepariwisataan daerah Jember yang bisa didapat melalui jejaring sosial miliki Dinas Pariwisata dan Kebudayaan Jember. Arus hubungan user terhadap jejaring miliki DISPARBUD jember dapat digambarkan dalam bagan interaksi seperti dibawahini. Bagan interaksi tersebut dapat diulaskan terhadap hubungan antara user dengan jejaring pihak Dinas Pariwisata. Arus intearksi tersebut dapat diulaskan secara sederhana yang diawali dari pengguna mulai melakukan akses terhadap website pada laman home yang juga terdapat Link terhadap jejaring Dinas Pariwisata Jember. Jika user melakukan akses terhadap tombol tautan Link tersebut maka user akan langsung diarahkan ke laman jarsos Disparbud Jember yang artinya user akan keluar dari laman website tersebut. Untuk kembali melakukan akses terhadap website beautyofjember.com user dapat kembali pada laman web dan melakukan kegiatan informasi lain pada laman web atau jika user merasa sudah cukup dengan informasi yang didapat user bisa mengakhiri kegiatan pencarian data tersebut. Namun, jika user tidak melakukan akses terhadap tombol tautan jejaring tersebut, user bisa melakukan kegiatan pencarian informasi lain pada laman home website jika telah selesai dengan kegiatan pencarian informasi user dapat mengakhiri kegiatan tersebut.

Bagan 9. Desain interaksiuserterhadap jejaring Disparbud Jember


d)

Bagan Alur Navigasi Arus interaksi dalam sebuah website merupakan sesuatu yang benar-benar

harus diperhatikan karena hal tersebut menyangkut durasi akses penggunaan terhadap user. Arus informasi yang lebih spesifik akan membuat sebuah website lebih mudah diakses karena setiap informasi yang dijabarkan mungkin dapat diakses dalam sekali klik sehingga user tidak perlu membuang-buang waktu hanya untuk mencari sebuah informasi terhadap sebuah laman website. Arus informasi

pada laman website

beautyofjember.com dapat digambarkan dalam bentuk sebuah bagan seperti di bawah ini.

Bagan 10. Alur navigasi website www.beautyofjember.com

Arus informasi pada bagan diatas merupakan arus interaksi yang akan ditemui oleh user ketia mengakses website beautyofjember.com dalam suatu pencarian


informasi wisata daerah. Dimulai dengan user mengakses website user akan langsung disuguhi tampilan website pada laman home yang lengkap dengan navigasi dan kontennya. Konten isi pada laman home dan navigasi sebenarnya memiliki kesamaan, namun pada tampilan laman home terdapat tambahan Link jejaring sosial yang tidak terdapat di kolom navigasi. Menu navigasi dibuat untuk mempermudah user saat berada dilaman lain untuk mengakses laman berikutnya hanya dengan mengklik laman yang diinginkan pada menu navigasi. Ketika user melakukan interaksi terhadap Link jejaring sosial maka user akan diarahkan ke URL/Link eksternal website jejaring yang dimaksud, demikian pula dengan transportasi jika user langsung melakukan interaksi terhadap tombol tautan reservasi maka user akan langsung diarahkan ke website perusahaan jasa layanan transportasi yang dimaksud. Sedangkan untuk laman lain selebihnya berisi tentang informasi-informasi yang diperlukan dalam suatu kegiatan pariwisata daerah di Jember.

C. Tataran Produk 1.

Perancangan Produk

a)

Ide dasar perancangan Dalam jurnal skripsi dengan judul Perancangan Dan Pembuatan Sistem Informasi

Pariwisata Kabupaten Simeulue Berbasis Web, (Fuadi, 2013) bahwa pariwisata merupakan salah satu sektor yang dapat menghasilkan pendapatan yang luar biasa bagi suatu daerah terutama apabila dikelola dengan baik. Tetapi pengelohan yang baik tidak akan berjalan sesuai dengan tujuan awal tanpa adanya berbagai dukungan yang melatar belakangi pengelolaan tersebut. Salah satu sarana pendukung yang dimaksud adalah dengan adanya sebuah sistem informasi pariwisata yang diharapkan bisa memenuhi kebutuhan pengguna akan informasi pariwisata suatu daerah tujuan wisata, selain itu juga dapat digunakan sebagai media promosi daerah tersebut dalam mempromosikan pariwisatanya. Berdasarkan ulasan singkat diatas terlihat bagaimana pentingnya peran sebuah sistem informasi terhadap sector pariwisata sebagai suatu sumber informasi dan sebagai media promosi. Maka dari itu, pada kegiatan perancangan kali ini dibuat


sebuah website pariwisata http://www.beautyofjember.comyang bertujuan untuk mempromosikan wisata alam kota Jember secara lugas dan sederhana. Website ini akan menjabarkan segala aspek informasi yang dibutuhkan untuk melakukan kegiatan wisata di Jember yang tentunya lebih terkonsentrasi pada informasi wisata alam yang merupakan aspek utama yang ingin disampaikan dan ditawarkan melalui produk karya perancangan ini. Perancangan website kali ini akan mengacu pada pembangunan karakter dan penampilan identitas serta kesederhanaan. Hal tersebut akan diwujudkan dengan menggunakan berbagai material desain yang diaplikasikan untuk memperkuat karakter website yang dibuat. Karakter tersebut merupakan sebuah perwujudan identitas maupun penggayaan yang mampu memberikan kesan terhadap userketika melakukan akses pada website yang dimaksud. Kesan yang tercipta ketika user melakukan akses terhadap website tersebut bertujuan untuk mempertahankan etiket baik pengguna bahkan memungkinkan untuk menciptakan ketertarikan bagi useragar terus menggali informasi tentang pariwisata daerah Jember menggunakan jasa website ini.Kesan yang akan ditampilkan pada layout website ini adalah kesan elegan dan budaya yang mencirikan identitas yang dimiliki kota Jember secara deskripstif. “A visual style is not just an attractive surface decoration : it is often an expression of a philosophy, an ideology and the spirit of its times”(Philip B. Meggs). Sebuah gaya visual tidak hanya dekorasi permukaan yang menarik: sering merupakan ekspresi dari filsafat, ideologi dan semangat kali nya(Marie Finamore, 2013). Kesan, identitas dan karakter yang tertanam pada tampilan website ini akan dibangun dengan pengapilkasian material desain yang menjadi satu kesatuan dalam sebuah desain karya layout website pariwisata daerah Jember untuk membuat website ini lebih nyaman saat digunakan serta dan tidak mengurangi etiket baik dari pengguna ketika melakukan aktifitas pencarian informasi terhadap website. b)

Inovasi Desain

Konsep yang akan diterapkan pada perancangan kali ini yakni konsepcard (kartu) yang akan menjadi plat display pada setiap unsur informasi yang akan disampaikan. Perbagian kolom display (card) akan disesuaikan dengan kebutuhan pada ukuran space yang tersedia dalam grid layoutyang sudah ditentukan agar tercipta keseimbangan dan


proporsi yang sesuai terhadap border gridlayout website secara keseluruhan.“The grid renders the element it controls into a neutral spatial field of regularity that permits accessibility viewers knows where to locate information they seek because the junctures of horizontal and vertical divisions act as signposts for locating that information. The system helps the viewer understand its use. In one sense, the grid is like a visual filing cabinet. For the graphic designers who helped society struggle to move forward after two unimaginable wars, order and clarity became their most important goals. Part of that order of course meant consumer comforts and the businesses that provided them recognized soon enough that the grid could help organize their imag, their corporate culture and their bottom lines”. Grid dibuat untuk mengendalikan elemen dalam suatu bidang tata ruang netral yang teratur sehingga memungkinkan pembaca/user mengetahui di mana untuk menemukan informasi yang mereka cari melalui pembentukan area horisontal dan vertikal yang bertindak sebagai rambu-rambu ketika user mencari informasi. Sistem ini membantu user memahami penggunaan dari sebuah bentuk desain. Di satu sisi, grid seperti sebuah lemari arsip visual. Untuk desainer grafis yang membantu perjuangan masyarakat untuk bergerak maju setelah dua perang yang tak terbayangkan, ketertiban dan kejelasan menjadi tujuan yang paling penting. Bagian dari kenyamanan konsumen dan bisnis mengakui bahwa grid dapat membantu mengatur citra mereka, budaya perusahaan mereka dan tujuan mereka (Samara, 2005). Arus interaksi dalam sebuah website juga harus diperhatikan karena hal tersebut menyangkut durasi akses penggunaan terhadap user. Arus informasi yang lebih spesifik akan membuat sebuah website lebih mudah diakses karena setiap informasi yang dijabarkan mungkin dapat diakses dalam sekali klik sehingga user tidak perlu membuang-buang waktu hanya untuk mencari sebuah informasi terhadap sebuah laman website. Lama loading saat melakukan akses terhadap website juga menjadi sebuah pertimbangan bagi user untuk melakukan sebuah pencarian data. Semakin besar ukuran data/kuota pada suatu laman website akan semakin memperlambat loading yang diperlukan dalam akses, hal tersebut juga mempengaruhi efisiensi penggunaan waktu yang diperlukan dalam sebuah akses pencarian data terhadap website. Karena, semakin cepat loading pada saaat akses yang dilakukan terhadap sebuah pengoperasian


laman website akan semakin membantu pengguna untuk menghemat waktu penggunaan dalam sebuah kegiatan pencarian informasi yang dulakukan. Demikian pula dengan fenomena kemajuan teknologi yang semakin pesat saat ini membentuk sebuah pola yang menuntut segala sesuatu untuk lebih mudah dan efisien. Seperti halnya penggunaan mobile yang perkembangannya sangat bisa dirasakan saat ini. Di era mobile seperti saat ini penggunaan internet lebih banyak atau lebih sering diakses melaluimobile maupun tablet yang memang lebih mudah dibawa dan digunakan dimanapun dibandingkan dengan laptop apalagi komputer. Maka dari itu, bagaimana sebuah karya website dapat mengikuti perkembangan pola tersebut agar menambah niilai guna terhadap website serta lebih mudah diakses oleh user dimanapun dan kapanpun dengan mudah dan cepat untuk dalam suatu kegiatan pencarian informasi. Perancangan website dalam kegiatan yang dilakukan kalini memang memfokuskan pembuatan sebuah karya website yang mudah diakses melalui media mobile dan tablet. Seperti yang disebutkan diatas, bahwa hal tersebut memang perlu dilakukan agar sebuah karya yang dibuat memiliki efisiensi kegunaan serta dapat mengikuti tuntutan perkembangan zaman dan keadaan saat ini. c)

Proses Perancangan 1)

Brief (konsep ideal website pariwisata) Website pariwisata merupakan sebuah hasil karya produk informasi yang

digunakan untuk mempromosikan pariwisata alam daerah Jember. Seperti yang disebutkan bahwa promosi akan berkonsentrasi pada potensi wisata alam kota Jember yang indah dan menarik sebagai tujuan destinasi wisata. Website pariwisata harus mampu memaparkan segala aspek informasi yang berhubungan dengan kegiatan dalam pariwisata daerah. Dalam kegiatan brief ini ditentutakan langkah proses perancangan sehingga setiap langkah perancangan benar-benar tersusun dengan rapih dan tidak meninggalkan aspek penting dalam perancangan untuk memberikan informasi secara utuh yang benar-benar aktual sesuai keadaan yang sebenarnya untuk memberikan kualitas informasi yang terbaik bagi user/wisatawan.


2)

Studi karya Penelitian dil:akukan terhadap website pariwisata referensi yang terdiri

dari beberapa website pariwisata daerah yang sudah ada dan telah terpublishsebelumnya antara lain : (a)

http://www.Jembertourism.com

Gambar 53. Tampilan website jembertourism.com (Sumber : www.jembertourism.com)

Website promosi pariwisata yang merupakan website resmi milik Dinas Pariwisata dan Kebudayaan Jember. (b)

http://www.pariwisata.jogjakota.go.id

Gambar 54. Website pariwisata Jogajakarta (Sumber : www.pariwisata.jogjakota.go.id)

Website promosi pariwisata yang merupakan website resmi milik Dinas Pariwisata dan Kebudayaan Jogjakarta.


(c)

http://www.budpar.bangka.go.id

Gambar 55. Website pariwisata Bangka Belitung (Sumber : www.budpar.bangka.go.id)

Website promosi pariwisata yang merupakan website resmi milik Dinas Pariwisata dan Kebudayaan Bangka Belitung.

(d)

http://www.disolo.com

Gambar 56. Website pariwisata Solo (Sumber : www.disolo.com)

Website promosi pariwisata daerah Solo yang merupakan salah satu website pendukung milik swasta.


(e)

http://www.wisatadilombok.com

Gambar 57. Website pariwisata Lombok (Sumber : www.wisata dilombok.com)

Website promosi pariwisata daerah Lombok yang merupakan salah satu website pendukung milik swasta.

(f)

http://www.banyuwangitourism.com

Gambar 58. Website pariwisata Banyuwangi (Sumber : www.banyuwangitourism.com)

Website promosi pariwisata yang merupakan website resmi milik Dinas Pariwisata dan Kebudayaan Banyuwangi.


(g)

http://www.disparda.baliprov.go.id

Gambar 59. Website pariwisata Bali (Sumber : www.disparda.baliprov.go.id)

Website promosi pariwisata yang merupakan website resmi milik Dinas Pariwisata dan Kebudayaan Bali. 3)

Pemilihan domain Domain merupakan sebuah alamat dalam bentuk URL sebagai akses

untuk menuju sebuah laman website. Domain terdiri dari 2 (dua) jenis yakni Domain dan Subdomain dimana domain merupakan tingkat teratas pada sebuah page/laman website yang memiliki percabangan berupa subdomain yang merupakan domain toingkat dua dibawah domain. Domain yang dipakai pada perancangan kali ini merupakan domain pro yakni dot com (.com) agar lebih mudah diakses. Selain itu, domain pro memiliki kelebihan yakni kecepatan akses yang baik, karena domain dot com (.com) memiliki ruang hosting sendiri sehingga lebih cepat terbaca oleh server saat situs website tersebut diakses. Untuk jasa layanan domain website ini menggunakan layanan domain yang disediakan oleh idhostinger.com yang memang cukup ekonomis dengan layanan yang baik. Terdapat beberapa yang dapat mempermudah perancangan dan pembuatan website beserta hosting nya yang membuat perusahaan hosting ini digunakan dalam perancangan kali ini.


Gambar 60. Logo idHostinger (Sumber : www.idhostinger.com)

Dalam hal penentuan domain sebelumnya telah dilakukan pencarian referensi melalui blog umum dan website terkait untuk memperoleh informasi entang jasa, layanan, fasilitas, dan kebergunaan perusahaan hosting tersebut tentang kelebihan dan kekurangan, sehingga mencapai nilai positif yang layak untuk dijadikan pertimbangan dalam penggunaan jasa perusahaan hosting tersebut. Berikut ini merupakan langkah pembuatan domain melalui perusahaan penyedia layanan id hostinger dengan domain dot com (.com) : (a)

Beranda hostinger Masuk halaman beranda idHostinger menggunakan akun yang telah

terdaftar sebelumnya. Dan kemudian pilih menu domain baru untuku mendaftar domain.

Gambar 61. Beranda idHostinger (Sumber : www.idhostinger.com)

(b)

Daftardomain Melakukan pendaftaran nama domain yang akan dipakai sebagai alamat

URL website yang dibuat, pada langkah ini sistem akan memeriksa apakah nama domain yang akan anda pakai sudah terpakai oleh orang lain atau tidak. Pada

perancangan

kali

ini

nama

domain

yang

dipakai

beautyofjember.com yang menjadi URL/alamat website pada server.

adalah


Gambar 62. Laman pendaftaran domain (Sumber : www.idhostinger.com)

(c)

Durasi pembayaran Pemilihan durasi pembayaran jasa domain yang akan dipakai sebagai

nama website yang dibuat. Durasi pembayaran yang disediakan oleh idHostinger hanya paket 1 (satu) tahun masa aktif domain setelah dibuat.

Gambar 63. Laman pilihan durasi pembayaran domain (Sumber : www.idhostinger.com)

(d)

Konfimasi order Konfirmasi order domain terhadap nama domain yang telah ditentukan

dengan biaya yang telah tertera sebelumnya. Langkah ini merupakan langkah akhir untuk pendaftaran domain sebelum domain tersebut benar-benar aktif pada saat setelah melakukan pendaftaran.


Gambar 64. Konfirmasi order domain (Sumber : www.idhostinger.com)

-

Verifikasi pembayaran Setelah order.pemesanan selesai, verifikasi pembayaran akan dikirimkan

ke email untuk akses pembayaran. Pembayaran dilakukan via transfer kepada perusahaan penyedia layanan domain ini untuk mengaktifkan akun domain yang sudah dibuat. Setelah pembayaran dilakukan, maka doamain akan aktif yang selanjutnya bisa langsung di hosting-kan untuk mem-publish domain tersebut pada server agar dapat diakses melalui media internet. (e)

Domain aktif Gambar dibawah merupakan tampilan domain yang sudah aktif dan siap

untuk di-hostinmgkan terhadap layanan hosting untuk mem-pub;ish laman website yang dibuat.

Gambar 65. Domain aktif idHostinger (Sumber : www.idhostinger.com)


4)

Pembelian server/hosting Setelah melakukan pendaftaran domain untuk menentukan nama URL

yang digunakan untuk mengakses website langkah selanjutnya adalah menentukan jasa perusahaan penyedia layanan hosting yang akan dipakai. Jika domain merupakan sebuah alamat bagi laman website maka hosting merupakan sebuah rumah bagi laman website tersebut dimana segala property dan script website tersebut berada. Jasa layanan hosting yang dipakai dalam perancangan kali ini juga memakai jasa hosting yang di sediakan oleh idHostinger. Penggunaan idHostinger sebagai

layanan hosting

yang

dipakai

merupakan hasil dari proses pencarian dan pengamatan yang dilakukan dengan membandingkan beberapa perusahaan hosting lain yang ada. Dari hasil pencarian tersebut ditentukan bahwa idHostinger adalah perusahaan penyedia layanan hosting yang akan dipakai pada perancangan website kali ini ditinjau dari segi harga dan pelayanan yang di berikan. Terdapat beberapa langkah dan proses yang harus dilalui saat melakukan proses pendaftaran hosting menggunakan jasa layanan hosting yang ditawarkan oleh idHostinger. Langkah-langkah tersebut meliputi beberapa proses antara lain : (a)

Beranda hostinger Masuk ke laman beranda idHostinger menggunakan akun yang telah

dibuat sebelumnya. Untuk melakukan pendaftaran hosting pastikan domain telah terdaftar dan aktif untuk dieksekusi lebih lanjut ketahap berikutnya. Pada tampilan beranda idHostinger pilih menu hosting baru .

Gambar 66. Beranda idHostinger (Sumber : www.idhostinger.com)


(b)

Paket hosting Terdapat beberapa macam paket yang ditawarkan oleh penyedia layanan

hosting sesuai kebutuhan yang diperlukan untuk tujuan website tersebut dibuat.Terdapat paket hosting yang sama sekali gratis tanpa ada biaya sama sekali dengan batasan tertentu seperti diskspace dan bandwitch yang msaih terbatas serta penggunaan subdomain (bukan domain pro) yang terdapat imbuhan nama domain perusahaan penyedia layanan yang kurang menarik untuk dijadikan sebuah URL link website.

Gambar 67. Pilihan paket hosting idHostinger (Sumber : www.idhostinger.com)

Selain itu, ada juga paket bisnis yang memiliki layanan paling baik diantara paket lainnya yang memiliki support paling diutamakan dalam pengoperasiannya. Dan juga, terdapat layanan yang memang dikhususkan untuk layanan hosting dengan jenis ini yang tidak diliki oleh paket hosting lain yang disediakan oleh pihak perusahaan. Dalam kegiatan perancangan website pariwisata kaliini paket hosting yang digunakan adalah paket premium. Paket premium paket pro domain dot com (.com) yang memiliki kelebihan antara lain diskspace dan bandwitch tak terbatas dalam pengoperasian website. Selain itu, nama domain lebih menunjukkan tingkat keprofesionalan website ini dengan domain pribadi (.com) tanpa membawa nama perusahaan penyedia layanan hosting yang di pakai untuk publish website yang dibuat.


(c)

Durasi pembayaran Kemudian pilih durasi pembayaran jasa layanan hosting yang dipakai

sesuai dengan dana awal yang dimiliki untuk mem-publish website pada layanan internet. Terdapat beberapa pilihan durasi pembayaran yang ditawarkan oleh jasa layanan idHostinger untuk dipilih seperti pembayaran tiap 3 bulan, 6 bulan hingga 36 bulan dengan harga yang berfariasi sesuai dengan durasi pembayran yang dipilih. Pada perancangan kali ini durasi pembayaran yang dipilih adalah durasi 3 bulan dengan total biaya termurah sesuai dengan pendanaan yang tersedia.

Gambar 68. Pilihan pembayaran hosting idHostinger (Sumber : www.idhostinger.com)

5)

Pendaftaran domain yang dihosting Langkah selanjutnya adalah pendaftaran domain pada hosting dengan

akun domain yang telah aktif sebelumnya. Langkah ini merupakan langkah akhir sebelum domain sebagai URL website yang dibuat benar-benar terpublish sebagai suatu laman website yang bisa diakses secara online pada media internet.

Gambar 69. Pendaftaran domain pada hosting (Sumber : www.idhostinger.com)


Setelah proses pendaftaran hosting dengan akun domain telah berhasil dilakukan selanjutnya adalah ringkasan order yang memaparkan detail tagihan pembayaran serta cara pembayaran untuk mengaktifkan akun hosting yang dipakai untuk menyimpan bagian-bagian website yang dibuat.

Gambar 70. Konfirmasi pembayaran melalui e-mail (Sumber : mail.google.com/mail/#inbox)

6)

Hosting aktif Setelah mealakukan pembayaran secara online, akun hosting akan melalui

proses aktifasi selama kurang lebih 1x24 jam. Pemberitahuan/konfirmasi aktifasi akan dikirimkan melalui email yang berisi tentang domain,alamat IP, IP Serrver dan lain-lain. Akun hosting yang sudah aktif dapat di kelola lebih lanjut dan dieksekusi menjadi sebuah media penyimpan laman website yang nantinya akan di publish dan dapat diakses secara online dimanapun dan kapanpun diperlukan.

Gambar 71. Tampilan hosting aktif (Sumber : www.idhostinger.com)


Gambar diatas menunjukkan tampilan akun hosting yang sudah aktif dan dapat dikelolah lebih lanjut. Dapat dilihat pada gambar diatas beberapa detail akun hosting yang terdaftar seperti nama domain, jenis paket hosting yang diambil, batas aktif hosting dan status hosting yang telah didaftarkan. Selain itu terdapat juga fungis untuk mengelolah website, website builder untuk membangun website secara langsung, auto installer script serta akun e-mail yang digunakan untuk akses pada email website yang dirancang. 7)

Pengolahan website Untuk melakukan pengelolahan website lebih lanjut terdapat jendela c-

panel (control panel). Pada jendela c-panel terdapat beberapa pilihan pengelolaan website seperti kelola akun, kelola website, kelola email, dan lainlain. Selain itu, terdapat pula detail akun yang lebih terperinci tentang nama akun, jenis akun, database dan lain-lain. Perancangan yang dilakukan dalam pembuatan website www.beautyofjember.comkali ini menggunakan layanan website builder yang disediakan oleh id Hostinger untuk mempermudah perancangan agar tidak terkendala oleh pengetahuan bahasa script yang sangat terbatas.

Gambar 72. Tampilan c-panel idHostinger (Sumber : www.idhostinger.com)

Tambahan fitur website builder ini mempermudah seseorang yang memiliki pengetahuan bahasa script yang sangat terbatas untuk membangun sebuah website yang layak. Penyusunan segala aspek layout dan perancangan yang dikerjakan dilakukan secara otomatis tanpa harus menggunakan bahasa pemrograman. Pengerjaan otomatis yang dimaksud adalah teknis penyusunan


segala aspek desain yang menggunakan teknis klik, drag dan edit secara langsung menggunakan klik kanan pada tombol mouse tanpa harus meng-input bahasa script seperti pada pembuatan website secara manual. 8)

Pemilihan template desain layout Seperti yang telah disebutkan sebelumnya bahwa proses pengerjaan

website ini menggunakan website builder yang merupakan fitur tambahan yang mempermudah dalam proses pengerjaan website secara lebih cepat. Website builder yang digunakan adalah SitePro (Zyro Builder) yang memiliki teknis penggunaan yang cukup mudah dan juga mudah dimengerti. Selain itu, fitur ini juga telah menyediakan template website yang menarik untuk diaplikasikan menjadi website pribadi yang memberikan kesan professional pada tampilannya. Banyak template website yang disediakan oleh Zyro website builder yang bisa dimodifikasi menurut bentuku layout yang telah tentukan sebelumnya.

Gambar 73. Template website Zyro Builder (Sumber : uk.zyro.com)

Terdapat 117 jenis layout yang dapat dipilih untuk pembangunan website secara online. Layout tersebut terbagi atas beberapa kategori yang dapat dipilih dan disesuaikan dengan tujuan desain yang dibuat. Pada perancangan website pariwisata kali ini ditentukan salah satu model layout yang berbentuk box (kotak) informasi yang memberikan kesan rapih saat di lihat.


Gambar 74. Template yang digunakan (Sumber : uk.zyro.com)

Bentuk layout diatas menjadi acuan bentuk layout pada perancangan website kali ini. Dengan bentuk susunan kartu yang menggolongkan jenis-jenis informasi yang disampaikan serta penggunaan foto di sebagian besar box (kotak) pada tiap bagian kolom layout tersebut. Penyesuaian dilakukan dengan memodifikasi tampilan secara utuh terhadap desain layout yang dipilih dengan menggunakan material/bahan website yang telah terkumpul untuk membangun karakteristik dan identitas tersendiri bagi website yang dibuat. 9)

Menyiapkan konten website Pengumpulan bahan telah dilakukan dengan metode observasi secara

langsung terhadap objek wisata yang ditawarkan. Observasi dilakukan untuk membuktikan bahwa tempat tersebut memang layak untuk dikunjungi sebagai sebuah objek pariwisata yang menarik. Selain itu, dalam kegiatan kunjungan tersebut juga dilakukan pengumpulan data dalam bentuk fotografi yang sudah terpampang pada bab sebelumnya, yang dilakukan sebagai suatu kegiatan pengumpulan konten untuk promosi kepariwisataan alam Jember untuk website pariwisata yang direncanakan. Konten yang akan dipasang menggunakan konten-konten yang telah didapatkan sebelumnya pada kegiatan pengumpulan data. Konten-konten


tersebut terdiri dari konten fotografi yang didapat secara pribadi dengan mendatangi sendiri tempat wisata yang dimaksud. Terdapat 187 hasil foto yang akan dipasang pada laman website secara keseluruhan, 172 foto yang didapat secara pribadi dengan mendatangi tempat wisata yang dimaksud, 14 foto hasil unduhan dari website pariwisata Dinas Pariwisata dan Kebudayaan Jember. Pengumpulan bahan informasi untuk website ini juga didapatkan dari hasil rekomendasi teman-teman yang berada di Jember tentang tempat berkumpul dan tempat oleh-oleh yang menarik yang bisa ditemukan di daerah Jember. Rekomendasi diperoleh melalui media sosial dengan melakukan kontak email/chating yang kemudian dipilah ulang menurut sisi menarik tempat tersebut sebagai suatu tujuan yang layak dikunjungi untuk sekedar melakukan wisata kuliner maupun belanja oleh-oleh wisata Jember yang menjadikan tempat tersebut sebagai suatu tempat yang benar-benar menarik untuk dikunjungi. Selain itu, terdapat konten gambar yang dibuat secara pribadi maupun dengan mengunduh sebagai konten pelengkap untuk website ini. Seperti logo Naturally Jember yang didapat dengan mengunduh gambar dari situs resmi www.jembertourism.comyang dijadikan sebagai link yang mengarah ke website tersebut. Terdapat juga gambar logo penyedia layanan transportasi seperti logo garuda indonesia, logo sriwijaya air, logo lion air, dan logo kereta api indonesia yang merupakan tombollink yang mengarah ke website reservasi perusahaan masing-masing untuk mempermudah pengguna melakukan reservasi agar tidak perlu harus membuka tab baru dan melalui banyak proses klik untuk melakukan reservasi. Ada pula logo jejaring yang dibuat secara pribadi yang disesuaikan dengan tema perancangan yang ditentukan, jejaring ini merupakan tombol link yang mengarah ke jejaring sosial milik Dinas Pariwisata dan Kebudayaan Jember untuk mempermudah pengguna dalam melakukan kontak/hubungan langsung dengan pihak pengelola pariwisata Jember yakni Dinas Pariwisata dan Kebudayaan Jember. Pengumpulan data yang dilakukan terhadap website jembertourism.com tersebut juga merupakan sebuah kegiatan yang dilakukan untuk menambah kepustakaan informasi yang akan disampaikan pada produk website ini. Alasan untuk menggunakan bahan yang


bersumber pada website DISPARBUD Jember karena website ini juga merupakan salah satu pendukung langkah atau kegiatan promosi yang dilakukan oleh pihak Dinas Pariwisata dan Kebudayaan Pemerintah Jember terhadap destinasi perjalanan wisata daerah. Berikut merupakan beberapa bagian material website yang dibuat secara mandiri melalui beberapa proses yang dilakukan untuk memenuhi perancangan website ini. Beberapa bagian tersebut meliputi : 10)

Pembuatan motif backgrouond

(a)

Sketsa manual Pembuatan motif batik daun temabakau yang merupakan material

background yang digunakan dalam membangun website ini. Langkah awal yang dilakukan adalah dengan membuat sketsa gambar kasar daun tembakau secara manual.

Gambar 75. Sketsa manual motif background (Sumber : gambar pribadi)

(b)

Proses digital Setelah melakukan sketsa manual kemudian dilanjutkan dengan proses

digital menggunakan aplikasi program grafis yaitu Adobe Ilustrator untuk membentuk motif tersebut kedalam bentuk digital untuk dijadikan background website yang dibangun.


Gambar 76. Pengerjaan digital dari sketsa (Sumber : Screenshoot proses)

Jika proses editing digital selesai maka akan diperoleh motif batik daun tembakau yang berbentuk membentang dengan sisi sambungan yang dimaksudkan untuk digunakan menggunakan teknis patern yang akan di aplikasikan pada website. (c)

Pretest patern

Gambar 77. Pretestpatern (Sumber : Screenshoot proses)

Gambar diatas merupakan proses penyesuaian dan ujicoba dalam bentuk patern ketika motif sebagai dasar background website yang dibuat telah terbentuk. 11)

Pembuatan logo Pembuatan logo beauty of JEMBER .com juga melalui proses

pembuatan secara mandiri. Proses pengerjaan dilakukan secara digital terhadap pembentukan logogram berupa ilustrasi daun temabakau dengan wrna


kecoklatan disertai dengan logoteks yang menggunakan jenis tipografi yang disesuaikan dengan maksud dan kesan yang ingin disampaikan lewat teks yang terdapat pada logo tersebut. Proses pengerjaan menggunakan aplikasi program grafis yakni Adobe Ilustrator.

Gambar 78. Ilustrasi logo menggunakan adobe illustrator (Sumber : Screenshoot proses)

Alasan penggunaan Adobe Ilustrator dalam perancangan logo ini dilakukan karena dalam teknis pembuatan ilustrasi program ini tergolong lebih mudah digunakan dibanding dengan aplikasi program lain yang memiliki fungsi sejenis. 12)

Pembuatan tombol tautan jarsos Pembuatan logo untuk Link media sosial seperti facebook, twitter,

youtube dan instgram pun dilakukan secara madiri untuk menyesuaikan tema antara bentuk tombol logo dengan karakter yang diterapkan pada layout website.

Gambar 79. Pembuatan tombol jejaring (Sumber : Screenshoot proses)


Pembuatan logo jejaring untuk material website ini menggunakan aplikasi program grafis Adobe Photoshop. Teknis pembuatan mengambil referensi dari bentuk asli logo jejaring yang dimaksud kemudia dilakukan pengeditan menggunakan Adobe Photoshop meliputi penggayaan dan pewarnaan yang disesuaikan dengan bentuk dan tampilan desain website. 13)

Pemilihan warna Dalam prosess pemilihan warna sebelumnya telah dilakukan pengamatan

melalui sebuah proses mood board terhadap kata kunci pencarian yang berhubungan dengan identitas atau ke-khasan dari daerah Jember.

Gambar 80.Moodboard analisa Jember (Sumber : www.google.com / www.jembertourism.com)


Moodboard tersebut merupakan hasil dari pencarian browsing melalui google dengan kata kunci ‘khas jember’. Dari moodboard diatas ditemukan salah satu identitas Jember adalah daun tembakau dan olahan tembakau. Mengacu pada hal tersebut maka ditentukan warna yang akan diangkat dalam perancangan kali ini adalah warna kecoklatan yang terinspirasi dari warna daun temabaku itu sendiri.“Colors, the materials of the painter; colors in their own lives, weeping and laughing, dream and bliss, hot and sacred, like love songs and the erotic, like songs and glorious chorals! Colors in vibration, pealing like silver bells and clanging like bronze bells, proclaiming happiness, passion and love, soul, blood, and death”. Warna, bahan dari pelukis; warna dalam kehidupan mereka sendiri, menangis dan tertawa, mimpi dan kebahagiaan, panas dan suci, seperti lagu-lagu cinta dan erotis, seperti lagu dan chorals mulia! Warna dalam getaran, Dentang lonceng seperti perak dan tiupan seperti lonceng perunggu, menyatakan kebahagiaan, gairah dan cinta, jiwa, darah, dan kematian (Vodvarka, 1999). Selain itu, dalam sebuah jurnal penelitian dinyatakan bahwa“Functional color is concerned with measurable facts. It is founded on research, on known visual reactions, on data which may be statistically analyzed. It differs from socalled "interior decoration" in that personal preferences or emotional attitudes”. Warna fungsional berkaitan dengan fakta terukur. Hal ini didasarkan pada penelitian, pada sebuah reaksi visual, sesuai data yang dapat dianalisis secara statistik. Ini berbeda dari "dekorasi interior" dalam preferensi pribadi atau sikap emosional (Hoque, 2006). Dalam pengaplikasiannya warna tersebut akan dimodifikasi dan disesuaikan dengan kesan yang ingin ditampilkan pada laman website. Maka dari itu, warna yang dipakai adalah fariasi warna coklat yang dimaksudkan untuk membangun psikologi warna yang menampilkan kesan elegan pada tampilan website yang dibuat.


14)

Merancang bentuklayout

(a)

Grid Sebelum beranjak pada proses pembuatan layout harus ditentukan dahulu

bentuk grid yang akan digunakan untuk mempermudah proses perancangan layout yang dilakukan. Karena jika bentuk grid sudah ditentukan dan titetapkan maka untuk proses selanjutnya penataletakan akan dilakukan dengan menempatkan bagian-bagian layout yang dinginkan pada kolom-kolom grid tersebut.Berikut ini merupakan penggambaran bentuk grid yang akan digunakan dalam perancangan website pariwisata yang sedang dilakukan :

Gambar 81. Bentuk grid www.beautyofjember.com (Sumber : Data rancang pribadi)

Pengaplikasian bentuk grid seperti yang tergambar diatas masih jarang digunakan dalam sebuah layout pariwisata. Dengan mengacu pada hal tersebut diharapkan bentuk layout yangn dihasilkan akan memberi tampilan berbeda dibanding dengan kebanyakan deasin yang sudah ada. - Headerbar

: Berisi logo website beautyofjember.com

- Navigasi

: Berisi item menu navigasi website

- Konten bar

: Berisi informasi wisata dan kebutuhan lain dalam kegaitan wisata

- Side bar

: Berisi URL/Link tautan ke website lain yang berhubungan dengan suatu kegiatan perjalanan seperti transportasi dan juga link ke jejaring sosial Dinas Pariwisata Jember untuk menambah informasi bagi penggunan mengenai wisata Jember.


Ruang terkait dengan tingkat kedalaman sehingga memberikan kesan jauh, dekat, tinggi, rendah. Hubungan antara ruang merupakan bagian dari perencanaan desain, apakah berupa jarak antar huruf atau huruf dengan gambar (Pujirianto, 2005, hal. 43). Pemanfaatan ruang yang bijak akan memaksimalkan efisiensi penggunaan grid dalam menyampaiakan informasi konten maupun iklan. “A visual language is defined equivalent in expressive power to term subsumption languages expressed in textual form. To each knowledge representation primitive there corresponds a visual form expressing it concisely and completely”. Sebuah gaya visual didefinisikan dalam daya ekspresif dengan bahasa subsumption yangdinyatakan dalam bentuk tekstual. Untuk setiap representasi pengetahuan bentuk visual harus sesuai untuk mengungkapkan dengan singkat dan apa adanya (Gaines, 2000). Setelah penentuan bentuk grid telah dilakukan kemudian dilanjutkan dengan pengerjaan pembuatan layout website. Pengerjaan layoutpada kegiatan perancangan website kali ini melalui beberapa proses desain menggunakan teknik manual dan digital setelah ditentukan terlebih dahulu jenis grid layout dan penggayaan serta tema yang akan di aplikasikan. Proses awal pembentukan layout menggunakan teknis gambar manual tentang bentuk dan peletakan masing-masing konten/isi website dalam grid website yang sudah ditentukan.


(b)

Sketsa manual Berikut merupakan gambaran sketsa manual yang dilakukan untuk

menentukan peletakan konten dan isi pada tiap-tipa bagian layout pada masingmasing laman website ini, yaitu : Keterangan Laman Home 1. Logo 2. Kembali ke home 3. Judul &Button 4. Transisi foto wisata 5. Link wisata 6. Transisi foto kuliner 7. Transisi foto hotel 8. Logo/Link perusahaan penyedia layanan transportasi 9. Peta 10.Jejaring sosial DISPARBUD

Sketsa 1 2 3

5

7

8 Laman Wisata 1. Title dan tombol 2. Transisi foto 3. Bagian layout card yang lebih kecil

6

4

9

10

1 3 2


Keterangan Laman Dalam Wisata 1. Foto slide wisata 2. Deskripsi singkat tentang situs wisata 3. Galeri foto 4. Peta wisata 5. Deskripsi menuju tempat wisata

Sketsa

1

2

3

4 Laman Hotel/Kuliner 1. Bagian judul laman aktif 2. Foto 3. Deskripsi dan keterangan tempat 4. Box layout yang sama dalam bentuk landscape

5

1 2

3

4


Keterangan Laman Transportasi 1. Bagian judul laman aktif 2. Logo/Link perusahaan transportasi 3. Deskripsi dan keterangan tempat 4. Peta 5. Tombol reservasi

Sketsa 1 2

5 3

4 Tabel 22. Sketsa manual tampilan website www.beautyofjember.com

(c)

Proses digital Pengerjaan digitalterhadap tampilan website perhalaman menggunakan

aplikasi

program

grafis

Adobe

Photoshop

dengan

beberapa

perubahan/modifikasi terhadap layoutyang disesuaikan dengan kebutuhan bentuk layout yang lebih baik. -

Laman Home Pada bagian laman home penyusunan masih menyerupai sketsa kasar yang

direncanakan, namun untuk bagian header terdapat perubahan tidak diaplikasikannya tombol back to home karena tombol untuk akses tersebut telah menggunakan logo website untuk lebih menyederhanakan tampilan agar tidak terkesan ramai serta pengaplikasian tombol menu agar mempermudah user untuk menjelajah tiap laman pada website ini. Penyusunan layoutpada bagian header dan footer seperti pada laman home ini berlaku untuk semua tampilan yang ada di website.


Gambar 82. Edit digital untuk layout laman homewww.beautyofjember.com (Sumber : Screenshoot proses)

Dari gambar diatas dapat terlihat bagaimana tampilan website menyerupai susunan kartu yang memiliki bagian tempatnya tersendiri. Hal tersebut bertujuan untuk membangun kesan rapih dan sederhana serta mengikuti grid sesuai border yang telah di tentukan. -

Laman Wisata Layout pada laman ini memiliki susunan berbeda dari konsep awal sketsa

yang dibuat. Hal tersebut dilakukan karena layout yang terpasang pada konsep sketsa dirasa terlihat agak acak-acakan. Jika dikonsep awal sketsa terdapat layoutbox yang berbeda ukuran dimensi maka pada tahapan layoutdigital ini dibuat samarata untuk memberi kesan dinamis yang bertujuan agar layout yang ditampilkan lebih rapih dan enak dilihat.

Gambar 83.Edit digital untuk layout laman wisata www.beautyofjember.com (Sumber : Screenshoot proses)


-

Laman objek wisata Pada laman ini penyusunan peletakan juga mengalami perubahan dari

konsep awal sketsa perancangan. Pada laman ini dapat dilihat penyusunan dilakukan berurutan dari atas kebawah dari galeri, deskripsi dan peta. Hal tersebut dilakukan untuk menciptakan susunan layout yang dinamis dan terborder secara utuh berurutan anta pustaka fotografi, deskripsi penjelas dan peta lokasi jika dibandingkan dengan konsep pada sketsa yang ketika dieksekusi dalam bentuk digital terlihat kurang tertata peletakannya.

Gambar 84. Edit digital untuk layout laman objek wisata www.beautyofjember.com (Sumber : Screenshoot proses)

-

Laman kuliner dan hotel Untuk kedua laman ini penataan layout memang dibentuk serupa seperti

yang terlihat diatas. Hal tersebut dilakukan karena jenis informasi pada kedua laman ini memiliki cara penyampaian yang serupa untuk mempertahankan tema yang sudah ditentukan. Layout berbentuk susunan kartu yang jika diperhatikan perbagian kartu menyerupai bentuk brosur dalam skala yang lebih sederhan.


Gambar 85. Edit digital untuk layout laman hotel kuliner www.beautyofjember.com (Sumber :Screenshoot proses)

Penyusunan pada kedua laman ini masih berdasar pada konsep sketsa awal perancangan karena bentuk ini sudah cukup rapi ketika diaplikasikan. Selain itu bentuk layout ini juga mudah diterapkan pada versi mobile yang bentuk tampilannya potrait. -

Laman transportasi Pada tampilan laman transportasi peletakan layout masih berdasar dan

sama dengan konsep awal sketsa layout. Peletakan layout pada laman ini mengikuti kebutuhan terhadap bentuk konten yang tersusun dalam bentuk potrait maupun landscape sesuai isi informasi yang disampaikan.

Gambar 86. Edit digital untuk layout laman transportasi www.beautyofjember.com (Sumber : Screenshoot proses)

Logo perusahaan penyedia layanan transportasi yang terdapat pada laman tersebut merupakan sebuah bentuk terusan dari laman awal website. Hal tersebut dilakukan untuk mewujudkan keserasian laman isi terhadap laman


awal agar tidak menimbulkan kesan berseda yang dapat menghilangkan unsur keterkaitan antara laman awal dengan laman isi. Dari tampilan konsep layout diatas dapat dilihat tema card yang diangkat dalam kegiatan perancangan website pariwisata kali ini. Tema card digunakan karena penyesuaian layout nantinya akan berkonsentrasi pada penggunaan media mobile sebagai media akses website ini. Dengan tema tersebut layout akan mudah terssusun dan lebih rapih menyesuaikan tampilan mobile yang memiliki tampilan potrait (tegak) agar lebih enak dilihat saat pengguna mengakses website melalui media mobile. 15)

Pengelolaan website menggunakan SitePro (Zyro Builder) Pembangunan website pada kegiatan perancangan kali ini menggunakan

aplikasi tambahan yang disediakan oleh idHostinger sebagai penyedia jasa hosting yakni SitePro (Zyro Builder). Banyak fitur menarik yang tersedia pada apilkasi ini sehingga membuat p[embentukan sebuah laman website menjadi lebih mudah dengan hasil yang tidak kalah menarik dengan website pada umumnya.

Gambar 87. Laman edit Zyro Builder (SitePro) (Sumber : uk.zyro.com)

Berikut beberapa langkah kegiatan membangun laman website menggunakan aplikasi SitePro (Zyro Builder) sehingga membentuk sebuah laman website dengan situs akses beautyofjember.com yang merupakan hasil akhir dari kegiatan perancangan yang dilakukan.


(a)

C-panel idHostinger Masuk ke c-panel (control panel) akun hosting atas domain website yang

dibuat dan sudah didaftarkan serta telah aktif sebelumnya.Setelah berhasil masuk ke tampilan laman c-panel akun hosting yang dimaksud kemudian pilih website builder yang terdapa pada kategori website.

Gambar 88. Letak Zyro Builder pada c-panel idHostinger (Sumber : www.idhostinger.com)

(b)

Pemilihan template Saat pertama kali masuk pada jendela Zyro Builder akan disuguhkan

beberapa template tampilan layout yang tersedia untuk dimodifikasi sesuai dengan tema yang diangkat.

Gambar 89. Pilihan template pada Zyro Builder (Sumber : www.idhostinger.com)

Pada perancangan kali ini template perancangan yang dipilih merupakan sebuah template yang bertemakan nature yang memiliki teknis penyusunan layout berbentuk bagian-bagina kotak informasi yang juga menjadi dasar atau


inspirasi perancangan layout yang dibuat. Pilih jenis template tampilan yang akan digunakan untuk masuk ke laman edit Zyro Builder untuk melanjutkan proses eksekusi membangun website yang dibuat

Gambar 90. Template yang digunakan (Sumber : www.idhostinger.com)

(c)

Mengganti background Mengganti background merupakan hal pertama yang dilakukan ketika

sudah berada pada laman edit Zyro builder untuk mengganti background sesuai dengan kesiapan bahan yang telah dipersiapkan sebelumnya

Gambar 91. Edit background Zyro Builder (Sumber : uk.zyro.com)


Klik kanan pada bagian background di laman edit Zyro Builder, kemudian muncul pilihan properties dan pilih tombol tersebut untuk masuk jendela properties background.

Gambar 92. Laman properties background (Sumber : uk.zyro.com)

Pada tampilan properties background tersebut dipilih ‘Default (untuk semua halaman)’ agar background teraplikasi pada semua laman website. Sedangkan untuk mengubah gambar background pilih pada gambar dan kilik tombol bergambar pensil. Untuk mengatur patern pengaturan dilakukan pada bagian opsi ulangi yang terdapat dua pilihan ‘secara mendatar’ (untuk pengulangan gambar secara mendatar) dan ‘dengan vertikal’ (untuk mengulangi gambar secara vertical).

Gambar 93. Pustaka media gambar (Sumber : uk.zyro.com)


Tampilan gambar diatas merupakan tampilan pemilihan gambar yang akan diaplikasikan pada background website yang sebelumnya telah dilakukan sebuah proses pengunggahan gambar dari disk komoputer ke dalam folder media Zyro Builder dengan mengklik mengklik tombol unggah gambar.

Gambar 94. Loading unggah gambar (Sumber : uk.zyro.com)

Setelah proses pemilihan gambar selesai pada setiap langkahnya kemudian hal dilakukan selanjutnya adalah menerapkan pengubahan tersebut terhadap tampilan website dengan memilih tombol terapkan pada jendela properties background. (d)

Mengubah/memasang logo Mengubah logo website dari tampilan sebelumnya menjadi logo website

yang telah dibuat. Hal ini dilakukan dengan cara mengarahkan kursor pada gambar yang ingin di ganti kemudian klik pada bagian yang bergambar pensil dan pilih ubah gambar atau properties untuk masuk ke jendela properties gambar.


Gambar 95. Mengubah logo (Sumber : uk.zyro.com)

Ubah gambar pada gambar logo untuk merubah gambar dari layout awal dengan gambar logo yang telah dibuat dan disiapkan sebelumnya. Tampilan untuk mengubah gambar/media sama seperti tampilan jendela ubah gambar untku background.Logo website ini memiliki fungsi untuk mengarahkan kehalaman home pada website. Untuk memasang fungsi tersebut pada logo dipilih opsi properties pada pilihan seperti yang nampak diatas.

Gambar 96. Properties logo (Sumber : uk.zyro.com)

Pada tampilan properties gambar tersebut tandai pilihan ‘Link ke halaman lain’ dan pilih home untuk mengarahkan proses klik pada logo tersebut menuju halaman home website. Setelah langkah pada proses ini selesai klik terapkan untuk menerapkan perubahan pengaturan pada logo yang terpasang.


(e)

Navigasi Menu navigasi merupakan sebuah tombol pilihan menu yang langsung

mengarahkan user pada bagian jendela website yang ingin dibuka. Pada perancangan ini hanya diaplikasikan 4 jenis tombol navigasi yang langsung mengarah pada jendela yang dimaksud. Tombol navigasi yang dibuat hanya untuk mengarahkan user langsung ke jendela wisata, kuliner, hotel dan transportasi yang merupakan bagian penting informasi yang berkaitan dengan kebutuhan kegiatan pariwisata.

Gambar 97. Navigasi website (Sumber : uk.zyro.com)

Pengeditan menu navigasi meliputi beberapa jenis pengeditan meliputi karakter, penggayaan, fungsi dan tautan. Setiap unsur tersebut mendapat perubahan secara total pada tiap bagian propertis nya. Perubahan tersebut dilakukan untuk menyesuaikan menunavigasi yang ada dengan tampilan website secara keseluruhan untuk menciptakan kesan keserasian dan kesamaan tema pada desain layout yang di terapkan. (f)

Membuat item menu Pengeditan atau penyesuaian awal dimulai dengan jenis menu navigasi

atau informasi yang akan disampaikan melalui website ini. Yang dilakukan hanya sebuah proses perubahan properties pada menu navigasi dengan mengklik pada bagian yang bergambar pensil kemudian pilih edit menu.


Gambar 98. Membuat item menu navigasi (Sumber : uk.zyro.com)

Edit menu merupakan sebauh proses perubahan bagian-bagian menu/informasi yang disampaikan lewat laman websi te pariwisata ini. Terdapat beberapa pilihan pada laman jendela edit menu seperti yang tampak pada gambar di bawah ini.

Gambar 99. Edit item menu (Sumber : uk.zyro.com)


Dimulai dengan pilihan item baru yang digunakan untuk menambah jendela atau jenis informasi yang akan disertakan pada website ini. Terdapat nama item yang digunakan untuk mengarahkan eksekusi klik yang dilakukan pada menu yang dimaksud menuju isi website pada salah satu laman atau Link menuju URL/alamat website lain. Selain itu terdapat pula pilihan eksekusi yang merupakan teknis tampilan untuk menampilkan laman pada jendela baru atau untuk menyembunyikan item menu tersebut dari kolom navigasi. Setelah proses edit menu tersebut dirasa cukup sesuai dengan tema dan konsep perancangan yang ditentukan selanjutnya klik tombol terapkan untuk menerapkan pengaturan yang telah dilakukan.

Gambar 100. Properti kolom navigasi (Sumber : uk.zyro.com)

(g)

Karakter item navigasi Kemudian hal selanjutkan yang perlu dilakukan pada kolom menu

navigasi alah menggubahh karakteristik dan penggayaan yang ditampilkan. Hal tersebut dapat dilakukan dengan pengeditan kompomen dengan memilih bagian yang bergambar pensil dibagian pojok kolom menu navigasi kemudian pilih properties. Untuk mengatur properties menu navigasi sesuai dengan tema yang di tentukan dilakukan dengan meneyesuaikan beberapa pilihan penggayaan dan karakteristik teks meliputi jenis tipografi, warna dan lain-lain.


Gambar 101. Laman properti kolom navigasi (Sumber : uk.zyro.com)

Gambar yang nampak diatas merupakan tampilan jendela properties untuk menyesuaikan penggayaan yang ditampilkan pada kolom menu. Penyesuaian tersebut meliputi teknis penulisan menu serta gaya peletakan menu. Selanjutnya yang perlu disesuaikan juga ialah karakteristik menu yang bisa dilakukan pada kolom pilihan ‘Menu item style’ yang juga terdapat pada laman ini.

Gambar 102. Laman style menu navigasi (Sumber : uk.zyro.com)


Pada bagian jendela edit ini terdapat beberapa pilihan penyesuaian yang bisa dilakukan meliputi karakter jenis font yang ditampilkan serta padding dan margin item menu yang akan membentuk tampilan item menu tersebut pada bagian laman website. Serta beberapa menu pilihan item yang merupakan karakter item menu yang ditampilkan, item hover yang merupakan tampilan item menu saat kursor menyentuh item menu yang dimaksud serta item aktif yang merupakan tampilan item menu yang sedang aktif. Kemudian jika setiap pengaturan dirasa sudah sesuai dengan keinginan selanjutnya pilih terapkan untuk menerapkan pengaturan yang sudah dilakukan sebelumnya. (h)

Penggunaan bentuk (shape) Pembuatanbackground, tombol dan kotak area informasi pada bagian

layout menggunakan shape yang pengaturan objek nya disesuaikan dengan tema perancangan yang telah ditentukan. Untuk langkah pemuatan shape dapat melakukan pengeditan langsung pada shape yang telah disediakan oleh template sebelumnya atau memasukkan shape baru dengan men-drag and drop pilihan shape (bentuk) dari menu edit zyro builder pada penempatan yang telah ditentukan.

Gambar 103. Item shape (Sumber : uk.zyro.com)

Setelah shape telah dibuat pada laman tampilan website langkah sekanjutnya adalah untuk menyesuaikan bentuk dan warna shape tersebut menurut konsep perancangan. Untuk langkah edit shape secara teknis sama halnya dengan mengubah gambar yakni melakukan klik pada gambar pensil yang terdapat dibagian pojok kanan atas sahep tersebut.


Gambar 104. Jendela properti shape (Sumber : uk.zyro.com)

Gambar diatas merupakan jendela edit shape yang terdapat beberapa pilihan yang bisa digunakan untuk menyesuaikan tampilan shape terhadap konsep yang diterapkan pada laman web yang dibuat. Pilihan tersebut meliputi beberapa jenis pengaturan seperti bentuk keburaman (opacity) yang digunakan untuk mengatur intensitas shap shape tersebut dibuat transparent atau solid sebagai objek bagian pada laman layout, warna yang dapat diatur menggunakan palet warna atau menentukan nilai komposisi warna yang akan dipakai dalam bentuk solid ataupun transparan, kemudian adapula pilihan bentuk sudut shape yang digunakan untuk menagtur ketajaman sudut shape ingin dibuat secara halus atau bersudut tajam sesuai konsep perancangan. Setelah pengaturan shape dirasa cukup dan sesuai dengan komsep tampilan yang rencanakan langkah selanjutnya adalah menerapkan pengaturan tersebut dengan mengklik tombol terapkan. (i)

Pembuatan photoslide Penyusunan photoslide yang difungsikan untuk menampilkan foto promosi

yang berhubungan dengan suatu informasi yang ingin disampaikan.Foto ditampilkan menggunakan piihan galeri dengan teknis men-drag and drop menutampilan galeri

pada penempatan foto yang diinginkan. Penggunaan

galeri dimaksudkan untuk memberikan tampilan transisi pada foto. Selain itu penggunaan galeri ini memungkinkan user untuk mengakses gambar ke ukuran


yang lebih besar untuk melihat gambar lebih detai lagi ketiak gambar yang ditampilkan tersebut diklik.

Gambar 105. Item galeri (Sumber : uk.zyro.com)

Untuk menyesuaikan gambar yang akan dipakai dalam tampilan galeri trannsisi tersebut klik bagian edit yang bergambar pensil pada bagian pojok kanan atas gambar dan pilih ubah gambar.

Gambar 106. Mengubah gambar galeri (Sumber : uk.zyro.com)

Untuk pemilihan gambar yang akan dipasang pada tampilan slide galeri ini secara teknis sama saja dengan penggantian gambar yangdilakukan pada background maupun logo. Hanya saja untuk pemilihan gambar galeri jumlah gambar yang dapat dipilih bisa lebih dari satu gambar sesuai dengan keinginan berapa gambar atau banyak nya jumlah konten gambar yang akan dipasang sebagai traansisi foto untuk tampilan foto slide yang diinginkan.


Gambar 107. Menambah gambar pada galeri (Sumber : uk.zyro.com)

Setelah proses pemilihan foto untuk menerapkan foto-foto yang terpilih tersebut pada slide foto yang dibuat pilih terapkan untuk menerapkan foto-foto terpilih tadi pada penempatan foto slide yang telah ditentukan sebelumnya. (j)

Tombol teks Berikutnya adalah membuat tombol teks yang berfungsi untuk

mengarahkan pada laman masing-masinginformasi yang ingin ditampilkan oleh user. Untuk membuat tombol teks ini menggunakan pilihan menu tombol yang telah disediakan pada laman edit zyro builder.

Gambar 108. Item menambahkan tombol (Sumber : uk.zyro.com)

Drag and drop menu tombol seperti yang tampil pada gambar diatas. Menuju tempat dimanan teks tombol tersebut ingin diaplikasikan. Setelah tek tompbol tersebut terpalikasi tampilan awah yang ditampilkan adalah sebuah tombol dengan tulisan lakukan saja yang bisa di edit dan disesuaikan menurut


kebutuhan dengan mengklik gambar pensil yang terdapat pada tampilan tombol tersebut saat kursor menyentuh tombol yang dimaksud.

Gambar 109. Mengatur tombol teks (Sumber : uk.zyro.com)

Untuk melakukan penyesuaian terhadap tombol teks pilihan properties untuk measuk ke jendela pengaturan tombol tersebut untuk menntukan jenis interaksi, tautan serta karakter dan tulisan yang akan ditampilkan.

Gambar 110. Properti tombol (Sumber : uk.zyro.com)

Gambar diatas merupakan tampilan jendela properties tombol yang dibuat. Pada tampilan umum tersebut merupakan pengaturan utuk menentukan teks yang tampak untuk tombol teks tersebut serta URL/Link tautan yang


ditujuoleh tombol saat diklik. URL/Link tersebut dapat berisi URL dari website lain mauun bagian isi dari laman website itu sendiri. States merupakan penggayaan website yang meliputi penggunaan background serta bagai mana interaksi yang muncul saat user melakukan kegiatan pada tombol tersebut yang meliputi penggayaan tombol dari segi hover maupun klik. Sedangkan pada tampilan pilihan merupakan akan ditemukan penyesuaian ukuran dan letak tombol tersebut yang sebenarnya bisa kita atur secara manual dengan men-drag tombol tersebut ketemapat yang diinginkan. Setelah penyesuaian yang dilakukan selesai selanjutnya klik pada tombol terapkan untuk menerapkan pengaturan yang telah dilakukan pada objek tombol teks tersebut. (k)

Link eksternal Eksternal LinkButton, merupakan sebuah tombol tautan yang dibuat

untuk mengarahkan sebuah tombol terhadap URL website lain yang berhubungan dengan proses perancangan yang dilakukan. Pada perancangan kali ini terdapat beberapa beberpa tombol Link eksternal yang digunakan dalam bentuk logo maupun gambar untuk mengarahkan tautan pada perusahaan maupun layanan yang dimaksud. Terdapat beberapa tombol tautan yang terdapat pada website ini seperti tautan reservasi moda transportasi PT Garuda Indonesia, PT Sriwijaya Air, PT Lion Air dan PT KAI yang menggunakan logo masing-masing perusahaan yang bersangkutan. Selain itu terdapat juga tautan jejaring

sosial

yang

diaplikasikan

menngunakan

logo

masing-masing

logojejaring tersebut serat logo naturally jember yang mengarahkan akses terhadap website jembertourism.com yang merupakan website resmi milik Dinas Pariwisata Jember. Langkah awal untuk membuat tombol tautan ini adalah dengan memasukkan gambar/logo sesuai dengan tujuan tautan tersebut dibuat. Misalkan, sebuah tombol tautan yang mengarah ke website reservasi miliki PT Garuda Indonesia maka gambar/logo yang dipilih adalah logo Pt Garuda Indonesia.


Gambar 111. Item menu memasukkan gambar (Sumber : uk.zyro.com)

Untuk memasukkan gambar pilih menu ‘picture’ yang telah tersedia pada laman edit Zyro Builder. Drag and drop menutersebut pada lokasi dimana tombol tautan tersebut akan diaplikasikan.

Gambar 112. Mengatur properti tombol Link (Sumber : uk.zyro.com)

Untuk mengedit link tautan tersebut secara teknis masih sama dengan langkah edit pada editor gambar sebelumnya. Setelah masuk pada jendela laman properties gambar dilanjutkan dengan melakukan penyesuaian yang meliputi alamat URL/Link tautan yang dituju serta alternative name tombol tautan tersebut.


Gambar 113. Menyesuaikan tombol Link (Sumber : uk.zyro.com)

Alamat URL yang dituju merupakan Link yang langsung mengarah pada laman reservasi tiket pada perusahaan peneydia jasa layanan transportasi masing-masing tanpa melalui pihak kedua. Begitu pula pada tautan jejaring yang merupakan Link yang mengarah langsung pada jejaring sosial milik dinas pariwisata Jember untuk mempermudah user dalam pencarian informasi mengenai objek wisata dan segala aspek yang berhubungan dengan kepariwisataan daerah. Setelah proses penyesuaian telah selesai dilakukan selanjutnya pilih terapkan untuk menerapkan penyesuaian tersebut terhadap tombol tautan yang dibuat.


(l)

Galeri foto laman objek wisata Pembuatan galeri photo pada laman wisata menggunakan tampilan

berbeda pada tampilan foto informasi seperti yang teraplikasi pada laman lain.

Gambar 114. Mengubah tipe galeri (Sumber : uk.zyro.com)

Gambar diatas merupakan langkah untuk mengubah type tampilan galeri foto yang diaplikasikan. Pada tampilan galeri wisata foto ditampilkan menurut daftar transisi untuk mempermudah user dalam me-reiew foto pada daftar galei yang dibuat.

Gambar 115. Bentuk galeri laman objek wisata (Sumber : uk.zyro.com)


Tampilan galeri yang disediakan oleh Zyro Builder terdiri dari 3 jenis tampilan yang terdiri dari tampilan thumbnail, slide show dan daftar yang dapat dipilih dan digunakan sesuai kebutuhan pada layout dan interaksi terhadap user.

Gambar 116. Jendela properti galeri (Sumber : uk.zyro.com)

Pada tampilan properties galeri diatas nampak beberapa pengaturan penyesuaian selain pengaturan tipe yang meliputi penambahan atau penerapan gambar, warna background yang dapat diatur dalam bentuk solid maupun transparan, penggunaan border serta frequensi durasi pergantian gambar pada galeri yang dibuat. Setelah penmgaturan galeri wisata selesai kemudian pengaturan yang telah dilakukan tersebut diterapkan pada laman website dengan mengklik tombol terapkan. (m)

Teks deskripsi Deskripsi wisata yang merupakan informasi tertulis tentang keunggulan

maupun deskripsi penjelas yang dibuat singkat untuk tempat wisata maupun informasi lain yang disertakan dalam desain website. Untuk memberikan teks/deskripsi pada laman web dapat menggunakan kolom deskripsi yang sudah ada pada template sebelumnya maupun memasukkan ulang kotak teks kosong kedalam layout website.


Gambar 117. Item menu teks (Sumber : uk.zyro.com)

(n)

Memasukkan teks Langkah untuk memasukkan teks/tulisan pada laman website pilih

menupilihan yang telah disedia pada laman edit Zyro Builder dengan cara mendrag and drop pilihan tersebut ke penempatan yang diinginkan. Selanjutnya untuk melakukan edit pada kotak teks yang dibuat dapat langsung dengan cara double-click atau dengan mengarahkan kursor pada gambar pensil yang berada di sudut kanan atas kotak teks tersebut kemudian pilih edit teks.

Gambar 118. Edit teks (Sumber : uk.zyro.com)

-

Pengaturan sederhana Pada tampilan kotak edit teks yang aktif akan terpampang aspek

pengaturan teks yang meliputi karakter teks, warna, jenis paragraf serta


pengaturan lain yang dibutuhkan dalam pengaturan teks agar sesuai dengan jeins kebutuhan teks tersebut digunakan.

Gambar 119. Edit teks lanjutan (Sumber : uk.zyro.com)

(o)

Pengaturan tingkat lanjut Untuk melakukan penyesuaian lanjutan pada teks yang dipakai dalam

konten informasi website ini dapat langsung meng-klik ikon yang dilingkari pada gambar diatas. Pengaturan lanjutan yang dimaksud merupakan kelas teks yang dipakai yang disesuaikan dengan kebutuhan.

Gambar 120. Jendela style teks (Sumber : uk.zyro.com)

Teks dalam sebuah laman website terbagi atas kelas-kelas berbeda sesuai peletakan, fungsi dan karakter teks yang tersebut. Pengkelasan tersebut meliputi page title, subtitle, heading (heading 1 dan seterusnya), normal, highlight, special dan footer. Pada penggunaan teks deskripsi jenis tampilan teks yang


digunakan adalah normal dengan pengaturan jenis teks arial light agar lebih nyaman saat dibaca. Jika pengaturan pada teks tersebut telah selesai pilih terapkan untuk menerapkan pengaturan pada teks yang dibuat dan kemudian pilih done untuk menyelesaikan pengeditan teks/deskripsi tersebut. (p)

Menampilkan peta Pembuatan

map

yang

merupakan

sebuah

layanan

peta

yang

menggunanakan jasa google map yang sudah familiar bagi pengguna website saat ini. Selain itu, pada google map terdapat panduan navigasi yang dapat mempermudah pelancong atau wisatawan menemukan tempat wisata yang ditutju hanya dengan bermodal akses internet dan mengaplikasikan peta google map sebagi panduan. Untuk memasukkan widget google map pada laman website langkah yang digunakan adalah dengan cara men-drag and drop menu pilihan peta pada laman layout website sesuai dengan penempatan yang diinginkan.

Gambar 121. Item menu peta (Sumber : uk.zyro.com)

Setelah peletakan peta padalayout website dilakukan, kemudian dilakukan pengaturan lanjutan untuk menentukan alamat navigasi peta yang terpampang. Penentuan alamat peta tersebut disesuaikan dengan tujuan pariwisata maupun lokasi yang dipaparkan dimana peta tersbut dimunculkan. Untuk melakukan pengeditan pada objek peta secara teknis sama dengan langkah pengeditan sebelumnya yakni dengan mengarahkan dan mengklik kursor pada tombol pensil yang terdapat di sudut kanan atas kotak objek tersebut kemudian pilih properties.


Gambar 122. Edit peta (Sumber : uk.zyro.com)

Setelah itu akan muncul tampilan jendela pete yang digunakan untuk menyesuaikan pengaturan peta terhadap informasi navigasi yang dibutuhkan untuk peta tersebut. Terdapat tiga menu pengaturan untuk penyesuaian peta ini yang terdiri dari pilihan umum, tingkat lanjut dan pilihan yang merupakan pengaturan dimensi peta dan tataletak peta yang sebenarnya bisa diatur secara manual dengan drag and drop pada tampilan kotan peta tersebut.

Gambar 123. Jendela properti peta (Sumber : uk.zyro.com)


Pada tampilan properties ini langsung menuju menu pilihan tingkat lanjut untuk menentukan alamat point website tersebut ditampilkan. Selain itu terdapat level zone yang digunakan untuk mengatur seberapa luas daerah yang perlu ditampilkan untuk peta yang teraplikasi pada laman website. Setelah dua pengaturan tersebut telah dilakukan dan sesuai dengan hasil yang diperlukan selanjutnya klik tombol terapkan untuk menerapkan pengaturan pada tampilan peta yang dibuat. (q)

Membuat tombol like (facebook) Membuat tombol like facebook menmggunakan tombol pilihan menu

social. Langkah untuk membuat tombol like facebook terswebut sama hal nya dengan penambahan gambar, teks dan lain-lain yakni dengan men-drag and srop pilihan menu tersebut pada layout yang direncanakan.

Gambar 124. Item menu jejaring (Sumber : uk.zyro.com)

Klik terlebih dahulu item menu social diatas untuk menentukan jenis tombol jejering apa yang akan di pasang. Dalam item menu social terdapat beberpa jenis pilihan pengaplikasian jejaring terhadap laman website seperti tombol like facebook, widget facebook, widget twitter, sosial share dan e-mail.

Gambar 125. Pilihan jejaring (Sumber : uk.zyro.com)

Pada website ini jenis pengaplikasian jejaring yang digunakan adalah tombol like facebook yang terhubung dengan facebook Dinas Pariwisata dan


Kebudayaan Jember. Untuk pengaturan lebih lanjut klik gambar pensil yang terdapat pada kotak tombol like facebook yang telah dibuat dan ditentukan sebelumnya.

Gambar 126. Properti tombool hitungan facebook (Sumber : uk.zyro.com)

Pada laman properties tersebut bisa diatur berbagai penyesuaian yang meliputi URL facebook yang akan ditampilkan tombol likenya, jenis tampilan untuk menampilkan jumlah like atau sarankan serta bentuk tampilan dan penyesuaian terhadap bentuk layout website ingin dibuat terang atau gelap. Jika setiap penyesuaian yang dilakukan sudah dirasa cukup selanjutnya adalah klik tombol terapkan untuk menerapkan penyesuaian tdi pada tombol like fcebook yang sudah dibuat. (r)

Memasang Favicon Memberikan favicon (favorit icon) yang nantinya akan tampil pada tab

window saat web tersebut terpublish. Pemberian favicon tersebut bertujuan agar website menjadi lebih menarik, selain itu juga sebuah favicon akan mempermudah user dalam mem-bookmark website untuk menemukan alamat bookmark website dengan gambar favicon yang terpasang.


Gambar 127. Favicon pada tab laman website (Sumber : uk.zyro.com)

Langkah untuk memasang favicon ini menggunakan pilihan meni favicon yang terdapat di list menu setting. Cara nya dengan mengklik list menu setting kemudian pilih favicon setelah itu pilih gambar yang akan digunakan sebagai favicon laman website yang dibuat.

Gambar 128. Membuat favicon (Sumber : uk.zyro.com)

Jika gambar belum terpambang pada pilihan media yang dituju maka lalukan langkah upload seperti pada langkah untuk menambah gambar.Untuk ikon yang menjadi favicon pada website ini merupakan ilustrasi daun tembakau yang juga menjadi logogram pada logo website ini.


Gambar 129. Objek Favicon (Sumber : uk.zyro.com)

Pemilihan ikon tersebut karena seperti yang telah dijelaskan sebelumnya bahwa identitas yang diangkat sebagai karakter daerah Jember pada konsep website ini adalah daun tembakaku yang merupakan sebuah hasil alam dan produksi yang cukup besar di Jember. (s)

Penyesuaian terhadap media akses Sentuhan akhir yang kerjakan setelah semua penyesuaian layout tampilan

dan konten terpasang yakni penyesuaian media akses yang akan digunakan dalam akses website ini. Terdapat 3 (tiga) jenis media akses yang akan diaplikasikan pada website ini yakni desktop, tablet dan mobile.

Gambar 130. Edit media akses (Sumber : uk.zyro.com)

Langkah melakukan penyesuaian media akses yang diperlukan adalah dengan mengklik jenis media akses yang akan digunakan. Selanjutnya laman edit akan berubah sesuai dengan jenis media akses yang pilih dan siap untuk disesuaikan bentuk tampilannya. Pengubahan konten hanya bisa dilakukan pada di laman edit desktop sedangkan untuk laman edit tablet dan phone/mobile hanya bisa dilakukan penyesuaian layout mengikuti grid yang terpasang pada tampilannya masing-masing.


-

Tampilan desktop Jenis tampilan desktop memiliki karakteristik yang lebar dengan ruang

kosong yang lebih banyak di bagian sisi kanan kiri laman website.

Gambar 131. Tampilan edit media aksesdesktop (Sumber : uk.zyro.com)

-

Tampilan tablet Untuk tampilan tablet bentuk layput akan menyesuaikan dengan lebar

media akses tersebut. Ruang kosong pada media akses tablet ini sempit dibanding dengan tampilan desktop dengan susunan tampilan atau layout yang masih sama.

Gambar 132. Tampilan edit media akses tablet (Sumber : uk.zyro.com)


-

Tampilan mobilephone Sedangkan pada tampilan mobile secara keseluruhan tampilan memiliki

karakteristik yang berbeda yakni memanjang secara vertikal menyesuaikan banyak informasi yang disampaikan.

Gambar 133. Tampilan edit media akses mobile (Sumber : uk.zyro.com)

(t)

Pembenahan grid Terkadang pada proses penyesuaian untuk tampilan media yang berbeda

akan memberi pengaruh pada bentuk grid yang sudah ditetapkan sebelumnya.

Gambar 134. Penyesuaian grid (Sumber : uk.zyro.com)

Untuk itu perlu dilihat kembali perbandingan bentuk grid sebelumnya yang terpasang sebelum melakukan penyesuain media akses. Amati grid perbagian masing-masing untuk mempertahankan konsep yang telah direncanakan sebelumnya. Sehingga hasil yang didapatkan pada perancangan ini benar-benar sesuai dengan rencana perancangan yang dibuat.


(u)

Pengaturan pada laman lain Untuk melakukan peneysuaian pada halaman website lainnya dapat

dipilih dati kotas pilihan laman yang ada di baris menu jendela edit Zyro builder.

Gambar 135. Mengarahkan ke editor laman lain (Sumber : uk.zyro.com)

Pada gambar diatas terpampang setiap nama halaman website yang terdapat pada website yang sedang di buat. Pilih salah satu jemdela website yang ingin di edit atau dibentuk untuk melakukan penyeseuian terhadap jendela website tersebut. 16)

Test publish (online) Jika setiap langkah penyesuaian layout dan konten yang terpasang telah

selesai dan sesuai dengan konsep yang direncanakan. Selanjutnya adlah mencoba untuk menampilkan bentuk desain yang telah disusun pada sebuah tampilan pretest untuk memastikan setiap aspek desain layout maupun alur data benar-benar telah sesuai dengan konsep perancangan. Untuku melakukan pretest tersebut dapat dilakukan dengan memilih item menu tampilkan pada jendela edit Zyro Builder.


Gambar 136. Menampilkan hasil edit (Sumber : uk.zyro.com)

Pretest tampilan ini menampilkan website secara nyata sebagaimana bentuku website nanti saat terpublish. Namun bentuk tampilan ini bukan merupakan bentuk nyata website jika dilihat dari loading akses pada tiap-tiap laman jendela website. 17)

Evaluasi, refisi & koreksi konten Jika pada tampilan pretest ini terdapat kekurangan penyesuai dapat

dilakukan kembali pada jendel;a edit Zyro Builder untuk melakukan pengaturan ulang, namun jika sudah sesuai dengan konsep yang direncanakan langkah selanjutnya adalah untuk mempublishkan websit yang telah di edit ke sever atau layanan hosting yang telah terdaftar untuk website tersebut. 18)

Final publish Setelah segala aspek pengaturan dan penyesuaian telah dilakukan

selanjutnya adalah langkah untuk mempublish website yang telah dibuat terhadap hosting atau server yang telah didaftarkan sebelumnya.

Gambar 137. Mempublish website (Sumber : uk.zyro.com)


Untuk melakukan publish website dari Zyro Buikder pilih item menu ‘simpan’ pada baris menu laman edit Zyro Builder terhadap website yang dibuat. Pastikan setiap aspek perancangan meliputi karakter, penggayaan, dan konten sudah sesuai dengan konsep yang telah direncanakan. Untuk menghindari pengulangan proses publish yang memakan waktu cukup lama dalam prosesnya.

Gambar 138. Proses publishing (Sumber : uk.zyro.com)

Setelah proses publish tersebut selesain cek link URL yang merupakan domain website yakni www.beautyofjember.com sebagai link yang mengarah kan akses terhadap website ini. Jika link yang dimaksud benar-benar terhubung pada website yang dimaksud dalam artian website yang dirancang sebelumnya maka proses perancangan benar-benar telah selesai dan website siap untuk dipublikasikan. 2.

Penjelasan produk

a)

Isi/konten pada website beautyofjember.com Penyederhanaan dan pengelompokan informasi yang lebih spesifik dan tepat

penyampaiannya akan sangat mempengaruhi peangaplikasian website bagi user sebagai media penyampai informasi. Pengelompokan dan penyederhaan penyampaian tersebut bertujuan agar desain website yang dibuat tidak terlalu banyak memberikan kegiatan klik bagi pengguna yang akan menambah durasi yang dilakukan.Pembagian informasi tersebut akan dipaparkan dalam bentuk sebuah tabel seperti dibawah ini :


1)

Wisata Merupakan suatu informasi pokok yang ingin disampaikan pada user

untuk menawarkan pariwisata alam jember dengan potensi keindahan alam yang dimiliki. Destinasi pariwisata alam Jember

Wisata pantai tanjung papauma Wisata taman nasional merubetiri Wisata pantai payangan Wisata pantai watu ulo Wisata air terjun tancak Wisata pantai puger

- Galeri foto potensi wisata alam yang ditawarkan - Deskripsi singkat tentang keadaan nyata pada lokasi wisata. - Akses menuju lokasi pariwisata - Dan peta sebagai sebuah panduan navigasi untuk menuju lokasi wisata

Tabel 23. Konten wisata alam website www.beautyofjember.com

2)

Transportasi Merupakan informasi yang memudahkan user dalam mempersiapkan

rencana perjalan dalam melakukan kegiatan pariwisata. Dengan menampilkan moda transportasi yang bisa digunakan untuk menuju lokasi tujuan dalam kegiatan pariwisata serta secara langsung dapat melakukan reservasi /pemesanan transportasi akan memberikan kemudahan bagi user untuk merencanakan perjalanan dengan lebih baik. Jasa pelayanan Garuda Indoneisa transportasi Kereta Api Indonesia local Sriwijaya Air Lion Air Bus Patas / Bisnis / Eksekutif

- Reservasi - Informasi akses transportasi ke Jember - Reservasi - Informasi akses transportasi ke Jember - Kontak

Tabel 24. Layanan terhadap moda transportasi pada website www.beautyofjember.com

3)

Kebutuhan lain dalam wisata Terdapat kebutuhan lain yang tidak kalah penting dalam suatu kegiatan

pariwisata. Kebutuhan tersebut meliputi kebutuhan akan penginapan / hotel, tempat makan yang menarik serta oleh-oleh wisata daerah Jember.


Jenis kebutuhan yang diperlukan dalam kegiatan wisata Jember

Penginapan Hotel Kuliner Oleh-oleh Jasa perjalanan wisata

- Deskripsi singkat - Lokasi - Kontak - Dapat melalui jasa hotel /penginapan.

Tabel 25. Informasi yang berkaitan dengan kegiatan wisata pada website www.beautyofjember.com

b)

Penggunaan jenis bahasa pemrograman Bahasa pemrograman merupakan susunan scripta yang menkadi unsur

terbangunnya

sebuah

laman

website.

Dalam

perancangan

website

beautyofjember.com terdapat beberapa bahasa pemrogramana yang diaplikasikan untuk mewujudkan website ini benar-benar terbentuk. Berikut merupakan tampilan analisa bahasa scrip website yang terpasang pada laman website ini.

Gambar 139. Konten program website www.beautyofjember.com (Sumber : uk.zyro.com)

Konten script : Web Server Apache, Google Analystic, Google Map, PHP 5.5.2.1, Twitter Bootstrap dan jQuery 1.8.3 Alasan pemakaian server Apache dalam pembangunan website ini adalah karena beberapa kelebihan yang dimiliki webserver ini. Selain itu, pada saat kegiatan pengumpulan data dan analisa ditemukan bahwa sebgaian besar objek analisa menggunakan web server Apache untuk websitenya. Atas dasar tersebut maka dicarilah referensi mengenai web server Apache tentang keunggulan web server tersebut diabndingkan dengan kompatitor nya. Seteah melakukan pencarian referensi


ditemukan banyak keunggulan yang ditawarkan oleh web server Apache oleh karena itu maka ditentukan bahwa penggunaan web server yang akan terinstall pada website ini adalah Apache. Jadi pada pembangunan website menggunakan Zyro Builder perancang dapat memilih sendiri server yang akan digunakan dengan menginstall server tersebut yang terdapat pada laman c-panel tepat nya di opsi auto installer. Berikut merupakan sedikit ulasan tentang keunggulan web server apache untuk pembangunan website yang dilakukan : - Apache termasuk dalam kategori freeware - Apache mudah sekali proses instalasinya jika dibanding web server lainnya seperti NCSA, IIS, dan lain-lain. - Mampu beroperasi pada berbagai paltform sistem operasi. - Mudah mengatur konfigurasinya. Apache mempunyai hanya empat file konfigurasi. - Mudah dalam menambahkan peripheral lainnya ke dalam platform web servernya - Apache merespon web client sangat cepat - Mampu di kopilasi sesuai dengan spesifikasi HTTP yang sekarang - Apache menyediakan feature untuk multihomed dan virtual server - Kita dapat menetapkan respon error yang akan dikirim web server dengan menggunkan file atau skrip - Server apache dapat otomatis berkomunikasi dengan client browsernya untuk menampilkan tampilan terbaik pada client browsernya. Misalnya, browser ingin menampilkan dalam bahasa spanyol, maka web server apache otomatis mencari dalam servicenya halaman-halaman dengan bahasa spanyol - Web server Apache secara otomatis menjalankan file index.html, halaman utamanya, untuk ditampilkan secara otomatis pada clientnya - Web server Apache mempunyai level-level pengamanan - Apache mempunyai komponen dasar terbanyak di antara web server lain - Ditinjau dari segi sejarah perkembangan dan prospeknya, Apache web server mempunyai prospek yang cerah. Apache berasal dari web server NCSA yang


kemudian dikembangkan karena NCSA masih mempunyai kekurangan di bidang kompatibilitasnya dengan sistim operasi lain - Mendukung transaksi yang aman (secure transaction) menggunakan SSL (secure socket layer) - Mempunyai dukungan teknis melalui web. - Mempunyai kompatibilitas platform yang tinggi. c)

Tampilan bentuk website dan layout konten Terdapat 3 (tiga) tampilan yang dibuat pada masing-masing interfacelayout pada

tiap-tiap laman website yang dibuat. Tiga tampilan tersebut meliputi tampilan desktop, tampilan tablet dan tampilan mobile sebagai media akses yang sering digunakan dalam mengakses website sebagai media online. Pengoptimalan tampilan akan lebih di fokuskan pada tampilan mobile karena sesuai dengan pola perilaku masyrakat dalam mengikuti perkembangan jaman saat ini media online seperti website lebih sering diakses malalui mobilesmartphone yang memiliki keterbatasan dimensi dan ruang untuk disesuaikan desain layout-nya. Namun meskipun penataletakan lebih dioptimalkan pada bentuk media mobilephone untuk bentuk media lainnya juga tetap harus diperhatikan untuk memenuhi kebutuhan website ini sebagai media penyampai informasi dan media publikasi yang bisa diakses menggunakan berbagai media dengan struktur tampilan dan fungsi yang menyesuaikan media akses tersebut. 1)

Bagian Header dan Navigasi

(a)

Tampilan layout

-

Tampilan layar desktop dan tablet Untuk tampilan header bar dan navigasi pada media akses desktop dan

tablet memiliki bentuk tampilan yang sama seperti yang terlihat dibawah ini :

Gambar 140. Bentuk tampilan header dan navigasi (Sumber : www.beautyofjember.com)


Header berupa logo website beautyofjember.com wonderfull destination juga merupakan sebuah sign navigasi untuk menuju ke laman home. Sign navigasi yang merupakan bagian yang sangat penting dalam sebuah laman web. Pada sign navigasi tersebut terdapat sign yang krusial sepertihome, search, dan help yang merupakan sebuah titik akhir ketika user menjelajah dalam sebuah laman web. Contohnya, navigasi home yang merupakan sebuah sign navigasi yang bisa membawa user kembali ke laman utama ketika user sudah merasa tersesat dalam sebuah laman websit (Chairani, 2006, hal. 78). -

Tampilan layar mobilephone

Gambar 141. Tampilan header dan navigasi pada media mobile (Sumber : www.beautyofjember.com)

Dari segi tampilan untuk tampilan mobile ini memiliki perbedaan pada penyederhanaan item navigasi yang dibentuk kotak satu tombol seperti yang tampak pada gambar diatas. Bentuk headbar dan navigasi ini berlaku untuk setiap laman website karena menurut Steveve Krug dalam buku “Don’t make me think” Dalam pembuatan sebuah website penting pula untuk tidak membuat perubahan apapun yang tidak perlu, termasuk pada navigasi. Navigasi pada laman home dan laman selanjutnya harus memiliki cukup banyak kesamaan, agar user dapat langsung mengenali bahwa keduanya hanya merupakan dua versi yang berbeda dari hal yang sama. (b)

Ulasan penjabarana informasi Berikut merupakan ulasan perbagian pada grid header bar yang

keseluruhan merupakan item menu navigasi.


-

Logo website beautyofjember.com yang juga merupakan tombol navigasi untuk mengarahkan ke tampilan home.

-

Selain itu navigasi lain yang terpampang merupakan item menu navigasi yang mengarahkan pada masing-masing laman yang meliputi laman wisata, kuliner hotel dan transportasi

-

Serta terdapat tombol like facebook yang mengarah pada facebook milik Dinas Pariwisata Jember.

2)

Home

(a)

Tampilan layout

-

Tampilan desktop

Gambar 142. Tampilan home beautyofjember.com (desktop) (Sumber : www.beautyofjember.com)


-

Tampilan tablet

Gambar 143. Tampilan home beautyofjember.com (tablet) (Sumber : www.beautyofjember.com)

-

Tampilanmobile

Gambar 144. Tampilan home beautyofjember.com (mobile) (Sumber : www.beautyofjember.com)

(b)

Ulasan bentuk layout Perbedaaan pada tiga tampilan media akses berbeda tersebut berada pada

penggunaan ruang dan dimensi ruang untuk menampilkan tampilan website


tersebut. Jika pada tampilan desktop dan tablet masih memiliki dimensi kesamping pada tampilan mobile lebih fit ke bentuk vertical/memanjang kebawah mengikuti bentuk ketersediaan ruang media akses tersebut. Dan ini berlaku untuk setiap laman pada website ini. (c)

Penjabaran informasi Pada tampilan diatas terlihat beberapa informasi yang disampaikan

membetuk susunan sebuah kartu menyesuaikan grid layout yang telah ditentukan menurut media akses yang digunakan. Konten informasi tersebut meliputi informasi tentang : - Pariwisata alam Jember yang terdapat 6 (enam) destinasi wisata yang bisa dikujungi dengan tampilan fotografi transisi untuk menampilkan potensi keindahan yang dimiliki oleh alam Jember - Informasi kuliner dengan tampilan foto transisi untuk menampilkan fariasi kuliner dan oleh-oleh Jember - Hotel dengan tampilan foto transisi yang menampilkan view hotel yang ditawarkan - Transportasi dengan link tautannya yang merupakan visual logo perusahaan penyedia jasa transportasi yang mengarahkan reservasi tiket terhadap perusahaan yang berkaitan secara lansung. Serta tampilan peta yang mempoinkan pada lokasi alun-alun Jember yang merupakan pusat kota Jember - Kolom jejaring yang berisi tautan link ke jejarong sosial Dinas Pariwisata dan Kebudayaan Jemberserta logo Naturally Jember yang mengarahkan ke website jembertourism.com yang merupakan website media promosi wisata milik Dinas Pariwisata.


3)

Wisata

(a)

Tampilan interface

-

Tampilan desktop

Gambar 145. Tampilan wisata beautyofjember.com (dekstop) (Sumber : www.beautyofjember.com)

-

Tampilan tablet

Gambar 146. Tampilan wisata beautyofjember.com (tablet) (Sumber : www.beautyofjember.com)


-

Tampilanmobile

Gambar 147. Tampilan wisata beautyofjember.com (mobile) (Sumber : www.beautyofjember.com)

. (b)

Ulasan bentuk layout Perbedaan pada tiga bentuk layout tersebut terdapat pada tampilan

desktopkonten yang berupa fotografi dan tombol teks tersusun menjadi tiga kolom tampilan.Sedangkan pada layout yang tersusn pada media akses menggunakan tablet tampilan foto dan tombol teks tersusun menjadi duakolom menyesuaikan dimensi media akses tersebut dan pada tampilan mobile yang menyesuaikan membentuk satu kolom memanjang kebawah mengikuti bentuk ketersediaan ruang media akses tersebut (c)

Penjabaran informasi Pada tampilan diatas terlihat beberapa informasi tentang pariwisata alam

yang terdapat di Jember meliputi wisata pantai tanjung papuma, taman nasinal meru betiri, pantai payangan, pantai watu ulo, air terjun tancak dan pantai puger.


4)

Kuliner dan Hotel

(a)

Tampilan interface

-

Tampilan desktop

Gambar 148. Bentuk tampilan kuliner dan hotel beautyofjember.com (dekstop) (Sumber : www.beautyofjember.com)

-

Tampilan tablet

Gambar 149. Tampilan kuliner dan hotel beautyofjember.com (tablet) (Sumber : www.beautyofjember.com)


-

Tampilan mobile

Gambar 150. Tampilan kuliner dan hotel beautyofjember.com (mobile) (Sumber : www.beautyofjember.com)

(b)

Ulasan bentuk layout Perbedaan yang terdapat pada tiga tampilan media akses diatas terlihat

pada tampilan layoutdesktop dan tablet penyusunan konten informasi masih sama yakni tiga kolom namun dengan tampilan dimensi ruang yang berbeda, demikin pula pada tampilan mobile yang menyesuaikan membentuk satu kolom memanjang kebawah mengikuti bentuk ketersediaan ruang media akses tersebut. (c)

Penjabaran informasi Pada tampilan diatas terlihat beberapa informasi yang disampaikan yang

terbetuk dalam susunan kotak menyesuaikan grid layout yang telah ditentukan menurut media akses yang digunakan. Konten informasi pada laman hotel memaparkan ketersediaan hotel/penginapan yang terdapat di Jember dan untuk informasi kuliner merupakan sebuah pemaparan tempat makan menarik dan oleholeh yang bisa ditemukan di Jember.


5)

Transportasi

(a)

Tampilan interface

-

Tampilan desktop

Gambar 151. Tampilan transportasi beautyofjember.com (dekstop) (Sumber : www.beautyofjember.com)

-

Tampilan tablet

Gambar 152. Tampilan transportasi beautyofjember.com (tablet) (Sumber : www.beautyofjember.com)


-

Tampilan mobile

Gambar 153. Tampilan transportasi beautyofjember.com (mobile) (Sumber : www.beautyofjember.com)

(b)

Ulasan bentuk layout Pada tampilan desktop dan tablet penyusunan konten informasi masih

sama menurut penyesuaian konsep susunan layout yang telah direncanakan namun pada tampilan mobile yang menyesuaikan bentuk dan dimensi media mobile membentuk satu kolom memanjang kebawah mengikuti bentuk ketersediaan ruang. (c)

Penjabaran informasi Pada tampilan diatas terlihat beberapa informasi yang disampaikan yang

terbetuk dalam susunan kotak menyesuaikan grid layout yang telah ditentukan menurut media akses yang digunakan. Konten informasi pada laman transportasi memaparkan ketersediaan akses transportasi ke Jember serta tombol tautan untuk melakukan reservasi online secara langsung pada perusahaan transportasi yang diinginkan serta lokasi daerah jember dalam peta yang menggunakan jasa layanan google map.


6)

Objek Wisata

(a)

Tampilan interface

-

Tampilan desktop

Gambar 154. Tampilan objek wisata beautyofjember.com (dekstop) (Sumber : www.beautyofjember.com)

-

Tampilan tablet

Gambar 155. Tampilan objek wisata beautyofjember.com (tablet) (Sumber : www.beautyofjember.com)


-

Tampilan mobile

Gambar 156. Tampilan objek wisata beutyofjember.com (mobile) (Sumber : www.beautyofjember.com)

(b)

Ulasan bentuk layout Pada tampilan laman objek wisata informasi disusun secara utuh dalam

satu lembar penuh. Untuk tampilan desktop dan tablet penyusunan konten informasi masih sama hanya berbeda pada dimensi ruang display nya. Demikian pula pada tampilan mobile yang menyesuaikan bentuk dan dimensi media mobile membentuk satu kolom memanjang kebawah mengikuti bentuk ketersediaan ruang. (c)

Penjabaran informasi Pada laman objek wista ini informasi yang disertakan meliputi galeri foto

grafi untuk menunjukkan potensi keindahan wisata alam Jember dalam bentuk daftar foto dan foto transisi, terdapat pula deskripsi singkat yang memaparkan objek pariwisata tersebut mengenai hal-hal menarik yang ditemukan saat berada di tempat wisata tersebut dan juga ada panduan destinasi untuk malakukan perjalanan hingga tempat tujuan serta dilengkapi dengan peta sebagai panduan navigasi menuju lokasi wisata.


D. Tataran Elemen 1.

Objek Referensi & Inspirasi Terdapat beberapa tampilan material seperti logo, ornament, dan tombol

yang akan di temukan pada website beautyofjember.com yang ter-publish. Material tersebut merupakan sebuah viual untuk membangun keselarasan maupun karakter website yang berguna untuk membentuk identitas website sehingga mampu memberi kesan terhadap pengguna saat melakukan akses pada laman website. Gambar

Deskripsi Logo website beautyofjember.com yang dibuat secara mandiri dengan mengambil inspirasi dari identitas daerah Jember yakni daun Tembakau dengan warna yang memaparkan maksud dari bagian logo tersebut. Logo jejaring sosial yang dibuat secara pribadi mengikuti tema layout yang telah ditentukan untuk menciptakan keselarasan pada desain sehingga tidak memberikan kesan rancu pada bagian layout pada laman website pariwisata ini. Material background yang dibuat berdasar referensi motif batik yang sering muncul pada karya batik khas Jember, sebuah motif daun tembakau yang merupakan salah satu sentra produksi yang besar di Jember. Serta, penggunaan tekstur semu untuk menambah kesan terhadap tampilan.

Tabel 26. Elemen grafis pada website www,beautyofjember.com

Untuk penguatan identitas website jembertourism.com menggunakan motif batik yang dibuat dengan warna perak dengan background yang memberikan kesan elegan pada website tersebut. Begitu pula, pada website beautyofjember.com tampilan elegan akan ditampilkan menggunakan motif batik dan warna yang mampu memberikan kesan elegan terhadap tampilan website yang dirancang. Secara psikologis rentetan peristiwa dalam proses menikmati keindahan dibagi dalam beberapa bagian (Pujirianto, 2005, hal. 83-86) : - Sensasi, rangsangan eksternal ditangkap mata atau telinga dalam alat penerimaan yang menimbulkan getaran yang disebut sensasi.


- Persepsi, merupakan tahap dimana sensasi telah terkesan. Pada orang yang otaknya cepat, proses dari sensasi ke persepsi berjalan lebih cepat. Persepsi langsung menggerakkan proses asosiasi sehingga dapat melakukan komparasi (membandingkan), differensasi (membedakan), ananlogi (persamaan), dan sintesis (penyimpulan). - Impresi, merupakan tahap dimana kesan telah menjadi keyakinan yang sewaktu-waktu dapat diingat kembali karena sudah ada alama wilayah kesadaran manusia. - Emosi, tidak hanya menyangkut perasaan mara, kecewa, panik, jengkel, kesal yang tidak terkendali namun juga perasaan gembira dan antusias. - Inteprestasi, menyangkut aktifitas daya pikir akibat impresi masuk kedalam wilayah kesadaran. Intepretasi adalah fungsi aktif intelektual manusia yang jika bertemu ditambah emosi sehingga menghasilkan apa yang dinamakan dipersepsi. - Apresiasi, merenungkan pengertian atau apa yang telah diintepretasikan, menimbang dengan fakta-fakta lain, mempertimbangkan kebenaran sampai dimana maknanya adalah fungsi intelek berganda yang dirumuskan dengan kata apresiasi. - Evaluasi, adalah renungan dan rumusan yang ingin disampaikan kepada orang lain, baik secara lisan maupun tertulis. 2.

Elemen Grafis

a)

Ilustrasi dan motif Ilustrasi merupakan unsur grafis yang vital dan dapat disajikan mulai dari

goresan atau titik sederhana sampai dengan yang kompleks.Ilustrasi berfungsi untuk menarik perhatian, merangsang minat pembaca terhadap keseluruhan, menonjolkan keistimewaan produk, memenangkan persaingan, menciptakan suasana khas, dramatisasi pesan serta menonjolkan suatu merk atau semboyan.ilustrasi dapat berupa gambar, foto, maupun grafis lainnya (Pujirianto, 2005, hal. 41). Sebuah ilustrasi dapat memberikan kesan dan rangsangan yang bisa langsung dirasakan oleh penikmat / user. Grafis sebagai sebuah ilustrasi visual mampu memuat


pesan-pesan pembelajaran yang dapat memberikan sejumlah rangsangan atau stimulasi dengan kekuatan yang berbeda antara satu dengan lainnya. Rangsangan melalui indra visual terbukti cukup efektif untuk membantu manusia dalam proses pembelajarannya (Pujirianto, 2005, hal. 6). American Herirage mendefinisakan Ilustrasi (gambar / foto) merupakan sebuah material grafis yang dipakai untuk mengekspresikan atau menjelaskan sesuatu dalam bentuk visual yang sedemikian rupa. Ilustrasi dapat bersifat humoris, dekoratif, maupun serius seperti sebuah fakta seperti apa yang dikatakan oleh Lisa Graham dalam buku Basic of Thypografi. Selain itu, menurut Margaret Marshall sebuah gambar atau visual berfungsi memperluas serta mengembangkan sebuah tulisan, memperluas persepsi visual, dan menyediakan sebuah informasi (Wardani, 2014). Memadukan unsur grafis untuk menghasilkan media komunikasi visual yang komunikatif merupakan seni tersendiri (Pujirianto, 2005, hal. 71). Pengorganisasian dan penataan unsur-unsur yang akan disertakan harus memenuhikriteria tertentu sesuai dengan tujuan yang ingin dicapai. Motif daun tembakau merupakan motif yang popular digunakan pada motif batik yang diproduksi di Jember. Selain itu, daun tembakau juga merupakan sebuah identitas bagi Jember, karena Jember merupakan sebuah daerah tempat perkebunan tembakau yang cukup besar serta sebuah daerah tempat produksi tembakau.

Gambar 157. Motif pada background webiste www.beautyofjember.com dan objek inspirasi batik Jember (Sumber : www.beautyofjember.com)

Dengan mengangkat hal tersebut menjadi salah satu property pada laman website yang dirancang maka akan memberi kesan tersendiri terhadap tampilan website. Pemilihan motif tersebut sebagai bagian dalam website menjadi salah satu upaya untuk mengangkat identitas daerah jember dalam sebuah bentuk visual.


b)

Warna Merupakan pelengkap serta perwakilan kejiwaan. Warna juga merupakan unsur

yang sangat tajam untuk menyentuh kepekaan, penglihatan, sehingga mampu merangs ang munculnya rasa haru, sedih, gembira, mood, maupun semangat, dll. Secara visual warna memiliki kekuatan yang mampu mempengaruhi citra orang yang melihatnya.Masing-masing warna mampu memberikan respon secara psikologis. Pemilihan warna merupakan satu hal yang sangat penting dalam menentukan respon dari calon user. Warna merupakan hal pertama yang akan dilihat oleh seorang (terutama background). Warna akan membuat kesan atau mood untuk keseluruhan tampilan atau grafis. Warna merupakan unsur penting dalam grafis karena dapat memberikan dampak psikologis kepada orang yang melihat warna mampu memberikan sugesti yang mendalam bagi manusia (Pujirianto, 2005, hal. 43).Dalam komunikasi grafis penggunaan warna perlu disusun dan ditata dengan tepat sehingga menimbulkan suasana, mempengaruhi luas kehidupan manusia sekaligus sebagai lambang psikologis. Sifat warna digolongkan menjadi 2 (dua) golongan warna ekstrim yaitu warna panas dan dingin (Sulasmi, 2002, hal. 33). Yang termasuk dalam golongan warna panas adalah keluarga warna merah/jingga yang bersifat dan pengaruh hangat, menyenangkan, merangsang dan bergairah. Yang termasuk dalam golongan warna dingin adalah kelompok hijau/biru yang bersidat dan memiliki pengaruh sunyi, tenang, makin tua, segar, serta arahnya makin gelap. Dimensi warna merupakan sifat-sifat dasar dari warna itu sendiri. Menurut The Prang Sistem warna dapat dibagi menjadi tiga dimensi, yaitu (Pujirianto, 2005, hal. 45) : - Hue, berkaitan dengan panas dinginnya warna, termasuk didalamnya warna primer, sekunder, dan tersier. - Value, berkaitan dengan terang gelapnya warna, menunjukkan kualitas sinar yang direffleksikan oleh sebuah warna atau menunjukkan gelap terangnya warna, dilakukan dengan menambahkan warna putih tau hitam - Intensity, berkaitan dengan cerah suramnya warna, menunjukkan kuat lemahnya warna. Pengurangan intensitas dicapai dengan mencampur atau


menambah warna murni dengan warna-warna netral seperti putih, abu-abu, atau dengan warna-warna komplemen. Warna yang akan diangkat dalam perancangan website wisata kali ini adalah warna coklat yang akan menjadi warna dominan dalam setiap bagian layout. Warna coklat yang ditampilkan merupakan warna yang terinspirasi dari warna daun tembakau yang memiliki warna kecoklatan agak pucat dan coklat matang yang merupakan warna daun tembakau sesuai dengan tingkatan produksi (pemrosesan) tembakau itu sendiri.

Gambar 158. Warna pada website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Warna kecoklatan yang ditampilkan bertujuan untuk memberikan sebuah kesan elegan terhadap tampilan website yang diambil dari warna tembakau masak yang juga merupakan sebuah produk olahan yang diunggulkan di Jember.


Gambar 159. Objek inspirasi warna website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Pengangkatan identitas menjadi sebuah yang mutlak untuk memberikan suatu karakteristik terhadap rancangan. Dengan karakteristik yang kuat sebuah tampilan website akan memiliki cirikhas tersendiri yang akan tertanam dalam pemikiran pengguna/khalayak.Berikut merupakan konsep komposisi warna yang akan diaplikasikan pada laman website beautyofjember.com :

Gambar 160. Komposisi warna pada website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Molly E. Holzschlag seorang pakar warna dalam tulisannya “Creating Colour Scheme” membuat daftar mengnai kemampuan masing-masing warna ketika memberikan respon secara psikologis kepada pemirsanya sebagai berikut (Kurnianto, 2007, hal. 47) :


Warna Merah Biru Hijau Kuning Ungu Orange Coklat Abu-abu Putih Hitam

Respon kekuatan, bertenaga, kehangatan, nafsu, cinta, agresifitas, bahaya kepercayaan, konservatif, keamanan, teknologi, kebersihan, perintah alami, kesehatan, pandangan yang enak, kecemburuan, pembaruan optimis, harapan, filosofis, ketidak jujuran, pengecut, penghianatan spiritual, misteri, keagungan, perubahan, bentuk, galak, arogan energy, keseimbangan, kehangatan bumi, dapat dipercaya, nyaman, bertahan intelek, futuristic, modis, kesenduan, merusak suci, bersih, cermat, steril, kematian kekuatan, seksualitas, kemewahan, kematian, misteri, ketakutan, ketidakbahagiaan, keanggunan

Tabel 27. Psikologi warna

c)

Tipografi Penggunaan teks yang terpampang pada website beautyofjember.com adalah

teks yang memiliki karakter tegas dan mudah terbaca. Setiap bagian teks pada laman ini memakai jenis teks yang sama yakni teks arial. Meskipun pengaplikasian teks jenis tersebut terkesan standar namun dalam kenyataannya teks dengan jenis San Serif tersebut cukup efektif untuk diaplikasikan yang dapat terbaca di setiap komputer, karena huruf jenis ini merupakan huruf standar yang ada di komputer pada umumnya. Selian itu penggunaan font arial juga mendukung keterbacaan yang mudah serta memberi karakter yang tegas pada penulisannya. Teks merupakan salah satu elemen grafis selain gambar, maka desainer dapat mengolah teks agar dapat berfungsi sebagai suatu kesatuan dalam menyampaikan informasi (Kurnianto, 2007, hal. 190).Tipografi dapat dibagi menjadi 2 (dua) bagian yaitu serif (berkait) yang sering disebut sebagai jenis font old style dan Sansserif yang merupakan huruf tanpa serif (kait). Dalam buku Huruf Display Dengan Komputer dan Manual (Kurnianto, 2005, hal. 80) huruf sans serif terlihat lebih kokoh di banding dengan jenis huruf serif, selain itu huruf sans serif biasanya digunakan untuk tulisan-tulisan dengan kesan yang lebih muda, modern, dan futuristic sedangkan huruf serif lebih menonjol kearah kesan klasik dan formal.Karakteristik sans serif dapat digambarkan sebagai berikut :


Gambar 161. Tampilan logo Sans Serif (Sumber : Huruf Display Dengan Komputer dan Manual (Kurnianto, 2005 )

Huruf di web dapat dibuat sebagai bagian dari grafik (image) atau dengan cara HTML maupun Style sheet. Dengan cara HTML maupun

Stylesheet kadang akan

didapatkan hasil yang kurang memuaskan karena bentuk huruf yang kita gunakan mungkin tidak tersedia didalam komputer pemakai. Jika komputer yang dipakai oleh pengguna tidak mempunyai bentuk huruf yang telah ditentukan oleh desainer maka yang akan digunakan adalah bentuk huruf alternatif atau bentuk huruf standar. Memang sulit untuk menentukan efek atau pengaruh yang bisa ditimbulkan dari penggunaan berbagai jenis huruf yang berbeda. Pengaplikasian teks pada laman website ini dimanfaatkan untuk penulisan deskripsi, judul laman serta pembuatan tombol teks sebagai tautan ke laman isi lain pada website ini.

Gambar 162. Tataletak font (Sumber: www.beautyofjember.com)

Untuk ukuran disesuaikan dengan penggunaan yang dimaksudkan pada teks tersebut. Sedangkan untuk warna secara keseluruhan memakai warna putih agar terlihat lebih jelas dan mudah terbaca diatas media warna pada laman website yang tergolong agak gelap.


3.

Logo Logo adalah tanda pengenal yang tetap dari perusahaan atau institusi atau

sebuah produk, yang dibuat secara singkat, sederhana, dan komunikatif mengguanakan huruf dan gambar (Pujirianto, 2005, hal. 70). Logo dapat dibedakan menjadi 2 (dua) yakni logogram (gambar) dan logotype (teks). Logogram merupakan sebuah identitas yang digunakan untuk menggambarkan citra atau karakter suatu lembaga, perusahaan atau organisasi. Sedangkan logotype merupakan suatu nama lembaga, perusahaan atau produk yang tampil dalam bentuk tulisan yang khusus untuk menggambarkan ciri khas secara komersil. Logo dalam sebuah situs ibarat nama gedung yang memiliki aturan hirarki visual dalam tampilan dengan membuatnya paling mencolok atau membautnya sebagai bingkai segala hal lain (Chairani, 2006, hal. 76). Dari tampilan sebuah logo, juga terdapat sebuah tagline yang merupakan suatu bagian kecil yang paling berharga untuk menyampaikan maksud Perancangan logo yang dipakai sebagai logo pada website pariwisata ini juga merupakan cerapan khusus yang ambil dari hal yang menjadi identitas Jember. Logo memakai motif daun tembakau yang dipadukan dengan teks yang bertuliskan beauty of jember .com wonderfull destination yang merupakan alamat website ini.

Gambar 163. Logo website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Logogram pada logo ini merupakan sebuah ilustrasi daun tembakau matang/siap olah. Ilustrasi tersebut dibuat secara digital menurut bentuk yang sebenarnya dari daun tembakau dengan warna kecoklatan seperti yang terlihat.


Gambar 164. Bentuk logogram pada website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Gambar 165. Objek inspirasi logogram pada website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Logogram berbentuk daun tembakau diatas dipadukan dengan logo teks yang bertuliskan beauty of jember .com pesona wisata alam Jember. Logogram tersebut dibuat menggunakan jenis teks yang berbeda untuk memberikan karakteristik berbeda yang mewakili penyampaian terhadap logo tersebut.

Gambar 166.Penerapan Logo pada website www.beautyofjember.com (Sumber : www.beautyofjember.com

Selain itu, pada logo teks terdapat juga beberapa bagian warna berbeda yang melambangkan penyampaian dari masing-masing warna. Pembagian maksud penyampaian pada logo teks tersebut dapat dijabarkan sebagai berikut :


JEMBER

Pada teks beauty tersebut penulisan menggunakan tipografi jenisEnglish111 Presto BT dengan warna merah yang merupakan suatu penggunaan bentuk dan warna untuk memberikankesan kecantikan (beauty) itu sendiri. Pada teks JEMBER tersebut penulisan menggunakan tipografi jenis Book Antiquayang memiliki karakter berkait untuk menampilkan kesan formal terhadap sebuah nama daerah pemerintahan serta dipampang dengan kesan tegas untuk keterbacaan. Diaplikasikan dengan warna hijau yang merupakan suatu penyampaian bahwa karya ini merupakan sebuah media yang dipakai untuk menampilkan potensi alam Jember dengan warna hijau yang mewakili alam itu sendiri terhadap teks Jember. Tagline logo yang menyampaikan tentang tujuan dibuatnya website ini yakni sebuah pesona wisata alam Jember. Dengan menggunakan tipe fontCentury Gothicdari golongan Sans Serif yang memiliki karakter yang tegas karena pada bagian ini font yang digunakan memiliki ukuran yang lebih kecil. Jadi, penggunaan tipe font tersebut agar lebih mudah terbaca.

Tabel 28. Penyampaian pada logoteks

Tabel diatas menerangkan bagaimana penjabaran masing-masing warna

terhadap tampilan logo itu sendiri. Pada tiap warna memiliki maksud dan keselarasan arti untuk menyampaikan maksud dan tujuan produk ini dibuat. Dalam kajian makna, proses simbolisasi suatu objek estetik menjadi penting karena secara tajam dapat diamati pada proses penyimbolan satu fenomena atau penyimbolan gagas estetik (Sachari, 2014, hal. 18) . Selain itu, terdapat suatu sign yang penting dalam sebuah tampilan laman yakni nama laman itu sendiri. Dalam sebuah laman web nama laman merupakan sebuah papan penunjuk jalan ketika user sedang menjelajah dihalaman sebuah website. Secara lebih rinci logo beautyofjember.com memiliki komposisi warna sebagai berikut :


Gambar 167. Warna pada logo website www.beautyofjember.com (Sumber : www.beautyofjember.com)

Rincian warna ditunjukkan menggunakan warna cahaya (R, G, B) sesuai dengan tujuan pengaplikasian warna terhadap produk digital. Karena pengaplikasin warna pada produk website yang merupakan sebuah produk digital multimedia menggunakan teknis warna cahaya untuk tampilan layar berbeda dengan tampilan warna pada teknik cetak yang menggunakan warna pigment (C,M,Y,K).

BAB IV KONSEP PERANCANGAN

Recommend Documents