Ide dan Konsep Layout

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.

Published
Categorized as Desain Web

By Galih Satriaji

Bookaholic, Workaholic. Chubby. That's me!

23 comments

  1. asyyyiiiikkk… Pelajaran dimulai lg… \:D/ πŸ˜€
    Waaahhhh… keren… keren… keren… 8->
    Ntar aku coba bikin header nya dulu deh! πŸ˜‰

    Uhmmm… btw Mas Galih, “pengejawantahan” itu artinya apa, ya? :-?? πŸ˜› πŸ˜€

  2. desain layout tuh.. gampang2 susah.. kl Q harus ada contoh layout dulu, baru bisa ngembangin imajinasi. tapi kl pake gimp g terbiasa dan lumayan ruwet

  3. Aku mantan calon kuli IT, tapi gak sempet jadi kuli udah smart enough untuk banting setir. Meskipun begitu, tetep salut sama kuli-kuli IT yang bergulat dengan komputer 24-7. Gak punya komentar ttg IT selain bilang gambar langitnya spektakuler. Komentar lain: Mencintai makanan, fotografi, internet, dan buku melebihi cintanya pada wanitaÒ€¦ sounds like a real macho, just like every man.

  4. hai hai

    aku pengen banget bisa nge’desai2 gitu…

    tapi aku ga bisa gambar n aku ga keatif..

    punya tips ga?

  5. hai.., hai πŸ™‚
    hmm, tutorial yg bagus, cukup bagus, terutama buat aku yang wong ndeso ini, blm tahu apa2.
    sy tunggu tulisan berikutnya πŸ™‚

  6. aku anak komunikasi jurusan periklanan.
    tolong donk kasih aku materi macam2 layout dasar yg bs kita kembangin nanti saat mendesain sebuah iklan.
    klo bs beserta contohny yah..
    thanx before

  7. Hi!

    I want to improve my SQL experience.
    I red so many SQL resources and want to
    get more about SQL for my occupation as oracle database manager.

    What would you recommend?

    Thanks,
    Werutz

  8. ..wuih bagus banget ni, makasih iiah mas, malah kalo bisa mas coba deh kasih salah satu contoh sraft dari konsep mas..
    kan say pernah baca tu, kalo untuk merancang itu butuh :
    1. konsep
    2. rancangan
    3. pengembangan
    4. implementasi
    5. maintanance

    nah untuk konsep itu draftnya misalnya seperti apa ya? kalo rancangan kan uda termasuk membuat story board kan.. apa hanya sekedar coret”an memikirkan mau dengan tema apa?

  9. sblm’a salam kenal.
    sy suka bgt ama desain grafis. pengen bkin web sendiri, tp gag paham soal SQL, dan apalah itu bhs pemrograman yg lain. penah bkin web, hosting di .co.cc, tp cm web statis. pngunjung gag bs msukin comment or response.
    skrg jd cm berkutat di desain utk cetak dan pke ptshop cm bwt otak-atik foto..
    tlong kasi saran, msukan, tanggapan, ato apapun itu yg membangun.. thanks.

Leave a comment

Your email address will not be published. Required fields are marked *