DESAIN WEB

L AY O U T

Presented by
ULFA KHOIRUNISA, S.Pd.
LAY OUT
• Sketsa rancangan awal untuk menggambarkan organisasi
unsur-unsur desain grafis.

• Tujuannya :
Agar unsur – unsur grafis yang disertakan dalam
sebuah desain menjadi media komunikasi visual yang
komunikatif, estetik atau indah, menarik perhatian dan
mendukung terwujudnya tujuan pembuatan desain itu
sendiri.
DASAR LAY OUT WEBSITE
HEADER
Elemen yang berisi judul dan penjelasan lain dokumen.
Biasanya elemen ini diisikan dengan logo website, menu-menu
global (seperti login dan logout), maupun nama halaman yang
sedang ditampilkan.
NAVIGATION
Elemen yang memberikan akses navigasi ke halaman-halaman
lain dalam web.
SIDE BAR
Elemen pendukung konten, dapat berupa pembantu navigasi
konten, ataupun berbagai hal lain seperti daftar konten lain, iklan,
atau menu tambahan.

Sidebar dapat berada di kiri atau kanan konten, atau bahkan di

kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.
Sebaiknya diletakkan disebelah kiri dari Konten.
KONTEN / ISI
Elemen yang merupakan isi utama dari dokumen web.
Pengguna biasanya datang ke web untuk melihat teks yang berada
pada bagian ini.
FOOTER
Elemen yang merupakan penutup dari website, yang dapat saja
berisi informasi lain tentang website, seperti lisensi pengunaan,
sitemap, ataupun link ke website lain.
ELEMEN
PENTING DESAIN
WEB
Lay Out
Susunan lay out paling umum adalah atas-bawah-kiri-kanan.
• Buat susunan atau aliran informasi yang mudah diikuti oleh mata
pembaca
• Susun elemen berdasarkan skala prioritas dari paling penting →
penting → kurang penting
• Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka
letakkan main post di sebelah kanan sedangkan sidebar di sebelah
kiri
White Space
• Berguna untuk membantu mata
manusia mengorganisasi data.
• Berfungsi sebagai separator
untuk setiap elemen desain.
• Memberi fokus terhadap elemen
yang ingin diutamakan.
• Memberi kesan desain yang
lebih bersih .
• Menciptakan layout yang lebih
seimbang dan harmonis.
• Meningkatkan keterbacaan teks.

• Gunakan ruang kosong dengan

jarak yang sama antara satu
elemen dengan elemen lainnya.
Jenis Huruf
Ketika membaca di layar, mata manusia lebih cepat lelah daripada ketika membaca di
atas kertas. Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web

1. Serif memberikan kesan klasik, resmi, dan elegan. Biasanya digunakan pada
Times
buku, surat kabar, dan konten formal atau semi formal. Contoh:
New Roman (TNR), Garamond, Georgia, Cambria.
2. Sans Serif adalah huruf yang paling cocok untuk digunakan karena memiliki
tingkat readibility yang lebih tinggi di layar komputer. Contoh: Arial,
Trebuchet, Verdana.
Jenis Huruf
3. Script memiliki banyak sekali variasi (brush, handwriting, kaligrafi, dll).
Karena karakternya yang seperti huruf tegak bersambung, jenis huruf script
lebih sulit dibaca di layar. Contoh : Comic Sans, Brush Script,
Forte, Mistral, Showcard Gothic
4. Dekoratif, sama seperti script, huruf dekoratif juga memiliki banyak sekali
variasi dari mulai yang betul-betul alfabet, simbol, hingga ikon-ikon tertentu.
Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts baik untuk
judul maupun body text.
AlGERIAN, ELEPHANT, Freehand521, Matura MT
Navigasi

• Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi
yang mudah digunakan.
• Letakkan navigasi di bagian paling atas layout.
• Bisa di bawah atau di atas header.
• Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web .
• Sebaiknya hanya gunakan satu baris navigasi.
Navigasi
Tampilan di web

Tampilan pada handphone

Tombol “Search”
• Letakkan tombol di tempat yang mudah dilihat.
• Biasanya di sebelah navigasi atau di bawah header.
• Gunakan tombol berupa huruf atau simbol.
Tampilan di web

Tampilan pada handphone

Laman Kontak
• Laman kontak berpengaruh terhadap autoritas/kepemilikan website
• Yang harus ada di laman kontak : Alamat lengkap, jam operasional,
nomor telepon, email.
Footer yang Informatif
• Bisa juga berupa tambahan informasi berupa sitemaps, copyright,
privacy policy, atau informasi lain yang memudahkan pembaca.
Kualitas Image
• Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak
blur, minimal 150 ppi.
• Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan
ketajaman warnanya tidak berubah.
• Gunakan foto yang relevan dengan konten.
BOX MODEL
BOX MODEL
• Konsep box model pada dasarnya merupakan konsep yang
menyatakan bahwa elemen-elemen yang ada di dalam HTML
adalah berbentuk kotak.

• Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari
elemen, margin, padding, dan border dari elemen tersebut.
BOX MODEL
• Properti Height dan Width : Properti height dan weight digunakan
untuk mengubah tinggi dan lebar standar ketika dibutuhkan.

• Properti Margin dan Padding : Untuk mengubah jarak antar

elemen, kita dapat menggunakan properti Margin. Sedangkan
jarak dari konten elemen ke pembatas (border) disebut dengan
Padding.

• Border : Border, sebagai pemberi tanda batas elemen memisahkan

margin dan padding.