Materi Mata Kuliah Desain Web

Berikut adalah materi matakuliah Desain Web PTIIK Universitas Brawijaya tahun akademik 2012/2013. Kelas hari Senin 18.40-21.10 WIB, dan hari Selasa 9.30-12.00 WIB. Bagi mahasiswa PTIIK yang mengambil matakuliah ini silakan untuk mem-bookmark halaman ini untuk memudahkan dalam mengakses halaman ini di lain waktu.

File-file yang dapat diunduh untuk matakuliah Desain Web ini adalah sebagai berikut:

  • Desain Web-01-Konsep, Konteks, Content, Prinsip Desain
  • Tugas 01
    Kumpulkan content yang dapat digunakan untuk membuat website pribadi (personal website). Content berupa softcopy dalam bentuk teks atau dokumen Word, foto-foto dan gambar-gambar dalam format JPEG, GIF, atau PNG.
    Pelajari model sistem grid 960.
  • Tugas 02
    Susunlah content website pribadi kedalam kelompok-kelompok yang bersesuaian, gambarkan dalam bentuk tree diagram sebagai sitemap. Kemudian buat layout dan komposisi content untuk tiap halaman sesuai dengan content halaman tersebut. Buat diagram relasi antar halaman web yang saling berkaitan.
    Tips: Gunakan wireframing tools Pencil, yang dapat di-download di pencil.evolus.vn
  • Desain-Web-02-HTML5 dan CSS3
  • Tugas 03 Kelas SI-A, Senin 8 Oktober 2012, 18:40 WIB:
    Buatlah sebuah halaman website dalam format dokumen HTML5.
    Dokumen tersebut berisi sebuah perkenalan diri Anda masing-masing dan setidaknya berisi sebuah foto, nama, dan NIM, serta 3 buah link ke situs favorit Anda masing-masing.
    Gunakan CSS dan sistem grid 960 untuk mendesain halaman web tersebut.
    Kirimkan tugas dalam bentuk file .zip yang berisi seluruh file yang digunakan melalui email ke aryo_dot_pinandito_at_gmail_dot_com . ganti _at_ dengan ‘@’ dan ganti _dot_ dengan titik ‘.’ tanpa tanda petik.
    Tugas yang dikirim paling lambat diterima hari Selasa, 9 Oktober 2012, pukul 09:00
    Presensi kehadiran untuk ditandatangani malam ini, Senin 8 Oktober 2012 silakan diambil di bagian pengajaran/rekording.
  • Tugas 03 Kelas SI-B, Senin 9 Oktober 2012, 09:30 WIB:
    Serupa dengan Tugas 03 Kelas SI-A, hanya saja dokumen HTML yang dibuat berisi sebuah review dari produk (bebas), setidaknya berisi sebuah foto produk, nama produk, dan deskripsi produk. Berikan 3 buah link ke situs produk lain yang serupa. Tambahkan nama, dan NIM Anda masing-masing sebagai keterangan penemu/desainer produk yang Anda review tersebut.
    Gunakan CSS dan sistem grid 960 untuk mendesain halaman web tersebut.
    Kirimkan tugas dalam bentuk file .zip yang berisi seluruh file yang digunakan melalui email ke aryo_dot_pinandito_at_gmail_dot_com . ganti _at_ dengan ‘@’ dan ganti _dot_ dengan titik ‘.’ tanpa tanda petik.
    Tugas yang dikirim paling lambat diterima hari Selasa, 9 Oktober 2012, pukul 21:00
    Presensi kehadiran untuk ditandatangani pagi ini, Selasa 9 Oktober 2012 silakan diambil di bagian pengajaran/rekording.
  • Desain-Web-03-DOM-Javascript  (.pptx)
    companion file for the lecture: DOM-Javascript (.zip)
  • Desain-Web-04-Color and Typography (.pptx, 3.5MB)
  • Tugas Color and Typography:
    Buatlah sebuah doodle, seperti Google Doodle. Gunakan konsep typography dan warna yang telah diajarkan. Teks yang didesain “doodle”-nya adalah nama atau nickname kalian masing-masing. Warna, aksen, aksesories, dan font yang digunakan bebas. Ukuran gambar doodle yang dibuat berukuran 275px x 95px.
    Tugas ini untuk kelas A dikumpulkan tanggal 3 Desember 2012, dan Kelas B dikumpulkan tanggal 4 Desember 2012 pada saat perkuliahan berlangsung.
    Tips: Gunakan software Adobe Photoshop atau Adobe Illustrator dalam membuat doodle ini.
  • Desain Web 05: Desain-Web-05-jQuery Javascript Framework  (.pptx 847kB)
    Offline Chat – Companion files in jQuery lectures (.zip 38kB) 

13 thoughts on “Materi Mata Kuliah Desain Web

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image

*

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>