TUGAS 8 RPL - RANGKUMAN DESAIN WEB

PERANCANGAN APLIKASI WEB

1. PENDAHULUAN

Langkah-langkah web design dengan membuat: 

1. Perancangan Isi 

Dikembangkan selama tahapan analisis, dilakukan sebagai basis untuk penetapan objek-objek 

2. Perancangan Estetika (Perancangan Grafis) 

Membuat tampilan yang akan dilihat oleh user 

3. Perancangan Arsitektural 

Fokus pada struktur hypermedia untuk semua objek isi dan untuk semua fungsi pada aplikasi web

4. Perancangan Antarmuka 

Menentukan tampilan dan mekanisme interaksi yang mendefinisikan user interface 

5. Perancangan Struktur Navigasi 

Mendefinisikan bagaimana end user melakukan penelusuran untuk melintasi hypermedia 

6. Perancangan Komponen 

Merepresentasikan rincian struktur elemen-elemen fungsional aplikasi web 

2. SIFAT-SIFAT APLIKASI WEB 

a. Kepadatan jaringan 

b. Keserempakan 

c. Jumlah pengguna yang tidak dapat diprediksi 

d. Kinerja 

e. Ketersediaan 

f. Digerakkan oleh data 

g. Peka terhadap isi 

h. Evolusi yang berkesinambungan 

i. Kesegeraan 

j. Keamanan k. Estetika 

3. KUALITAS PERANCANGAN APLIKASI WEB 

atribut kualitas:

1. keamanan

2. ketersediaan

3. skalabilitas

4. waktu untuk masuk kepasar

Kualitas Aplikasi Web 

1. Kemudahan Penggunaan 

2. Fungsionalitas 

3. Keandalan 

4. Efisiensi 

5. Kemudahan Pemeliharaan 

Sasaran perancangan web yang baik: 

1. Kesederhanaan (Simplicity)

2. Konsisten (Consistency) 

3. Identitas (Identity) 

4. Ketangguhan (Robustness)  

5. Kemudahan melakukan navigasi dalam aplikasi  

6. Daya tarik visual (Visual Appeal) 

7. Kompatibilitas (Compatibility)

4. PERANCANGAN ANTARMUKA 

Sasaran-sasaran user interface adalah untuk: 

1. Menetapkan suatu jendela yang konsisten untuk meletakkan isi-isi dan fungsionalitas yang disediakan oleh user interface 

2. Memandu user melalui serangkaian interaksi dengan aplikasi web yang dikembangkan 

3. Mengorganisasikan pilihan-pilihan navigasi dan isi-isi yang dapat dilihat user yang dapat berupa menu navigasi, icon grafis, dan gambar-gambar grafis.

5. PERANCANGAN ESTETIKA 

Tata letak yang baik pada perancangan interface: 

1. Jangan mengisi bagian dari halaman web dengan informasi yang akhirnya sulit untuk mengidentifikasi informasi tersebut 

2. Lakukan penekanan pada isi yang merupakan alasan utama bagi user untuk masuk ke aplikasi web 3. Lakukan pengelompokkan fitur navigasi, isi, dan fungsi 

4. Jangan perluas bagian aplikasi dengan penggunaan scrollbar, sebaiknya kurangi isi yang jumlahnya banyak 

5. Sesuaikan resolusi layar dan ukuran jendela browser

6. PERANCANGAN ISI 

1. Hubungan objek isi dengan objek isi lainnya adalah sebagai bagian dari suatu model kebutuhan untuk aplikasi web. 

2. Permasalahan yang terjadi pada perancangan isi jika jumlah objek isi yang digabungkan untuk membentuk halaman web tunggal merupakan fungsi dari kebutuhan user, yang dibatasi oleh kecepatan pengunduhan koneksi ke internet, juga dibatasi oleh besarnya ukuran jendela monitor yang digunakan user.

7. PERANCANGAN ARSITEKTURAL

A. Arsitektur Isi
1. Struktur Linier: dilakukan saat interaksi user dengan aplikasi web secara umum memperlihatkan urutan yang dapat diramalkan.
2. Struktur Grid: arsitektur yang diterapkan saat isi aplikasi web dapat diorganisasikan menjadi 2 dimensi atau lebih. Dimensi horizontal merepresentasikan jenis-jenis produk, dan dimensi vertikal merepresentasikan penawaran yang disediakan oleh penjualnya.
3. Struktur Hirarki: rancangan dimungkinkan adanya pencabangan hypertext (aliran kendali) secara horizontal bergerak melintasi cabang-cabang vertikal pada struktur aplikasi web.
4. Struktur Jaringan (Web Murni): struktur ini dapat digabungkan untuk membentuk struktur-struktur yang bersifat komposit.

B. Arsitektur Aplikasi Web
Aristektur MVC (Model View-Controller) secara fungsional dijelaskan sebagai berikut:
a. Pengendalian: mengelola akses ke model, ke view dan melakukan koordinasi aliran data di antara model dan view.
b. Model: memuat semua isi yang bersifat spesifik terhadap aplikasi dan memuat logika pemrosesan, termasuk di dalamnya semua objek isi.
c. View: memuat semua fungsi yang bersifat spesifik terhadap user interface yang di dalamya termuat presentasi isi dan logika pemrosesan, objek isi, akses ke data dan ke sumber informasi lainnya, dan semua fungsionalitas pemrosesan yang diperlukan end user.

8. PERANCANGAN NAVIGASI

A. Semantik-Semantik Navigasi
• Unit semantik navigasi adalah sejumlah informasi dan struktur navigasi yang saling berkolaborasi untuk memenuhi kebutuhan user yang bersifat khusus.

B. Sintak Navigasi
•Link navigasi yang bersifat individual: link berbasis teks, icon, tombol, pilihan, dan grafis harus sesuai dan konsisten dengan isi yang ditampilkan
• Bar navigasi horizontal: daftar kategori isi dan kategori fungsional utama yang berisi link yang sesuai
• Kolom-kolom navigasi vertikal:
• Berisi daftar kategori utama dan kategori fungsional
• Berisi semua objek isi utama
• Tab-tab: merepresentasikan kategori isi dan kategori fungsional sebagai tab sheet saat suatu link diperlukan
• Peta situs: menyediakan suatu tabel isi yang dapat digunakan untuk melakukan navigasi ke semua objek dan semua fungsionalitas