01 - perkenalan desain web

Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Desain Web IDesain Web IPertemuan ke-1Pertemuan ke-1



Tata TertibTata Tertib

Waktu: Selasa, 08.00 – 09.30 WIBWaktu: Selasa, 08.00 – 09.30 WIB Toleransi: 10 menitToleransi: 10 menit Lewat 10 menit = absenLewat 10 menit = absen 3 x absen = tidak lulus3 x absen = tidak lulus

Pakaian rapihPakaian rapih SepatuSepatu



Buku AcuanBuku Acuan

HTML 5 for Web Designer, Jeremy Keith, A Book HTML 5 for Web Designer, Jeremy Keith, A Book Apart, 2010Apart, 2010

HTML 5: Up and Running, Mark Pilgrim, O'Reilly HTML 5: Up and Running, Mark Pilgrim, O'Reilly Media; 1 edition (August 17, 2010)Media; 1 edition (August 17, 2010)

HTML 5 & CSS 3 Develop with Tomorrow's HTML 5 & CSS 3 Develop with Tomorrow's Standards Today, Brian P Hogan, Pragmatic Standards Today, Brian P Hogan, Pragmatic Bookshelf, 2011Bookshelf, 2011

Introducing HTML 5, Bruce Lawson and Remy Introducing HTML 5, Bruce Lawson and Remy Sharp, New Riders, 2011Sharp, New Riders, 2011



www.diveintohtml5.orgwww.diveintohtml5.org



Mbah Google teman setia Anda :-)Mbah Google teman setia Anda :-)



gamecareerguide.comgamecareerguide.comfullstopdesign.co.ukfullstopdesign.co.uk



Desain Web bukanlahDesain Web bukanlah

Desain bukuDesain buku Desain posterDesain poster Desain cetakDesain cetak Gambar ilustrasiGambar ilustrasi Desain game/videoDesain game/video



Apa itu Desain Web?Apa itu Desain Web?

Desain web adalah penciptaan lingkungan Desain web adalah penciptaan lingkungan digital berupa web dalam mendorong digital berupa web dalam mendorong dan menfasilitasi kegiatan manusia.dan menfasilitasi kegiatan manusia.



Aspek Dasar Desain WebAspek Dasar Desain Web

ContentContent UsabilityUsability AppearanceAppearance StructureStructure



Content/IsiContent/Isi

Isi yang akan ditampilkan pada suatu Isi yang akan ditampilkan pada suatu WebsiteWebsite

Website yang memiliki isi menarik akan Website yang memiliki isi menarik akan ramai dikunjungiramai dikunjungi

Isi website yang menarik akan membuat Isi website yang menarik akan membuat orang rajin mengunjunginyaorang rajin mengunjunginya



Situs berita nomor satu di IndonesiaSitus berita nomor satu di Indonesia



Situs berita yang isinya banyak dijadikan acuanSitus berita yang isinya banyak dijadikan acuan



UsabilityUsability

Website harus ramah bagi pengunjungWebsite harus ramah bagi pengunjung Antar muka yang mudah dimengertiAntar muka yang mudah dimengerti Navigasi yang sederhanaNavigasi yang sederhana Fitur dan isi yang ada di website bisa Fitur dan isi yang ada di website bisa

diperoleh oleh pengunjungdiperoleh oleh pengunjung



Informatifkah tampilan website kita?Informatifkah tampilan website kita?



Informatif?Informatif?



Mudahkah dalam bernavigasi dan mencari artikel?Mudahkah dalam bernavigasi dan mencari artikel?Nyamankah membacanya?Nyamankah membacanya?



Apa pendapat Anda?Apa pendapat Anda?



AppearanceAppearance

Tampilan yang menarik, konsisten, Tampilan yang menarik, konsisten, profesional, dan relevanprofesional, dan relevan



Menarikkah?Menarikkah?



Lebih nyaman dan menarik mana dengan ini?Lebih nyaman dan menarik mana dengan ini?



StructureStructure

Organisasi website secara keseluruhanOrganisasi website secara keseluruhan



Link Link channelchannel grup kompas.com grup kompas.com

Link internal kompas.comLink internal kompas.com

BERITA UTAMABERITA UTAMA



Evolusi WebEvolusi Web

Spesifikasi HTML pertama oleh Tim Spesifikasi HTML pertama oleh Tim Berners-Lee (Penemu World Wide Web)Berners-Lee (Penemu World Wide Web)




HTML 2.0 (24 November 1995)HTML 2.0 (24 November 1995) HTML 3.2 (Januari 1997)HTML 3.2 (Januari 1997) HTML 4.0 (Desember 1997)HTML 4.0 (Desember 1997) HTML 4.01 (Desember 1999)HTML 4.01 (Desember 1999) XHTML 1.0 (Januari 200)XHTML 1.0 (Januari 200) XHTML 1.1 (Mei 2001)XHTML 1.1 (Mei 2001) HTML 5.0 (Januari 2008)HTML 5.0 (Januari 2008)




TeksTeks GrafikGrafik AnimasiAnimasi SuaraSuara VideoVideo



Profesi yang terlibat dalam Profesi yang terlibat dalam pembuatan Webpembuatan Web

Pengembang Pengembang aplikasiaplikasi

Desainer WebDesainer Web WebmasterWebmaster Manajer ProyekManajer Proyek Desainer Antar Desainer Antar

MukaMuka

Penulis, editorPenulis, editor Ahli Ahli usability usability WebWeb Direktur seniDirektur seni



Macam-macam WebsiteMacam-macam Website

Situs perusahaanSitus perusahaan Perdagangan Perdagangan

Elektronik (e-Elektronik (e-Commerce)Commerce)

Promosi FilmPromosi Film Situs video gameSitus video game PortofolioPortofolio Situs pendidikanSitus pendidikan

BlogsBlogs Situs web khusus Situs web khusus

perangkat perangkat mobilemobile Aplikasi berbasis Aplikasi berbasis

webweb



Perang Perambah Web?Perang Perambah Web?

Netscape vs Microsoft Internet ExplorerNetscape vs Microsoft Internet Explorer Masing-masing menggunakan tag yang Masing-masing menggunakan tag yang

khususkhusus Tidak ada standarTidak ada standar Membuat pusing web desainer karena Membuat pusing web desainer karena

harus membuat banyak versiharus membuat banyak versi Internet Explorer, Netscape, OperaInternet Explorer, Netscape, Opera



Standardisasi Web?Standardisasi Web?

Tidak ada standar khususnya komponen Tidak ada standar khususnya komponen untuk menampilkan aplikasi yang belum untuk menampilkan aplikasi yang belum didukung oleh HTMLdidukung oleh HTML

FLASH Animasi→FLASH Animasi→ Java Applet Aplikasi web based →Java Applet Aplikasi web based →

termasuk animasitermasuk animasi Video?Video? Musik?Musik?



Standardisasi WebStandardisasi Web

Mengacu pada World Wide Web Mengacu pada World Wide Web Consortium (W3C) teknologi browser Consortium (W3C) teknologi browser harus mengikuti spesifikasi yang telah harus mengikuti spesifikasi yang telah ditentukan:ditentukan:

Struktur HTML→Struktur HTML→ Presentasi/style CSS→Presentasi/style CSS→ Behaviour JavaScript (JavaScript bukan →Behaviour JavaScript (JavaScript bukan →

Java Java ™™))



Standardisasi WebStandardisasi Web

Memudahkan pengembang dan desain Memudahkan pengembang dan desain web untuk membuat websiteweb untuk membuat website

Mempercepat pengembangan website Mempercepat pengembangan website karena tidak perlu dibuat beberapa versikarena tidak perlu dibuat beberapa versi

Teknologi yang sama membuat orang Teknologi yang sama membuat orang lebih cepat menguasailebih cepat menguasai

Terbuka tidak tergantung terhadap suatu Terbuka tidak tergantung terhadap suatu vendor (Microsoft atau Apple)vendor (Microsoft atau Apple)



Perkakas untuk Membuat Perkakas untuk Membuat Website?Website?

Teks EditorTeks Editor NotepadNotepad Notepad++Notepad++ GEditGEdit

Pengolah GambarPengolah Gambar Adobe PhotoshopAdobe Photoshop GIMPGIMP



Tahap Menyusun WebTahap Menyusun Web

Definisikan secara jelas tujuan penyusunan Definisikan secara jelas tujuan penyusunan halaman webhalaman web

Buat isi yang menarikBuat isi yang menarik Buat desain yang menarik, mudah Buat desain yang menarik, mudah

dimengerti, informatifdimengerti, informatif



Membuat Isi WebMembuat Isi Web

Tentukan tujuanTentukan tujuan Tentukan target pengunjungTentukan target pengunjung

Jaga agar isi web berisi informasi yang terus Jaga agar isi web berisi informasi yang terus diperbaharuidiperbaharui

Nyatakan Nyatakan privacy policyprivacy policy, , copyrightcopyright, , disclaimerdisclaimer Tips:Tips:

Gunakan bahasa yang sederhana, singkat, dan jelasGunakan bahasa yang sederhana, singkat, dan jelas Hindari “Hindari “click hereclick here”, “”, “under constructionunder construction”” Jangan paksa pengunjung menghafal navigasiJangan paksa pengunjung menghafal navigasi



Desain Antar MukaDesain Antar Muka

Perhatikan Perhatikan usabilityusability Percabangan – struktur yang berarti, tidak Percabangan – struktur yang berarti, tidak

berlebihan, tidak menggunakan frameberlebihan, tidak menggunakan frame Akses universal – platform, perambah, Akses universal – platform, perambah,

kecepatan akses, resolusi layar, warnakecepatan akses, resolusi layar, warna Dukungan navigasiDukungan navigasi



Desain Antar MukaDesain Antar Muka

Tata letakTata letak Konsistensi – warna, font, styleKonsistensi – warna, font, style Tidak membingungkan pengunjungTidak membingungkan pengunjung Optimasi berkas gambar – format file (png, Optimasi berkas gambar – format file (png,

jpg), jpg), web safe colourweb safe colourhttp://en.wikipedia.org/wiki/Web_colorshttp://en.wikipedia.org/wiki/Web_colors



Desain NavigasiDesain Navigasi

Jangan terlalu bergantung pada gambarJangan terlalu bergantung pada gambar Halaman Halaman homehome harus mudah ditemukan harus mudah ditemukan Integrasikan fasilitas navigasi dengan isiIntegrasikan fasilitas navigasi dengan isi Hindari penggunaan Hindari penggunaan frameframe



??



ReferensiReferensi

(1)(1)Achmad Solihin, Konsep Dasar Desain Achmad Solihin, Konsep Dasar Desain Web, 26 Januari 2011, Web, 26 Januari 2011, http://www.slideshare.net/achmatim/kohttp://www.slideshare.net/achmatim/konsep-dasar-desain-web nsep-dasar-desain-web



KreditKredit

Didats TriadiDidats Triadi Desainer web dan pengembang aplikasi Desainer web dan pengembang aplikasi

Indonesia yang bekerja dan tinggal di Indonesia yang bekerja dan tinggal di KuwaitKuwait

http://didats.nethttp://didats.net AndrayogiAndrayogi

Desainer web Indonesia berbasis di JakartaDesainer web Indonesia berbasis di Jakarta http://andrastudio.com http://andrastudio.com

01 - perkenalan desain web

Education