Tgs 5 imk desainwebsite artayahonest

8
Laporan 2 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

Transcript of Tgs 5 imk desainwebsite artayahonest

Page 1: Tgs 5 imk desainwebsite artayahonest

Laporan 2

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

Page 2: Tgs 5 imk desainwebsite artayahonest

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

Page 3: Tgs 5 imk desainwebsite artayahonest

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.

Page 4: Tgs 5 imk desainwebsite artayahonest

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

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

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

4. Scrolling

Pada website ini kami tidak menggunkan fasilitas scrolling. Kami menggantinya dengan

tombol next dan previous sehingga membuat pengguna menjadi lebih gampang

Page 5: Tgs 5 imk desainwebsite artayahonest

mengakses halaman dan tidak perlu susah-susah untuk menggulung layar ke atas ataupun

ke bawah.

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

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

Page 6: Tgs 5 imk desainwebsite artayahonest

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

Page 7: Tgs 5 imk desainwebsite artayahonest

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.