2-layout-fundamental

# Layouts Fundamental

Author : Muhammad Fauzan Arrafi (Ifarra)

Untuk membuat design yang rumit, seorang UIUX designer biasanya mempertimbangkan beberapa aspek penting dalam memahami dan mengembangkan desain yang kompleks, antara lain:

1. Layout: Tata letak elemen-elemen pada antarmuka pengguna.

2. Grid System: Penggunaan sistem grid untuk mengatur dan menyusun elemen-elemen di dalam layout.

3. Whitespace: Penggunaan ruang kosong yang strategis di antara elemen-elemen desain.

4. Tipografi: Pemilihan jenis huruf

5. Warna: Penggunaan kombinasi warna yang sesuai untuk menciptakan mood.

6. Hirarki Visual: Pengaturan elemen-elemen desain berdasarkan kepentingan dan prioritas informasi.

7. Konsistensi: Menjaga konsistensi dalam elemen-elemen desain, seperti gaya, ukuran, jarak, dan peletakan.

Dengan memperhatikan aspek-aspek ini, seorang UIUX designer dapat menciptakan desain yang tidak hanya menarik secara visual, tetapi juga mudah digunakan dan memenuhi kebutuhan pengguna.

Nah, dari 7 aspek yang di sebutkan di atas Layout merupakan salah satu hal yang paling penting untuk di pertimbangkan, dengan layout yang baik, pesan yang ingin di berikan dari design yang di buat dapat tersampaikan dengan jelas dan baik.

Apa sih layout?

Anggaplah layout sebagai arsitektur dari sebuah produk/konten digital. Ada beberapa aturan dan panduan yang harus kamu ikuti saat mengatur elemen-elemen UI, sama halnya dengan saat merancang sebuah bangunan. Jika elemen-elemen dalam layout kamu menimbulkan masalah kegunaan, itu akan merusak seluruh pengalaman pengguna.

Prinsip-prinsip desain seperti alignment, white space, proximity, proportion, dll. membantu mengatur konten agar pengguna dapat dengan mudah menjelajahinya dan mencapai tujuan mereka.

Dengan mengimplementasi pengetahuan Layout ke design yang kita buat, pengguna dapat lebih nyaman melihat dan menyerap informasi yang kita ingin sampaikan, apa saja sih prinsip-prinsip desain yang bisa di implementasi ke design kita agar terlihat lebih menarik?

Spacing

Spacing merupakan sekumpulan aturan yang menjelaskan bagaimana elemen-elemen dalam sebuah antarmuka seharusnya disusun. Hal ini mencakup nilai-nilai terukur yang mendefinisikan jarak di dalam dan di luar elemen-elemen tersebut. Ketika spacing diterapkan secara konsisten, hal ini dapat membantu menjaga layout tetap bersih dan terorganisir, serta mempermudah pengguna dalam menjelajahi produk.

Dengan menerapkan aturan spacing yang baik, kita dapat menciptakan desain yang tidak hanya menarik secara visual, tetapi juga mudah digunakan dan memenuhi kebutuhan pengguna dengan optimal. Hal ini merupakan salah satu kunci penting dalam mengembangkan produk digital yang user-friendly.

Ada dua jenis pengaturan spacing yang perlu diperhatikan dalam desain UIUX, yaitu:

1. Layout Spacing: Layout spacing mengatur jarak antara elemen-elemen penting dalam sebuah layout, seperti jarak antara bilah atas (top bar) dan konten, atau antara sidebar dan konten. Panduan Material Design merekomendasikan untuk menyelaraskan elemen-elemen pada kelipatan 8dp (device pixel) agar tercipta irama visual yang konsisten di seluruh layar.

2. Component Spacing: Component spacing mengatur hubungan spasial dalam sebuah komponen tertentu, seperti jarak antara ikon dan label pada sebuah tombol. Jika Anda tidak menjaga konsistensi spacing ini di seluruh tombol dalam halaman, hal ini dapat terasa mengganggu bagi pengguna secara bawah sadar dan terlihat berantakan. Menjaga konsistensi pada aspek ini akan memberikan keseimbangan yang baik pada komponen-komponen antarmuka pengguna, sehingga sangat penting untuk menetapkan aturan yang konsisten di seluruh produk.

Margins

Margin adalah ruang/jarak di antara elemen-elemen. Ini bisa berupa ruang di sekitar sebuah tombol, di antara kolom-kolom, atau antara gambar dan konten teks di sekelilingnya. Margin merupakan blok bangunan dasar dari pengaturan layout spacing.

Margin juga memberikan kita whitespace (atau ruang negatif) pada sebuah halaman. Bayangkan ini sebagai ruang untuk “bernafas” pada halaman, yang membantu menghilangkan kepadatan visual. Whitespace juga membantu menjaga keseimbangan dan irama pada halaman di antara elemen-elemen.

Dengan menerapkan aturan margin yang tepat, kita dapat menciptakan komposisi visual yang bersih, terorganisir, dan mudah dibaca. Ini akan berdampak positif pada pengalaman pengguna saat berinteraksi dengan produk digital kita. Sebagai seorang UIUX designer, pemahaman yang baik mengenai peran margin dalam layout spacing menjadi sangat penting.

Padding

Padding adalah ruang di dalam batas elemen, dimulai dari batas (border) dan meluas hingga elemen dalam berikutnya. Sebagai contoh, jika sebuah tombol adalah komponen, maka jarak antara label tombol dan tepi tombol adalah padding.

Hampir setiap elemen memiliki padding. Hal ini mencegah ruang yang tidak mencukupi dalam desain responsif ketika dilihat di layar yang lebih kecil.

Jadi, margin mengatur jarak antar elemen, sedangkan padding mengatur jarak internal di dalam elemen itu sendiri. Keduanya sama-sama penting dalam memastikan layout yang bersih, teratur, dan memberikan pengalaman pengguna yang optimal.

Keylines

Keyline adalah garis-garis imajiner yang membantu menyelaraskan elemen-elemen yang ditempatkan di luar grid tata letak (layout grid). Keyline juga memungkinkan desainer untuk menentukan jarak antar elemen dari tepi layar.

Dengan menggunakan keyline, seorang UIUX designer dapat memastikan elemen-elemen pada antarmuka pengguna tetap teratur dan selaras, bahkan jika mereka tidak berada tepat pada grid tata letak. Ini membantu menciptakan komposisi visual yang terstruktur dan menyenangkan bagi pengguna.

Alignment

Alignment dalam desain UI/UX mengacu pada cara elemen-elemen visual (teks, gambar, tombol, dll.) diposisikan dan disejajarkan satu sama lain dalam sebuah layout atau antarmuka. Alignment adalah salah satu prinsip dasar dalam desain yang membantu menciptakan komposisi yang teratur, konsisten, dan mudah dibaca.

Apa saja sih Alignment yang harus di perhatikan dalam pembuatan design yang baik?

1. Left Alignment: Left alignment sering menjadi pilihan utama untuk blok teks panjang, seperti artikel atau posting blog. Namun, alignment ini juga cukup fleksibel untuk digunakan dalam berbagai konteks desain lainnya.

   Oleh karena itu, ketika ragu-ragu, left alignment merupakan pilihan yang solid dan user-friendly. Ia membantu menciptakan hierarki visual yang jelas dan memudahkan pengguna memindai serta memahami konten dengan cepat, berikut adalah benefit menggunakan left alignment:

   • Membuat konten terlihat rapi dan terorganisir.
   • Meningkatkan keterbacaan, terutama untuk teks panjang.
   • Memberikan kesan formal dan profesional.
   • Memudahkan pengguna memindai dan mencari informasi.

2. Right Alignment: Right alignment memposisikan elemen-elemen di sepanjang batas kanan suatu area atau kontainer. Ini memang merupakan pilihan yang jarang digunakan, terutama untuk bahasa yang dibaca dari kiri ke kanan, karena dapat mengganggu alur membaca alami pengguna dengan menciptakan titik awal teks yang tidak rata.

   Meskipun demikian, right alignment memiliki kegunaannya sendiri, seperti saat bekerja dengan data contohnya data numerik, dan side notes, right alignment membuatnya terlihat menonjol atau rapi dalam tata letak tertentu, benefit menggunakan right alignment:

   • Menyoroti informasi penting atau elemen sekunder.
   • Menciptakan keseimbangan visual dengan elemen-elemen lain yang left-aligned.
   • Membantu memisahkan konten utama dari informasi tambahan.
   • Sering digunakan untuk menu, navigasi, atau tombol aksi.

3. Top Alignment: Top alignment sering digunakan dalam menu navigasi web atau posting blog multimedia. Dalam menu navigasi, penggunaan ikon dan teks dengan ukuran berbeda tetapi memiliki garis atas yang sejajar memudahkan pengguna untuk memindai.

   Pada posting blog multimedia yang memadukan teks, gambar, dan video, menyelaraskan elemen-elemen ini di bagian atas juga membantu menciptakan alur konten yang koheren. Hal ini dapat membuat konten lebih mudah dipindai dan dipahami oleh pengguna.

   Jadi, meskipun right alignment bukanlah pilihan umum, namun dalam konteks tertentu seperti menu navigasi dan layout konten multimedia, alignment ini dapat memberikan manfaat yang signifikan. Ia membantu menjaga konsistensi visual dan memudahkan pengguna berinteraksi dengan antarmuka, benefit menggunakan top alignment:

   • Menjaga fokus pengguna pada konten paling penting.
   • Memberikan kesan terstruktur dan rapi.
   • Memudahkan pengguna menemukan informasi kunci.
   • Sering digunakan untuk header, judul, atau navigasi utama.

4. Bottom Alignment: Bottom alignment memposisikan elemen-elemen secara rapi di sepanjang garis horizontal, menciptakan tampilan yang tertanam dan berakar. Alignment ini sangat efektif saat berurusan dengan elemen-elemen yang memiliki tinggi berbeda-beda, karena dapat menetapkan garis dasar visual yang konsisten.

   Contohnya, dalam galeri foto, judul gambar atau kredit fotografer sering kali di-bottom-align untuk mempertahankan keseragaman, terlepas dari dimensi foto-foto tersebut. Serupa dengan itu, informasi hak cipta di footer situs web juga sering di-bottom-align untuk menegaskan kehadirannya yang kurang mendesak namun berakar.

   Metode ini berguna untuk menjaga estetika yang bersih dan terorganisir, sambil memungkinkan pengguna memindai konten dengan mudah. Bottom alignment membantu menciptakan hierarki visual yang jelas dan menjaga fokus pengguna pada elemen-elemen utama. ini benefit dari bottom alignment:

   • Menempatkan informasi sekunder atau kontrol di tempat yang tidak mengganggu.
   • Membantu menjaga fokus pengguna pada konten utama.
   • Sering digunakan untuk footer, navigasi tambahan, atau elemen-elemen pendukung, benefit menggunakan bottom alignment:

5. Center Alignment: Center alignment, elemen-elemen sejajar dengan garis tengah, baik secara horisontal maupun vertikal. Ini sering diterapkan pada elemen-elemen seperti header atau label tombol.

   Center alignment pada bidang horizontal tidak terlalu berguna untuk blok teks yang besar (lebih dari tiga baris), karena titik awal yang berbeda-beda untuk setiap baris dapat mempersulit pembacaan, benefit menggunakan center alignment:

   • Menarik perhatian pengguna ke elemen yang ditonjolkan.
   • Menciptakan kesan fokus dan keseimbangan.
   • Sering digunakan untuk konten penting, call-to-action, atau elemen-elemen kunci.

Aspect ratio

Aspek rasio mengacu pada proporsi antara dimensi lebar dan tinggi suatu elemen. Ini sangat penting saat berurusan dengan konten yang diunggah pengguna, karena orang-orang mengunggah gambar dengan ukuran yang berbeda-beda. Menampilkan gambar-gambar ini secara konsisten akan mempertahankan harmoni visual.

Sebagai contoh, pada situs media sosial, foto profil sering dibatasi dalam bentuk persegi atau melingkar, sehingga pengguna harus menyesuaikan ukurannya atau memotongnya. Aspek rasio umum untuk gambar adalah 16:9 dan 4:3, meskipun gambar persegi 1:1 semakin populer berkat situs-situs seperti Instagram.

Catatan akhir

Nah dari 7 aspek yang di sebutkan di atas, sekarang kalian sudah tau kan mengapa layout menjadi salah satu aspek terpenting dalam proses membuat design yang baik di UIUX, memang benar tidak semua aspek harus di implementasikan ke dalam design yang kita buat, akan tetapi dengan mengaplikasikan design dan teori yang tepat, design yang kita buat dapat terlihat lebih menonjol dan pesan yang ingin kita sampaikan dapat lebih cepat tersampaikan.