7 Aturan Membuat UI Cantik untuk 2022 – Ini adalah bagian kedua dari seri dua bagian. Anda harus membaca bagian pertama terlebih dahulu.Kita berbicara tentang aturan untuk mendesain UI yang bersih dan sederhana tanpa perlu menghadiri sekolah seni untuk melakukannya.
7 Aturan Membuat UI Cantik untuk 2022
monofonts.com – Hanya ada beberapa cara untuk melapisi teks dengan indah dan andal pada gambar. Berikut adalah lima — dan metode bonus.Jika Anda ingin menjadi desainer UI yang baik, Anda harus belajar bagaimana menempatkan teks di atas gambar dengan cara yang menarik. Ini adalah sesuatu yang dilakukan dengan baik oleh setiap desainer UI yang baik dan sesuatu yang dilakukan oleh setiap desainer UI yang buruk dengan buruk — atau tidak, dalam hal ini Anda akan mendapatkan keuntungan besar setelah membaca bagian ini!
Metode 0: Terapkan teks langsung ke gambar
Saya bahkan ragu untuk memasukkan ini, tetapi secara teknis dimungkinkan untuk menempatkan teks langsung pada gambar dan membuatnya terlihat OK.
Ada segala macam masalah dan peringatan dengan metode ini:
Gambar harus gelap, dan tidak memiliki banyak tepi kontras
Teksnya harus putih — saya tantang Anda untuk menemukan contoh tandingan yang bersih dan sederhana. Dengan serius. Hanya satu.
Uji di setiap ukuran layar/jendela untuk memastikannya terbaca
Punya semua itu? Besar. Sekarang jangan pernah mengubah teks atau gambar, dan Anda harus melakukannya dengan baik.
Saya rasa saya tidak pernah menggunakan teks langsung di atas gambar untuk proyek profesional apa pun, dan itu benar-benar disebutkan di sini sebagai semacam metode “kontrol”. Karena itu, itu mungkin dilakukan untuk efek yang sangat keren— tapi hati-hati.
Metode 1: Overlay seluruh gambar
Mungkin metode termudah untuk meletakkan teks pada gambar adalah dengan melapisi gambar. Jika gambar aslinya tidak cukup gelap, Anda dapat melapisi semuanya dengan hitam transparan.
Berikut gambar splash trendi dengan overlay gelap.
Jika Anda masuk ke Developer Tools dan menghapus overlay, Anda akan melihat bahwa gambar aslinya terlalu terang dan terlalu kontras sehingga teks tidak dapat dibaca. Tapi dengan overlay gelap, tidak masalah!
Baca Juga : Beberapa Tips Cara Menjual Font
Metode ini juga berfungsi dengan baik untuk gambar mini atau gambar kecil.
Dan sementara overlay hitam paling sederhana dan serbaguna, Anda pasti bisa menemukan overlay berwarna juga.
Metode 2: Teks-dalam-kotak
Ini sangat sederhana dan sangat dapat diandalkan. Siapkan persegi panjang hitam agak transparan dan bubuhkan pada beberapa teks putih. Jika overlay cukup buram, Anda dapat memiliki hampir semua gambar di bawahnya dan teks akan tetap terbaca sepenuhnya.
Metode 3: Mengaburkan gambar
Cara yang sangat bagus untuk membuat teks overlay dapat dibaca adalah dengan memburamkan bagian dari gambar di bawahnya.
iOS 7 benar-benar membuat latar belakang menjadi kabur baru-baru ini, meskipun Vista juga menggunakannya dengan sangat baik.
Anda juga dapat menggunakan area di luar fokus foto sebagai blur. Tapi hati-hati— metode ini tidak begitu dinamis. Jika gambar Anda pernah berubah, pastikan teksnya selalu di atas bagian yang buram.
Maksud saya, coba saja baca subjudul di bawah ini.
Metode 4: Lantai memudar
Fade lantai adalah ketika Anda memiliki gambar yang memudar secara halus ke arah hitam di bagian bawah, dan kemudian ada teks putih tertulis di atasnya. Ini adalah metode yang cerdik, dan saya tidak tahu siapa yang melakukannya sebelum Medium, tapi di situlah saya pertama kali menyadarinya.
Bagi pengamat biasa, tampaknya koleksi Medium ini ditampilkan dengan menempelkan beberapa teks putih di atas sebuah gambar— tetapi sebagai tanggapan atas itu, saya katakan salah! Ada gradien yang sangat halus dari tengah (hitam pada 0% opacity) ke bawah (hitam pada, ehhhhh mungkin sekitar 20% opacity).
Sulit dilihat, tapi pasti ada, dan pasti meningkatkan keterbacaan.
Perhatikan juga bahwa gambar mini koleksi Medium menggunakan sedikit bayangan teks untuk lebih meningkatkan keterbacaan. Orang-orang itu baik!
Efek bersihnya adalah Medium dapat melapisi hampir semua teks pada gambar apa pun dan memiliki hasil yang dapat dibaca.
Oh, dan satu hal lagi— mengapa gambarnya memudar menjadi hitam di bagian bawah? Untuk jawabannya, lihat Aturan 1— cahaya selalu datang dari atas. Agar terlihat paling alami bagi mata kita, gambar harus sedikit lebih gelap di bagian bawah, sama seperti semua hal lain yang pernah kita lihat.
Langkah lanjutan: campur blur dengan bilah lantai… memperkenalkan The Floor Blur.
Metode Bonus: Samaran
Bagaimana blog Elastica memiliki judul yang dapat dibaca di atas gambar dinamis setiap saat? Gambar-gambar tersebut adalah:
Tidak terlalu gelap
Jenis kontras-y
Namun sulit untuk menjelaskan mengapa teks tersebut begitu terbaca. Lihatlah:
Jawaban: samaran.
Samaran adalah bagian dari peralatan fotografi yang membuat cahaya lebih lembut. Sekarang ini juga merupakan teknik desain visual untuk melembutkan gambar sehingga teks yang dihamparkan lebih mudah dibaca.
Jika browser kita zoom out di blog Elastica, kita bisa lebih jelas melihat apa yang terjadi.
Ada kotak opasitas bertingkat di sekitar judul “145.000 Pengguna Tenaga Penjualan Keluar untuk Merayakan …”. Lebih mudah untuk melihat dengan latar belakang biru solid daripada dengan foto kontras-y di atasnya.
Ini mungkin cara paling halus untuk melapisi teks dengan andal pada gambar di luar sana, dan saya belum pernah melihatnya di tempat lain (tetapi ini cukup licik). Tandai saja. Anda tidak pernah tahu kapan Anda akan membutuhkannya.
Aturan 5: Jadikan teks pop — dan un-pop
Menata teks agar terlihat cantik dan sesuai sering kali merupakan masalah menatanya dengan cara yang kontras— misalnya, lebih besar tetapi lebih ringan.
Menurut pendapat saya, salah satu bagian tersulit dalam membuat UI yang indah adalah menata teks— dan tentu saja bukan karena tidak terbiasa dengan opsi. Jika Anda berhasil melewati sekolah dasar, Anda mungkin telah menggunakan setiap metode untuk menarik perhatian atau menjauh dari teks yang kita lihat:
Ukuran (lebih besar atau lebih kecil)
Warna (kontras lebih besar atau lebih kecil; warna cerah menarik perhatian)
Berat font (lebih tebal atau lebih tipis)
Kapitalisasi (huruf kecil, UPPERCASE, dan Title Case)
Miringkan
Spasi huruf (atau— peringatan istilah mewah— pelacakan!)
Margin (secara teknis bukan milik teks itu sendiri, tetapi dapat digunakan untuk menarik perhatian, sehingga membuat daftar)
Ada beberapa opsi lain yang mungkin untuk menarik perhatian Anda, tetapi tidak secara khusus digunakan atau direkomendasikan:
Menggarisbawahi. Garis bawah berarti tautan saat ini, dan tidak ada gunanya mencoba memaksanya untuk mengartikan hal lain, jika Anda bertanya kepada saya
Warna latar belakang teks. Mungkin menarik sebagai efek hover, saya tidak akan menggunakan ini untuk gaya umum apa pun.
Dicoret. Mundur, Anda penyihir CSS 90-an, Anda!
Dalam pengalaman pribadi saya, ketika saya menemukan elemen teks yang sepertinya saya tidak dapat menemukan gaya yang “tepat”, itu bukan karena saya lupa mencoba topi atau warna yang lebih gelap — itu karena solusi terbaik sering kali mendapatkan kombo yang benar properti “bersaing”.
Up-pop dan down-pop
Anda dapat membagi semua cara menata teks menjadi dua grup:
Gaya yang meningkatkan visibilitas teks. Besar, tebal, huruf besar, dll.
Gaya yang mengurangi visibilitas teks. Kecil, kurang kontras, lebih sedikit margin, dll.
Kami akan menyebut gaya “up-pop” dan “down-pop”, untuk menghormati kata sifat favorit desainer. Kami tidak akan menyebutnya “berat visual”, karena itu membosankan.
Banyak up-pop terjadi dengan judul “Desain Material”. Itu besar; itu kontras tinggi; itu sangat berani.
Item di footer situs yang sama, di sisi lain, diturunkan. Ukurannya kecil, kontrasnya lebih rendah, dan bobot fontnya tidak terlalu tebal.
Sekarang bagian yang penting.
Judul halaman adalah satu-satunya elemen untuk gaya up-pop habis-habisan.
Untuk yang lainnya, Anda perlu naik dan turun.
Jika elemen situs perlu ditekankan, terapkan KEDUA gaya up-pop dan down-pop — tetapi sedikit LEBIH up-pop. Ini akan mencegah hal-hal menjadi berlebihan, tetapi memungkinkan elemen yang berbeda memiliki bobot visual yang seharusnya.
Situs web Blu Homes yang dirancang tanpa cela memiliki beberapa judul besar, tetapi kata yang ditekankan adalah huruf kecil— terlalu banyak penekanan akan terlihat terlalu kuat.
Angka-angka ini di situs Blu Homes menarik perhatian Anda dengan ukurannya yang besar— tetapi perhatikan bahwa angka-angka ini secara bersamaan diremehkan dengan bobot font yang sangat ringan dan warna kontras yang lebih rendah daripada abu-abu gelap.
Label kecil di bawah angka, meskipun abu-abu dan kecil, juga huruf besar dan sangat tebal.
Ini semua tentang keseimbangan.
Majalah Isi adalah studi kasus yang bagus di atas/bawah-pop.
Judul artikel pada dasarnya adalah satu-satunya elemen halaman yang tidak dicetak miring. Dalam hal ini, kurangnya italicization lebih efektif menarik perhatian (terutama dalam kombinasi dengan font-weight tebal)
Nama penulis dicetak tebal di byline— membuatnya menonjol dari “by” dengan berat normal
Teks “ALREADY OUT” yang kecil dan kontras rendah tetap tidak terlihat— tetapi dengan jenis huruf besar, spasi huruf yang besar, dan margin yang besar, Anda dapat melihatnya saat Anda mencarinya
Gaya yang dipilih dan melayang
Menata gaya elemen yang dipilih dan efek melayang adalah putaran lain dalam game yang sama— tetapi lebih sulit.
Biasanya, mengubah ukuran font, huruf besar, atau berat font akan mengubah seberapa besar area yang digunakan teks, yang dapat menyebabkan penggunaan efek melayang.
Apa yang meninggalkan Anda dengan?
Warna teks
Warna latar belakang
Bayangan
Garis bawah
Sedikit animasi— menaikkan, menurunkan, dll.
Satu opsi solid: coba ubah elemen putih menjadi berwarna, atau ubah elemen berwarna menjadi putih, tetapi gelapkan latar belakang di belakangnya.
Saya akan meninggalkan Anda dengan ini: menata teks itu sulit.
Tetapi setiap kali saya berpikir “Mungkin teks ini tidak terlihat benar”, saya salah. Saya hanya perlu menjadi lebih baik. Dan untuk menjadi lebih baik, saya hanya harus terus berusaha.
Jadi saya menawarkan Anda sedikit penghiburan ini: jika itu tidak terlihat bagus, jangan khawatir– itu bisa terjadi jika Anda lebih baik. Tapi hei, mari kita terus berusaha dan membuat diri kita lebih baik.
Hai, PS: jika Anda ingin mempelajari lebih banyak tentang gaya teks, lihat Pelajari Desain UI. Saya membahasnya secara rinci di sana.
Aturan 6: Gunakan Hanya Font yang Bagus
Beberapa font bagus. Gunakan mereka.
Catatan: Tidak ada strategi atau hal yang perlu dipelajari dalam bagian ini. Saya hanya akan membuat daftar beberapa font gratis yang bagus untuk Anda unduh dan gunakan.
Situs dengan kepribadian yang sangat berbeda dapat menggunakan font yang sangat berbeda. Tetapi untuk sebagian besar desain UI, Anda hanya menginginkan sesuatu yang bersih dan sederhana. Itu benar, sobat, letakkan Naskah Kebijaksanaan.
Juga, saya hanya merekomendasikan font gratis. Mengapa? Ini adalah panduan untuk orang-orang yang sedang belajar. Ada lebih dari cukup di luar sana pada titik harga nol dolar. Mari kita gunakan.
Saya sarankan Anda mengunduh semuanya sekarang, dan kemudian menelusuri font yang Anda unduh saat Anda memulai desain visual untuk proyek Anda.
Tanpa urutan tertentu:
- Bekerja Sans
Terkadang Anda mendesain sesuatu yang membutuhkan font modern dan bersih, tetapi dengan sedikit kesenangan. Work Sans sangat cocok dengan tagihannya. Sedikit aneh; benar-benar kurang dimanfaatkan.
Dan itu akan tetap kurang dimanfaatkan untuk sementara waktu. Anda tidak bisa mendapatkan huruf miring untuk font ini di Google Fonts (meskipun gaya normal ada di sana). Oleh karena itu, sebagian besar desainer akan menghindari menggunakannya untuk font tubuh. (Saya akan memberi tahu Anda di mana mendapatkan huruf miring di bawah)
Bentuk huruf Work Sans yang lebar berarti bekerja bahkan pada ukuran yang sangat kecil — properti yang bagus untuk semua jenis huruf aplikasi seluler.
- Robot
Font yang luar biasa, bersih, dan serba guna. Meskipun ini adalah font default Android, font ini masih kurang digunakan (dan gratis!) untuk iPhone dan aplikasi web.
- Metropolis
Sejak web 2.0, font seperti Gotham dan Proxima Nova telah meledak dalam popularitas. Dan seperti banyak tren desain, itu dengan alasan yang bagus — mereka fantastis. Maksud saya, menggunakan Proxima Nova akan terasa seperti curang pada desain, itu sangat bagus.
Sayangnya, font-font itu juga sangat mahal (yah, salah satunya gratis dengan Adobe Fonts) dan Metropolis mungkin adalah satu-satunya alternatif gratis terbaik (tetapi ada juga yang lain).
Pro-tip: Saat memilih font apa pun, selalu yang terbaik untuk melihat huruf besar, huruf besar, dan rentang bobot penuh. Anda tidak pernah tahu kapan pengaturan yang sedikit berbeda akan menjadi gaya yang Anda inginkan.
Bandingkan dua bidikan di atas — font yang sama persis, dua nuansa berbeda. Desainer pemula kurang menggunakan huruf besar. Jika Anda ingin meningkatkan level game desain Anda, mulailah menjelajahi huruf besar.
- Sumber Sans Pro
Satu hal yang saya suka tentang Source Sans adalah itu membuat pilihan yang bagus ketika Anda tergoda untuk menggunakan Open Sans atau Lato yang sangat sering digunakan. Tahan keinginan itu!
Source Sans memiliki banyak kekuatan yang sama dengan Open Sans atau Lato — karakter netral, hanya sentuhan kemanusiaan (bukan bentuk huruf geometris yang dingin dan kaku), dan ini berfungsi dengan baik untuk antarmuka pengguna.
- IBM Plex Sans
Setelah puluhan tahun menggunakan Helvetica, IBM akhirnya merilis keluarga jenis hurufnya sendiri, Plex.
Saya suka Plex karena sedikit aneh dan memiliki perasaan teknis. Saya kira itu merek IBM? Berhasil, teman-teman.
Oh ya — dan Plex Sans berpasangan dengan baik dengan Plex Serif dan Plex Mono. Ini semua yang Anda butuhkan.
- Ikon Bulu
Sementara banyak set ikon populer (ahem, Font Awesome) memiliki bentuk yang terlalu bulat dan bergelembung yang tidak cocok dengan desain yang bersih dan sederhana, Feather Icons adalah penangkal yang sangat kurang dihargai.
Pembuatnya belum mengemasnya sebagai font ikon (belum ), tetapi seseorang memasang versi font di Github yang melacak set asli dengan baik (dan jika Anda hanya menggunakan 10 atau 20 ikon dari set, tidak masuk akal memuat seluruh font).
