Desain Web

1. Desain Web R0312 – Grafik Komputer

2. Client Side dan Server Side • Client-side digunakan untuk mengadakan interkasi dengan user, dan data yang diolah relatif sedikit. Proses dilakukan pada browser dengan script seperti JavaScript, ActionScript dll • Server-side digunakan untuk memproses semua yang berhubungan dengan server, seperti guest book, pooling, feedback dan aplikasi data lainnya. Proses dilakukan di web server, sedangkan Client hanya menerima hasil dalm bentuk HTML

3. Client Side dan Server Side Flash • Contoh penggunaan client-side Flash • Aplikasi perhitungan, seperti menghitung angsuran rumah dengan memperhatikan bunga bank sesuai perhitungan real estate • Aplikasi game • Aplikasi computer-based training • Contoh server-side Flash • Registrasi, konfirmasi password, penambahan record dalam data base, dll. Form input dari user biasanya menggunakan form HTML, tetapi dapat digunakan field text input dalam Flash. Dengan mengintegrasikan ActionScript dengan ASP, CGI/Perl, atau PHP, maka pengaksesan table database dapat dilakukan. Hasil pengolahan di server ditampilkan kembali dalam Flash Movie • Feedback dan aplikasi lain yang berhubungan dengan file text external dapat dilakukan karena Flash dapat membaca variabel yang terdapat dalam file text • Generator Object dari Flash dapat digunakan untuk membuat bermacam-macam chart, yang datanya berasal dari file eksternal. Dengan demikian data yang ditampilkan pada chart selalu baru

4. Struktur Web Site • Beberapa desainet web menggunakan teknik yang biasa seperti dalam pengembangan multimedia pada umumnya yaitu Storyboarding • Petama-tama pembuatan diagram untuk bermacam-macam halaman, seperti storyboarding pembuatan film dan video, kemudian hubungan detail yang diperlukan antara halaman-halaman secara keseluruhan • Dalam pengembangan web, terdapat beberapa model navigasi dasar, yang harus dikenal dengan baik oleh desaine, karena setiap model memberikan solusi untuk kebutuhan yang berbeda

5. Linear navigation model • Pada awal pengembangan Internet, Linear navigation model digunakan oleh sebagian besar Web site. Informasi diberikan secara sekuensial dimulai dari satu halaman. • Linear navigation model banyak digunakan dan berhasil dengan baik pada beberapa macam aplikasi seperti: • Presentasi • Aplikasi computer based-training • Aplikasi yang memerlukan informasi sekuensial

6. Hierarchical Model • Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dumulai dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman-halamn utama. Apabila diperlukanm dari tiap halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan • Hierarchical model baik bagi pengunjung untuk menemukan lokasi halaman dalam Web site dengan mudah. Untuk menggambarkan model tersebut, dapat digunakan ilustrasi dengan tree

7. Spoke-and-hub Model • Untuk membuat struktur hyperlink yang fleksibel, spoke-and-hub model dapat bekerja dengan baik. • Hub dinyatakan dengan homepage yang mempunyai hubungan dengan setiap node. • Setiap node dapat berhubungan kembali ke homepage. • Pada model ini hanya terdapat dua macam link, yaitu dari homepage ke halaman tertentu, dan dari halaman tersebut kembali ke homepage

8. Full Web Model • Full Web model memberikan kemampuan hyperlink yang banyak. Full Web model banyak digunakan karena user dapat mengakses semua topik dengan subtopik dengan cepat. Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya.

9. Desain Visual • Desain visual mencakup elemen grafik yang digunakan pada interface, termasuk layout secara keseluruhan, menu, desain form, penggunaan warna, coding, dan penempatan tiap unit dari informasi • Beberapa pedoman untuk membuat desain Web site yang baik, yaitu mencakup kejelasan, konsistensi, estetis, dan kecepatan download

10. Kejelasan Visual • Penyajian visual tidak boleh memberikan pengertian ambigu, sehingga tidak membingungkan user, yang berarti bahwa tampilan visual harus jelas • Beberapa persyaratan yang harus dipenuhi untuk mendapatkan kejelasan visual adalah: • Kesamaan, dua bentuk visual mempunyai property yang kelihatan dimiliki oleh keduanya • Pendekatan, dua bentuk visual mempunyai property yang dimiliki bersama-sama • Penutupan, bentuk visual dapat menutup suatu area yang sama • Kontinuitas, suatu bentuk visual akan terhubung dengan bentuk berikutnya menurut garis lurus • Agar bentuk visual mempunyai arti yang jelas, perlu dipertimbangkan untuk tidak menempatkan sesuatu yang tidak berarti pada halaman Web

11. Konsistensi • Konsistensi bentuk visual akan memudahkan user dalam menggunakan perintah • Untuk memperoleh konsisten dapat dilakukan sebagai berikut • Penggunaan warna pada elemen yang sama harus sama, sehingga tidak menimbulkan penafsiran yang berbeda • Pesan dari sistem ditampilkan pada lokasi tertentu secara logika • Posisi menu sebaiknya diletakkan pada lokasi yang sama, sehingga user tidak selalu mencari-cari untuk menemukannya • Penggunaan icon dan simbol harus sama untuk operasi yang sama

12. Estetis • Untuk mendapatkan desain yang komunikatif dan estetis, perlu diperhatikan pedoman tata letak suatu tampilan, yaitu dengan mengatur elemen-elemen layout seperti teks, image, animasi serta video • Empat prinsip dasar layout user interface: • Kesatuan, elemen-elemen desain harus ditempatkan sedemikian rupa sehingga merupakan kesatuan informasi • Keseimbangan, elemen-elemen desain harus ditempatkan sedemikian rupa sehingga tedapat keseimbangan (balance) untuk setiap halaman, maupun secara keseluruhan • Irama, Garis irama (grid) vertikal dan horisontal digunakan untuk menempatkan elemen-elemen desain, yang diatur dalam bentuk simetris maupun asimetris • Kontinuitas, informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari suatu bagian ke bagian lain

13. Kecepatan Download • Setiap menggunakan gambar pada halaman Web, persoalan yang utama adalah ukuran file, dan berapa lama image akan muncul pada halaman Web • Pertimbangan yang harus dilakukan adalah menentukan format file, resolusi, browser dll • Gambar yang baik adalah gambar yang memiliki kualitas baik dengan ukuran file yang kecil

14. Metodologi Desain • Proses pembuatan desain Web meliputi beberapa tahap: • Menentukan tujuan. Pada tahap ini ditentukan tujuan dari Web, serta audien yang mengunjunginya • Memahami karakteristik user. Tingkat kemampuan audiens sangat mempengaruhi pembuatan desain. Dengan demikian Web site dapat dikatakan komunikatif • Mempelajari Web site yang lama. User interface seperti menu dan icon yang sama sekali baru memerlukan pelatihan yang harus diberikan kepada user, karena user telah terbiasa dengan interface yang lama. Pelatihan memerlukan biaya, penggunaan interface baru harus layak secara ekonomis

15. Metodologi Desain (lanjutan) • Pembuatan desain konseptual. Desain ini merupakan konsep pengambangan suatu Web site, dilihat dari semua aspek. Desain konseptual merupakan sketsa kasar yang harus dikembangkan terlebih dahulu. Pembuatan desain harus mempertimbangkan bahwa sebaiknya desain sederhana dan bersifat umum • Pembuatan desain fungsional. Fokus dari desain ini pada perintah (command) dan bagaimana mengerjakan perintah tersebut. Desain fungsional dibuat untuk mengurangi kemungkinan kesalahan pada aplikasi • Pembuatan desain visual. Desain ini dibuat secara keseluruhan bersama-sama, dan lebih baik dari pada dibuat secara terpisah. Desain icon, dialog, dan menu termasuk dalam tahap ini. Dalam pembuatan desain visual, ditentukan elemen utama yang merupakan identitas dari Web. Elemen tersebut dapat berupa logo, nama, warna, dan lainnya yang mungkin telah lama dikenal oleh user

16. Metodologi Desain (lanjutan) • Pembuatan prototype. Prototype diperlukan untuk melihat secara keseluruhan desain yang dikembangkan. Protype dapat juga dibuat bersamaan dengan pembuatan desain visual, setelah desain konseptual dan fungsional diselesaikan.