03 - konsep dasar desain web
TRANSCRIPT
-
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
-
5/20/2018 03 - Konsep Dasar Desain Web
2/34
FAKULTAS TEKNOLOGI INFORMASI 2DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
KONSEP DASAR DESAIN WEB
PERTEMUAN 03
-
5/20/2018 03 - Konsep Dasar Desain Web
3/34
FAKULTAS TEKNOLOGI INFORMASI 3DESAIN DAN PEMROGRAMAN WEB 1PG1103 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
-
5/20/2018 03 - Konsep Dasar Desain Web
4/34
FAKULTAS TEKNOLOGI INFORMASI 4DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
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/20/2018 03 - Konsep Dasar Desain Web
5/34
FAKULTAS TEKNOLOGI INFORMASI 5DESAIN DAN PEMROGRAMAN WEB 1PG1103 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).
-
5/20/2018 03 - Konsep Dasar Desain Web
6/34
FAKULTAS TEKNOLOGI INFORMASI 6DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
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 %)
-
5/20/2018 03 - Konsep Dasar Desain Web
7/34
FAKULTAS TEKNOLOGI INFORMASI 7DESAIN DAN PEMROGRAMAN WEB 1PG1103 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 (buildingimage)
Usefulness. Utility/ fungsionalitas, teknologi yang tepat
Usability/ kemudahan penggunaan : waktu belajar,kecepatan kinerja, tingkat kesalahan, daya ingat dankepuasan subyektif
-
5/20/2018 03 - Konsep Dasar Desain Web
8/34
FAKULTAS TEKNOLOGI INFORMASI 8DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Pengembangan Situs Web
Content Creation
User Interface Design
Graphic/ Visual Design
Technology Planning
Web Authoring
Web Programming Multimedia Design
-
5/20/2018 03 - Konsep Dasar Desain Web
9/34
FAKULTAS TEKNOLOGI INFORMASI 9DESAIN DAN PEMROGRAMAN WEB 1PG1103 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
-
5/20/2018 03 - Konsep Dasar Desain Web
10/34
FAKULTAS TEKNOLOGI INFORMASI 10DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
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
-
5/20/2018 03 - Konsep Dasar Desain Web
11/34
FAKULTAS TEKNOLOGI INFORMASI 11DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Graphic / Visual Design
Tata letakgrid dan struktur
Konsistensiwarna, font, style
Kesederhanaan situstidak membingungkanuser
Optimasi file grafikformat file, web safe
colors
-
5/20/2018 03 - Konsep Dasar Desain Web
12/34
FAKULTAS TEKNOLOGI INFORMASI 12DESAIN DAN PEMROGRAMAN WEB 1PG1103 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
-
5/20/2018 03 - Konsep Dasar Desain Web
13/34
FAKULTAS TEKNOLOGI INFORMASI 13DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
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.
-
5/20/2018 03 - Konsep Dasar Desain Web
14/34
FAKULTAS TEKNOLOGI INFORMASI 14DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
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.
-
5/20/2018 03 - Konsep Dasar Desain Web
15/34
FAKULTAS TEKNOLOGI INFORMASI 15DESAIN DAN PEMROGRAMAN WEB 1PG1103 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.
-
5/20/2018 03 - Konsep Dasar Desain Web
16/34
FAKULTAS TEKNOLOGI INFORMASI 16DESAIN DAN PEMROGRAMAN WEB 1PG1103 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
-
5/20/2018 03 - Konsep Dasar Desain Web
17/34
FAKULTAS TEKNOLOGI INFORMASI 17DESAIN DAN PEMROGRAMAN WEB 1PG1103 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 Kuantitas7. Nyatakan Kebijaksanaan Anda Dengan Jelas [Privacy
Policy, Copyright, Disclaimer]
-
5/20/2018 03 - Konsep Dasar Desain Web
18/34
FAKULTAS TEKNOLOGI INFORMASI 18DESAIN DAN PEMROGRAMAN WEB 1PG1103 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).
-
5/20/2018 03 - Konsep Dasar Desain Web
19/34
FAKULTAS TEKNOLOGI INFORMASI 19DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Navigasi Situs (2)
List of contents
Merupakan jenis
navigasi dasar
menggunakan list-item.
Biasanya digunakan
sebagai daftar isi, atau
navigasi dalam content
situs.
-
5/20/2018 03 - Konsep Dasar Desain Web
20/34
FAKULTAS TEKNOLOGI INFORMASI 20DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
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.
-
5/20/2018 03 - Konsep Dasar Desain Web
21/34
FAKULTAS TEKNOLOGI INFORMASI 21DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Navigasi Situs (4)
Horizontal top bar
Tabs
2-level top (bar or tabs)
-
5/20/2018 03 - Konsep Dasar Desain Web
22/34
FAKULTAS TEKNOLOGI INFORMASI 22DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Navigasi Situs (5)
Top and side bars
Paging
-
5/20/2018 03 - Konsep Dasar Desain Web
23/34
FAKULTAS TEKNOLOGI INFORMASI 23DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Navigasi Situs (6)
Buttons bar with revealed drop-down
-
5/20/2018 03 - Konsep Dasar Desain Web
24/34
FAKULTAS TEKNOLOGI INFORMASI 24DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Navigasi Situs (7)
Multiple-level tree
nav
-
5/20/2018 03 - Konsep Dasar Desain Web
25/34
FAKULTAS TEKNOLOGI INFORMASI 25DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
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.
-
5/20/2018 03 - Konsep Dasar Desain Web
26/34
FAKULTAS TEKNOLOGI INFORMASI 26DESAIN DAN PEMROGRAMAN WEB 1PG1103 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.
-
5/20/2018 03 - Konsep Dasar Desain Web
27/34
FAKULTAS TEKNOLOGI INFORMASI 27DESAIN DAN PEMROGRAMAN WEB 1PG1103 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 dalamperawatan file (maintenance) karena hanya terdiri
dari satu halaman (file).
-
5/20/2018 03 - Konsep Dasar Desain Web
28/34
FAKULTAS TEKNOLOGI INFORMASI 28DESAIN DAN PEMROGRAMAN WEB 1PG1103 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
-
5/20/2018 03 - Konsep Dasar Desain Web
29/34
FAKULTAS TEKNOLOGI INFORMASI 29DESAIN DAN PEMROGRAMAN WEB 1PG1103 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.
-
5/20/2018 03 - Konsep Dasar Desain Web
30/34
FAKULTAS TEKNOLOGI INFORMASI 30DESAIN DAN PEMROGRAMAN WEB 1PG1103 SKS
Arsitektur Situs (6)
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.
-
5/20/2018 03 - Konsep Dasar Desain Web
31/34
FAKULTAS TEKNOLOGI INFORMASI 31DESAIN DAN PEMROGRAMAN WEB 1PG1103 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.
-
5/20/2018 03 - Konsep Dasar Desain Web
32/34
FAKULTAS TEKNOLOGI INFORMASI 32DESAIN DAN PEMROGRAMAN WEB 1PG1103 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.
-
5/20/2018 03 - Konsep Dasar Desain Web
33/34
FAKULTAS TEKNOLOGI INFORMASI 33DESAIN DAN PEMROGRAMAN WEB 1PG1103 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.
-
5/20/2018 03 - Konsep Dasar Desain Web
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/