Tentang UI Guideline — #3: Margin

Dwinawan
Dwinawan
Aug 14 · 3 min read

Ini adalah artikel lanjutan mengenai UI Guideline. Artikel sebelumnya bisa disimak disini , Pada bagian ke-3 ini kita akan Membuat UI Guideline untuk Margin

Sebelum kita mulai, mari kita melihat design yang telah dibuat



Pada artikel sebelumnya, kita telah membuat aturan mengenai Warna dan Typography. Kini kita akan membuat aturan atau guideline mengenai penggunaan margin.


Apa itu Margin?

Adalah jarak antar elemen.

  • Jarak tombol dengan teks di dekatnya
  • Jarak Title dengan deskripsi
  • Jarak gambar dengan judul
  • dll

Seperti apa guideline untuk margin?

Mari kita lihat beberapa guideline yang terdapat aturan penggunaan margin di dalamnya




Kenapa margin harus diberi aturan?

terdapat beberapa keuntungan dengan membuat aturan ataupun guideline untuk margin:

  • Konsistensi
  • Mempercepat proses design, karena seorang designer tidak perlu lagi mempertimbangkan akan menggunakan margin 16px, 15px ataupun 17px
  • Mempercepat proses development, karena seorang developer tidak perlu mencari tahu jarak margin yang digunakan oleh sang designer. Jika aturan penggunaan margin telah di definisikan, maka seorang developer cukup dengan melihat design dan bisa langung menentukan akan menggunakan margin yang mana.

Dari mana kita memulai nya?

Jika sebelumnya kita membuat UI Guideline untuk Colors, Typography dengan membuat UI nya terlebih dahulu, maka untuk margin bisa kita definisikan aturan nya sebelum membuat UI nya, lalu setelah di definisikan bisa diuji coba pada beberapa design lalu dilakukan review apakah cocok atau tidak.

Beberapa metode yang bisa digunakan dalam mendefinisikan aturan margin:

  • Penggunaan margin adalah kelipatan 4px. Sehingga margin yang bisa digunakan adalah 4px, 8px, 12px, 16px, dst….
  • Penggunaan margin adalah kelipatan 8px. Sehingga margin yang bisa digunakan adalah 8px, 16px, 24px, 32px, dst….

Bagaimana Implementasi nya?

Mari kita implementasikan margin dengan kelipatan 4px pada design yang telah dibuat

Berikut adalah daftar margin yang akan kita pakai

Dan berikut implementasi pada design nya

Dengan membuat guideline untuk margin, seorang designer bisa menjadi lebih cepat dalam proses design nya, karena ia dengan cepat memutuskan untuk menggunakan margin yang mana.

Dengan membuat guideline untuk margin, seorang developer bisa lebih cepat dalam proses coding nya, Ia tidak perlu mencari tahu margin yang digunakan oleh sang designer, karena semua margin telah terdefinisikan.


Berlanjut ke artikel selanjutnya

Bagian 4 — Membuat Guideline

  1. Membuat UI Guideline untuk Shadow
  2. Membuat UI Kit untuk komponen yang sering digunakan

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar and Insight Design • UI Designer • Love to create design exploration @ dribbble.com/dwinawan • Find me on twitter twitter.com/@dwinawan_

Insight

Insight

UI, UX, Bisnis Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade