() translation by (you can also view the original English article)
Ini adalah situasi yang mungkin sudah Anda alami: Anda seorang developer dan Anda sedang membuat sebuah prototipe untuk mendemonstrasikan sesuatu. Itu berjalan dengan baik sesuai dengan yang Anda harapkan, tapi reaksi wajah mengerikan pengguna Anda memberitahu ada sesuaty yang salah–demo Anda terlihat buruk.
Mari kita lihat guidelines sederhana dan tips untuk membantu demo Anda terlihat baik seperti yang seharusnya.
Relax
Anda mungkin pernah mendengar.:
“Desain yang baik, ketika bekerja dengan baik, maka tidak akan terlihat. Hanya jika itu berjalan dengan buruk, kita menyadarinya.” – Jared Spool
Ini relevan untuk semua desainer, tapi , sebagai developer. Anda membangun sebuah demo; sesuatu yang hanya dibuat untuk keperluan demo. Pengguna seharusnya lebih fokus kepada tugas yang Anda susun, bukan lebih bereaksi terhadap “desain”.
Petunjuk #1: Dengan mencoba membuat statemen secara stylish, besar kemungkinan Anda sebenarnya menjauh dari tujuan menyediakan demo yang baik. Tetap buat itu sederhana. Tetap pada tujuan untuk membuatnya bekerja.
Jika sesuatu “tidak terlihat benar”, hapus semua detail visual yang Anda tambahkan (contoh box shadow, border, efek) dan kembali ke papan menggambar.
Nah sekarang sejak kata peringatan kecil sudah keluar, mari kita konsentrasi ke beberapa petunjuk yang lebih praktis.
Hindari Palet Warna yang berantakan.
Tidak ada yang lebih menyakiti mata secara cepat daripada pemilihan warna yang buruk. Sebenarnya, keputusan pemilihan warna harus ditangani dengan baik di dalam proses perancangan UI, namun kita selalu tergoda untuk membuat pilihan warna yang berani sejak dini.
Jika Anda membuat wireframe untuk UI, Anda akan mulai sesederhana mungkin, dengan bentuk, garis dan monokrom yang belum sempurna. Setelah layout dan hubungan antar bentuk telah terbentuk, Anda akan mulaimendetail, melangkah terus sampai ke level high fidelity sampai akhirnya Anda menjelajah pewarnaan. Maka inilah beberapa petunjuk:
Petunjuk #2: Pertimbangkan menggunakan monokrom pada demo anda. Tetap gunakan nuansa abu-abu (fifty shades of grey?) sampai Anda siap menggunakan warna untuk membantu memperjelas semuanya.
Petunjuk #3: Sebagai aturan praktis, hindari warna jenuh penuh (yaitu: warna dengan kekuatan penuh, tanpa warna putih tambahan). Terutama bila dilihat pada layar yang terang, mereka tidak nyaman untuk dilihat saat digabungkan satu sama lain.
Petunjuk #4: Hal yang sama juga berlaku pada warna hitam dan putih. Dengan menghindari warna ekstrim, dan menggunakan warna kehitam-kehitaman atau keputih-keputihan, Anda tidak akan membuat mata pengguna Anda lelah.
Pergilah lebih jauh lagi dan tambahkan sentuhan warna pada hitam dan abu-abu Anda. Seperti yang dikatakan Ian Storm Taylor pada tahun 2012:
“Bayangan tidaklah hitam’
Pelajaran Ian dari sekolah seni saya cermikan - Saya ingat guru saya menantang saya untuk mencari titik hitam pada A Sunday Afternoon on the Island of La Grande Jatte karya George Seurat.
Pointer # 5: Saat menambahkan warna pada desain monokrom Anda, lakukan satu per satu. Setiap warna yang Anda tambahkan adalah gangguan bagi pengguna. Kita membahas sedikit tentang menghindari penggunaan warna jenuh yang tinggi, tapi bukan berarti bahwa Anda tidak dapat menggunakan berbagai kejenuhan satu warna. Itu akan memberi Anda variasi dan kedalaman yang Anda butuhkan, bebas risiko.
Teori WarnaPerhatian dan Kedalaman Warna dalam 60 detik.
Teori Warna6 Panduan Warna Pemula “Yang Mengutamakan Keselamatan” Untuk Web.
Jangan Mempersulit Tipografi
Jika berbicara demo dan prototype tidak perlu untuk kita menggunakan selain font bawaan dari sistem (lihat Petunjuk #1). Tetap pikirkan hal ini:
Petunjuk #6: Anda berada di zona yang aman dengan sans-serif ("tanpa" serif). Tipografi Serif adalah font yang memiliki rincian di mana stroke berakhir (beberapa jargon di sana untuk Anda).
Serifs bisa berguna untuk menambah personalitas ke desain, dan mereka kadang bisa membuat teks body mudah dibaca. Tapi secara profesional mereka tidak digunakan dalam desain UI, khususnya pada ukuran yang lebih kecil, seiring waktu mereka menampilkan bobot stroke yang bervariasi.
Catatan: semakin resolusi layar meningkat, kejelasan meningkat, dan argumen ini menjadi kurang berat.
Google menggunakan sisi “manusia” dari Droid Sans pada tampilan Androidnya, dan yang terbaru Roboto dan Noto. Apple menggunakan San Francisco untuk semua OS mereka, sebelumnya Neue Helvetica. OS Firefox menggunakan Fira Sans. Lihat kesamaan tema dari semuanya? Semua sans-serif.
Petunjuk #7: Hindari ambiguitas. Kombinasi karakter seperti O0, aeo, 8B, Il1, 5S, 2Z, 6b dan 9g kadang sulit untuk dikenali, tergantung dari tipenya. Tes mereka; jika Anda sulit untuk membedakannya maka Anda lebih baik memilih tipe font yang berbeda.
Ruang untuk Bernafas
Whitespace (spasi fungsional) membantu desainer visual dalam banyak hal. Itu membantu membuat rasa keseimbangan, menarik perhatian pada aspek desain yang diperlukan, mengurangi beban kognitif bagi pengguna (saya bisa terus berlanjut). Jika UI Anda terlalu ramai, maka akan cepat membuat pengguna merasa tidak nyaman dan mengurangi kemampuan mereka untuk memproses tugas secara efektif.
Ketika berhadapan dengan banyak yang informasi, sangat menggoda bagi kita untuk memaksakan untuk memsukannya sebanyak mungkin, tapi yang mana dari dua contoh ini yang lebih mudah dibaca?
Petunjuk #8: Dimana spasi yang melegakan “lebih” dipikirkan hampir lebih baik. Tambahkan padding, tambahkan margins, perbesar line-height, perlebar semuanya.
Petunjuk #9: Buat spasi Anda konsisten. Gunakan unit standar sebagai basis, tambahkan spasi secara inkremen dari (sebagai contoh) 10px. Konsistensi adalah kunci untuk membuat ritme dan harmoni.
Buat Hidup Anda lebih Mudah
Tidak perlu merasa malu; biarkan framework seperti Bootstrap dan Foundation melakukan tugasnya. Mereka kadang dikritik karena membuat website versi produksi terlihat umum dan kurang imaginatif, tapi untuk tujuan prototipe mereka sempurna, langsung bisa digunakan.
Semua keputusan yang kita telah diskusikan sejauh ini telah diberikan kepada Anda: tipografi, warna, spasi, konsistensi dan detail berantakan seperti form yang Anda tidak mungkin salah.
Petunjuk #10: Jangan ragu bergantung pada yang lain. Ambil template Bootstrap, template Foundation, atau Material Design Lite atau Skeleton atau Pure CSS atau UIKit atau jutaan framework CSS lain yang sudah ada yang menurut Anda keren! Jangan takut untuk menambahkan gaya Anda sendiri, jangan lupakan poin yang telah kita diskusikan sejauh ini.
Framework-framework ini semua sangat komperhensif. Pastikan Anda menggunakan semua bagian yang Anda butuhkan; Anda kemungkinan akan mendapat masalah jika hanya memilih beberapa elemen saja.
Kesimpulan
Ini tidak dimaksudkan sebagai artikel fundamental desain, tapi lebih kepada untuk membantu Anda menghilangkan segala masalah yang Anda dapatkan pada desain prototipe Anda. Jika Anda seorang developer-mungkin merekam pelajaran, atau mempresentasikan produk ke klien atau tim Anda-dan Anda benar-benar menginginkan demo Anda berjalan dengan sesuai, petunjuk-petunjuk ini seharusnya akan membantu Anda mewujudkannya. Beri tahu di kolom komentar jika Anda memiliki pertanyaan yang spesifik. Semoga beruntung!
