Komposisi dan Layout 2013

L. Erawan, M.Kom Page 1

Komposisi dan Layout

Belajar bagaimana mendesain web dengan baik sama halnya seperti belajar membuat program. Sebagian orang mempunyai daya nalar atau logika yang kuat sehingga mudah menjadi ahli pemrograman. Sementara sebagian yang lain memerlukan usaha lebih keras untuk mencapai tingkatan yang sama.

Seperti halnya kode program ada yang baik dan yang buruk, demikian pula dengan desain web, ada desain yang baik dan ada juga yang buruk. Mempelajari beberapa prinsip dan kaidah desain akan membantu anda memahami perbedaan antara desain yang baik, jelek, dan buruk, dan membuat anda dapat menentukan proses desain anda sendiri sehingga karya desain anda menjadi lebih baik dan menarik.

Definisi Desain yang Baik Ada dua faktor yang digunakan banyak orang untuk menentukan suatu desain situs web baik atau buruk. Pertama, dilihat dari tingkat usabilitas (kemudahan penggunaan) yang berfokus pada fungsionalitas, keefektifan presentasi informasi, dan efisiensi. Kedua, dari sudut pandang estetika murni, yang melihat dari sisi nilai estetika (keindahan) dan daya tarik visual dari suatu desain. Beberapa orang terperangkap dalam usaha menciptakan nilai estetika dan grafis lalu melupakan faktor user, sementara yang lain terlalu fokus pada tingkat usabilitas dan melupakan daya tarik visualnya. Dalam usaha untuk meraih pengunjung dan mempertahankan minat mereka terhadap situs web kita, kedua faktor ini sangat perlu dimaksimalkan.

Poin utama yang perlu kita perhatikan adalah desain adalah tentang komunikasi. Jika anda membuat situs web yang bekerja dan menampilkan informasi dengan baik, tetapi tampak buruk, tidak ada yang ingin menggunakannya. Sama halnya jika situs web dibuat sangat indah tetapi sulit digunakan, orang akan meninggalkannya. Oleh karena itu pertimbangkan beberapa hal dibawah ini:

• Pengguna senang desain tetapi butuh konten Salah satu perhatian terbesar dari para profesional usabilitas adalah waktu yang digunakan pengguna untuk membaca dengan cepat sebuah halaman untuk informasi yang mereka inginkan, baik itu bagian dari konten, link ke halaman lain, atau sebuah form. Desain seharusnya berperan sebagai penghubung antara user dengan informasi, bukan sebagai penghalang.

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 2

Situs web diatas salah satu contoh desain situs web yang baik dalam hal keindahan dan usabilitas. Ilustrasi penuh warna mengalir di sekitar struktur halaman, yang dihiasi dengan navigasi dan elemen-elemen situs yang seolah-olah dipotong dari sebuah buku sketsa. Gambar karya tangan yang melimpah, menciptakan kekontrasan yang membantu menuntun mata ke konten dari artikel blog tanpa terganggu dengan readibilitas atau pengaturan halamannya.

• Pengguna dapa berpindah secara mudah dengan navigasi yang intuitif

Blok navigasi utama situs web harus tampak dengan jelas pada halaman, dan setiap link mempunyai judul yang deskriptif. Struktur navigasi yang tidak hanya berubah ketika dilewati oleh mouse tetapi juga mengindikasikan halaman aktif, membantu pengguna mengenali dimana mereka berada, dan bagaimana untuk menuju ke lain halaman atau bagian.

Navigasi sekunder, field pencarian, dan link keluar sebaiknya tidak ditampilkan dominan pada halaman. Jika item-item ini dibuat mudah dicari, dan terpisah secara visual dari konten, pengguna akan fokus pada informasi, dan mereka akan tahu dimana harus mencari ketika mereka akan berpindah ke konten yang lain.

• Pengguna mengenali setiap halaman sebagai bagian dari situs Meskipun terdapat perbedaan dramatis antara layout homepage dan halaman-halaman yang lain, tema atau style yang menyatu harus tampak di semua halaman situs untuk membantu menjaga

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 3

kesatuan desain. Berikut ini terdapat tiga contoh screenshot halaman web situs web Moore School of Business. Meskipun blok konten dipisah secara berbeda, ada beberapa indikator visual yang memberitahu pengguna bahwa halaman-halaman ini berasal dari situs web yang sama. Banyak faktor unity halaman-halaman ini dibentuk dari pengulangan (repetition) terhadap identitas dan blok navigasi. Penggunaan yang konsisten dari warna yang sangat terbatas (black, grey, yellow, dan red) juga membantu membentuk faktor unity halaman.

Anatomi Halaman Web Halaman web terdiri dari beberapa komponen atau blok. Meskipun jumlah blok yang dibutuhkan tergantung dari ukuran dan subyek situs, sebagian besar situs web mempunyai komponen-komponen:

1. Container 2. logo 3. navigation 4. content 5. footer 6. whitespace

Gambar berikut ini mengilustrasikan komponen-komponen anatomi tersebut bserta posisinya dalam sebuah halaman web.

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 4

Berikut ini penjelasan lebih lanjut masing-masing blok tersebut.

1. Blok Kontainer Setiap halaman web mempunyai kontainer. Kontainer dapat berupa tag body halaman, tag div. Tanpa jenis-jenis kontainer ini, desainer tidak dapat meletakkan konten kedalam halaman web. Lebar dari kontainer dapat berubah-ubah, maksudnya lebar kontainer dapat mengembang sesuai lebar jendela browser, atau tetap, sehingga konten akan mempunyai lebar yang selalu sama tidak terpengaruh ukuran jendela browser.

2. Logo Saat mendesain logo, desainer merujuk ke logo dan warna yang ada di setiap form pemasaran perusahaan, brosur, business card, letterhead, dan seterusnya. Blok identitas yang tampak pada situs

NAVIGATION

LOGO

CONTAINER

CONTENT

FOOTER

WHITESPACE

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 5

web sebaiknya berisi logo dan nama perusahaan dan diletakkan disisi atas setiap halaman web situs. Blok identitas meningkatkan pengenalan merk disamping memberikan informasi kepada pengguna bahwa halaman yang dilihat adalah bagian dari satu situs tunggal.

3. Navigation Sesuatu hal yang sangat penting jika sistem navigasi mudah dicari dan digunakan. Pengguna akan berharap melihat navigasi di sisi atas setiap halaman. Apakah menu dibuat secara vertikal disisi halaman ataukah horisontal melintasi halaman, navigasi sebaiknya diletakkan sedekat mungkin dengan sisi atas layout halaman. Terakhir, seluruh item navigasi utama sebaiknya terletak “diatas lipatan”.

Istilah “diatas lipatan” yang digunakan oleh para desainer adalah suatu metafora berdasarkan lipatan dalam surat kabar. Jika Anda melihat ke cover surat kabar yang dilipat, disana akan terpampang kepala berita dan kabar-kabar terpenting di setengah bagian atas, sehingga kabar-kabar paling penting akan terlihat pada surat kabar yang terlipat. Lokasi dari “lipatan” dalam halaman web tergantung dari dimensi browser dan resolusi layar monitor. Sebagi contoh, dengan resolusi layar monitor dan browser Google Chrome, bagian “lipatan” sekitar 500 piksel dari atas.

4. Content Konten adalah raja. Seorang pengunjung khas situs web akan masuk dan meninggalkan sebuah situs dalam beberapa detik. Jika pengunjung tidak dapat menemukan informasi yang dicari, maka niscaya mereka akan menutup jendela browser atau beralih ke situs yang lain. Penting untuk selalu dijaga agar blok konten utama menjadi titik fokal (focal point) desain, sehingga pengunjung pada saat menscan halaman dapat melihat informasi yang dibutuhkan.

5. Footer Footer terletak dibawah halaman dan biasanya berisi copyright, contact, dan informasi hukum/aturan/ketentuan, juga link ke bagian-bagian penting situs.

6. Whitespace Istilah desain grafis whitespace (atau negative space) secara harafiah merujuk ke area halaman yang kosong. Para desainer pemula (dan sebagian besar klien) merasa perlu mengisi setiap inci halaman web dengan foto, teks, tabel, data. Ruang kosong (empty space) sama pentingnya dengan konten. Tanpa pengaturan whitespace dengan hati-hati, suatu desain akan terasa seperti ruang yang penuh sesak. Whitespace akan membantu suatu desain untuk “bernapas” serta menciptakan balance dan unity, dua konsep penting dalam proses desain.

Demikianlah, untuk memulai mengembangkan suatu layout dapat dimulai dengan menggunakan blok standar dari anatomi halaman web. Meskipun terdapat berbagai model blok yang digunakan dalam desain layout banyak situs web, anatomi halaman web standar ini meringkas sebagian besar blok yang umum.

Theory Grid Bicara tentang grid, tidak lepas dari bidang teknik dan arsitektur. Ya, grid merupakan suatu prinsip yang dikenal di dunia teknik dan arsitektur. Meskipun demikian, grid juga telah lama dikenal dan

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 6

diadopsi untuk digunakan oleh ahli desain grafis untuk memandu kerja mereka. Grid adalah alat yang sangat penting dalam desain grafis, dan penggunaan grid dalam desain web telah populer dalam beberapa tahun belakangan ini.

Menggunakan grid lebih dari sekedar membuat elemen-elemen pada halaman web menjadi persegi dan segaris. Grid berhubungan dengan masalah proporsi. Teori grid berdasarkan suatu pola matematika yang sering terlihat dan terjadi di alam, dipercaya sebagai suatu inspirasi yang sempurna. Pola matematika ini disebut golden ratio atau divine proportion (perbandingan yang sempurna). Ide dasar dari komposisi golden ratio ini diilustrasikan dibawah ini:

Suatu garis dapat dibagi dua menggunakan golden ratio dengan membagi panjangnya dengan bilangan 1.62. Bilangan magis ini sebenarnya adalah 1.6180339..., suatu bilangan irasional yang

biasanya direpresentasikan sebagai ᵩ (phi).

Lalu apa gunanya golden ratio ini dalam desain grafis. Umumnya, komposisi yang dibagi oleh garis yang diproporsikan dengan golden ratio dianggap memuaskan dari sisi estetika. Para desainer sering menggunakan rasio ini manakala membuat layout halaman, poster, dan brosur. Rasio ini memberikan suatu petunjuk logis untuk memproduksi layout yang menarik. Bunga matahari adalah contoh dari golden ratio di alam. Diameter dari pusat bunga matahari dengan total diameter bunga matahari (termasuk daun bunga), terbagi oleh phi.

Aturan Pertiga Versi sederhana dari golden ratio adalah aturan pertiga (The Rule of Thirds). Sebuah garis yang dibagi dengan golden ratio akan menghasilkan dua bagian yang satu bagian ukurannya dua kali ukuran bagian yang lain. Berdasarkan hal ini, maka membagi komposisi menjadi tiga bagian adalah cara mudah menerapkan “proporsi yang sempurna” tanpa kalkulator. Pengaturan komposisi dengan aturan ini dapat dilakukan dengan mulai menggambar sebuah kotak empat persegi panjang. Kemudian bagi secara horisontal dan vertikal masing-masing tiga bagian. Kemudian gambar lagi garis vertikal diantara garis vertikal yang ada untuk membuat 6 kolom. Dengan grid sederhana ini, mengatur layout elemen-elemen dapat segera dilakukan. Area empat persegi panjang awal, merupakan suatu kontainer seperti dijelaskan dalam bagian “Anatomi Halaman Web”. Pertama, tentukan blok terbesar lebih dulu, yang biasanya digunakan untuk menyajikan konten. Tentukan blok konten didalam kolom kedua dan ketiga di sebelah kanan kebawah. Tempatkan blok navigasi ditengah-tengah kolom sebelah kiri. Lalu tempatkan teks bagian dari blok identitas disebelah kiri atas dari blok konten. Dan gambar sebagai bagian dari identitas ditaruh di atas menu. Akhirnya menentukan blok copyright disebelah bawah dari blok konten. Hasilnya adalah layout disebelah kiri atas dari 4 kemungkinan pengaturan layout pada gambar dibawah ini.

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 7

960 Grid System Berdasarkan teori grid, Nathan Smith menciptakan sistem grid 960. Sistem ini adalah tool berupa template dan lembar sketsa yang digunakan untuk mengatur layout komponen situs web. Sistem ini adalah suatu framework CSS. Lebar template yang 960 piksel berdasarkan artikel Cameron Moll yang berpendapat bahwa lebar 960 cocok untuk layar monitor dengan lebar 1024 piksel. Bilangan 960 juga dapat dibagi dengan 3, 4, 5, 6, 8, 10, 12, 15, dan16 yang menjadikannya sebagai lebar yang ideal untuk grid. Nathan menggabungkan ide-ide tersebut ke dalam kerangka dan menciptakan tiga dasar tata letak: tata letak dengan 12 kolom, 16 kolom, dan 24 kolom.

Sistem ini digunakan untuk memandu perataan layout halaman web termasuk komponen-komponen: blok identitas, navigasi, konten, dan blok footer. Salah satu keluhan terbesar penggunaan grid ini adalah layout menjadi tampak persegi. Tetapi keluhan ini tidak sepenuhnya benar. Pengaturan layout dengan sistem grid tidak lantas membuat tata letak halaman web menjadi tampak persegi. Sebagai contoh, situs web seperti dibawah ini yang dibuat dengan sistem grid.

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 8

Kolom merah pada situs web tersebut berasal dari template sistem grid 16 kolom. Kolom-kolom tidak tampak pada atau tersembunyi dari tampilan sehingga orang tidak akan menyadari jika situs web ini didesain dengan sistem grid.

Keinginan terhadap struktur, grid, dan proporsi yang ideal adalah sesuatu hal yang alami pada manusia. Sebuah tata letak yang tidak terlihat benar sering bisa diperbaiki dengan memindahkan elemen dan mengubah ukuran mereka di grid. Jadi, jika sebuah layout tidak bekerja, terus bereksperimen. Pada titik tertentu, semua potongan akan mengklik bersama-sama. Pada titik ini, layout Anda mencapai suatu keseimbangan.

Balance Dalam arti kiasan, konsep visual balance atau keseimbangan visual sama dengan keseimbangan fisik yang diilustrasikan oleh suatu jungkat-jungkit. Sama dengan obyek fisik yang mempunyai berat, demikian pula dengan elemen-elemen layout. Jika elemen-elemen didalam setiap sisi-sisi layout

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 9

memiliki berat yang sama, mereka menyeimbangkan satu sama lain. Ada dua bentuk utama dari keseimbangan visual, yaitu simetris (symmetrical) dan asimetris (asymmetrical).

• Keseimbangan Simetris Keseimbangan ini disebut juga keseimbangan formal, akan terjadi apabila elemen-elemen komposisi sama di kedua sisi dari garis axis (vertikal). Contoh keseimbangan ini dapat ditemukan pada gambar dibawah ini.

Selain seimbang berdasarkan garis axis, terdapat juga keseimbangan berdasarkan garis horisontal, meskipun tidak praktis bagi desain dan klien, yang diperoleh dengan menengahkan konten atau menyeimbangkan konten diantara kolom.

Contoh keseimbangan horisontal ini terlihat pada layout homepage dibawah ini. Konten dibuat bertingkat dengan dua kolom pada bagian atas halaman dengan tiga kolom pada bagian bawah halaman, dan layout tetap terjaga keseimbangan simetrisnya.

Komposisi dan Layout 2013

L. Erawan, M.Kom Page 10