Desain WEB PariwisataInteraksi Manusia dan Komputer

Teknologi InformasiFakultas Teknik

Universitas Udayana2013

Nama Kelompok :1. Philipus Novenando 12040500022. Ahmad Hanafi 12045050073. I Gst. BagusYoga Prasetya 12045050354. I Wayan Artaya 12045050385. Setyo Hadi Kusumo 1204505039

1. Karakteristik pengguna

Web yang kami desain ini memiliki target pengguna yaitu masyarakat

umum yang terdiri dari dua tipe pengguna, yaitu wisatawan lokal dan

wisatawan asing. Wisatawan lokal merupakan wisatawan yang berasal dari

dalam negeri sedangkan wisatawan asing adalah wisatawan dari luar negeri.

Sehingga dalam perancangan web kali ini, agar mempermudah para pengguna

tersebut untuk mengakses kami menyediakan beberapa pilihan bahasa, yaitu

bahasa inggris sebagai bahasa utamanya dan bahasa indonesia. Berikut ini

target penguna web yang kami desain, yaitu sebagai berikut:

Psychological Characteristics

Cognitive Style Verbal/Analytic

Attitude Neutral

Motivation Moderate

Knowledge and Experience

Educational Level  Advance

Reading Level  High

Typing Skill  Good

Computer Literacy  Moderate

Task Experience  Moderate

System Experience  Moderate

Application Experience  Moderate

Use of Other System  Yes 

Job and Task Characteristics 

Frequency of Use  Low 

Primary Training   None 

System Use  Discretionary 

Task Importance  High 

Task Structure  Moderate 

Job Categories 

Turnover Rate  Low 

Other Tools  Yes

Physical Characteristics

Color Blind  Both 

Handedness  Both 

Gender  Both 

2. Kebutuhan dokumentasi

Berdasarkan user profile, identifikasi tujuan kemudahan dalam

mengakses web pariwisata, kami memutuskan untuk menyediakan

dokumentasi di web kami ini berupa:

a. Help untuk pengunjung

Pertimbangannya adalah karena pengunjung memiliki profil pengetahuan

dan kemampuan menengah sehingga kebutuhan akan dokumentasi

termasuk kurang. Pengunjung memerlukan dokumentasi yang menjelaskan

fungsi‐fungsi kompleks secara terperinci. Help dibuat dengan struktur

yang sesuai dengan task seorang pengunjung, menunjukkan detail dari

fungsi‐fungsi yang dibutuhkannya.

User manual yang akan kami buat berisi :

1. Informasi umum mengenai web pariwisata yang kami buat

2. Panduan umum penggunaan link dan site map

3. Problem solving

b. FAQ

Pengunjung memiliki profil pengetahuan dan pengalaman yang beragam,

sehingga frekuensi kebutuhan mereka terhadap dokumentasi

cukup tinggi, namun tingkat kedalamannya termasuk rendah. Untuk

memenuhi kebutuhan tersebut, dokumentasi diberikan dalam bentuk FAQ

(Frequently Asked Questions) yang menyatu dengan web yang dibangun

dengan gaya tutorial yang dapat menjawab pertanyaan‐pertanyaan

semacam:

Apakah aman membeli tiket di web kami?

Bagaimana cara pembelian tiket?

Bagaimana caranya saya … ?

Bisakah saya … ?

Di manakah saya bisa … ?

Bagaimana hal ini bisa terjadi?

Apa yang akan terjadi jika … ?

Apa yang bisa saya lakukan dari sini?

Berikan saya gambar/ tampilan utuk menjelaskan … ?

Mengapa tiket saya belum di proses?

Karena web kami ini ease of access, maka tidak diperlukan adanya training atau

pelatihan.

3. Pertimbangan teknologi

Perkembangan teknologi di bidang informasi berbagai aspek sangat

pesat. Setiap detiknya ribuan informasi termuat di dunia internet. Begitu pula

dalam tugas kami ini kami memilih web sebagai pertimbangan eknologi

dengan beberapa alasan. Dalam pertimbangan teknologi desain web ini sangat

cocok diterapkan karena mempurmudah pengunjung, serta menarik pengunung

untuk lebih detail melihat informasi yang kami sajikan. Web yang kami

gunakan tentunya memiliki tampilan yang menarik bahkan Kami memilih web

karena cara membuat desainnya menggunkan desain yang mudah digunakan

serta menghasilkan tampilan yang bagus. Selain itu, web sangat mudah diakses

di dunia internet sampai dengan seluruh penjuru dunia. Berikut ini merupakan

pertimbangan teknologi untuk desain web kami adalah sebagai berikut :

1. System Power

Sebab desain ini digunakan dalam web, system power dapat dilakukan

terus- menerus. Hal ini terutama dalam memberikan informasi kepada

wisatawan dapat dilakukan secara berkelanjutan. Bahkan pemerintah

lebih cepat mengadakan evaluasi kepada kebijakannya terhdap

pariwisata. Bahkan tempat akses dapat dilakukan dimna saja dan kapan

saja.

2. Ukuran Layar

Desain   dapat  diakses  melalui  layar  berukuran berapapun,  mulai 

dari  layar  PC  besar  hingga perangkat  mobile.  Aplikasi  juga 

menyediakan 

fitur penyesuaian ukuran teks, sehingga pengguna dapat menentukan uk

uran teks yang paling sesuai dengan kebutuhannya. Namun, untuk layar 

perangkat mobile tidak disediakan tampilan khusus yang sesuai dengan 

karakteristik dan ukuran layar kecil, sehingga mungkin terjadi penuruna

n kualitas tampilan. 

3. Resolusi Layar

Desain ini di bangun dan telah diujikan pada berbagai resolusi layar

standar yaitu :

a. 800 x 600 

b. 1024 x 768 

c. 1280 x 1024 

4. Sistem Platform

Aplikasi  dibangun  pada  Windows platform 

sehingga pengaksesan oleh pengguna pada platform tersebut terjamin k

ualitasnya. Pada platform lain pun aplikasi ini tetap dapat diaakses, kare

na berbasis web. Syarat utama pengaksesan aplikasi ini adalah browser 

saja.

5. Tools Pengembangan

Aplikasi ini dikembangkan dengan perangkat: Adobe Photoshop, Corel

Draw, php sebagai bahasa pemrogramannya dan

mySql untuk membangun basis datanya.

Tampilan web sementara :

1. Struktur dan Isi Menu

Berikut penjelasan tentang struktur dan isi menu dalam web yang kami buat :

a. Home

Pada halaman Home berisi kata-kata sambutan terhadap user yang

mengunjungi website kami.

Gambar 1.1: Tampilan pada menu HOME

b. Tourism Object

Halaman ini berisi data-data objek pariwisata yang ada di Bali, data

objek tersebut telah dilengkapi dengan gambar dan penjelasan

mengenai keindahan-keindahan yang ada pada objek wisata tersebut.

Gambar 1.2: Tampilan pada menu Tourism Object

c. Hotels

Halaman ini berisi tentang data Hotel yang ada di sekitar tempat-

tempat wisata yang akan dikunjungi oleh user. Menu ini dibuat untuk

mempermudah user dalam hal pemilihan tempat penginapan yang

strategis sesuai dengan objek wisata yang akn dikunjungi.

d. About Bali

Halaman ini berisi profil letak strategis Pulau Bali, dan perkembangan

tempat-tempat wisata yang Bali dari awal berdirinya tempat wisata

tersebut hingga sekarang.

e. Contact Us

Halaman ini berisi tentang contact person admin yang nantinya user

bisa berkomunikasi langsung seputar pemesanan hotel, paket tour dan

tempat-tempat wisata yang akan dikunjungi.

2. Navigasi Menu

Menu utama pada situs website terletak di bagian atas layar website

yang memberikan informasi mengenai apa yang dapat dilakukan pengguna.

Jika pengguna memilih submenu dari dropdown menu utama, maka akan

tampil sub-sub dari submenu tersebut di sebelah kanannya.

4. Menu kiri sebagai sub dari submenu

Bagian ini (gambar sebelah kanan) terbagi menjadi tiga bagian yaitu :

1. Tour Packet yang berisi informasi mengenai paket perjalanan

yang dapat dipilih oleh pengguna. Submenu dari menu ini

akan dimunculkan ke sebelah kanannya.

2. Popular Post berisi informasi yang paling sering diakses oleh

para pengunjung.

3. Recent Post berisi informasi yang paling terakhir diakses oleh

para pengunjung.

1. Breadcrumb

Hanya memberikan informasi mengenai letak pengguna apabile melakukan

proses pada menu, submenu dan ‘Sub topik’ pada setiap menu yang ada.

Halaman yang sedang diakses akan ditandai dengan cetak tebal agar

memperjelas posisi pengguna berada. Sehingga pengunjung dapat mengetahui

di mana posisinya sekarang dan menu apa yang sedang diakses oleh

pengunjung tersebut.

ii. Anchor

Anchor merupakan fasilitas yang memberikan kemudahan untuk efektifitas

pencapaian informasi ketika pengguna hendak mendapatkan informasi pada

artikel yang panjang. Pada website ini akan menampilkan link yang akan

membawa pengunjung ke materi artikel secara langsung. Untuk artikel yang

panjang kami akan membagi menjadi beberapa halaman sehingga artikel

tersebut tidak sampai memanjang ke bawah. Dan kami menggunakan tombol

penuju halaman yang terletak di bagian bawah artikel dan juga tombol next

dan previous yang ada di samping kanan dan kiri artikel. Sehingga

pengunjung dapat dengan mudah memilih halaman mana yang ingin diakses.

iii. Scrolling

Pada website ini kami tidak menggunkan fasilitas scrolling. Kami

menggantinya dengan tombol next dan previous sehingga membuat pengguna

menjadi lebih gampang mengakses halaman dan tidak perlu susah-susah untuk

menggulung layar ke atas ataupun ke bawah.

5. Pemilihan Perangkat Interaksi

Dalam aplikasi web ini, pengguna berinteraksi dengan aplikasi untuk

a. Menunjukkan sebuah objek di layar

b. Memilih Objek/mengidentifikasikannya sebagai pusat perhatian

c. Memilih objek untuk memperoleh informasi

d. Memasukkan atau memanipulasi data/informasi

Untuk kebutuhan perangkat tersebut, digunakan perangkat interaksi berupa :

a. Keyboard dan mouse : sebagai perangkat masukan atau perangkat input

b. Monitor dan printer : sebagai perangkat keluaran atau perangkat output

Monitor digunakan sebagai sarana tampilan layar bagu pengguna, sedangkan

printer digunakan untuk mencetak berbagai informasi yang user perlukan

dalam bentuk paper.

6. Desain Umum Tampilan (Mockup)

Mockup adalah sebuah aplikasi yang digunakan untuk membuat

tampilan desain project yang akan kita buat.  Mockup dapat membuat sebuah

tampilan yang di desain dengan bentuk seperti web atau mobile. Mockup ini

dapat digunakan secara mudah dan dapat membuat orang lebih cepat mengerti

cara penggunaanya.dalam kali ini Mocup tamplan desain web dari kami

adalah sebagai berikut :

Penjelasannya adalah sebagai berikut :

1. Judul Website

2. Pemilihan Bahasa Website

3. Menu Utama

4. Menu Tambahan

5. Pencarian Data

6. Detail Informasi

7. Tanda halaman ke-..

8. Menampilkan yang support website

9. Menu untuk media sosial

10. Menu untuk yang medukung meyakinkan pengguna

Secara umum di atas adalah bagian-bagian daripada desain website

kami. Desain ini berguna untuk mempercepat pengguna memperoleh

informasi serta menarik minat pengguna menggunkan website kami.

7. Pemilihan control

1. Button

Digunakan pengguna untuk mengirimkan data yang telah diinput

2. Text entry

Digunakan untuk memasukkan text dari pengguna

3. Selection control

Digunakan untuk meminta pilihan pengguna

8. Perancangan teks dan pesan

Secara umum, font yang digunakan dalam aplikasi ini adalah Times New

Roman dengan ukuran default 12pt. Ukuran font dibedakan pada bagian judul

halaman untuk membedakannya dengan

bagian lain.

Contoh:

Header / Judul halaman

Isi halaman

Menu

Bali Island of Indonesia

Pengguna dapat membaca lebih lanjut informasi yang telah diposting oleh

admin. Dengan tujuan untuk mempermudah pengguna dalam melihat

informasi tanpa harus menggunakan scrool down secara terus menerus.

9. Perancangan feedback dan panduan

Penanganan feedback pada aplikasi ini sebagian besar sesuai dengan feedback

yang ada pada aplikasi‐aplikasi berbasis web lainnya. Namun ada pula beberapa

feedback dan panduan yang berbeda atau dirancang khusus adalah untuk

penanganan pesan error.

Contoh rancangan pesan error:

Pesan error spesifik:

Readmore

Contoh panduan dalam bentuk grafis:

10. Perancangan grafis, ikon, gambar & warna

Perancangan merupakan tahap persiapan untuk rancang bangun implementasi

suatu web, yang menggambarkan bagaimana suatu web dibentuk yang dapat

berupa penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari

beberapa elemen terpisah ke dalam satu kesatuan yang utuh dan berfungsi

termasuk mengkonfigurasikan komponen-komponen perangkat lunak dan

perangkat keras dari suatu web. Perancangan web dalam skala besar

membutuhkan strategi yang tepat agar perancangan web berjalan dengan baik,

tepat waktu, dan sesuai dengan sasaran yang ditargetkan. Web skala besar

merupakan sebuah web dengan banyak fungsi yang diakses banyak orang.

Semakin besar suatu web maka akan semakin kompleks pemeliharaan dan

pengembangannya lebih lanjut.

Kita akan membahasnya dengan medetail dimana pengertian dari

grafis adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk

menyampaikan informasi atau pesan seefektif mungkin. Dalam disain grafis, teks

juga dianggap gambar karena merupakan hasil abstraksi simbol-simbol yang bisa

dibunyikan. disain grafis diterapkan dalam disain komunikasi dan fine art. Seperti

jenis disain lainnya, disain grafis dapat merujuk kepada proses pembuatan,

metoda merancang, produk yang dihasilkan (rancangan), atau pun disiplin ilmu

yang digunakan (disain).

Definisi Desain Grafis adalah salah satu bentuk seni lukis (gambar) terapan

yang memberikan kebebasan kepada sang desainer (perancang) untuk memilih,

menciptakan, atau mengatur elemen rupa seperti ilustrasi, foto, tulisan, dan garis

di atas suatu permukaan dengan tujuan untuk diproduksi dan dikomunikasikan

sebagai sebuah pesan. Gambar maupun tanda yang digunakan bisa berupa

tipografi atau media lainnya seperti gambar atau fotografi.Desain grafis umumnya

diterapkan dalam dunia periklanan, packaging, perfilman, dan lain-lain.

Ada beberapa tokoh menyatakan pendapatnya tentang desain grafis antara lain :

1. Suyanto desain grafis didefinisikan sebagai ” aplikasi dari keterampilan seni

dan komunikasi untuk kebutuhan bisnis dan industri“. Aplikasi-aplikasi ini

dapat meliputi periklanan dan penjualan produk, menciptakan identitas visual

untuk institusi, produk dan perusahaan, dan lingkungan grafis, desain

informasi, dan secara visual menyempurnakan pesan dalam publikasi.

2. Jessica Helfand mendefinisikan desain grafis sebagai kombinasi kompleks

kata- kata dan gambar, angka-angka dan grafik, foto-foto dan ilustrasi yang

membutuhkan pemikiran khusus dari seorang individu yang bisa

menggabungkan elemen-eleman ini, sehingga mereka dapat menghasilkan

sesuatu yang khusus, sangat berguna, mengejutkan atau subversif atau sesuatu

yang mudah diingat.

3. Danton Sihombing desain grafis mempekerjakan berbagai elemen seperti

marka, simbol, uraian verbal yang divisualisasikan lewat tipografi dan gambar

baik dengan teknik fotografi ataupun ilustrasi. Elemen-elemen tersebut

diterapkan dalam dua fungsi, sebagai perangkat visual dan perangkat

komunikasi.

4. Michael Kroeger visual communication (komunikasi visual) adalah latihan

teori dan konsep-konsep melalui terma-terma visual dengan menggunakan

warna, bentuk, garis dan penjajaran (juxtaposition).

5. Warren dalam Suyanto memaknai desain grafis sebagai suatu terjemahan dari

ide dan tempat ke dalam beberapa jenis urutan yang struktural dan visual.

6. Blanchard mendefinisikan desain grafis sebagai suatu seni komunikatif yang

berhubungan dengan industri, seni dan proses dalam menghasilkan gambaran

visual pada segala permukaan.

Sedangkan pengertian dari Ikon,dimana ikon juga disebut simbol,

ialah antarmuka grafik di sebuah data yang digambarkan oleh gambar kecil yang

menggambarkan program komputer ataupun berkas komputer dalam pengelola

berkassebuah sistem operasi. Dibuat melalui manipulasi langsung atas simbol,

sering ditunjuk melalui tetikus, sehingga pengguna dapat menjalankan fungsinya

dengan menggerakkan tetikus tersebut, melihat informasi atau menghapus berkas

itu. Ikon juga digunakan di perangkat lunak. Ikon sering ditempatkan di

sebuah bilah alat (toolbar) yang bisa dijalankan fungsinya oleh pengguna dalam

program itu dengan mengeklik ikon itu.

Kehidupan kita tidak bisa terlepas dari gambar, begitu pula dalam perancangan

desain website ini. Ada banyak jenis gambar yang bisa kita temukan di sekeliling

kita sehingga mungkin banyak diantara kita yang tidak mengetahui pengertian dan

definisi dari gambar itu sendiri. Berikut ini adalah pengertian dan definisi gambar

menurut beberapa ahli:

1. KATHERINE KLIPPER MERSETH

Gambar itu bernilai lebih dari seribu kata-kata

2. TAMIYA ONODERA

Gambar adalah sebuah copy dari alam secara phisis

3. SUDJONO

Gambar adalah proses jiwa kita dan bukan gambar jiplakan karya orang lain

4. DONALD PREZIOSI

Gambar adalah temporal linier dari sebuah bahasa

5. W. J. MITCHEL

Gambar adalah merupakan sebuah petunjuk diri yang terdapat dalam sebuah

struktur referensi

6. M. P. HODGES

Gambar tidak hanya berupa sekumpulan benda-benda fisik

7. JAMES B. PAWLEY

Gambar adalah sesuatu yang bisa dilihat dan terdiri dari beberapa pertemuan

ruang antara beberapa fitur

8. NED BLOCK

Gambar adalah mewakili dari sesuatu yang telah ditetapkan serta memiliki

kualitas atau karakteristik dari bentuk dan warna dari sesuatu yang

diwakilinya

9. ELAINE HODGES

Gambar merupakan pengoptimalan dari sebuah output tertentu yang

terkadang dibutuhkan beberapa pencitraan yang bertujuan untuk membuatnya

menjadi lebih baik

10. HARALICK & SHAPIRO

Gambar adalah sebuah representasi spasial dari fenomena objek, adegan, atau

lainnya

Secara ilmiah pengertian warna merupakan gelombang elektromagnetik yang menuju ke mata kita dan kemudian diterjemahkan oleh otak sebagai warna. Dengan kata lain arti warna adalah juga sesuatu yang berhubungan dengan emosi manusia. Dan dapat menimbulkan pengaruh psikologis. Ini sudah terbukti pada logo perusahaan-perusahaan sukses. Berikut beberapa daftar arti dari warna secara umum yang bintang ketahui, semoga dapat membantumu dalam mencari inspirasi warna:

1. Biru Sering diartikan sebagai sesuatu yang memiliki ketenangan dan

kepercayaan.

2. Merah Arti dari warna ini melambangkan sesuatu kekuatan, nafsu dan

kemauan yang agresif.

3. Kuning Melambangkan kegembiraan penuh harapan dan optimis.

Mungkin sesuatu yang spontan

4. Hijau Warna ini menunjukkan sesuatu yang alami dan serba sehat.

5. Ungu, keangkuhan dan kemewahan adalah pegertian warna ini

6. Hitam, Bintang rasa kamu setuju jika arti warna ini berarti misteri,

kematian dan ketakuan.

7. Putih, Banyak yang mengatakan warna ini adalah kesucian, tapi Bintang

rasa ini, lebih tepat menunjukkan bersih, rapi dan tertata.

Pengertian Desain Web atau definisi Desain Web adalah jenis desain grafis

yang ditujukan untuk pengembangan dan styling obyek lingkungan informasi

Internet untuk menyediakan dengan fitur konsumen high-end dan kualitas

estetika. Definisi yang ditawarkan memisahkan desain web dari pemrograman

web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi web

sebagai semacam desain grafis.

Tujuan desain web adalah untuk membuat situs web atau dokumen elektronik

dan aplikasi yang berada pada web server dan menampilkan konten dan fitur

antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti

unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman

menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih

kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti

Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan

ke dalam halaman web dengan menggunakan HTML / tag XHTML.

Perbaikan sesuai browser dengan standar W3C diminta penerimaan luas dan

penggunaan XHTML / XML bersama dengan Cascading Style Sheets (CSS)

untuk posisi dan memanipulasi unsur-unsur halaman web dan objek. Kemampuan

browser untuk mengirimkan berbagai konten dan pilihan aksesibilitas kepada

klien tanpa menggunakan plug-in.

Dengan spesialisasi yang tumbuh di bidang teknologi informasi ada

kecenderungan kuat untuk membedakan antara desain web (web design) dan

pengembangan web (web development). Dalam perancangan desain website

Pariwisata menggunakan grafis, ikon, gambar dan warna yang akan dijelaskan

sebagai berikut :

Rancangan Desain Website Pariwisata

A. Dari gambar desain di atas yang terdiri dari grafis ialah gambar kotak-kotak

seperti berikut :

1.

2.

3.

4.

5.

6.

Pembuatan web menerapkan prinsip-prinsip desain grafis seperti :

metaphor, kejelasan, konsistensi, alignment, pendekatan, kontras, warna,

dan tipografi.

B. Dari gambar desain di atas yang terdiri dari ikon ialah k seperti berikut :

1.

2.

3.

C. Dari gambar desain di atas yang terdiri dari gambar ialah seperti berikut :

Gambar tampak sebagai latar belakang desain web kami yaitu gambar

pemandadangan pada sore hari.

D. Dari gambar desain di atas yang terdiri dari warna ialah seperti berikut :

/

UnguPink

Hitam Keputihan

Hitam Abu-abu

Putih Cokelat Muda