Tutorial UI Design — #5 UI Guideline: Margin

Seri Belajar UI Design Bagian 5, UI Guideline: Tampil Teratur Dengan Margin

Artikel ini merupakan lanjutan dari UI Guideline: Colors and Typogprahy.

Bagi kamu yang belum paham dengan UI Guideline, silahkan membaca dari artikel pertama UI Guideline. Klik disini.

Simak Landing Page terlebih dahulu. Kita warm up dengan terbiasa melihat referensi desain.

Landing page by Dwinawan

Pada artikel sebelumnya, kita telah membuat UI Guideline untuk Colors dan Typography. Sekarang saatnya untuk margin.

Margin, Apa Itu?

Merupakan jarak antar elemen.

1. Jarak button ke teks bagian dalam
2. Jarak sisi pinggir screen dengan teks
3. Jarak gambar dengan judul
4. Masih banyak lagi

Seperti Apa UI Guideline Untuk Margin?

Simak gambar berikut untuk mengetahui desainer membuat marginnya.

Uber’s Design System

Marvel Styleguide

Kenapa Margin Harus Diberi Aturan?

terdapat beberapa keuntungan dari membuat UI Guideline untuk margin sebelum kamu eksekusi untuk mendesain.

1. Konsisten.
2. Mempercepat proses design. Karena kita tak perlu bingung untuk menentukan margin pada setiap elemen.
3. Mempercepat proses development. Seorang developer hanya melihat UI dan angka pada UI Guideline. Ngga perlu tanya tanya dan berdebat dengan desainer.

Darimana Mulainya?

Sebelumnya, kita telah membuat UI Guideline untuk Colors dan Typography. Maka dari itu, untuk margin juga bisa dibuat UI Guideline nya terlebih dahulu.

Apa saja metode yang perlu digunakan untuk margin?

Ada 2 metode

1. Menggunakan margin berkelipatan 4px. Sehingga margin yang bisa digunakan adalah 4px, 8px, 12px, 16px, dst….
2. Penggunaan margin berkelipatan 8px. Sehingga margin yang bisa digunakan adalah 8px, 16px, 24px, 32px, dst….

Saatnya Implementasi!

Coba kamu eksekusi metode margin berkelipatan 4px. Berikut UI Guidelinenya

Design System by Dwinawan

Berikut implementasinya. Tinggal di copas aja.

Implementasi Margin by Dwinawan

Membuat UI Guideline bisa mempercepat proses mendesain dan men-develop suatu aplikasi. Karena telah kita buat aturan-aturannya.

Have a nice day!

Ghifari Nur Athoillah, Mahasiswa di Program Profesi CCIT-Fakultas Teknik Universitas Indonesia

Akses materi selanjutnya di:

Tutorial UI Design — #6 Masalah

Referensi:

Tentang UI Guideline — #3: Margin