Back to Basic: UI Design Fundamental

Introduction

Menurut Gary Simon, Ada 7 UI Design Fundamental yang harus dipenuhi untuk mencapai 'good design'

7 Fundamental Design ini diambil dari video Design Course - The 2020 UI Design Fundamentals Crash Course

7 UI design fundamental itu adalah:

Whitespace
Alignment
Contrast
Scale
Typography
Color
Visual Hierarchy

Penjelasan lengkapnya akan saya jelaskan dengan ilustrasi,

1. White Space

White Space berarti ruang putih kosong, dengan menambahkan whitespace yang cukup, design kita terasa lega dan tidak crowded. Kita harus memberikan 'breathing room' yang cukup pada design kita.

Berikan padding yang cukup pada design kalian, pastikan juga padding yang kalian berikan konsisten jadi tidak berat sebelah.

2. Alignment

Alignment berarti design kamu memiliki design yang sama rata, biasanya di kiri. Dengan menggunakan fundamental ini, design akan terasa lebih rapi.

Biasanya, dalam developing, kamu bisa menambahkan container untuk memberikan padding dan max-width

Contoh:

<section>
  <div class="container"></div>
</section>
 
<style>
  .container {
    <!-- Width bisa juga diganti dengan padding -->
    width: 90%;
 
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
  }
 
  .section {
  <!-- tambahkan styling background color disini agar tidak terpotong -->
  }
</style>

Contrast adalah perbedaan warna background dengan tulisan text yang kamu miliki. Contrast harus mencukupi agar tulisan bisa dibaca dengan mudah. Contrast harus memenuhi aturan WCAG 2.0, kamu bisa menggunakan website ini untuk mengecek contrast. Ada juga extension di figma yaitu A11y - color contrast checker.

Fun fact: A11y berarti Accessibility, 11 diambil dari jumlah huruf accessibility di tengah huruf a dan y.

4. Scale

Scale adalah ukuran tulisan yang kalian gunakan. Gunakanlah ukuran font yang tidak terlalu besar dan tidak terlalu kecil. Untuk font tag <p> biasanya adalah 16px. UI Fundamental Contrast dan Scale adalah 2 hal yang sangat mempengaruhi WCAG scale.

Jangan membuat pengguna websitemu kesulitan untuk membaca ya!

5. Typography

Typography adalah pilihan font yang kita gunakan. Jangan terlalu banyak menggunakan font, biasanya saya menggunakan 1-2 font, cukup menggunakan 1 font sans-serif dan 1 font serif. Gunakan juga font yang menurut kamu bisa meng-komplemen website kamu dengan baik.

Pro tip: Jangan pake comic sans ;)

6. Color

Warna yang kalian gunakan pada website sangat mempengaruhi penampilan designnya. Jangan gunakan terlalu banyak warna. Biasanya ada beberapa design system yang menganjurkan untuk menggunakan 3 warna yaitu: Primary Color, Secondary Color, dan Accent Color.

Gunakan website yang memberikan rekomendasi warna seperti mycolor.space dan coolors

7. Visual Hierarchy

Visual Hierarchy adalah hal yang sangat penting untuk mendireksikan mata pengguna website kepada alur yang kita inginkan. Berikan font yang lebih besar jika kamu mau membuat tulisanmu menjadi pertama dibaca.

Faktanya pengguna website tidak membaca kata per kata dalam website kita, tapi hanya melakukan 'skimming', yaitu melihat teks yang besar atau heading saja.