Menyajikan Desain Halaman Web dengan Konsep Tabel (part 2)

1)    Layout halaman web

Layout situs merupakan tata letak elemen halaman situs web.Layout situs yang baik akan menjadikan halaman web web baik juga. Dengan desain halaman web yang baik dan tepat akan membuat pengunjung merasa nyaman dengan tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi (content). Desain halaman web tidak mengganggu kejelasan bagian isi.

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content).

Adanya layout tata letak yang baik dapat membuat halaman lebih cantik dan seimbang, terutama enak dilihat dan mudah dibaca. Desain layout suatu halaman web meliputi penyusunan:

      - pembagian tempat pada halaman

      - pengaturan jarak sepasi

      - pengelompokan teks dan grafik

      - serta penekanan pada suatu  bagian tertentu

Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah

-       Top Index

è digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine

Gambar 10.2 model layout top index

Navigasi atau daftar isi berada dibagian atas dari halaman web, seperti pada berikut merupakan tampilan dari www.google.com

Gambar 10.3 contoh halaman web dengan layout top index

-       Bottom Index

è Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal

Gambar 10.4 model layout bottom index

Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti pada berikut merupakan tampilan halaman web education and training berikut ini

Gambar 10.5 contoh halaman web dengan layout bottom index

-       Left Index

è Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama

Gambar 10.6 model layout left index

Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web berikut ini

Gambar 10.7 contoh halaman web dengan layout left index

-       Layout Split

è Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web

Gambar 10.8 model layout split

Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme wordpress berikut ini

Gambar 10.9 contoh halaman web dengan layout split

-       Alternating Index

è digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain.

Gambar 10.10. model layout alternating index

Navigasi atau daftar isi berada dibagian kanan  dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme di http://www.csszengarden.com/050// berikut ini

Gambar 10.11 contoh halaman web dengan layout alternating index

SEKIAN POSTINGAN DARI SAYA SEMOGA BERMANFAAT

Share this post