Ide dan Konsep Layout

March 22, 2007

Hal yang cukup sulit dilakukan baik oleh yang masih pemula ataupun yang sudah veteran dalam dunia web design adalah memulai mendesain layout itu sendiri. Layout bukanlah semudah menarik garis dari sisi kiri ke pojok kanan dan diisi sesuatu. Desain layout adalah pengejawantahan ide dan konsep. Seperti apa layout yang sesuai dengan isi website yang akan dibuat?

Paling tidak, ada dua bentuk model yang biasa dipakai webmaster. Yang pertama adalah, kita menggunakan seluruh ruang layar. Lebar website fleksibel dan mengikuti lebar jendela browser. Model ini namanya auto-stretch. Contoh yang bisa dilihat adalah halaman dalam Yahoo Mail atau GMail. Yang kedua adalah lebar website ditentukan dan tidak bisa diubah-ubah. Ini namanya fixed-width. Contohnya banyak, halaman depan wordpress.org menggunakan layout ini. Blog-ku ini juga menggunakan fixed-width.

Mana yang sebaiknya digunakan? Tergantung isi website yang kita bangun. Jika website memerlukan space yang banyak, dan meminimalisir scrolling ke bawah, sebaiknya digunakan auto-stretch agar banyak ruang yang bisa dipakai. Jika website lebih berorientasi ke tampilan yang indah, dan tidak mempedulikan berapa panjang scrolling ke bawah, sebaiknya gunakan fixed-width karena lebih mudah dalam membuatnya.

Nah, bagaimana memancing ide agar keluar dalam bentuk layout yang sesuai? Masing-masing orang tentu saja beda caranya. Biasanya aku mencari inspirasi dulu dengan melihat-lihat model-model website di cssmania.com. Kemudian jika mood desainnya udah dapat, aku corat-coret layout di secarik kertas, seperti di bawah ini:

Semacam itu. Apa yang diperlukan website dicorat-coret, direncanakan penempatan dan tata letaknya. Draft kasar. Tentunya coretan ini akan sangat besar kemungkinan berubah. Fungsi coretan ini hanyalah pemancing ide dan penggambaran konsep saja.

Kemudian, tuangkan draft kasar itu di kanvas image editor yang tujuannya untuk Desktop Publishing. Yang paling terkenal tentu saja Photoshop, Freehand, dan Flash. Sedangkan yang versi free ada Gimp. Aku tidak terlalu merekomendasikan Corel Draw sebagai pengolah citra karena memang tujuan Corel adalah untuk paper publishing (itulah sebabnya Corel memakai basis warna CMYK daripada RGB). Di sini ide kembali dipompa dengan lebih bebas dan leluasa. Tumpuki saja layer demi layer, gradasi demi gradasi, efek-efek dengan tanpa ragu. Sering aku mengalami bahwa desain akhir photoshopku jauh dari coretan di draft kasar. Tak apa, yang penting puas

Kamu boleh mendesain seluruh layout secara mendetail penuh satu halaman. Pendekatan ini sering dipakai desainer murni (tanpa background programmer). Hasilnya akan sangat indah, tapi biasanya sulit ketika harus dipindahkan ke HTML. Aku sendiri, yang tidak memiliki background desainer dan jiwa programmer begitu mendominasi, tak telaten dengan pendekatan itu. Aku cukup mendesain headernya saja secara mendetail, kemudian aku pindah ke HTML. Apapun yang aku perlukan setelah itu (misalnya image untuk pojok tabel, background tergradasi untuk suatu kotak, dst), menyusul dan menyesuaikan HTML-nya. Tapi aku juga pernah mendesain satu halaman penuh, biasanya untuk layout yang cornerless, tanpa sudut lancip. Tidak sering, karena sangat ribet

Untuk seri tutorial ini, meneruskan apa yang telah aku corat-coret di draft kasar di atas, aku membuat header berukuran 800×250 piksel. Fixed-width. Cukup besar lebarnya untuk ukuran header. Kira-kira seperti di bawah ini (klik untuk memperbesar):

Cara membuatnya simpel kok (apa perlu dibahas juga?). Dengan berbekal kamera digital poket, dapatkan foto langit pada saat golden hour (istilah fotografi sekitar pukul 16:00 - 18:00), dan sentuh sedikit dengan image editor. Oke? Sampai di sini dulu. Silakan kalau ada pertanyaan dan request lainnya. Next, kita akan membahas cara memindahkannya ke kode HTML.

Bab sebelumnya:
- Di Balik Selubung Web.

Posted in Desain Web