design
1.0.0
3.1 Jangan pernah menggunakan lebih dari tiga tipografi pada halaman sekaligus.
Mengapa? Berbagai tipografi yang digunakan pada satu halaman memang menunjukkan merek yang tidak jelas dan dapat tampak malas dan berantakan. Paling -paling, tiga tipografi yang berbeda dapat digunakan sekaligus (logo, header, kandungan tubuh).
3.3 Pertahankan hierarki tipe yang konsisten. Anda seharusnya hanya menggunakan beberapa ukuran font dan satu atau dua bobot font untuk mengembangkan hierarki jenis. Pikirkan tag header HTML H1, H2, H3, dll. Anda harus memiliki gaya visual yang berbeda untuk setidaknya empat di antaranya, menggunakan variasi kecerahan, ukuran, dan berat untuk menunjukkan pentingnya teks. Untuk contoh hebat hierarki tipe, lihat pedoman antarmuka manusia Apple.
[3.4] Jaga agar tubuh Anda tetap berat badan normal dan berjarak dengan baik. Teks harus selalu dapat dibaca, jadi cadangan font cahaya atau tebal untuk header besar atau kasus di mana berat font akan berdampak kecil pada keterbacaan teks. Selain itu, selalu simpan jarak garis teks tubuh Anda di 1,15 hingga 1,5 (tergantung pada ukuran) untuk memaksimalkan keterbacaan. Misalnya, artikel ini memiliki jarak garis 1,5 REM. Membenarkan paragraf tubuh Anda juga tidak sakit.
3.1 Latar belakang tubuh harus selalu berwarna abu -abu
Mengapa? Latar belakang berwarna, bahkan abu -abu yang sangat gelap, dapat dengan mudah membuat ketegangan pada mata. Untuk konten penting seperti badan teks halaman web atau aplikasi, sangat penting yang dapat dibaca dan diintepresentasikan oleh pengguna halaman dengan mudah.
3.3 Dalam kebanyakan kasus, gunakan teks putih pada gambar apa pun, berwarna, atau latar belakang gradien. Jika perlu, oleskan bayangan drop yang sangat ringan (<= 10% opacity) ke teks.
Mengapa? White-on-Dark sering lebih menarik secara aethetical dan lebih mudah untuk membuat varian. Memutuskan warna gelap untuk digunakan dengan latar belakang berwarna seringkali bisa menantang. Namun, pastikan bahwa kombo warna apa pun yang Anda pilih juga dapat diakses.
3.4 Jangan pernah menggunakan orang kulit hitam absolut.
Mengapa? Pure, buram hitam (#000) seringkali terlalu keras untuk sebagian besar halaman web. Bahkan warna font tubuh GitHub adalah #24292E, bukan #000. Jika ragu, Anda dapat menggunakan kode hex grayscale yang aman web numerik ( #111, #222 ... #aaa, #bbb, dan sebagainya).
3.5 Pastikan komponen berwarna tidak saling berbatasan.
Mengapa? Kecuali warnanya adalah pelengkap yang sangat kuat satu sama lain, sering kali kontras dari dua warna tetangga dapat menciptakan rasa polarisasi dan pembagian yang merusak aliran halaman Anda. Dalam kasus di mana bilah navigasi mungkin menyentuh pahlawan berwarna, pilihlah latar belakang navbar yang transparan.
Pastikan konsistensi di semua komponen. Setelah Anda mendefinisikan sumber cahaya untuk halaman Anda, pastikan semua bayangan mengikuti arahnya. Jika cahaya "memukul" halaman Anda pada 135 derajat, maka setiap bayangan dan gradien harus jatuh pada 135 derajat. Gunakan bayangan sebagai alat untuk menyajikan hierarki atau negara. Bayangan harus digunakan untuk menyoroti komponen halaman, menyediakan struktur halaman, atau menggambarkan keadaan. Misalnya, Anda dapat menggambarkan tombol ditekan dengan menurunkan ketinggiannya sebagai lawan mengubah warnanya. Terlalu banyak bayangan yang dapat menyajikan terlalu banyak dimensi, jadi berhati -hatilah (misalnya tidak membuat situs dengan 18 ketinggian unik). Offset bayangan Anda harus sama dengan kira -kira setengah dari jari -jari blurnya. Misalnya, bayangan dengan x / y offset 10px harus memiliki jari -jari blur sekitar 20px. Pendekatan ini membuat bayangan yang paling otentik. Selalu jaga opacity bayangan menjadi di bawah 25%. Kesalahan di sisi kehalusan sehingga tidak mengurangi desain Anda. Jika Anda menggunakan latar belakang gelap, dalam beberapa kasus Anda mungkin perlu meningkatkan opacity bayangan Anda untuk memastikan visibilitasnya. Bayangan tidak selalu perlu menjadi hitam. Saat menggunakan bayangan pada permukaan berwarna, seringkali menguntungkan untuk menggunakan varian yang sangat gelap atau kusam dari warna latar belakang untuk meningkatkan campuran bayangan.
