Skip to main content
Pada materi sebelumnya Anda telah mempelajari elemen-elemen dasar untuk membuat sebuah desain. Namun, komponen seperti tipografi, warna, dan ikonografi saja tidak cukup untuk membuat tampilan yang bagus. Hal lainnya yang perlu Anda perhatikan adalah layouting. Layouting merupakan cara untuk mengatur dan menata elemen pada suatu halaman. Berikut adalah manfaat jika Anda mengatur layout dengan baik:
  • Memastikan desain terlihat menarik dan rapi.
  • Membantu pengguna berinteraksi.
  • Membuat desain yang accessible.
Lalu, bagaimana cara membuat layout yang baik? Anda bisa saja langsung mencari inspirasi berbagai halaman yang sudah sering digunakan, seperti halaman home, login, dan checkout. Namun, di sini kita akan membahas dasar-dasar yang penting dalam mengatur halaman, yaitu grid, containment, dan space. Yuk, kita bahas satu per satu.

​
Grid

Pernahkah Anda merasa desain yang sudah dibuat tidak rapi? Sebagai contoh dalam membuat dua kolom daftar menu yang kita pelajari pada latihan wireframe. Anda mungkin tidak yakin apakah kedua desain memiliki lebar yang sama, atau jarak yang sama dengan pinggir halaman. Nah, untuk mengatasi itu, kita akan memanfaatkan Grid. Grid adalah garis bantu yang berfungsi sebagai pemandu dalam mengatur posisi dan ukuran suatu elemen. Pada dasarnya, garis berpotongan ini membagi halaman menjadi kotak kecil yang memungkinkan Anda untuk menata elemen dengan mudah. Berikut ini adalah contohnya: dos:d195050c366b4646813c3247a749f9cb20211011163729.png Dengan mengetahui letak masing-masing elemen ini pada suatu Grid, Anda dapat membuat sebuah elemen sejajar dengan elemen lainnya dengan mudah. Tidak cukup sampai di situ saja, ada juga yang namanya Layout Grid. Layout Grid adalah serangkaian kolom atau baris yang membantu Anda dalam membagi suatu halaman. Dengan memanfaatkan fitur ini, Anda dapat mendesain dengan lebih cepat. Berikut ini adalah contoh penggunaannya: dos:0b3f803a3929acf03b499920a1a6d72720211005175215.png Gambar di atas adalah contoh layout grid dengan jumlah 4 kolom yang merupakan guideline dari Material Design. Dengan menggunakan Layout Grid, tampilan aplikasi Anda menjadi lebih rapi karena pembagian antar elemen menjadi presisi.

​
Containment

Containment adalah pembatasan bagian dalam desain supaya lebih mudah membaca informasi. Ada empat cara untuk memberikan batas antar informasi, yaitu :
  1. Divider : Garis pembatas antar bagian informasi.
  2. Border : Garis bingkai untuk mengelompokkan informasi.
  3. Fill : Mengisi suatu area dengan warna yang berbeda.
  4. Shadow : Bayangan yang bisa menambahkan kesan tiga dimensi.
Berikut adalah contoh implementasinya:
dos:f69325d70dfbeb0c1f2511d36d15ca0520211005161601.jpeg Dengan penambahan containment ini, pembagian informasi menjadi lebih jelas, bukan?

​
White Space

Tentu Anda sudah mengenal spasi. Anda sering menggunakannya untuk memisahkan antar kalimat supaya lebih mudah dibaca. “Bayangkanjikasebuahtulisantidakmenggunakanspasisepertiini.” Tulisan di atas pasti susah dibaca, bukan? Penggunaan spasi ini juga sangat berguna di dalam dunia desain, namanya yaitu Negative Space atau White Space. White Space adalah celah ruang kosong antar elemen pada desain. Penggunaan White Space dapat bermanfaat untuk menekankan titik fokus pada suatu desain. Ia juga dapat mengelompokkan elemen yang berhubungan supaya lebih mudah dibaca. Apabila suatu desain tanpa White Space, desain akan terlihat rumit dan penuh. Selain itu, ia juga dapat menimbulkan kesalahan pada saat menekan suatu tombol apabila antar tombol tidak memiliki jarak. Ada tiga jenis cara untuk menambahkan White Space pada desain, yaitu:
  1. Line Spacing : Jarak antar baris pada sebuah paragraf teks.
  2. Padding : Jarak ke dalam dari sebuah elemen.
  3. Margin : Jarak ke luar dari sebuah elemen
Supaya lebih jelas, bandingkan kedua gambar berikut: dos:b14c443b1342e2c1baa6022dcdbd5dc820211005161559.jpeg Contoh gambar di atas adalah perbedaan antara tidak menggunakan White Space dengan yang menggunakan White Space. Dapat dilihat desain yang menerapkan white space terlihat lebih rapi dan mudah dibaca. Berikut adalah penerapan Line Spacing, Margin, dan Padding pada desain tersebut: dos:3bd8dc50ee95474c59468077c888820620211005162623.png Line Spacing digunakan untuk mengatur jarak antar teks pada satu paragraf. Kemudian ada Padding yang digunakan untuk membuat jarak ke dalam dari kotak yang dibuat. Lalu, yang terakhir ada Margin untuk memberikan jarak antar tombol.