FAKULTAS TEKNOLOGI INFORMASI1DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS © 2009 Fakultas Teknologi Informasi Universitas Budi Luhur Jl. Ciledug Raya Petukangan Utara Jakarta Selatan Website: Desain dan Pemrograman Web 1 PG110 – 3 SKS

FAKULTAS TEKNOLOGI INFORMASI2DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS KONSEP DASAR DESAIN WEB PERTEMUAN 03

FAKULTAS TEKNOLOGI INFORMASI3DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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

FAKULTAS TEKNOLOGI INFORMASI4DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Penyusunan Halaman Web  Berikut ini beberapa langkah yang dapat dilakukan sehingga penyusunan halaman web lebih efektif, antara lain :  Definisikan secara jelas tujuan penyusunan halaman web  Buatlah (content) yang menarik untuk disampaikan ataupun didiskusikan.  Buatlah halaman web sedemikian rupa sehingga para pengunjung dirayu dan ditantang untuk kembali lagi

FAKULTAS TEKNOLOGI INFORMASI5DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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).

FAKULTAS TEKNOLOGI INFORMASI6DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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 %)

FAKULTAS TEKNOLOGI INFORMASI7DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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

FAKULTAS TEKNOLOGI INFORMASI8DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Pengembangan Situs Web  Content Creation  User Interface Design  Graphic/ Visual Design  Technology Planning  Web Authoring  Web Programming  Multimedia Design

FAKULTAS TEKNOLOGI INFORMASI9DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Content Creation  “Content is king”  Langkah-Langkah mempersiapkan content :  Menentukan tujuan  Menentukan audience/ target pembaca  Menulis isi  Tips :  Harus singkat dan jelas  Gunakan bahasa sederhana  Memudahkan scanning: highlighting,bulleted list  Berikan preview informasi  Hindari “click here”, “under construction”  Jangan memaksa user menghapal

FAKULTAS TEKNOLOGI INFORMASI10DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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

FAKULTAS TEKNOLOGI INFORMASI11DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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

FAKULTAS TEKNOLOGI INFORMASI12DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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

FAKULTAS TEKNOLOGI INFORMASI13DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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.

FAKULTAS TEKNOLOGI INFORMASI14DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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. Lebih baik gunakan image-editor.

FAKULTAS TEKNOLOGI INFORMASI15DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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  Atribut “title” pada tag  Mengapa ? Karena beberapa pengunjung menon-aktifkan opsi untuk mendownload gambar atau animasi untuk mempercepat download time.

FAKULTAS TEKNOLOGI INFORMASI16DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 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

FAKULTAS TEKNOLOGI INFORMASI17DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Define Content/ Isi 1.Tentukan Maksud dan Tujuan Situs Anda 2.Apa Kebutuhan Orang Mengunjungi Situs Anda? 3.Tentukan Target Umur Rata-rata Audience dan Tingkat Ketrampilan. 4.Kenali Audience Anda 5.Jagalah Content Anda Fresh dan Up To Date 6.Dahulukan Kualitas diatas Kuantitas 7.Nyatakan Kebijaksanaan Anda Dengan Jelas [Privacy Policy, Copyright, Disclaimer]

FAKULTAS TEKNOLOGI INFORMASI18DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Navigasi Situs (1)  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).

FAKULTAS TEKNOLOGI INFORMASI19DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Navigasi Situs (2)  List of contents  Merupakan jenis navigasi dasar menggunakan list-item.  Biasanya digunakan sebagai daftar isi, atau navigasi dalam content situs.

FAKULTAS TEKNOLOGI INFORMASI20DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Navigasi Situs (3)  Breadcrumb trail  Umumnya digunakan untuk memberikan informasi ke pengunjung dimana dia berada dan juga berguna untuk mempermudah pengunjung jika akan kembali ke halaman awal.  Digunakan jika situs memiliki content (isi) yang cukup panjang.

FAKULTAS TEKNOLOGI INFORMASI21DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Navigasi Situs (4)  Horizontal top bar  Tabs  2-level top (bar or tabs)

FAKULTAS TEKNOLOGI INFORMASI22DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Navigasi Situs (5)  Top and side bars  Paging

FAKULTAS TEKNOLOGI INFORMASI23DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Navigasi Situs (6)  Buttons bar with revealed drop-down

FAKULTAS TEKNOLOGI INFORMASI24DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Navigasi Situs (7)  Multiple-level tree nav

FAKULTAS TEKNOLOGI INFORMASI25DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (1)  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.

FAKULTAS TEKNOLOGI INFORMASI26DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (2)  Dalam membuat arsitektur atau struktur situs web, hendaknya kita mengikuti beberapa prinsip dan aturan, diantaranya:  Semua halaman di situs harus memiliki link ke halaman utama (homepage).  Tunduk pada “aturan tiga-klik” dimana pengunjung harus sudah menemukan informasi dalam 3 kali klik atau kurang.  Tempatkan content paling penting di awal halaman.  Batasi panjang halaman (no scrolling).  Sederhanakan tata-letak halaman.  Usahakan agar content utama mudah dicari.  Tampilkan produk dari berbagai perspektif/kategori.  Ikuti prinsip-prinsip umum penulisan yang baik.

FAKULTAS TEKNOLOGI INFORMASI27DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (3)  All in One  Semua content situs disajikan dalam sebuah halaman tunggal (halaman utama atau homepage).  Arsitektur ini merupakan arsitektur yang paling sederhana.  Keuntungan dari model ini adalah mudah dalam perawatan file (maintenance) karena hanya terdiri dari satu halaman (file).

FAKULTAS TEKNOLOGI INFORMASI28DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (4)  Flat  Merupakan model struktur web yang menyusun halaman- halaman secara linier.  Setiap halaman dapat diakses dari halaman yang lainnya secara berurutan.  Struktur ini merupakan struktur yang sederhana dan sering diterapkan dalam situs-situs dengan jumlah halaman yang tidak terlalu banyak. Contohnya, situs yang tersusun dalam menu Home, Contact Us, Products, About Us dll

FAKULTAS TEKNOLOGI INFORMASI29DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (5)  Index  Mirip seperti struktur flat, hanya saja pada struktur index menu atau halaman sudah tersusun berdasarkan index tertentu.  Arsitektur ini memudahkan pengunjung untuk mengakses suatu halaman.

FAKULTAS TEKNOLOGI INFORMASI30DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (6)  Hub-and-spoke / Daisy  Model ini cocok untuk situs yang memiliki beberapa alur, misalnya pada aplikasi situs . Pengunjung dapat mengakses halaman inbox (kotak surat) melalui beberapa cara, seperti setelah membaca isi surat, setelah mengirim surat atau saat sudah berhasil menyimpan contact.

FAKULTAS TEKNOLOGI INFORMASI31DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (7)  Strict hierarchy  Halaman-halaman web disusun dalam susunan parent-and-child (per kategori).  Arsitektur ini memungkinkan untuk mengakses suatu halaman melalui parent atau kategorinya.  Keuntungan dari model ini adalah pengunjung mudah dan cepat dalam mencari informasi atau halaman yang diinginkannya karena informasi disusun berdasarkan kategori tertentu.

FAKULTAS TEKNOLOGI INFORMASI32DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (8)  Multi-dimensional hierarchy  Pada dasarnya sama dengan arsitektur strict-hierarchy, hanya saja pada model ini, informasi memungkinkan diakses dari beberapa kategori sekaligus. Dengan kata lain, beberapa kategori dapat mengakses satu informasi (halaman) yang sama.

FAKULTAS TEKNOLOGI INFORMASI33DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Arsitektur Situs (9)  Search  Jika kita akan menambahkan form pencarian pada situs kita, maka jenis arsitektur web ini yang diterapkan. Informasi atau halaman dapat diakses oleh pengunjung setelah pengunjung tersebut melakukan pencarian melalui form (halaman) yang sudah disediakan. Tentu saja, informasi atau halaman yang ditampilkan sesuai dengan kata kunci (keyword) yang dimasukkan oleh penggunjung.

FAKULTAS TEKNOLOGI INFORMASI34DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS Terima Kasih Fakultas Teknologi Informasi Universitas Budi Luhur