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

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

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….

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

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar and Insight Design • UI Designer • Story Teller • Love to create design exploration @ dribbble.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