Newest Info

Berita, info dan pengumuman terbaru berkaitan dengan perkembangan teknologi

Tentang UI Guideline?—?Bagian 1

01 Agustus 2019 | Dwinawan via medium
post image

Pada artikel kali ini akan membahas mengenai UI Guideline. Artikel akan dibagi menjadi 3 bagian. Bagian 1 — Pengenalan Tampilan UI Guideline Apa sih UI Guideline itu? Mengapa harus menggunakan UI Guideline? Apa keuntungan menggunakan UI Guideline? Kapan harus membuat UI Guideline? Bagian 2 — Membuat Guideline Bagaimana membuat UI Guideline? Bagaimana jika perlu menambahkan elemen baru? Template UI Guideline Bagian 3 — Implementasi Guideline di Sketch Membuat Text Styles Membuat Symbol Membuat Color Pallete Langsung saja kita mulai… Mari kita lihat dulu beberapa UI Guideline yang ada di internet Sumber: https://dribbble.com/shots/6419510-ODS-v1-Consumer-Design-System Sumber: https://dribbble.com/shots/6161977-BlueVine-Product-Style-Guide/attachments Sebuah dokumen yang berisi aturan aturan dalam mendesain suatu produk digital. Aturan aturan tersebut diantaranya: Daftar warna warna yang bisa digunakan Daftar font yang bisa digunakan Ukuran font yang bisa digunakan Bentuk, warna dan ukuran tombol Bentuk input teks Bagaimana menampilkan pesan error pada input teks Bagaimana warna button jika di hover atau saat di klik Bagaimana ukuran font saat digunakan sebagai heading atau saat digunakan sebagai teks di suatu paragraf Bagaimana jarak antar elemen Dan masih banyak lagi…. Alasan yang paling utama adalah menjaga konsistensi elemen elemen dari sebuah produk digital. UI Guideline bisa dikatakan sebagai Single Source of Truth atau sebuah pedoman. Jika seorang designer menemukan beberapa design yang tidak konsisten, designer tersebut bisa membuka UI Guideline untuk mencari tahu mana yang benar. Contohnya: Andi sedang memeriksa hasil design dari team nya. Saat itu mereka sedang mendesain alur pembelian barang. Di halaman pertama, Andi melihat tombolnya berwarna hijau. Di halaman kedua, Andi melihat tombol nya berwarna orange. Karena mengalami hal tersebut, Andi lantas membuka UI Guideline dan mencari tahu bagaimana bentuk, ukuran dan warna tombol yang harus digunakan. 1. Konsistensi di semua halaman sebuah produk digital bisa terjaga Bayangkan jika kamu menggunakan sebuah app untuk mencari tiket pesawat. Pada halaman awal, tombol pencarian nya berwarna hijau. Lalu pada halaman berikutnya tombol pemesanan nya berwarna orange. Bingung enggak? Dengan ada nya UI Guideline, hal ini tidak akan terjadi. Konsistensi cukup penting dalam sebuah produk digital. Karena dengan konsistensi, user akan lebih mudah untuk mengenali sebuah elemen. Contohnya… jika dari awal tombol pencarian nya atau tombol utama nya berwarna hijau, maka di halaman halaman selanjut nya user tinggal mencari sebuah tombol berwarna hijau untuk melanjutkan proses nya. Contoh konsistensi dalam penggunaan sebuah tombol Membuat user mudah mengenali mana elemen tombol untuk melanjutkan proses — — — — — — — — — — 2. Workflow atau…. 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.