Mulailah Dengan Desain UI Dengan Tips Ini Untuk Mempercepat Alur Kerja Anda

Saat Anda mengerjakan sebuah desain, apakah Anda berjuang dengan semua kemungkinan, seperti apakah akan membuat beberapa blok teks lebih besar atau lebih kecil, atau menambah (atau mengurangi) jumlah ruang putih di sekitar elemen. Dan bagaimana dengan warna ini: Haruskah lebih gelap, atau mungkin lebih terang?

Artikel ini adalah tentang membuat batasan dan aturan yang harus diikuti di seluruh proses desain. Ada banyak cara di mana Anda dapat menggabungkan elemen dalam antarmuka pengguna — jadi Anda harus menetapkan beberapa aturan dan batasan, atau alur kerja desain mungkin menjadi tugas yang tidak menyenangkan. Anda mungkin bergumul dengan semua kemungkinan dan mencoba memilih opsi terbaik di antara banyak opsi "benar". Dengan menetapkan (dan mengikuti) beberapa aturan dasar, Anda juga akan membuat desain Anda terlihat lebih konsisten.

Pentingnya Membuat Desain Antarmuka Pengguna Anda Konsisten

Mari kita mulai dari awal. Anda ingin desain Anda terlihat bagus dan dapat dipercaya, dan Anda harus menghindari kekacauan dengan cara apa pun. Agar hal ini terjadi, sangat penting untuk memiliki sistem untuk pekerjaan desain Anda.

Pengembang Anda juga akan menghargai sebuah sistem — mereka akan menyukai kenyataan bahwa desain Anda memiliki keteraturan, dan bahwa Anda membuat pekerjaan mereka lebih mudah.

Sistem Mengubah Ukuran Dengan Ukuran Yang Telah Ditentukan

Tidak masalah apakah Anda ingin mengubah ukuran blok teks, mengubah ukuran gambar, atau menyesuaikan beberapa ruang putih. Anda perlu memutuskan seberapa besar setiap elemen. Dan saya berani bertaruh Anda pernah berada dalam situasi ini: Pernahkah Anda memilih ukuran untuk sebuah elemen, dan setelah lima menit, Anda mengubahnya, dan kemudian lagi, dan mungkin lagi dan lagi?

Ukuran mana yang sempurna? Itu bisa menjadi salah satu yang Anda coba, bukan? Anda harus menghindari jebakan pemborosan waktu yang tak ada habisnya ini!

Mulailah Dengan Memilih Unit Dasar: Kotak 8-Piksel

Untuk membuat keseluruhan desain terlihat lebih bersih, ada baiknya untuk terlebih dahulu mengatur nilai pengukuran yang kemudian akan menentukan semua ukuran. Terserah Anda nilai apa yang Anda pilih, tetapi cukup sering, pilihan terbaik adalah tetap berpegang pada beberapa aturan yang terbukti. Dan salah satu aturan ini adalah mengubah ukuran dan memindahkan elemen tepat delapan piksel. Aturan ini akan merampingkan pengambilan keputusan Anda.

Catatan tentang px versus dp : *Selain piksel (px), Anda mungkin pernah mendengar istilah dp digunakan dalam desain layar dan pembuatan prototipe. Unit dp adalah kependekan dari “piksel kepadatan-independen.” Unit ini relatif terhadap layar 160-dpi, jadi 1 dp sama dengan 1 piksel pada layar 160-dpi, dan sama dengan 2 piksel pada layar 320-dpi, dan seterusnya. Rumus nilai numerik adalah px = dp * (dpi/160) .*

Selalu ingat bahwa jika Anda bekerja dengan elemen atau objek yang lebih kecil, Anda juga boleh menggunakan peningkatan 4-piksel, bukan 8. Kadang-kadang, Anda dapat membuat penyesuaian lebih lanjut, bila diperlukan.

Tapi Mengapa Tepat 8 Piksel?

Ada beberapa alasan mengapa delapan sering berfungsi seperti "angka ajaib" di sini:

• Delapan piksel adalah "lompatan" minimum yang cukup.
• Delapan adalah bilangan yang besar karena habis dibagi empat dan dua.
• Jika Anda menggunakan delapan, Anda dapat dengan mudah mengubah ukuran elemen apa pun tanpa berakhir dengan setengah piksel, seperti 8 / 2 = 4, 4 / 2 = 2, dan 2 / 2 = 1. Jika, sebaliknya, Anda mulai dengan 10, Anda akan mendapatkan 5 piksel, lalu 2,5 piksel, lalu 1,25 piksel. Saat mendesain untuk layar, Anda sebisa mungkin menghindari setengah piksel. Dengan menggunakan piksel utuh, elemen dalam desain akan sejajar dengan batas piksel yang tepat, sehingga akan terlihat lebih tajam.
• Kelipatan delapan (8, 16, 24, 32, 40, 48, 56, 64, 72, 80, dll.) terjalin dengan nilai biner (1, 2, 4, 8, 16, 32, 64, 128, 256 , 512, dll.).
• Akhirnya, angkanya mudah diingat.
  

Apa Keuntungan Menggunakan Grid 8-Pixel?

• Sebagai seorang desainer, waktu keputusan Anda sangat berharga. Ini akan membuat Anda lebih cepat dan efisien.
• Jika Anda bekerja dengan pengembang, Anda dapat membuat sistem yang akan membantu Anda dan tim Anda. Jika pengembang perlu membuat beberapa perubahan cepat, ia dapat menyesuaikan nilainya dengan peningkatan 8 piksel. Ini akan memastikan konsistensi dan ketertiban.
• Orang yang menggunakan website Anda akan merasa nyaman saat mengunjunginya. Mereka akan mempercayai situs web, dan akan lebih mudah bagi mereka untuk menggunakan antarmuka.
  

Bekerja Dengan Kotak Untuk Menata Semua Elemen

Harmoni Horisontal

Saya yakin Anda telah menggunakan grid saat mendesain situs web. Menggunakan kisi membantu Anda menempatkan semua elemen secara akurat di kanvas digital.

Kisi membentuk kerangka antarmuka Anda dan menentukan di mana Anda dapat menempatkan elemen. Template memegang komposisi, dan mendefinisikan batasan yang jelas sehingga desain Anda akan lebih konsisten. Sekarang akan lebih mudah bagi Anda untuk memutuskan di mana harus meletakkan elemen. Saat Anda mendapatkan lebih banyak pengalaman, Anda dapat memperbarui batasan sesuai kebutuhan.

Tapi bagaimana Anda membuat grid ini? Kami akan membahas secara spesifik selanjutnya. Pada dasarnya, jumlah dan ukuran kolom mungkin acak dan tergantung pada kebutuhan Anda. Semakin detail desain Anda, semakin banyak kolom yang dibutuhkan grid. Jika Anda ragu-ragu, mintalah bantuan rekan yang berpengalaman.

Juga, saya sarankan Anda membaca "Panduan Komprehensif untuk Desain UI", yang akan membantu Anda memahami desain antarmuka pengguna sedikit lebih mendalam.

Harmoni Vertikal

Serupa dengan menjaga keselarasan horizontal, penting juga untuk menjaga jarak vertikal dalam desain. Seperti baris dalam spreadsheet, mereka membantu Anda menyimpan teks pada interval yang sama.

Seberapa besar seharusnya baris ini? Sekali lagi, terserah Anda. Namun, saya sarankan menggunakan 8 piksel atau kelipatan 8 (seperti 16). Mendefinisikan ulang batas di mana elemen atau teks harus disejajarkan.

Memilih Ukuran Font dengan Cara yang Benar

Jika Anda melihat beberapa desain yang dibuat dengan baik, Anda akan melihat konsistensi dalam ukuran font. Ini karena suatu alasan.

Catatan : Perlu diingat juga bahwa Anda hanya membutuhkan dua, mungkin tiga, font dalam desain Anda. Namun, memilih tipografi yang tepat dan membuatnya bekerja sama berada di luar cakupan tutorial ini.

Mulailah dengan menentukan beberapa ukuran font utama untuk digunakan di seluruh proyek. (Misalnya, akan bodoh jika menggunakan 30, 31, dan 32 piksel. Sebaliknya, gabungkan ketiga ukuran yang sangat mirip ini menjadi satu.)

Ukuran Font Standar Membawa Dua Manfaat:

• Desain Anda akan lebih konsisten dan lebih elegan.
• Ini akan mempercepat proses desain dan membuat Anda lebih efisien.

Ukuran Font

Saat Anda menentukan ukuran font, pastikan untuk tidak menambah ukuran dengan kenaikan yang sama. Saat Anda memperbesar teks, itu harus non-linear. Ini berarti bahwa semakin besar teks yang Anda buat, semakin besar kenaikannya.

Katakanlah Anda memiliki blok teks dengan ukuran font 12 piksel, dan Anda ingin memperbesarnya. Anda mencoba 14 piksel, dan Anda puas. Tapi kemudian bayangkan Anda memiliki judul besar (40 piksel) dan Anda ingin membuatnya lebih besar. Apakah Anda akan menambah ukuran hanya 2 piksel, dari 40 menjadi 42? Tentu saja tidak. Secara optik, teks membutuhkan perubahan yang jauh lebih besar. Anda mungkin perlu meningkatkannya sebesar 24 piksel, memberi Anda judul 64-piksel yang lebih besar.

Singkatnya, ini berarti bahwa semakin besar teks yang Anda inginkan, semakin besar peningkatan yang perlu Anda gunakan. Prinsip yang sangat sederhana ini tidak hanya berlaku untuk teks, tetapi juga untuk ukuran tombol, ruang putih, dan yang lainnya.

Hal ini biasanya didasarkan pada perkembangan geometris. Berikut adalah bagan yang sangat berguna yang menunjukkan skala font:

Namun, untuk tipografi, satu skala terbukti digunakan dengan ukuran font yang Anda ingin pertahankan selamanya. Skalanya adalah 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, dan 72 piksel.

Tinggi Baris Teks

Setelah Anda menentukan semua ukuran font, Anda perlu mengatur spasi baris. Untuk tinggi garis, gunakan penambahan 4 piksel lagi. Misalnya, untuk teks 16-piksel, mari kita atur tinggi garis menjadi 24 piksel. Jika Anda ingin teks lebih bernafas, maka tambah tinggi baris sebesar 4 piksel menjadi 28.

Tentukan Warna Proyek Anda

Apakah Anda tahu berapa banyak kombinasi warna yang ada? Banyak! Anda akan membuang terlalu banyak waktu jika Anda tidak menentukan bayangan warna terlebih dahulu. Anda tidak dapat membatasi diri pada hitam, putih, dan, katakanlah, biru. Untuk setiap warna, Anda akan membutuhkan corak lain, dan penting untuk mengaturnya terlebih dahulu, sehingga coraknya konsisten di seluruh proyek desain Anda. Kami tidak ingin membuat kekacauan dalam desain. Bertujuan untuk 5 hingga 10 warna untuk setiap warna. Saya lebih suka mendefinisikan 9 warna untuk setiap warna.

Mari kita lihat lebih dekat pada nuansa warna.

Mengapa 9 Nuansa Setiap Warna?

• Keuntungan pertama adalah penamaan warna. Apakah Anda menggunakan editor grafis atau kode CSS, Anda pasti akan mendapat manfaat dari tip ini. Setiap bayangan akan diberi nomor, seperti 100, 200, 300, 400, 500, 600, 700, 800, dan 900. (Mengapa ratusan? Biasanya, beginilah cara pemotongan tipografi juga diatur.)

• Kedua, 9 adalah angka yang berguna untuk menentukan warna. Cara terbaik untuk mempersiapkan nuansa ini adalah dengan menyiapkan deretan 9 kotak dan mengisi kotak dengan warna. Yang di tengah akan menjadi warna dasar . Kemudian, Anda menentukan bayangan paling terang (di paling kiri) dan bayangan paling gelap (di paling kanan). Langkah selanjutnya adalah memilih warna di antaranya.

Siapkan Berbagai Ukuran, Jenis, Dan Keadaan Unsur

Saat mengerjakan sebuah desain, Anda biasanya akan bekerja dengan banyak sekali ikon, tombol, dan komponen lainnya. Sekali lagi, adalah ide yang baik untuk mempersiapkan terlebih dahulu beberapa ukuran untuk mereka, dan membatasi pilihan sesedikit mungkin. Selama proses desain, jangan menambahkan ukuran lain, dan jangan mencoba menyesuaikan ukuran komponen dengan kebutuhan Anda. Sebagai gantinya, gunakan saja yang sudah Anda tentukan, dan seluruh desain akan lebih konsisten dan bersih.

Mari kita lihat tombol sebagai contoh. Saat Anda mulai, Anda harus menentukan struktur hierarkinya. Untuk melakukannya, buat tombol dengan tindakan utama, tombol dengan tindakan sekunder, dan mungkin tombol lain dengan tindakan yang kurang penting. Untuk setiap tombol, tentukan statusnya (aktif, tidak aktif) dan varian warnanya. Selalu mencoba untuk mengurangi jumlah elemen menjadi yang paling penting.

Tentukan Properti Elemen Lainnya

Perancang antarmuka pengguna sering menggunakan bayangan dalam pekerjaan desain mereka. Namun, untuk desainer yang kurang berpengalaman, bayangan terkadang bisa menjadi perjuangan. Saat membuat bayangan, Anda harus mengatur jarak bayangan di sepanjang sumbu x dan sumbu y, dan juga radius blur, warna, dan transparansi. Bayangan bisa memakan banyak waktu untuk menyempurnakannya, itulah sebabnya Anda harus mempersiapkannya sebelum menyelam ke dalam desain. Akan sangat membantu untuk menyiapkan satu set bayangan (menggunakan metode yang sama seperti untuk warna), dan kemudian hanya menerapkannya selama proses desain.

Juga, perhatikan semua properti elemen lain yang akan Anda kerjakan, seperti radius sudut, transparansi, dan gradien warna.

Ruang Putih

Menyesuaikan ruang putih dengan benar adalah penting. Apakah Anda mengimbangi elemen dari luar (margin) atau dari dalam (padding), Anda harus mengandalkan angka ajaib 8 lagi. Tingkatkan offset sebesar 8 piksel (4 untuk elemen kecil). Seperti ukuran font, semakin besar celah yang Anda inginkan, semakin besar kenaikannya (sekali lagi, Anda harus menentukan kenaikan ini sebelumnya).

Kesimpulan

Untuk membuat desain Anda bersih dan konsisten, tentukan beberapa batasan dan jalur yang jelas melalui proses.

Saat mengerjakan setiap elemen desain Anda, ingatlah hal berikut:

• Lihat apakah Anda telah menggunakannya di suatu tempat dalam desain Anda. Jika demikian, Anda cukup menyalin elemen itu.
• Ikuti ritme horizontal dan vertikal, dan sesuaikan ukuran elemen menggunakan langkah-langkah yang Anda tentukan di awal.
• Hindari keputusan rumit dan pertempuran tanpa akhir dengan piksel. Memiliki sistem di tempat.
• Jangan membuat elemen yang sama dua kali. Jika ada pesanan dalam desain Anda, pekerjaan Anda akan lebih baik dan lebih efisien, Anda akan dapat melakukan iterasi lebih cepat, dan Anda akan dapat berkomunikasi dengan pengembang dengan lebih mudah. Pengembang akan menetapkan variabel yang mengikuti gaya Anda, jadi tentukan dengan jelas. Anda akan mendapatkan desain yang bersih, dan pengembang akan dapat membuat kode yang lebih baik dan berkelanjutan. Semua orang akan senang.

Bacaan Terkait

• “Membangun Desain UI yang Lebih Baik Dengan Layout Grids,” Nick Babich, Smashing Magazine
• “Apa Perbedaan Antara “px”, “dip”, “dp” Dan “sp”?,” Stack Overflow
• “Mengapa Desainer UI Menggunakan “dp” Alih-alih “piksel” Sebagai Unit Untuk Mendesain Aplikasi Seluler?,” Kikahola, Medium
• “properti CSS font-weight ,” dokumen web Jaringan Pengembang Mozilla
• “Tingkatkan Game Desain Anda Dengan Menggunakan Lebih Sedikit Font,” Jacci Howard Bear, Lifewire
• “Membuat UI Shadow yang Tidak Menyebalkan”, Anastasia Kas, Medium
• “10 Aturan Emas yang Harus Anda Patuhi Saat Menggabungkan Font: Tips Dari Seorang Desainer,” Janie Kliever , Canva
• “Desain Material: Kisi 8 dp, Kisi 4 dp,” Bantuan Google
• “Mengapa Beberapa Desain Terlihat Berantakan, dan Lainnya Tidak,” Reinoud Schuijers, Kolektif UX