Rekayasa WebAndronicus Riyono, M.T.

Universitas Kristen Duta Wacana

Arsitektur Informasi, Navigasi, Layout, Warna

Rekayasa WebPertemuan 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 denganInformation 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-navigationatau

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 konsep-konsep 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