web design
DESCRIPTION
Konsep web, desain web, dan komponen-komponennyaTRANSCRIPT
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Desain Halaman WebDiklat Pengelolaan Website Dinamis
Denpasar, 10 – 19 Juni 2013
Oleh:
Gde Sastrawangsa
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Definisi
Web Sebutan singkat dari World Wide Web (www) Sebuah sistem yang berjalan di internet untuk menampilkan informasi
yang diletakkan dalam dokumen-dokumen hypertext yang saling berhubungan
Halaman Web Dokumen hypertext yang berada dalam web, ditampilkan dengan
browser
Website Kumpulan halaman web yang berada dalam satu domain
Homepage Halaman utama sebuah website
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Desain Web
Desain web: Perencanaan dan pembuatan website
Termasuk di dalamnya : arsitektur informasi layout dan user interface struktur website dan navigasi gambar, font dan warna
Menggunakan prinsip-prinsip desain grafis dengan memperhatikan tujuan dari website tersebut
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Tujuan Desain Web (1)
Dari sisi pengunjung (visitor) Informatif dan mudah dibaca Mewakili obyek yang di-informasikan Estetika dan makna Navigasi yang jelas Ditampilkan dengan cepat Kompatibel dengan banyak browser Tanpa kesalahan teknis
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Tujuan Desain Web (2)
Dari sisi webmaster / designer Maintainable Search Engine friendly
Plus … Localization Aman Merangkul pengguna diffable/disabled Dapat ditampilkan/dibuka menggunakan berbagai media
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Prinsip Desain Web
Visitor centric
Tema yang sesuai
Berkomunikasi, bukan mendekorasi
Web Standard (referensi: W3C)
Keep it Simple
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Kenali Calon Visitor
Umur
Jenis kelamin
Suku / Ras
Agama
Technical Level
Kebangsaan
Bahasa
Political Affiliation
Pendidikan
Marital Status
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Mengapa Visitor Pergi?
Waktu loading lama
Tidak ada informasi yang berguna
Layout yang tidak baik
Kalimat / pengetikan salah (tidak baku)
Navigasi yang membingungkan
Link tidak dapat dibuka
Banyak Pop Ups
Error
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Layout
Web Layout : Tata letak elemen-elemen halaman web
Contoh elemen web: headlines navigation images textual content administrativa whitespace
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Elemen Web
Elemen yang tepat berada di tempat yang tepat
Elemen utama berhubungan dengan tujuan
Elemen tambahan untuk memperkuat elemen utama
Tentukan sebuah elemen untuk menjadi Point of Interest
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Atribut Layout
Align Vertical Horozontal
Width / Lebar Fixed Liquid
Kolom
Balance
Posisi Inline Float Fixed
Repetisi
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Typography
Seni dan teknik dalam mengatur bentuk teks/huruf
Membuat teks menjadi lebih bermakna
Meliputi: Pemilihan Font Font Family Ukuran Font Style Font Dekorasi Font
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Font Family
Serif terdapat ekor-ekor kecil di
setiap ujung huruf
Sans-serif tanpa-ekor
Script huruf-huruf melengkung
Monospace setiap huruf memiliki lebar
yang sama
Fantasy font diluar standard
Serif Times-New Roman
Sans-serif Arial
Script Monotype Corsiva
Monospace Courier
Fantasy Comic sans
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Warna
Additive Color (RGB)
Primary Colors Merah / Red (R) Hijau / Green (G) Biru / Blue (B)
Secondary Cyan (C) = G+B Magenta (M) = B+R Yellow (Y) = R+G
Tertiary Lime Turquose Ocean Violet Red-Magenta / Rose Orange
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Kode Warna
Format digital warna: 24 bit
Ditulis dalam 6 digit hexadecimal
Setiap Primary color ditulis dalam 2 digit hexadecimal
Jangkauan nilai: 00 sampai FF (256 level)
Format penulisan: # R R G G B B
Warna dihasilkan dari kombinasi kadar primary colors
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Simbol Warna (1)
Merah China: keberuntungan,
perayaan India: kemurnian South Africa: berkabung Russia: komunis Western: semangat,
bahaya, cinta, natal Indonesia: berani
Ungu Eastern: janda Western: royalti
Kuning China: makanan Egypt: berkabung Japan: keberanian India: pedagang Western: harapan,
bencana Indonesia: kemakmuran
Oranye Ireland: religi (Protestan) Western: kreativitas,
musim gugur
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Simbol Warna (2)
Biru Iran: spiritual Eastern: persahabatan Western: depresi,
sedih
Putih Eastern: kematian,
penguburan Western: pengantin,
malaikat, perdamaian Indonesia: suci
Hijau India: Islam Ireland: simbol
negara Western: musim
semi, kelahiran
Hitam China: anak laki-laki Western: kematian,
penguburan, death Indonesia: misterius
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Gambar
Positif Halaman web menjadi lebih menarik
Negatif Waktu loading lebih lambat
Buat ukuran gambar sekecil mungkin tanpa merusak kualitas gambar
Tentukan format yang tepat
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Navigasi
Sebagai penunjuk arah agar visitor tidak tersesat
Fasilitas “Search” sebagai jalan pintas (shortcut)
Prisip navigasi web Accessible Meaningfull Understandable Prevalent
Mengatur letak direktori akan membantu pembuatan navigasi
Manfaatkan halaman “404 – Not Found”
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Navigasi yang baik
Terlihat jelas pada halaman web
Mudah dipahami
Tidak menyesatkan
Konsisten di setiap halaman web
Menyediakan jalur alternatif
Sesuai dengan tujuan website
Mendukung tujuan dan perilaku pengguna
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Acessibility
Membuat halaman web dapat digunakan (usable) oleh orang diffable / disabled
Kelompok visitor berdasar kemampuan fisik yang harus diperhitungkan orang normal, menggunakan browser normal tuna netra, menggunakan screen readers tuna rungu, menggunakan browser tanpa suara tuna daksa, menggunakan keyboard/mouse khusus orang buta warna, menggunakan browser normal
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Halaman web yang accessible
Sediakan alternatif text untuk gambar dan description untuk video
Cantumkan (pada tag) bahasa yang digunakan dalam content
Hindari penggunaan navigasi suara, serahkan pada screen reader
Pastikan jika tanpa visual design, content masih dapat dimengerti
Gunakan warna yang tepat untuk visitor yang buta warna
Manfaatkan atribut accesskey untuk shortcut keyboard
Sediakan desain untuk berbagai device dan media
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Web Standard
W3C menstandarisasi pengembangan web
Fokus pada pengembangan di sisi client
HTML sebagai bahasa deskripsi kontennya
CSS sebagai pengontrol style
JavaScript sebagai pengontrol alur logika program
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Latar Belakang Web Standard
Browser wars
Loading halaman yang sangat lama
Sebuah halaman memiliki tampilan yang berbeda di dua browser berbeda
Code dibuat terpisah untuk browser yang berbeda
Isi dan style yang digabung, susah membaca isinya
Susah melakukan update
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
HTML dan CSS
HTML : HyperText Markup Language Bahasa markup untuk mendeskripsikan isi dari halaman
web Distandarisasi oleh W3C Versi terakhir : HTML 5 (draft, implementasi sebagian)
CSS : Cascading StyleSheet Bahasa untuk kontrol style pada halaman HTML Distandarisasi oleh W3C Versi terakhir : CSS 3
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Tools
HTML dan CSS menggunakan format teks, sehingga dapat dibuka / edit menggunakan teks editor umum
Web Development Tools populer: Adobe Dreamweaver (berbayar, OS: Win/Mac) CodeLobster (program gratis, plugin berbayar, OS: Win) Aptana Studio (gratis, OS: Win/Mac/Lin) Notepad++ (gratis, OS: Win) Coda (berbayar, OS: Mac) …dll
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013
Q & ATerima Kasih