Topik bahasan:
- Alignment
- Grid
Penjelasan Layout 2 dalam bentuk video dapat diakses pada:
WHITESPACE
Space sangat penting menciptakan hubungan yang membentuk sistem hirarki pada sebuah layout. Menciptakan sebuah sistem desain hampir selalu dimulai dengan pengaturan ruang yang jelas. Whitespace adalah bagian dari halaman yang tidak ditandai, bagian yang dibiarkan kosong, atau ruang kosong pada sebuah halaman.
Meskipun disebut whitespace, bukan berarti ruang tersebut harus berwarna putih. Ruang kosong ini dapat diisi dengan warna apapun asalkan bebas dari elemen apapun seperti teks dan gambar. Contoh penggunaan whitespace yang baik yang kita semua kenal yaitu Google. Homepage Google diisi dengan whitespace sehingga kita fokus pada hal yang penting: pencarian.
Perhatikan kedua layout di bawah ini.
Whitespace juga penting untuk membuat layout yang dapat di-scan dengan mudah. Scanning informasi adalah aspek penting pada desain web. Layout dengan whitespace yang dikelola dengan baik memungkinkan user untuk scan informasi dan kelompok informasi untuk menemukan apa yang mereka cari dengan cepat.
Layout yang berantakan, atau yang tidak mengatur whitespace secara efektif, menyulitkan user untuk mengidentifikasi pola yang penting untuk men-scan informasi. Bayangkan sekelompok orang yang berkeliaran di sebuah pesta versus barisan prajurit saat absen. Orang-orangnya mungkin sama, tetapi ruang diantara mereka telah diatur sedemikian rupa sehingga tampak teratur.
Beberapa website di bawah ini menunjukkan contoh penggunaan whitespace yang baik dalam layout-nya.
Beberapa Case Penggunaan Whitespace
1. Dialogbox yang Padat
Ketika berbicara tentang whitespace pada sebuah layout, maka jangan membuat kontrol dalam satu desain menjadi penuh sesak, bahkan jika Anda mengelompokkan kontrol tersebut. Susunan kontrol yang penuh sesak akan menghambat proses scan informasi, dan menghasilkan efek yang menggunggu ketika dua baris (seperti tepi text field) terlalu dekat.
Gambar di atas adalah contoh dialog box yang penuh sesak, karena:
- Dialog tidak memiliki margin di tepinya; kontrol-kontrol dikemas sangat rapat; dan garis digunakan untuk pengelompokan; yang seharusnya penggunaan whitespace lebih tepat.
- Obyek yang penuh sesak ini menyebabkan efek persepsi yang buruk:
- Garis yang muncul terlalu berdekatan.
- Seharusnya beberapa pixel whitespace di antara baris akan menghilangkan masalah ini.
2. Menggunakan Whitespace untuk Mengatur Label
Contoh penggunaan whitespace untuk mengatur label sebuah dialog box. Penggunaan whitespace yang efektif adalah menempatkan label di margin kiri di mana whitespace meng-highlight label.
Pada Dialog box (a), Anda tidak dapat men-scan label dan nama grup secara terpisah; mereka saling mengganggu seperti halnya garis-garis pengelompokan.
Pada Dialog Box (b) yang didesain ulang, label sekarang disusun sendirian di sebelah kiri, membuatnya lebih mudah di-scan. Ketika penggunaan space dimungkinkan, Anda harus meletakkan label di sebelah kiri kontrol, bukan di atas.
3. Whitespace Menghindari Visual Noise
Visual noise pada grafik dapat dikurangi dengan menghilangkan beberapa garis batas seperti pada gambar bagian kanan di atas. Namun, fitur ini tidak terdapat pada Microsoft Excel yang biasa digunakan untuk membuat grafik.
4. Balance & Symmetry
Balance (keseimbangan) dan simetri adalah tool berharga pada toolkit seorang desainer. Dalam desain grafis, yang dimaksud dengan simetri adalah sejumlah komponen yang sama di setiap sisi sumbu. Kita mengukur komponen tersebut dengan massa (jumlah piksel non-white) dan luas (area yang dicakup oleh piksel tersebut); massa dan luasnya harus seimbang.
Cara mudah untuk mencapai keseimbangan adalah dengan membuat elemen-elemen desain di bagian tengah (di pusat tengah). Hal ini secara otomatis mencapai keseimbangan di sekitar sumbu vertikal. Jika Anda melihat homepage Google, Anda akan melihat jenis pendekatan tersebut.
Secara singkat, langkah membuat keseimbangan dalam sebuah dengan adalah:
- Pilih sebuah sumbu (biasanya vertikal).
- Distribusikan elemen secara merata di sekitar sumbu
- Seimbangkan massa dan luasnya.
ALIGNMENT & GRID SYSTEM
Alignment
Mari perhatikan contoh gambar di bawah ini dengan melihat pada aligment kontrol-kontrol di dalamnya.
Alignment berkontribusi pada Simplicity sebuah desain. Posisi alignment yang lebih sedikit berarti desain yang lebih sederhana. Dialog box pada halaman di atas menampilkan alignment yang benar-benar serampangan/ tidak teratur, yang membuatnya tampak rumit. Sederhanakan desain Anda dengan menyelaraskan elemen-elemen secara horizontal dan vertikal.
Pengaturan Label (misalnya “Wait” dan “Retry after”):
- Label panjang dan label pendek digunakan pada layar yang sama.
- Anda akan mendapatkan hasil terbaik jika Anda membuat semua label dengan ukuran yang sama, atau memecah label panjang menjadi beberapa baris.
Pengaturan Kontrol (misalnya text field, combobox, checkbox):
- Kolom kontrol harus disejajarkan di kiri dan kanan.
- Terkadang hal ini tampak tidak masuk akal – haruskah misalnya field “short date” dilebarkan agar ukurannya sama dengan lebar field “filename” pada sebuah desain?
- Tidak ada salahnya field tanggal menjadi lebih lebar dari yang diperlukan kecuali mungkin mengurangi persepsi Affordance untuk tanggal.
- Anda juga dapat menyelesaikan masalah seperti ini dengan mengatur ulang tampilan dengan memindahkan field tanggal ke tempat lain, meskipun harus hati-hati agar tidak mengganggu pengelompokan fungsional pada desain Anda atau mengganggu ekspektasi user Anda.
Anda dapat melihat perbedaan layout Advanced Search pada Google.
Pada desain yang baru di bawah ini, terlihat keteraturan penggunaan label, kontrol-kontrol dan teks berisi keterangan di sebelah kanan. Hal ini lebih memudahkan user dalam pemilihan dan pengisian tiap kontrol yang disediakan.
Anatomi Halaman Website
Sebelum melangkah lebih jauh membahas Sistem Grid, mari terlebih dahulu meninjau kembali tentang anatomi halaman website, agar dapat lebih cepat dalam memahami Sistem Grid nantinya.
Secara umum, sebuah halaman website terdiri dari:
- Header
- Navigation
- Feature
- Body/Content
- Sidebar
- Footer
- Background
HEADER
Header pada halaman web bertindak sebagai landasan bagi user dengan mengidentifikasi dan secara visual menyatukan sebuah halaman web. Header menetapkan look & feel dari brand sebuah website dan sering kali akan memberi user sebuah call to action – search, buy, register, dll. Header sering berisi navigasi utama sebuah website. Karena navigasi sangat penting untuk Usability sebuah web, maka logis bahwa navigasi ditempatkan secara jelas di bagian atas.
FEATURE AREA
Salah satu indikasi desain yang efektif adalah hirarki informasi yang didefinisikan dengan jelas. Untuk mencapai hal ini, desainer menggunakan titik fokus, yang dalam desain web sering merupakan feature area utama. Area ini biasanya memakan sebagian besar homepage, memiliki warna dan tipografi paling cerah, dan biasanya menampilkan semacam motion atau animasi. Opsi paling umum untuk feature area adalah slideshow gambar-gambar dan konten dari web.
BODY/ CONTENT
Body atau isi web adalah tempat user menghabiskan sebagian besar waktu mereka, karena bisanya merupakan akhir pencarian mereka untuk sebuah konten. Pada area inilah konsep desain Legibility (keterbacaan) dan Clarity (kejelasan) ikut bermain, tetapi dengan beberapa pertimbangan tambahan. Sebuah halaman web tingginya tidak terbatas, sehingga penting untuk memecah konten panjang dengan whitespace dan subheading. Mode “break”/ istirahat dalam konten ini memungkinkan user untuk membaca halaman dengan cepat dan memberi beberapa entry point ke dalam konten.
SIDEBAR
Sidebar pada halaman web berisi informasi sekunder yang mendukung konten utama atau mengarahkan user ke konten terkait melalui penggunaan submenu dan link. Area sidebar sering kali dijual untuk ruang iklan. Seperti halnya header, desain sidebar harus menyatu dengan tampilan web untuk membantu menciptakan kesan menyeluruh pada halaman web.
FOOTER
Pada masa awal desain web, footer berisi informasi hak cipta web serta beberapa link. Seiring waktu, footer halaman web telah berkembang menjadi sitemap mini, dengan link ke masing-masing halaman utama web.
BACKGROUND
Background halaman web digunakan untuk melengkapi konten sebuah halaman. Background dapat digunakan untuk membuat kedalaman atau dimensi, menambahkan kekayaan dengan tekstur dan warna pada sebuah halaman, atau bahkan memperluas konten di luar batas halaman.
Sistem Grid
Salah satu cara tertua untuk menciptakan keseimbangan adalah dengan penggunaan sistem grid. Grid tidak hanya mengatur elemen-elemen desain, tetapi juga mengatur ruang (space) dalam suatu desain. Menyelaraskan elemen desain dengan jelas melalui penggunaan kolom yang menciptakan ruang dan ruang inilah yang memberikan pengaturan tampilan. Setelah sistem grid ditetapkan, elemen desain ditempatkan dalam grid. Obyek dapat menjangkau lebih dari satu lebar kolom, tetapi setiap elemen yang memiliki hubungan yang jelas dengan grid itu sendiri.
Sistem grid dapat digunakan untuk mendefinisikan variabel-variabel berikut:
- Lebar margin
- Proporsi area pada sebuah halaman
- Jumlah dan ukuran kolom
- Posisi gambar
- Heading
- Body text
- Penempatan nomor halaman dan footnote.
Alasan Menggunakan Grid
Manfaat menggunakan grid adalah
- Bahwa grid dapat menciptakan kontinuitas (Continuity) pada urutan halaman.
- Terkait kecepatan; grid adalah alat yang ampuh untuk mengatur informasi dan menyusun halaman dengan cepat.
- Dalam hal komposisi single-page, grid dapat membantu desainer menciptakan harmonisasi visual dan secara estetika menghubungkan beragam komposisi elemen.
Grid tidak hanya menjadi alat berharga bagi desainer, tetapi juga berguna bagi pembaca web. Dalam dokumen sekuensial (berurutan), penggunaan sistem organisasi memungkinkan pembaca untuk menelusuri konten dengan mudah. Hal ini terutama berlaku untuk layout yang mengandung kombinasi elemen visual yang kompleks.
Elemen Grid
Terdapat beberapa elemen pada grid, yaitu:
- Columns
- Modules
- Margins
- Spatial zones
- Flowlines
- Markers
Gambaran elemen grid dapat dilihat pada gambar di bawah ini.
1. Columns
Kolom adalah wadah vertikal yang menampung teks atau gambar. Lebar dan jumlah kolom pada halaman atau layar dapat bervariasi, tergantung pada konten.
2. Modules
Modul adalah area individual yang dipisahkan oleh ruang yang konsisten, menyediakan grid yang berulang dan teratur. Menggabungkan modul dapat membuat kolom dan baris dengan berbagai ukuran.
3. Margins
Margin adalah zona penyangga. Margin mewakili jumlah ruang antara ukuran tepi halaman, termasuk gutter (space antara tepi halaman dengan konten) dan konten halaman. Margin juga dapat menampung informasi sekunder, seperti catatan dan caption (keterangan).
4. Spatial Zones
Zona spasial adalah kelompok modul atau kolom yang dapat membentuk area spesifik untuk teks, iklan, gambar atau informasi lainnya.
5. Flowlines
Flowlines adalah alignment yang memecah ruang menjadi pita horizontal. Flowline bukan garis nyata. Flowline adalah metode untuk menggunakan ruang dan elemen untuk memandu pembaca melintasi halaman.
6. Markers
Marker membantu pembaca menavigasi dokumen. Mengindikasikan penempatan untuk materi yang muncul di lokasi yang sama, marker mencakup nomor halaman, header dan footer serta icon.
Beberapa jenis grid:
- Single column grid
- Two column grid
- Multicolumn grids
- Modular grids
- Hierarchical grids
1. SINGLE COLUMN GRID
Single-Column Grid umumnya digunakan untuk teks yang berjalan terus menerus seperti esai, laporan atau buku. Fitur utama pada halaman adalah blok teks.
2. TWO COLUMN GRID
Two-Column Grid dapat digunakan untuk mengontrol banyak teks atau untuk menyajikan berbagai jenis informasi dalam kolom terpisah. Two-column grid ini dapat disusun dengan lebar kolom yang sama atau berbeda. Pada proporsi yang ideal, ketika satu kolom lebih lebar dari yang lain, kolom yang lebih luas berukuran dua kali lipat atau kelipatannya.
3. MULTICOLUMN GRID
Multicolumn grid memberikan fleksibilitas yang lebih besar daripada single-column grid dan two-column grid, menggabungkan banyak kolom dengan lebar yang bervariasi, berguna untuk majalah atau web.
4. MODULAR GRID
Modular grid paling baik digunakan untuk mengendalikan jenis informasi yang kompleks yang dapat ditemukan pada koran, kalender, grafik dan tabel. Pada grid ini dilakukan penggabungan kolom vertikal dan horizontal yang mengatur struktur menjadi potongan (chunk) ruang yang lebih kecil.
5. HIERARCHICAL GRID
Hierarchical grid memecah halaman menjadi zona-zona. Banyak hierarchical grid disusun dari kolom horizontal. Grid ini biasanya digunakan ketika rancangan layout tidak memenuhi kriteria dari jenis grid-grid lainnya (single, double, multiple dan modular grid).
Fixed Width Grid untuk Website
Untuk membuat fixed-width grid pada web, desainer harus terlebih dahulu menentukan lebar desain, yang ditentukan oleh resolusi monitor target user. Sebagian besar web masih dioptimalkan untuk ukuran 1024 x 768 pixel, sehingga sebagian besar grid web berukuran lebar antara 950-990 pixel. Alasan lebarnya dikurangi 25-50 pixel dari resolusi monitor adalah untuk mengakomodir elemen web seperti scrollbar atau window frame, menghindari side scrolling. Setelah lebar ditentukan, seorang desainer memutuskan berapa banyak kolom yang dibutuhkan.
Secara umum, tiga kolom terlalu membatasi, dan lebih banyak kolom berarti desain lebih fleksibel. Namun, terlalu banyak kolom dapat membuat kesulitan dalam mengenali relasi komponen. Tidak ada jumlah kolom yang tepat, tetapi grid yang optimal memberikan layout dengan pengaturan yang jelas dengan tetap memperhatikan fleksibilitas. Lebar kolom untuk grid ditentukan oleh lebar keseluruhan dibagi dengan jumlah kolom. Dan akhirnya jarak antar kolom ditambahkan, memberikan pemisah antar elemen di setiap kolom.
Referensi
- Miller, R, Mueller, S. Layout.
- Above the Fold: Understanding the Principles of Successful Web Site Design. Brian Miller.
- Layout Essentials: 100 Design Principles for Using Grids. Beth Tondreau.
- Whitespace in Web Design: What It Is and Why You Should Use It. Gisele Muller. http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it
- 22 Examples Of Different Grid Types On The Web. Steven Bradley. https://vanseodesign.com/web-design/grid-type-examples/
- A Comprehensive Introduction to Grids in Web Design. Ed Wassermann. https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design–cms-26521
- Photo by Tran Mau Tri Tam on Unsplash
Views: 2335
