Desain web

1. RIZKI MULIONO
Chapter 3

2. Buatlah Layout seperti ini

3.  Layout situs adalah tata letak komponen halaman situs web.
 Layout situs yang baik akan menjadikan situs baik juga.
 Layout situs yang baik harus mendukung tujuan pembuatan
situs itu sendiri.
Layout diperlukan untuk menunjukkan ukuran yang tepat,
posisi, desain, dan lokasi dari segala sesuatu disetiap adegan.
Ada dua jenis layout, yaitu:
1. layout latar belakang/tata letak background mendefinisikan
pengaturan dan desain hanya latar belakang (segala sesuatu
yang tidak bergerak);
2. layout karakter (satu atau lebih tiap adegan) menunjukkan
semua key-pose karakter pada latar belakang itu.

4.  Layout Web harus didasarkan dengan tema dan isi dari web
 Layout dibuat simple, menarik dan interaktif.
 Layout berhubungan dengan tema, target pengunjung (range),
jenis huruf, warna, halaman apa saja, gambar atau video

5.  Desain layout suatu halaman web meliputi penyusunan:
 pembagian tempat pada halaman (whitespace)
 pengaturan jarak spasi
 pengelompokan teks dan grafik
 serta penekanan pada suatu bagian tertentu

6. • Top Index : digunakan untuk menampilkan link yang banyak ke situs lain,
seperti search engine
• Bottom Index : Biasanya digunakan apabila isi dari halaman banyak
berhubungan dengan topik tunggal
• Left Index : Digunakan untuk layar dengan resolusi yang lebar sehingga
mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan
penyajian pada halaman utama
• Layout Split : Merupakan model yang banyak dipakai, karena terjaga
keseimbangan dalam halaman web
• Alternating Index: digunakan untuk halaman yang banyak menampilkan
grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga,
jumlah, dan lain – lain.

13.  http://www.csszengarden.com/050/

14.  Prinsip dasar teknik layouting, yaitu:
 1. Sequence adalah urutan perhatian yang digunakan dalam
layout.
 2. Emphasis adalah teknik memberikan penekanan tertentu
pada layout.
 3. Balance : teknik mengatur keseimbangan pada layout
 4. Unity : menciptakan kesatuan secara keseluruhan

19.  Navigasi merupakan struktur atau alur hubungan (rantai
kerja) dari beberapa area yang berbeda dan dapat membantu
mengorganisasikan seluruh halaman dalam Website.

20.  1. Struktur Navigasi Linier
 2. Struktur Navigasi Non-Linier

21.  3. Struktur Navigasi Hirarki
 4. Struktur Navigasi Campuran
1
2 3
1
2
3
5
6
7 8
4

22. 1. Tentukan Tema Dasar
2. Tentukan target atau visitornya
3. Tentukan jenis font, warna dominan yang sesuai dengan tema
4. Cari bahan gambar yang sesuai dengan tema
5. Tentukan Layouting Web yang akan digunakan (emphasis,
sequence, balance, unity)
6. Tentukan Model Layoutnya (top, bottom, left, right, split,
alternative, kombinasi apa saja)
7. Per Kelompok 3Orang
8. 2 minggu. Harus cantik.

23. 1. Tentukan Tema Dasar
2. Tentukan target atau visitornya
3. Tentukan jenis font, warna dominan yang sesuai dengan tema
4. Cari bahan gambar yang sesuai dengan tema
5. Tentukan Layouting Web yang akan digunakan
6. Tentukan Model Layoutnya
Nb : Kelompok Lain dan dosen boleh bertanya dan mengkritik