Aturan desain visual yang aman untuk diikuti

xguru · 2023-02-27T11:03:02+09:00

Tidak wajib diikuti sepenuhnya, tetapi aturan-aturan ini selalu aman untuk diterapkan apa adanya Gunakan warna yang mendekati hitam/putih alih-alih hitam/putih murni Hitam murni terlihat tidak alami di layar, dan putih murni terlalu terang Gunakan #222222 dan #F2F2F2 sebagai pengganti #000000 dan #FFFFFF Setelah ini, saat menyebut hitam/putih, yang dimaksud adalah warna-warna tersebut Beri sedikit warna pada warna netral Warna netral biasanya adalah hitam/putih/abu-abu Jika menggunakan warna, tambahkan hanya sedikit warna pada warna-warna netral (light red alih-alih grey, dark blue alih-alih black) Ini membuat palet warna terasa lebih konsisten Jika menggunakan HSB, cukup tambahkan saturasi sekitar 5% atau kurang Gunakan kontras tinggi pada elemen penting Semua elemen yang harus diperhatikan pengguna: tombol, konten, dan sebagainya Untuk garis pemisah, drop shadow, dan sejenisnya, gunakan kontras serendah mungkin Semua elemen dalam desain harus disengaja Termasuk ruang kosong, perataan, ukuran, jarak, warna, dan bayangan Saat seseorang menanyakan bagian tertentu dari desain, Anda harus bisa menjelaskan mengapa dibuat seperti itu Sering kali perataan optical (visual) lebih baik daripada perataan matematis Ada bentuk-bentuk tertentu yang lebih baik ditampilkan selaras secara visual saat dilihat mata Menyelaraskan dengan mata butuh latihan, tetapi jika dilakukan rutin, Anda akan cepat terbiasa Untuk teks besar, kurangi letter spacing dan line height; untuk teks kecil, tingkatkan Berlaku untuk semua teks Semakin besar teks, semakin sedikit ruang yang dibutuhkan antarhuruf dan antarbaris. Hal yang sebaliknya juga berlaku Batas kontainer harus kontras terhadap kontainer dan latar belakang Batas sebaiknya menggunakan warna yang lebih gelap daripada latar belakang, bukan warna di antara bagian dalam kontainer dan warna latar Semua hal harus sejajar dengan hal lain Perataan memberi tahu bahwa berbagai objek saling berhubungan Jika sesuatu tidak sejajar dengan hal lain, itu akan terasa seperti bukan bagian dari desain Idealnya, tiap elemen harus sejajar dengan elemen lain berdasarkan semacam logika Warna dalam palet harus memiliki nilai kecerahan yang unik Jika nilai kecerahan tiap warna berbeda, tampilannya bisa terasa unik bukan hanya dari hue, tetapi juga dari kecerahannya Ini menghasilkan palet warna yang lebih baik karena tiap warna tidak terlalu saling bersaing Jika memberi warna pada netral, gunakan hanya salah satu: warm atau cool. Jangan keduanya Jika warna warm/cool dipakai bersama pada warna netral, palet warna akan terasa tidak konsisten Ukuran harus saling berhubungan secara matematis Jarak antar elemen dan ukuran sebaiknya ditentukan oleh semacam skala. Ini membantu desain terlihat konsisten Dalam contoh, semua elemen menggunakan kelipatan 8. Jarak adalah 8/16/24/32, line height 48/40/24, ukuran teks 40/32/16 Elemen harus ditempatkan menurut urutan bobot visual Jika dalam satu baris atau kolom ada beberapa elemen, dan sebagian tampak lebih berat secara visual daripada yang lain (misalnya 2 tombol dan 3 tautan), elemen yang paling berat secara visual harus muncul lebih dulu, lalu elemen yang lebih ringan mengikuti hingga terakhir Yang perlu diperhatikan adalah elemen yang paling berat secara visual harus berada paling luar Jika menggunakan grid horizontal, gunakan 12 kolom Jika membagi berdasarkan kolom, 12 memberi fleksibilitas tinggi karena memungkinkan penggunaan 1, 2, 3, atau 4 kolom Beri jarak di antara titik-titik berkontras tinggi Mata kita mencari tepi elemen berdasarkan kontras, jadi kita cenderung mengharapkan ada jarak di antara titik-titik yang saling kontras Elemen yang lebih dekat harus lebih terang Semakin dekat elemen di layar dengan pengguna (semakin ke depan posisinya), semakin terang seharusnya Ini juga berlaku pada mode terang/gelap, karena begitulah dunia nyata bekerja Atur nilai blur drop shadow menjadi dua kali nilai jaraknya Jika membuat bayangan yang memanjang 4 piksel pada sumbu Y, atur nilai blur menjadi 8 piksel Saat elemen menjadi "lebih dekat" ke penonton, sebaiknya opacity bayangannya juga diturunkan Letakkan hal yang sederhana di atas yang kompleks, atau yang kompleks di atas yang sederhana Latar belakang yang kompleks (gradien mencolok) terlihat paling baik saat bagian depan (teks) sederhana Jika bagian depan kompleks, latar belakang sederhana adalah yang paling cocok Sederhana di atas sederhana masih bisa, tetapi akan terlihat datar Kompleks di atas kompleks sebaiknya dihindari karena menimbulkan kekacauan visual Jaga warna kontainer tetap dalam batas kecerahan Perbedaan kecerahan antara latar belakang dan kontainer harus berada dalam 12% untuk antarmuka gelap dan 7% untuk antarmuka terang (berdasarkan nilai brightness pada sistem warna HSB) Ini ditemukan dari penelitian yang membandingkan kecerahan kontainer dengan latar belakang pada sekitar 100 situs web yang didesain dengan baik Buat padding luar sama dengan atau lebih besar dari padding dalam Padding dalam kontainer adalah ruang di antara elemen di dalam kontainer. Padding luar adalah ruang antara elemen dan tepi kontainer Padding luar harus sama dengan atau lebih besar dari padding dalam Pertahankan teks isi pada 16px atau lebih 16px adalah ukuran teks default di sebagian besar browser Teks yang lebih kecil dari itu sulit dibaca, jadi aman untuk tidak menggunakannya pada isi utama Gunakan panjang baris sekitar 70 karakter Apakah panjang baris 60 atau 80 tidak terlalu penting, tetapi jika terlalu jauh dari kisaran itu, masalah keterbacaan bisa muncul Atur padding horizontal tombol menjadi dua kali padding vertikal Pola tombol standar adalah lebih lebar daripada tinggi Jika ingin orang mengenalinya sebagai tombol, sebaiknya ikuti pola ini Gunakan maksimal 2 jenis huruf Jenis huruf kedua adalah kesempatan untuk memperkuat konsep di balik desain Ini juga membantu menambah variasi pada desain Hampir tidak pernah perlu memakai lebih dari dua, dan itu bisa membuat desain terasa kacau secara visual Tangani sudut bertumpuk dengan benar Kadang dua atau lebih sudut membulat saling bertumpuk Agar terlihat benar, atur radius sudut bagian dalam menjadi radius sudut luar dikurangi jarak di antara keduanya Contoh: jika radius sudut luar 30px dan jaraknya 20px dari sudut dalam, maka radius sudut dalam harus 10px Jangan menempatkan dua garis pemisah berdampingan Transisi latar belakang, tepi kontainer, dan garis pemisah sulit dibedakan secara visual Jangan biarkan dua atau lebih garis pemisah saling menempel

(anthonyhobday.com)

81 poin oleh xguru 2023-02-27 | 6 komentar | Bagikan ke WhatsApp

Tidak wajib diikuti sepenuhnya, tetapi aturan-aturan ini selalu aman untuk diterapkan apa adanya

Gunakan warna yang mendekati hitam/putih alih-alih hitam/putih murni

Hitam murni terlihat tidak alami di layar, dan putih murni terlalu terang
Gunakan #222222 dan #F2F2F2 sebagai pengganti #000000 dan #FFFFFF
Setelah ini, saat menyebut hitam/putih, yang dimaksud adalah warna-warna tersebut

Beri sedikit warna pada warna netral

Warna netral biasanya adalah hitam/putih/abu-abu
Jika menggunakan warna, tambahkan hanya sedikit warna pada warna-warna netral (light red alih-alih grey, dark blue alih-alih black)
Ini membuat palet warna terasa lebih konsisten
Jika menggunakan HSB, cukup tambahkan saturasi sekitar 5% atau kurang

Gunakan kontras tinggi pada elemen penting

Semua elemen yang harus diperhatikan pengguna: tombol, konten, dan sebagainya
Untuk garis pemisah, drop shadow, dan sejenisnya, gunakan kontras serendah mungkin

Semua elemen dalam desain harus disengaja

Termasuk ruang kosong, perataan, ukuran, jarak, warna, dan bayangan
Saat seseorang menanyakan bagian tertentu dari desain, Anda harus bisa menjelaskan mengapa dibuat seperti itu

Sering kali perataan optical (visual) lebih baik daripada perataan matematis

Ada bentuk-bentuk tertentu yang lebih baik ditampilkan selaras secara visual saat dilihat mata
Menyelaraskan dengan mata butuh latihan, tetapi jika dilakukan rutin, Anda akan cepat terbiasa

Untuk teks besar, kurangi letter spacing dan line height; untuk teks kecil, tingkatkan

Berlaku untuk semua teks
Semakin besar teks, semakin sedikit ruang yang dibutuhkan antarhuruf dan antarbaris. Hal yang sebaliknya juga berlaku

Batas kontainer harus kontras terhadap kontainer dan latar belakang

Batas sebaiknya menggunakan warna yang lebih gelap daripada latar belakang, bukan warna di antara bagian dalam kontainer dan warna latar

Semua hal harus sejajar dengan hal lain

Perataan memberi tahu bahwa berbagai objek saling berhubungan
Jika sesuatu tidak sejajar dengan hal lain, itu akan terasa seperti bukan bagian dari desain
Idealnya, tiap elemen harus sejajar dengan elemen lain berdasarkan semacam logika

Warna dalam palet harus memiliki nilai kecerahan yang unik

Jika nilai kecerahan tiap warna berbeda, tampilannya bisa terasa unik bukan hanya dari hue, tetapi juga dari kecerahannya
Ini menghasilkan palet warna yang lebih baik karena tiap warna tidak terlalu saling bersaing

Jika memberi warna pada netral, gunakan hanya salah satu: warm atau cool. Jangan keduanya

Jika warna warm/cool dipakai bersama pada warna netral, palet warna akan terasa tidak konsisten

Ukuran harus saling berhubungan secara matematis

Jarak antar elemen dan ukuran sebaiknya ditentukan oleh semacam skala. Ini membantu desain terlihat konsisten
Dalam contoh, semua elemen menggunakan kelipatan 8. Jarak adalah 8/16/24/32, line height 48/40/24, ukuran teks 40/32/16

Elemen harus ditempatkan menurut urutan bobot visual

Jika dalam satu baris atau kolom ada beberapa elemen, dan sebagian tampak lebih berat secara visual daripada yang lain (misalnya 2 tombol dan 3 tautan),
elemen yang paling berat secara visual harus muncul lebih dulu, lalu elemen yang lebih ringan mengikuti hingga terakhir
Yang perlu diperhatikan adalah elemen yang paling berat secara visual harus berada paling luar

Jika menggunakan grid horizontal, gunakan 12 kolom

Jika membagi berdasarkan kolom, 12 memberi fleksibilitas tinggi karena memungkinkan penggunaan 1, 2, 3, atau 4 kolom

Beri jarak di antara titik-titik berkontras tinggi

Mata kita mencari tepi elemen berdasarkan kontras, jadi kita cenderung mengharapkan ada jarak di antara titik-titik yang saling kontras

Elemen yang lebih dekat harus lebih terang

Semakin dekat elemen di layar dengan pengguna (semakin ke depan posisinya), semakin terang seharusnya
Ini juga berlaku pada mode terang/gelap, karena begitulah dunia nyata bekerja

Atur nilai blur drop shadow menjadi dua kali nilai jaraknya

Jika membuat bayangan yang memanjang 4 piksel pada sumbu Y, atur nilai blur menjadi 8 piksel
Saat elemen menjadi "lebih dekat" ke penonton, sebaiknya opacity bayangannya juga diturunkan

Letakkan hal yang sederhana di atas yang kompleks, atau yang kompleks di atas yang sederhana

Latar belakang yang kompleks (gradien mencolok) terlihat paling baik saat bagian depan (teks) sederhana
Jika bagian depan kompleks, latar belakang sederhana adalah yang paling cocok
Sederhana di atas sederhana masih bisa, tetapi akan terlihat datar
Kompleks di atas kompleks sebaiknya dihindari karena menimbulkan kekacauan visual

Jaga warna kontainer tetap dalam batas kecerahan

Perbedaan kecerahan antara latar belakang dan kontainer harus berada dalam 12% untuk antarmuka gelap dan 7% untuk antarmuka terang (berdasarkan nilai brightness pada sistem warna HSB)
Ini ditemukan dari penelitian yang membandingkan kecerahan kontainer dengan latar belakang pada sekitar 100 situs web yang didesain dengan baik

Buat padding luar sama dengan atau lebih besar dari padding dalam

Padding dalam kontainer adalah ruang di antara elemen di dalam kontainer. Padding luar adalah ruang antara elemen dan tepi kontainer
Padding luar harus sama dengan atau lebih besar dari padding dalam

Pertahankan teks isi pada 16px atau lebih

16px adalah ukuran teks default di sebagian besar browser
Teks yang lebih kecil dari itu sulit dibaca, jadi aman untuk tidak menggunakannya pada isi utama

Gunakan panjang baris sekitar 70 karakter

Apakah panjang baris 60 atau 80 tidak terlalu penting, tetapi jika terlalu jauh dari kisaran itu, masalah keterbacaan bisa muncul

Atur padding horizontal tombol menjadi dua kali padding vertikal

Pola tombol standar adalah lebih lebar daripada tinggi
Jika ingin orang mengenalinya sebagai tombol, sebaiknya ikuti pola ini

Gunakan maksimal 2 jenis huruf

Jenis huruf kedua adalah kesempatan untuk memperkuat konsep di balik desain
Ini juga membantu menambah variasi pada desain
Hampir tidak pernah perlu memakai lebih dari dua, dan itu bisa membuat desain terasa kacau secara visual

Tangani sudut bertumpuk dengan benar

Kadang dua atau lebih sudut membulat saling bertumpuk
Agar terlihat benar, atur radius sudut bagian dalam menjadi radius sudut luar dikurangi jarak di antara keduanya
Contoh: jika radius sudut luar 30px dan jaraknya 20px dari sudut dalam, maka radius sudut dalam harus 10px

Jangan menempatkan dua garis pemisah berdampingan

Transisi latar belakang, tepi kontainer, dan garis pemisah sulit dibedakan secara visual
Jangan biarkan dua atau lebih garis pemisah saling menempel

6 komentar

sungwoo 2023-03-08

@xguru
Saya membacanya dengan gaya berikut demi keterbacaan GeekNews. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper

Terima kasih.

metis041 2023-03-06

Ini sangat bagus.. Saya selalu bingung soal desain, dan kalau ada panduan seperti ini, produktivitas bisa meningkat jauh.

greenhead 2023-03-01

Terima kasih atas terjemahannya! Sangat membantu.

laeyoung 2023-02-27

Sangat bagus!

cbk1411 2023-02-27

@xguru
Ada salah terjemahan, jadi saya ingin menyampaikannya.
"Elemen yang lebih dekat harus lebih ringan" -> "Elemen yang lebih dekat harus lebih terang"

xguru 2023-02-27

Ah, benar juga. Terima kasih~!