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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
www.diveintohtml5.orgwww.diveintohtml5.org
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Mbah Google teman setia Anda :-)Mbah Google teman setia Anda :-)
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
gamecareerguide.comgamecareerguide.comfullstopdesign.co.ukfullstopdesign.co.uk
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Desain Web bukanlahDesain Web bukanlah
Desain bukuDesain buku Desain posterDesain poster Desain cetakDesain cetak Gambar ilustrasiGambar ilustrasi Desain game/videoDesain game/video
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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.
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Aspek Dasar Desain WebAspek Dasar Desain Web
ContentContent UsabilityUsability AppearanceAppearance StructureStructure
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Situs berita nomor satu di IndonesiaSitus berita nomor satu di Indonesia
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Situs berita yang isinya banyak dijadikan acuanSitus berita yang isinya banyak dijadikan acuan
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Informatifkah tampilan website kita?Informatifkah tampilan website kita?
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Informatif?Informatif?
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Mudahkah dalam bernavigasi dan mencari artikel?Mudahkah dalam bernavigasi dan mencari artikel?Nyamankah membacanya?Nyamankah membacanya?
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Apa pendapat Anda?Apa pendapat Anda?
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
AppearanceAppearance
Tampilan yang menarik, konsisten, Tampilan yang menarik, konsisten, profesional, dan relevanprofesional, dan relevan
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Menarikkah?Menarikkah?
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Lebih nyaman dan menarik mana dengan ini?Lebih nyaman dan menarik mana dengan ini?
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
StructureStructure
Organisasi website secara keseluruhanOrganisasi website secara keseluruhan
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Link Link channelchannel grup kompas.com grup kompas.com
Link internal kompas.comLink internal kompas.com
BERITA UTAMABERITA UTAMA
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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)
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Evolusi WebEvolusi 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)
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Evolusi WebEvolusi Web
TeksTeks GrafikGrafik AnimasiAnimasi SuaraSuara VideoVideo
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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?
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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 ™™))
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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)
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Perkakas untuk Membuat Perkakas untuk Membuat Website?Website?
Teks EditorTeks Editor NotepadNotepad Notepad++Notepad++ GEditGEdit
Pengolah GambarPengolah Gambar Adobe PhotoshopAdobe Photoshop GIMPGIMP
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
??
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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