Layout web adalah desain dasar untuk membuat tampilan suatu website terutama pada penataan elemen-elemen sebuah website. Elemen website umumnya terdiri dari header, navigation, sidebar, content, dan footer.
Macam - macam layout desain web:
1.
Static
Layout static pada web desain memiliki ukuran tetap
pada semua resolusi browser. Lebar layout static ini menggunakan satuan pixel
(px) sehingga akan menghasilkan layout yang statis.
2.
Fluid
Layout fluid memiliki kemampuan untuk menyesuaikan
lebar layout sesuai dengan resolusi browser. Hal tersebut terjadi karena lebar
layout menggunakan satuan persen (%) sehingga lebar layout akan mengikuti
resolusi browser saat dikecilkan atau dibesarkan (resize).
3.
Responsive
Layout responsive memiliki kemampuan untuk berganti
layout pada resolusi tertentu. Layout bisa berganti ini berkat kehadiran CSS3
dengan sintax media queries nya. Kalo di pemrograman fungsinya mirip ‘if‘, tapi
ini di css. Jadi sebuah web bisa memiliki tampilan berbeda saat dibuka dengan
pc, tablet atau smartphone.
Konsep dan teknik untuk membuat tipografi yang baik :
1.
Komposisi Font
Penggunaan font dalam website tidak boleh terdiri
lebih dari 3 jenis font. Komposisi font yang baik adalah menggunakan 2 jenis
font.
Gunakan font serif untuk judul, dan gunakan sans-serif untuk konten. Kombinasi ini sudah menjadi hal umum yang bisa anda lihat di kebanyakan website-website besar di dunia.
2.
Styling Teks Dan
Paragraf
+ Leading
Leading adalah istilah
yang biasa digunakan untuk jarak baris tiap baris sebuah paragraf. Leading,
sangat berpengaruh pada kenyamanan baca sebuah teks. Jarak yang dibuat oleh
leading ini membuat mata lebih rileks dan mudah dalam membaca teks. Tinggi
leading yang baik biasanya berkisar 2-5pt lebih besar daripada tinggi font.
Dalam web design, leading dapat ditentukan dengan properti css line-height.
Nilainya bisa berupa px ataupun angka desimal.
+ Ketebalan Teks
Ketebalan teks juga
mempengaruhi tipografi. Dalam web design, bisa menentukannya dengan styling css
melalui properti font-weight.
+ Warna
Secara default, warna teks yang ditampilkan di web adalah warna hitam pekat (#000). Sebenarnya ini kurang baik. Hitam pekat akan terlalu kontras dengan warna-warna yang ada di web, apalagi jika webnya mengusung desain flat. Warna yang bagus untuk teks pada desain web era modern adalah hitam keabu-abuan, dari interval #333 – #999.
3.
Padding Dan Margin
Margin dan Padding adalah properti dari CSS yang digunakan untuk mengatur sisi tiap elemen para HTML. Biasanya, kedua properti ini juga paling banyak digunakan dalam sebuah proyek website.
4.
Hirarki Dan Ukuran
Font
Hirarki dan ukuran font pada website juga harus ditentukan. Secara default, browser yang
menentukan ukuran setiap tag heading
(<h1>,<h2>,<h3>,<h4>,<h5>,<h6>), tag
paragraf (<p>), tag small (<small>), dan sebagainya.
Format Gambar untuk website :
PNG sangat baik untuk dipergunakan pada kebanyakan web browser (IE6+ butuh sedikit sentuhan CSS untuk pengaturan transparansi). Format jenis ini sangat tepat untuk menyimpan grafik (ilustration) atau foto (kualitas tinggi).
JPG adalah pilihan terbaik untuk menampilkan foto secara online, walau kualitasnya tidak sebagus PNG tetapi cukup bisa diterima mata manusia.
GIF sangat baik untuk menampilkan gambar grafik (jika kamu tidak mau menggunakan PNG), tapi jangan ubah foto kamu menjadi format GIF karena hasilnya tidak sedap dipandang mata.
BMP bisa dikategorikan sebagai gambar tidak terkompresi,
tidak disarankan untuk penggunaan pada blog (menghabiskan bandwidth saja).
Komentar
Posting Komentar