Rekayasa Web Andronicus Riyono, M.T. Universitas Kristen Duta Wacana
Arsitektur Informasi, Navigasi, Layout, Warna Rekayasa Web Pertemuan 3
Membuat situs web, mulai dari mana?
Membangun gedung • Mana yang dilakukan lebih awal? • Membuat atapnya atau dindingnya? • Membuat dindingnya atau pondasinya? • Membuat pondasi atau rancangannya?
Proses Desain • Urutan kerja yang seharusnya diikuti • Buat rancangannya terlebih dahulu • Dengan rancangan, setiap langkah menuju hasil akhir menjadi lebih jelas
• Untuk situs web, dimulai dengan Information Architecture
Information Architecture
Information Architecture
Contoh: UKDW
Contoh: UKDW • Mengenal UKDW • Pendaftaran • Akademik • Seputar Kampus Top-level Navigation
Contoh: UKDW
• Mengenal UKDW • Visi dan Misi • Struktur Organisasi • Lokasi Kampus • Dosen dan Karyawan • Pendaftaran • Akademik • Seputar Kampus
}
sub-navigation atau isi halaman
Sketsa Halaman • Kertas dan Pensil • Layout dasar (paling sederhana) • Pertanyaan-pertanyaan semacam: • Apakah perlu gambar besar di atas? • Berapa kolom yang diperlukan? • Menu harus tampil di mana?
Sketsa: Top-level Navigation
Contoh Sketsa 1
Contoh Sketsa 2
Contoh Sketsa 3
Buat Prototype • Buat Struktur Halaman dengan XHTML • Tambahkan CSS dasar • Atur layout sesuai sketsa • Yang terpenting... buat isi (content) halaman web nya
• Scannable Text
Universitas Kristen Duta Wacana didirikan pada tahun 1985 sebagai pengembangan dari Sekolah Tinggi Theologia Duta Wacana. Sekolah Tinggi Theologia Duta Wacana didirikan pada tahun 1962 dan Sekolah Tinggi Theologia ini merupakan penggabungan dari Akademi Theologia Jogjakarta dan Sekolah Theologia Bale Wiyata, Malang. Sekolah Tinggi Theologia Duta Wacana ini dibentuk sebagai jawaban akan harapan gereja-gereja untuk meningkatan mutu pendidikan para pelayan jemaatnya melalui pendidikan tinggi yang setara dengan universitas. Karena itu sekolah Tinggi Theologia ini semakin meningkatkan kualitas dan pelayanannya, dengan mendirikan unit-unit pendukung. Diantaranya dengan mendirikan Pusat Penelitian dan Inovasi Pendidikan (PPIP) pada tahun 1975. Sekolah Tinggi Theologia Duta Wacana Sekolah Tinggi Theologia ini semakin hari semakin mendapat pengakuan dari pemerintah. Pengakuan pemerintah itu nyata dalam status yang semula hanya terdaftar, pada tahun 1983 meningkat menjadi status diakui. Untuk meningkatkan pengabdiannya kepada masyarakat maka pada tahun 1982 dibentuk Lembaga Pengabdian Masyarakat (LPM). Pada tahun 1982 ini pula STT Duta Wacana bergabung dalam The Assosiation for Theological Education in South East Asia (ATESEA) untuk lebih meningkatkan mutu pendidikannya. Kualitas Sekolah Tinggi Theologia Duta Wacana ini semakin mendapat pengakuan dunia international dengan menerima akreditasi terbaik di seluruh Asia Tenggara dari ATESEA. Dukungan tidak hanya datang dari pemerintah tetapi juga dari gereja Pengakuan gereja itu nampak dengan semakin banyaknya gereja yang menjadi pendukung Duta Wacana. Kalau pada awalnya sekolah Tinggi Theologia ini hanya di dukung oleh enam gereja saja yaitu: Gereja Kristen Jawa (GKJ), Gereja Kristen Indonesia Wilayah Jawa Tengah (GKI Jateng), Greja Kristen Jawi Wetan (GKJW), Gereja Kristen Indonesia Wilayah Jawa Timur (GKI Jatim), dan Gereja Injili Tanah Jawi (GITJ). Dukungan gereja semakin bertambah dengan bergabungnya Gereja Kristen Indonesia Wilayah Jawa Barat (GKI Jabar), Gereja Kristen Sumba (GKS), Gereja Kristen Muria Indonesia (GKMI), Gereja Kristen Protestan Bali (GKPB), Gereja Kristen Pasundan (GKP), Gereja Protestan Indonesia Barat (GPIB), Gereja Kristen Sumatera Bagian Selatan (GKSBS).
We don't read websites, we scan it first
Scannable Text • Judul-judul (headers) yang jelas • Paragraf-paragraf singkat • Gunakan cetak tebal dan miring untuk
penekanan (strong, emphasize) seperlunya
• Gunakan daftar (UL, OL, DL) bila perlu membuat suatu daftar
Proses Desain • Information Architecture • Navigation (berdasarkan IA) • Layout (XHTML + CSS) • Content (scannable text, images)
Sebelum membuat kode XHTML dan CSS • Memikirkan Tema (terkait isi dari situs) • Central Theme • Memikirkan Visual Metaphor • Warna • Layout • Visual Elements
Contoh Central Theme: situs web Mark
Contoh Interface Elements
Memilih Warna • Pengaruh warna
terhadap manusia
• Asosiasi warna
dengan konsepkonsep tertentu
• Harmoni warna
Contoh Asosiasi Warna • Hijau: Alami, Segar • Merah: Semangat, Panas • Biru: Tenang, Dingin
Harmoni Warna • Monochromatic • Analogous • Complementary • Split Complementary • Triadic
Layout • Berapa kolom? • 2 kolom? • 3 kolom? • 4 kolom? • 5 kolom?
SpaceCollective
• http://spacecollective.org/gallery/
5 columns!
Visual Elements
• Terkait dengan Visual Metaphor • Memperkuat keseluruhan tema
Tri-Win.com (mailing)
GetLondonReading
Diskusi Seputar Tugas 2
• Merancang situs web UKDW • Tantangan/kesulitan yang dihadapi
