03 - Konsep Dasar Desain Web

5/20/2018 03 - Konsep Dasar Desain Web

1/34

FAKULTAS TEKNOLOGI INFORMASI 1DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS

2009 Fakultas Teknologi Informasi Universitas Budi Luhur

Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260

Website: http://fti.bl.ac.id Email: [email protected]

Desain dan

Pemrograman Web 1PG1103 SKS


2/34


KONSEP DASAR DESAIN WEB

PERTEMUAN 03


3/34


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


4/34


Penyusunan Halaman Web

Berikut ini beberapa langkah yang dapat dilakukansehingga penyusunan halaman web lebih efektif,

antara lain :

Definisikan secara jelas tujuan penyusunanhalaman web

Buatlah (content) yang menarik untuk

disampaikan ataupun didiskusikan.

Buatlah halaman web sedemikian rupa sehingga

para pengunjung dirayu dan ditantang untuk

kembali lagi


5/34


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


6/34


What is Web Design?

Definition :

Web design is the process of creating experiences forusers of the web.

Web design refers to the process of conceptualizingand planning the experiences for visitors as theyinteract with the information and activities on the site

Situs Web yang baik Design (50 %)

Usefulness (50 %)


7/34


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 (buildingimage)

Usefulness. Utility/ fungsionalitas, teknologi yang tepat

Usability/ kemudahan penggunaan : waktu belajar,kecepatan kinerja, tingkat kesalahan, daya ingat dankepuasan subyektif


8/34


Pengembangan Situs Web

Content Creation

User Interface Design

Graphic/ Visual Design

Technology Planning

Web Authoring

Web Programming Multimedia Design


9/34


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


10/34


User Interface Design

Perhatikan usability

Beberapa hal untuk mencapai usability

Percabanganstruktur yang berarti, tidak

berlebihan, tidak menggunakan frame

Kekompakan situshindari halaman terlalu

panjang, horizontal scrolling

Akses universalplatform, browser, kecepatanakses, resolusi layar, warna

Dukungan navigasi


11/34


Graphic / Visual Design

Tata letakgrid dan struktur

Konsistensiwarna, font, style

Kesederhanaan situstidak membingungkanuser

Optimasi file grafikformat file, web safe

colors


12/34


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


13/34


Informasi Pada Halaman Web

Beberapa situs web terdiri dari ribuan halaman web, beberapa lagihanya 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 navigasihendaknya 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 janganmengganggu atau membuat bosan pengunjung.

Proporsi yang baik diperlukan untuk mengatur antara kemudahan

akses dan kecepatanakses dengan kelangsungansitus web.


14/34


Nilai Tambah (1)

Animasi dan Gambar

Banyak situs menggunakan animasidan gambaruntuk

menarik pengunjung. Namun hati-hati!Jika terlalu banyak

justru akan membuat pengunjung terganggu

Pertimbangkan masalah bandwidth (waktu download)dan

kompatibilitasbrowser.

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.


15/34


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.


16/34


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


17/34


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 Kuantitas7. Nyatakan Kebijaksanaan Anda Dengan Jelas [Privacy

Policy, Copyright, Disclaimer]


18/34


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


19/34


Navigasi Situs (2)

List of contents

Merupakan jenis

navigasi dasar

menggunakan list-item.

Biasanya digunakan

sebagai daftar isi, atau

navigasi dalam content

situs.


20/34


Navigasi Situs (3)

Breadcrumb trail

Umumnya digunakan untuk memberikan

informasi ke pengunjung dimana dia berada dan

juga berguna untuk mempermudah pengunjungjika akan kembali ke halaman awal.

Digunakan jika situs memiliki content (isi) yang

cukup panjang.


21/34


Navigasi Situs (4)

Horizontal top bar

Tabs

2-level top (bar or tabs)


22/34


Navigasi Situs (5)

Top and side bars

Paging


23/34


Navigasi Situs (6)

Buttons bar with revealed drop-down


24/34


Navigasi Situs (7)

Multiple-level tree

nav


25/34


Arsitektur Situs (1)

Arsitektur situs menentukan bagaimana situs

dan halaman-halaman di dalamnya

diorganisasikan, dinamai, dan saling

dihubungkan (linked) untuk mempermudahproses browsing dan pencarian informasi oleh

pengunjung.


26/34



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.


27/34



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 dalamperawatan file (maintenance) karena hanya terdiri

dari satu halaman (file).


28/34



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


29/34



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.


30/34



Hub-and-spoke / Daisy

Model ini cocok untuk situs yang memiliki beberapa alur,

misalnya pada aplikasi situs email. Pengunjung dapat

mengakses halaman inbox (kotak surat) melalui beberapa

cara, seperti setelah membaca isi surat, setelah mengirim

surat atau saat sudah berhasil menyimpan contact.


31/34



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.


32/34



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.


33/34



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.


34/34

FAKULTAS TEKNOLOGI INFORMASI 34DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Terima Kasih

Fakultas Teknologi Informasi

Universitas Budi Luhur

http://fti.bl.ac.id
http://fti.bl.ac.id/http://fti.bl.ac.id/

Documents

03 - Konsep Dasar Desain Web