Ragam Layout Website
Layout Website adalah pengaturan semua elemen visual di halaman web dan hubungan yang dihasilkan di antara elemen cisual dan juga halaman web nya. Elemen website umumnya terdiri dari header, navigation, sidebar, content, dan footer.
Layout Website yang sering digunakan antara lain sebagai berikut :
Layout Static
Layout Website Static (atau disebut juga Fixed) menggunakan ukuran halaman yang telah ditentukan sebelumnya dan tidak bisa berubah berdasarkan lebar browser. Dengan kata lain layout halaman mungkin memiliki lebar permanen 960 piksel, meskipun kita menggunakan perangkat dengan layar yang lebih kecil. Beginilah cara halaman web dibuat secara tradisional selama bertahun-tahun hingga pengaruh modern seperti query media dan desain responsif diperkenalkan sekitar awal tahun 2010-an.
Layout Fluid
Layout Website Fluid menggunakan unit relatif bukan unit tetap. Biasanya layout fluid akan menggunakan persentase (%), bukan piksel. Layout fluid tidak memerlukan banyak pembuatan yang rumit seperti desain responsif, tetapi ada beberapa kelemahan utama pada lebar browser yang sangat besar atau sangat kecil. Jika browser sangat lebar, beberapa konten mungkin terbentang terlalu jauh dan begitu juga dengan layar kecil maka konten akan terlihat bertumpukan.
Layout Responsive
Layout Website Responsive menggunakan unit relatif dan query media. Saat browser bertambah atau berkurang lebarnya, layout responsive akan berubah sesuai dengan ukuran browser tersebut. Biasanya layout responsive dibangun menggunakan pendekatan mobile-first. Itu berarti layout untuk perangkat seluler dirancang terlebih dahulu, lalu saat layar menjadi lebih lebar di tablet dan desktop, perancang akan menemukan cara untuk memperluas layout dari perangkat seluler tadi.
Konsep yang Baik untuk Tipografi Halaman Web
Komposisi Font
Penggunaan font dalam website sebaiknya tidak boleh terdiri lebih dari 3 jenis font. Komposisi font yang baik adalah menggunakan 2 jenis font, yang pertama untuk Heading dan satu lagi untuk Konten. Sebagai contoh Gunakan font serif untuk judul, dan gunakan sans-serif untuk konten.
Paragraph 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.
Ketebalan Teks
Ketebalan teks juga mempengaruhi tipografi untuk menentukan bagian-bagian yang penting ataupun untuk sebuah Heading. Dalam web design, kita bisa menentukannya dengan styling css melalui properti font-weight.
Warna Teks
Secara default, warna teks yang ditampilkan di web adalah warna hitam pekat (#000). Usahakan untuk menyesuakan warna teks yang digunakan dengan warna background pada website, jika warna background warna yang gelap maka gunakan warna teks yang cerah, begitupun sebaliknya.
Padding Dan Margin
Margin dan Padding adalah properti dari CSS yang digunakan untuk mengatur sisi tiap elemen pada HTML. Padding dan Margin sangat berguna untuk menentukan batasan-batasan setiap konten teks yang ada pada Website.
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>, dst...) gunakan tag-tag tersebut untuk menentukan Heading, Minor Heading, Subheading ataupun Major Heading. Gunakan tag (<p>) untuk isi paragraf dan juga tag (<small>) untuk font kecil seperti tulisan @Copyright.
Format Gambar Pada Website
1. PNG merupakan salah satu format yang direkomendasikan untuk penggunaan format gambar pada website. Format jenis ini sangat tepat untuk menyimpan grafik (ilustration) atau foto (kualitas tinggi) serta format ini juga dapat memiliki transparansi yang dapat diterapkan pada halaman website.
2. JPG adalah format gambar yang juga banyak dipakai pada halaman website walaupun tidak memiliki kualitas gambar yang sebagus PNG, namun JPG memiliki ukuran file yang lebih relatif kecil dari pada PNG.
3. GIF digunakan untuk menampilkan sebuah gambar bergerak, atau serangkaian gambar loop yang membentuk sebuah animasi sederhana, karena GIF juga memiliki tranparansi seperti JPG penggunaannya sangat bervariasi pada halaman website.
No comments:
Post a Comment