web design

31
Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 Desain Halaman Web Diklat Pengelolaan Website Dinamis Denpasar, 10 – 19 Juni 2013 Oleh: Gde Sastrawangsa

Upload: gde-sastrawangsa

Post on 01-Jul-2015

100 views

Category:

Internet


1 download

DESCRIPTION

Konsep web, desain web, dan komponen-komponennya

TRANSCRIPT

Page 1: Web Design

Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

Desain Halaman WebDiklat Pengelolaan Website Dinamis

Denpasar, 10 – 19 Juni 2013

Oleh:

Gde Sastrawangsa

Page 2: Web Design

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

Page 3: Web Design

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

Page 4: Web Design

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

Page 5: Web Design

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

Page 6: Web Design

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

Page 7: Web Design

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

Page 8: Web Design

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

Page 9: Web Design

Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

Page 10: Web Design

Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

Page 11: Web Design

Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

Page 12: Web Design

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

Page 13: Web Design

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

Page 14: Web Design

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

Page 15: Web Design

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

Page 16: Web Design

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

Page 17: Web Design

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

Page 18: Web Design

Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

Page 19: Web Design

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

Page 20: Web Design

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

Page 21: Web Design

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

Page 22: Web Design

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

Page 23: Web Design

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”

Page 24: Web Design

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

Page 25: Web Design

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

Page 26: Web Design

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

Page 27: Web Design

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

Page 28: Web Design

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

Page 29: Web Design

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

Page 30: Web Design

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

Page 31: Web Design

Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

Q & ATerima Kasih