Newest Info

Berita, info dan pengumuman terbaru berkaitan dengan perkembangan teknologi

Tentang UI Guideline?—?#3: Margin

15 Agustus 2019 | Dwinawan via medium
post image

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. Adalah jarak antar elemen. Jarak tombol dengan teks di dekatnya Jarak Title dengan deskripsi Jarak gambar dengan judul dll Mari kita lihat beberapa guideline yang terdapat aturan penggunaan margin di dalamnya Source: https://dribbble.com/shots/6964917-Uber-s-Design-System-Base Source: https://marvelapp.com/styleguide/design/layout Source: https://primer.style/css/utilities/margin 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. 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…. 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 Membuat UI Guideline untuk Shadow Membuat UI Kit untuk komponen yang sering digunakan. IndonesiaIT 2019, [...], Artikel ini di ambil dari feed medium, untuk pengalaman baca yang lebih baik, silahkan kunjungi situ aslinya. IndonesiaIT - Software Developer Terbaik. Baca Selengkapnya.