KONSEP DASAR DESAIN WEB

Presentasi berjudul: "KONSEP DASAR DESAIN WEB"— Transcript presentasi:

1 KONSEP DASAR DESAIN WEB

2 Halaman Web Secara umum, ada tiga kategori alasan yang mendasari untuk menyusun halaman web, antara lain : Sarana promosi produk ataupun jasa di Internet Penyedia informasi Melakukan transaksi online

3 Penyusunan Halaman Web
Definisikan secara jelas tujuan penyusunan halaman web Buatlah (content) yang menarik untuk disampaikan Buatlah halaman web sedemikian rupa sehingga para pengunjung dirayu dan ditantang untuk kembali lagi

4 Desain Suatu pekerjaan / kegiatan / proses kreatif untuk menghasilkan sesuatu yang sifatnya : Baru (Inovatif), segar (fresh), menakjubkan. Mempunyai daya guna, menghasilkan sesuatu yang lebih baik, lebih mudah dan praktis (useful), memecahkan suatu masalah (solusi).

5 What is Web Design? Definition :
Web design is the process of creating experiences for users of the web. Web design refers to the process of conceptualizing and planning the experiences for visitors as they interact with the information and activities on the site Situs Web yang baik Design (50 %) Usefulness (50 %)

6 Situs Web Yang Baik (1) Elemen Desain
Estetika : warna (color), tataletak (layout), tipografi (typhography) Komunikasi : isi (content), penyampaian pesan (language style used for communication), interaksi (interaction/ feedback), pembentukan citra (building image) Usefulness. Utility/ fungsionalitas, teknologi yang tepat Usability/ kemudahan penggunaan : waktu belajar, kecepatan kinerja, tingkat kesalahan, daya ingat dan kepuasan subyektif

7 User Interface User Interface is a linkage between a human and a device or system that allows the human to interact with that device or system. The user interface provides means of : Input, allowing the users to manipulate a system Output, allowing the system to produce the effects of the users' manipulation. Currently, the following types of user interface are the most common : Graphical User Interface (GUI) accept input via devices such as computer keyboard and mouse and provide articulated graphical output on the computer monitor. Web User Interface (WUI) accept input and provide output by generating web pages which are transmitted via the Internet and viewed by the user using a web browser program.

8 Good Interaction Design
To improve the usability of an application it is important to have a well designed interface. Ben Shneiderman's "Eight Golden Rules of Interface Design" : Strive for consistency Enable frequent users to use shortcuts Offer informative feedback Design dialog to yield closure Offer simple error handling Permit easy reversal of actions Support internal locus of control Reduce short-term memory load

9 World Wide Web World Wide Web (commonly shortened to the Web) is a system of interlinked hypertext documents accessed via the Internet. With a Web browser, a user views Web pages that may contain text, images, videos, and other multimedia and navigates between them using hyperlinks.

10 Top Ten Mistakes in Web Design
Jakob Nielsen's Top Ten Mistakes in Web Design : Using Frames Gratuitous Use of Bleeding-Edge Technology Scrolling Text, Marquees, and Constantly Running Animations Complex URLs Orphan Pages Long Scrolling Pages Lack of Navigation Support Non-Standard Link Colors Outdated Information Overly Long Download Times

11 Advantages of Using Web
Global audience Operates 24 hours, 7 days a week Relatively inexpensive Product advertising Distribute product catalogs Online surveys Announcements Online discussion forums Obtain customer feedback Immediate distribution of information Multimedia Formatting capabilities

12 Pengembangan Situs Web
Content Creation User Interface Design Graphic/ Visual Design Technology Planning Web Authoring Web Programming Multimedia Design

13 Content Creation “Content is king”
Langkah-Langkah mempersiapkan content : Menentukan tujuan Menentukan audience/ target pembaca Menulis isi Caranya : Harus singkat dan jelas Gunakan bahasa sederhana Memudahkan scanning: highlighting,bulleted list Berikan preview informasi Hindari “click here”, “under construction” Jangan memaksa user menghapal

14 User Interface Design Perhatikan usability
Beberapa hal untuk mencapai usability Percabangan – struktur yang berarti, tidak berlebihan, tidak menggunakan frame Kekompakan situs – hindari halaman terlalu panjang, horizontal scrolling Akses universal – platform, browser, kecepatan akses, resolusi layar, warna Dukungan navigasi

15 Graphic / Visual Design
Tata letak – grid dan struktur Konsistensi – warna, font, style Kesederhanaan situs – tidak membingungkan user Optimasi file grafik – format file, web safe colors

16 Mengatur Situs Web Jenis situs web yang sedang kita susun sangat mempengaruhi struktur situs web itu dan urutan informasi yang akan dihasilkan. Kita dapat mengatur sebuah situs web untuk : Mengupas hobby kita atau ketertarikan kita pada satu hal tertentu dsb. Membuka suatu forum diskusi dan komunikasi Memberikan layanan kepada pelanggan Menghasilkan keuntungan bagi perusahaan atau organisasi tertentu

17 Informasi Pada Halaman Web
Beberapa situs web terdiri dari ribuan halaman web, beberapa lagi hanya terdiri dari beberapa halaman saja. Semakin banyak informasi yang akan diberikan atau semakin penting informasi itu, maka kita perlu membuatnya mudah bagi pengguna untuk mengaksesnya. Penyusunan sistem navigasi hendaknya dibuat sesederhana mungkin sehingga lebih mudah diikuti oleh pengunjung. Secara umum, pengunjung pencari informasi juga membutuhkan akses yang cepat. Penempatan iklan harus hati-hati, usahakan letaknya jangan mengganggu atau membuat bosan pengunjung. Proporsi yang baik diperlukan untuk mengatur antara kemudahan akses dan kecepatan akses dengan kelangsungan situs web.

18 Nilai Tambah (1) Animasi dan Gambar
Banyak situs menggunakan animasi dan gambar untuk menarik pengunjung. Namun hati-hati! Jika terlalu banyak justru akan membuat pengunjung terganggu Pertimbangkan masalah bandwidth (waktu download) dan kompatibilitas browser. Animasi flash  harus ada flash player. Animasi javascript  browser harus enable. Hindari: Menampilkan gambar ukuran besar (> 1 MB) Merubah ukuran gambar yang besar menjadi kecil melalui atribut di tag <img>. Lebih baik gunakan image-editor.

19 Nilai Tambah (2) Teks ekuivalen
Setiap gambar atau image yang kita letakkan di halaman web, haruslah disertai dengan atribut teks ekuivalen pada tag yang digunakan. Contoh: Atribut “alt” didalam tag <img> Atribut “title” pada tag <a> Mengapa ? Karena beberapa pengunjung menon-aktifkan opsi untuk mendownload gambar atau animasi untuk mempercepat download time.

20 Proses Pembuatan Website
Define Content / Website Objectives Develop Architecture Membuat kerangka dasar situs atau arsitektur atau hirarki. Create Design Desain seharusnya bisa tampak bagus di monitor komputer. Konsistensi desain pada semua halaman web SANGAT penting. Warna, Huruf, Grafis, Garis, Tabel, Logo, dan Navigasi Implement The Site Ujikan desain web anda pada berbagai monitor komputer, platform dan browser Maintaining the site

21 Define Content/ Isi Tentukan Maksud dan Tujuan Situs Anda
Apa Kebutuhan Orang Mengunjungi Situs Anda? Tentukan Target Umur Rata-rata Audience dan Tingkat Ketrampilan. Kenali Audience Anda Jagalah Content Anda Fresh dan Up To Date Dahulukan Kualitas diatas Kuantitas Nyatakan Kebijaksanaan Anda Dengan Jelas [Privacy Policy, Copyright, Disclaimer]

22 Navigasi Situs Pembuatan navigasi situs hendaknya mengikuti beberapa aturan dasar, seperti: Batasi jumlah item dalam list dan menu. Jangan menggantungkan sepenuhnya pada image grafis untuk navigasi. Homepage harus mudah ditemukan. Integrasikan fasilitas navigasi dengan content. Hindari frame jika mungkin (gunakan tabel atau CSS).

23 Arsitektur Situs Arsitektur situs menentukan bagaimana situs dan halaman-halaman di dalamnya diorganisasikan, dinamai, dan saling dihubungkan (linked) untuk mempermudah proses browsing dan pencarian informasi oleh pengunjung.