Layout merujuk pada cara elemen-elemen dalam antarmuka (UI) diatur dan ditampilkan di layar. Ini mencakup posisi, ukuran,
 dan hubungan antar elemen-elemen yang ada dalam sebuah halaman atau aplikasi.
 Tujuan dari layout adalah untuk memastikan elemen-elemen disusun secara teratur dan mudah dipahami oleh pengguna.

  - **Grid System**: Pengaturan elemen berdasarkan baris dan kolom untuk menciptakan keseimbangan visual dan keteraturan.

  - **Responsivitas**: Menyesuaikan tampilan layout agar tetap nyaman digunakan di berbagai perangkat dengan ukuran layar yang berbeda.

  - **Hierarki Visual**: Menentukan elemen mana yang paling penting dan menonjol, seperti menggunakan ukuran font yang lebih besar atau warna yang kontras.
    
  - **Spacing dan Padding**: Mengatur jarak antar elemen untuk menciptakan tampilan yang rapi dan mudah dinavigasi.

  - **Single Column Layout**: Menampilkan konten dalam satu kolom vertikal. Cocok untuk tampilan yang lebih sederhana, seperti blog atau halaman berita.
  - **Grid Layout**: Mengatur elemen-elemen dalam kolom dan baris, mirip dengan tabel, tetapi lebih fleksibel. Biasanya digunakan dalam aplikasi yang membutuhkan lebih banyak elemen yang saling berinteraksi.
  - **Card Layout**: Menggunakan kartu-kartu yang dapat berisi konten, gambar, atau informasi yang relevan, sering kali digunakan di media sosial dan aplikasi e-commerce.

  Navigation adalah cara pengguna berinteraksi dengan aplikasi atau situs web untuk berpindah dari satu bagian ke bagian lain. Navigasi yang baik memastikan bahwa pengguna dapat dengan mudah menemukan apa yang mereka cari dan berpindah antar layar atau halaman tanpa kebingungannya.

  - **Navigation Bar**: Biasanya terletak di bagian atas atau sisi layar, berisi tombol atau tautan yang mengarahkan pengguna ke bagian utama dari aplikasi atau situs.
  - **Hamburger Menu**: Ikon tiga garis horizontal yang, ketika diklik, membuka menu dengan beberapa pilihan navigasi. Biasanya digunakan di aplikasi mobile untuk menghemat ruang layar.
  - **Tab Bar**: Sebuah bar navigasi horizontal yang biasanya digunakan di bagian bawah layar pada aplikasi mobile, dengan beberapa tab untuk berpindah antar bagian aplikasi.
  - **Sidebar**: Panel vertikal di sisi layar yang berisi daftar pilihan menu atau navigasi. Ini sering ditemukan di aplikasi desktop atau web dengan banyak konten.
  - **Breadcrumbs**: Sebuah jalur navigasi yang menunjukkan posisi pengguna dalam hierarki situs, yang memungkinkan pengguna untuk kembali ke bagian sebelumnya dengan mudah.
  - **Search Bar**: Memberikan pengguna cara cepat untuk mencari konten di dalam aplikasi atau situs.

- **Keterbacaan dan Kemudahan Akses**: Menjamin bahwa pengguna bisa menemukan menu atau tombol navigasi dengan mudah, tanpa kebingungannya.
- **Konsistensi**: Navigasi yang konsisten di seluruh halaman atau layar memastikan pengguna tidak bingung saat berpindah antar bagian aplikasi.
- **Sederhana dan Intuitif**: Hindari penggunaan terlalu banyak pilihan navigasi. Pengguna harus dapat dengan cepat mengerti cara berpindah dari satu tempat ke tempat lain tanpa merasa kebingungan.