Web Design

Date post:01-Jul-2015
Category:
View:98 times
Download:0 times
Share this document with a friend
Description:
Konsep web, desain web, dan komponen-komponennya
Transcript:
  • 1. Desain Halaman WebDiklat Pengelolaan Website DinamisDenpasar, 10 19 Juni 2013Oleh:Gde SastrawangsaDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

2. Definisi Web Sebutan singkat dari World Wide Web (www) Sebuah sistem yang berjalan di internet untuk menampilkan informasiyang diletakkan dalam dokumen-dokumen hypertext yang salingberhubungan Halaman Web Dokumen hypertext yang berada dalam web, ditampilkan denganbrowser Website Kumpulan halaman web yang berada dalam satu domain Homepage Halaman utama sebuah websiteDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 3. 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 denganmemperhatikan tujuan dari website tersebutDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 4. 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 teknisDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 5. Tujuan Desain Web (2) Dari sisi webmaster / designer Maintainable Search Engine friendly Plus Localization Aman Merangkul pengguna diffable/disabled Dapat ditampilkan/dibuka menggunakan berbagai mediaDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 6. Prinsip Desain Web Visitor centric Tema yang sesuai Berkomunikasi, bukan mendekorasi Web Standard (referensi: W3C) Keep it SimpleDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 7. Kenali Calon Visitor Umur Jenis kelamin Suku / Ras Agama Technical LevelDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 Kebangsaan Bahasa Political Affiliation Pendidikan Marital Status 8. 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 ErrorDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 9. Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 10. Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 11. Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 12. Layout Web Layout : Tata letak elemen-elemen halaman web Contoh elemen web: headlines navigation images textual content administrativa whitespaceDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 13. 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 InterestDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 14. Atribut Layout Align Vertical Horozontal Width / Lebar Fixed Liquid KolomDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 Balance Posisi Inline Float Fixed Repetisi 15. Typography Seni dan teknik dalam mengatur bentuk teks/huruf Membuat teks menjadi lebih bermakna Meliputi: Pemilihan Font Font Family Ukuran Font Style Font Dekorasi FontDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 16. Font Family Serif terdapat ekor-ekor kecil disetiap ujung huruf Sans-serif tanpa-ekor Script huruf-huruf melengkung Monospace setiap huruf memiliki lebaryang sama Fantasy font diluar standardDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 Serif Times-New Roman Sans-serif Arial Script Monotype Corsiva Monospace Courier Fantasy Comic sans 17. 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+GDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 Tertiary Lime Turquose Ocean Violet Red-Magenta / Rose Orange 18. Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 19. 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 colorsDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 20. 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: royaltiDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 Kuning China: makanan Egypt: berkabung Japan: keberanian India: pedagang Western: harapan,bencana Indonesia: kemakmuran Oranye Ireland: religi (Protestan) Western: kreativitas,musim gugur 21. Simbol Warna (2) Biru Iran: spiritual Eastern: persahabatan Western: depresi, sedih Putih Eastern: kematian,penguburan Western: pengantin,malaikat, perdamaian Indonesia: suciDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 Hijau India: Islam Ireland: simbol negara Western: musim semi,kelahiran Hitam China: anak laki-laki Western: kematian,penguburan, death Indonesia: misterius 22. Gambar Positif Halaman web menjadi lebih menarik Negatif Waktu loading lebih lambat Buat ukuran gambar sekecil mungkin tanpa merusakkualitas gambar Tentukan format yang tepatDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 23. 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 pembuatannavigasi Manfaatkan halaman 404 Not FoundDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 24. 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 penggunaDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 25. Acessibility Membuat halaman web dapat digunakan (usable) olehorang diffable / disabled Kelompok visitor berdasar kemampuan fisik yang harusdiperhitungkan 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 normalDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 26. 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 mediaDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 27. 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 programDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 28. Latar Belakang Web Standard Browser wars Loading halaman yang sangat lama Sebuah halaman memiliki tampilan yang berbeda didua browser berbeda Code dibuat terpisah untuk browser yang berbeda Isi dan style yang digabung, susah membaca isinya Susah melakukan updateDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 29. 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 3Diklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 30. Tools HTML dan CSS menggunakan format teks, sehinggadapat 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) dllDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013 31. Q & ATerima KasihDiklat Pengelolaan Website Dinamis - Denpasar, 10-19 Juni 2013

Click here to load reader

Embed Size (px)
Recommended