Panduan Design Untuk Web Developer

Inilah situasi yang mungkin asing bagi Anda: Anda adalah web developer dan Anda membuat prototipe untuk menunjukkan sesuatu. Ini bekerja seperti yang Anda inginkan, tapi tampak ngeri pada wajah pengguna Anda mengatakan bahwa ada sesuatu yang salah – demo Anda terlihat seperti omong kosong.

Mari kita lihat beberapa panduan dan tip sederhana untuk membantu demo Anda terlihat sebagus yang seharusnya.

Anda mungkin pernah mendengar yang berikut ini:

“Desain bagus, kalau sudah selesai dengan baik, menjadi tak terlihat. Itu hanya jika dilakukan dengan buruk sehingga kita menyadarinya. “- Jared Spool
Ini relevan untuk semua desainer, tapi ini sangat penting bagi Anda, sebagai web developer. Anda sedang membangun demo; Sesuatu yang semata-mata dimaksudkan untuk menunjukkan sesuatu. Penggunanya harus asyik dengan tugas apa pun yang Anda susun sebelum mereka, tidak bereaksi terhadap “desain”.

Pointer # 1: Dengan mencoba membuat pernyataan gaya, ada kemungkinan besar Anda benar-benar bergerak menjauh dari memberikan demo yang bagus. Keep it simple. Stick untuk membuatnya bekerja.

Jika sesuatu “tidak terlihat benar”, hapus semua detail visual yang mungkin telah Anda tambahkan (seperti bayangan kotak, perbatasan, efek) dan kembali ke papan gambar.

Sekarang kita memiliki kata peringatan yang merendahkan, mari kita berkonsentrasi pada beberapa petunjuk praktis lainnya!

Jangan Mengompol Tipografi

Jika kita membicarakan demo dan prototip, sebenarnya tidak perlu menggunakan font sistem (lihat Pointer # 1). Namun, pertimbangkan hal berikut:

Pointer # 6: Anda berada di tangan yang aman dengan sans-serif (“tanpa” serif). Tipografi Serif adalah yang memiliki rincian di mana stroke berakhir (beberapa jargon di sana untuk Anda).

Ini adalah serif
Serif bisa bermanfaat untuk menambahkan kepribadian ke desain, dan mereka seringkali bisa membuat teks lebih mudah dibaca. Tapi mereka tidak terbiasa secara tradisional dalam desain UI, terutama pada ukuran yang lebih kecil, sama seperti saat mereka menampilkan bobot stroke yang bervariasi.

Catatan: saat resolusi layar bertambah, kejelasan meningkat, dan argumen ini kurang memberi bobot.

Google menggunakan Droid Sans “humanis” di antarmuka Android mereka, dan baru-baru ini Roboto dan Noto. Apple menggunakan San Francisco untuk berbagai sistem operasi mereka, dan sebelum itu Neue Helvetica. OS Firefox menggunakan Fira Sans. Perhatikan tema umum di sini? Semua sans-serif.

TEORI WARNA
Mengapa Anda Harus Menghindari Kombinasi Warna Bergetar
Eli Schiff
Pointer # 4: Hal yang sama berlaku untuk warna hitam dan putih. Dengan menghindari hal yang ekstrem, berpaling ke hitam-hitam dan putih, Anda cenderung memberi pengguna mata lelah.

Pergilah lebih jauh lagi dan tambahkan sentuhan warna pada kulit hitam dan abu-abu Anda. Seperti yang dikatakan Ian Storm Taylor pada tahun 2016:

Hindari Palette yang berantakan

Tidak ada yang lebih cepat menyinggung mata daripada pilihan warna yang buruk. Sebenarnya, keputusan warna harus ditangani dengan baik ke dalam proses perancangan UI, namun selalu tergoda untuk membuat pilihan warna yang berani sejak dini.

Tidak, jelas bukan apa yang kita cari
Jika Anda memasang ulang sebuah UI, Anda akan mulai sesederhana mungkin; Dengan bentuk, garis, dan monokrom yang tidak sempurna. Begitu tata letak dan hubungan diselesaikan, Anda akan menambahkan lebih banyak detail, bergerak menuju kesetiaan yang lebih tinggi sampai akhirnya Anda mulai dengan sengaja menjelajahi warna. Jadi, beberapa petunjuk:

Pointer # 2: Pertimbangkan untuk melakukan monokrom pada demo Anda sendiri. Stick ke nuansa abu-abu (lima puluh?) Sampai Anda siap untuk menggunakan warna untuk membantu menjelaskan hal-hal.

Bahkan jika kita tidak melakukan hal lain, ini adalah perbaikan
Pointer # 3: Sebagai aturan praktis, hindari warna jenuh penuh (yaitu: warna dengan kekuatan penuh, tanpa warna putih tambahan). Terutama bila dilihat pada layar yang diterangi, mereka tidak nyaman melihat saat digabungkan satu sama lain.

“Bayangan tidak hitam”
Pelajaran Ian dari cermin sekolah seni saya sendiri-saya ingat guru saya menantang saya untuk menemukan titik hitam di Georges Seurat A A Sunday Afternoon di Pulau La Grande Jatte.

Detail dari hari Minggu sore di pulau la grande jatte
Spoiler: Anda tidak akan menemukannya
Pointer # 5: Saat menambahkan warna pada desain monokrom Anda, lakukan satu per satu. Setiap warna yang Anda tambahkan adalah undangan untuk gangguan pengguna. Kami berbicara sebentar tentang menghindari kejenuhan yang tinggi, tapi tidak ada yang bisa dikatakan bahwa Anda tidak dapat menggunakan berbagai kejenuhan satu warna. Itu akan memberi Anda variasi dan kedalaman yang Anda butuhkan, bebas risiko.

Pointer # 7: Hindari ambiguitas. Kombinasi karakter seperti O0, aeo, 8B, Il1, 5S, 2Z, 6b, dan 9g terkadang sulit dibedakan, tergantung pada tipe yang dipilih. Ujilah mereka; Jika Anda berjuang untuk membedakan mereka maka Anda akan bijaksana untuk memilih jenis huruf yang berbeda.

Whitespace (ruang fungsional) melayani perancang visual dengan berbagai cara. Ini membantu menciptakan rasa keseimbangan, menarik perhatian pada aspek desain yang diperlukan, mengurangi beban kognitif bagi pengguna (saya bisa pergi