Dokumen tersebut merupakan laporan desain website pariwisata yang mencakup karakteristik pengguna target, kebutuhan dokumentasi, pertimbangan teknologi yang digunakan, tampilan website sementara, dan perancangan elemen interaktif website seperti menu, navigasi, kontrol, teks, gambar, dan warna.

1. Desain WEB
Pariwisata
Interaksi Manusia dan Komputer
Teknologi Informasi
Fakultas Teknik
Universitas Udayana
2013
Nama Kelompok :
1. Philipus Novenando 1204050002
2. Ahmad Hanafi 1204505007
3. I Gst. BagusYoga Prasetya 1204505035
4. I Wayan Artaya 1204505038
5. Setyo Hadi Kusumo 1204505039

2. 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

3. 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

4. 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

5. 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.

6. 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.

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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.

16. 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

17. 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

18. 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 :

19. Rancangan Desain Website Pariwisata
A. Dari gambar desain di atas yang terdiri dari grafis ialah gambar kotak-kotak
seperti berikut :
1.
2.
3.

20. 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.

21. 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 :
/
Ungu
Pink
Hitam
Keputihan
HitamAbu-abu
Putih Cokelat
Muda