Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

[Cheat Codes]10 Tips Untuk Mendesain User Interfaces

- Advertisement -
- Advertisement -
- Advertisement -

Saya mungkin berasumsi bahwa sebagian besar dari kita mulai dalam desain UI dengan pengetahuan terkecil atau tidak sama sekali. Tetapi meskipun kemungkinan melawan kami di awal, kami berhasil melalui banyak buku desain dan artikel untuk memahami bagaimana warna, tipografi, tata letak dll bekerja. Saya ingat bagaimana hal itu didirikan pada kami di Make Technology, sebuah perusahaan yang dikendalikan UX, bahwa Desain tidak dapat dijelaskan dengan warna, bentuk, dan teks. Ini adalah proses yang memiliki “Mengapa” di belakangnya, bahwa setiap kali kita membuat teks lebih besar, menambahkan bayangan, atau mengubah warna, pasti ada alasan mengapa segala sesuatu harus terjadi.

Jadi dalam artikel ini, saya akan membagikan daftar hal-hal yang saya pelajari dari berbagai perusahaan, desainer, hal-hal yang telah saya pelajari dalam mendesain antarmuka pengguna, dan penemuan-penemuan baru yang saya temukan di sepanjang jalan:

* Penafian: Sampel “Jangan” yang disediakan berikut ini tidak berarti bahwa mereka salah. Ini adalah dasar kami bagaimana kami dapat meningkatkan dari solusi desain yang baik ke yang lebih baik ????

1. Teks ini penting, buat lebih besar!

Saat dihadapkan dengan konten yang membutuhkan hierarki font, membuat teks lebih besar untuk memberikan penekanan dan kepentingan biasanya tidak menyelesaikan masalah, seperti yang di bawah ini:

Hirarki font tidak hanya tentang ukuran font kecil hingga besar. Ini adalah tentang hak campuran ukuran, bobot, dan warna yang menciptakan kontras. Kontras yang lebih besar, semakin baik.

Permintaan maaf jika foto datang dalam format res rendah ✌️

Jadi bagaimana cara membuat kontras yang lebih baik?

  • Jangan gunakan satu jenis bobot dengan ukuran font berbeda untuk menciptakan kontras dan hierarki.
  • Sebaliknya, gunakan gaya yang lebih berani dan lebih gelap untuk konten primer, atau lebih kecil dan lebih ringan untuk konten sekunder (kurang penting).
  • Buat tiga jenis warna teks yang bervariasi dari gelap ke terang (lihat contoh di bawah). Biasanya saya menggunakan warna dasar saya sebagai warna teks tubuh.
  • Jangan takut untuk menerapkan celah font yang besar pada item Anda (mis. Tajuk 24px, teks isi 16px, meta 10px dll). Kesenjangan yang lebih besar = kontras yang lebih baik.
  • Lihat Modularscale kalkulator online yang dapat Anda gunakan untuk membuat hierarki font yang lebih baik.
  • Ingat, kontras adalah = ukuran + berat + warna.
  • Terakhir, pastikan untuk memeriksa rasio kontrasnya. Anda dapat menggunakan kalkulator ini untuk memeriksa aksesibilitasnya.

dari warna dasar saya, saya beralih dari yang lebih gelap untuk tajuk utama ke yang lebih terang untuk konten tambahan.

2. Jangan membuat banyak warna hitam

Jangan membuat hidup Anda sulit dengan menggerakkan color picker Anda ke atas dan ke bawah untuk menghasilkan nuansa teks hitam yang berbeda di atas latar belakang putih.

Kita semua tahu bahwa menggunakan warna teks hitam (# 000) menyebabkan ketegangan mata bagi pembaca, dan solusi kami adalah membuat varian yang lebih gelap sebagai alternatif. Tapi alih-alih memilih warna 3 atau lebih nilai warna hex, kita bisa menggunakan hitam dengan opacity berbeda sebagai solusinya:

Dalam contoh saya di atas, saya menggunakan hitam sebagai warna utama saya (# 000) dan mengurangi opacity-nya tergantung pada di mana ia akan diterapkan (yaitu konten primer, konten sekunder, dll)

3. Lakukan matematika untuk memahami warna

Sebagian besar dari kita payah dalam memilih kombinasi warna yang tepat, dan setiap kali kita melihat desain dengan palet warna yang diatur dengan baik, kita bertanya pada diri sendiri “Bagaimana F mereka melakukannya?” (seperti yang di bawah ini):

diambil dari momoandspirits

Sampai saya mengetahui bahwa memahami warna bukan hanya bagi mereka yang memiliki bakat desain sejak awal waktu, bahwa penambahan dan pengurangan sederhana di Hue, Saturation, Brightness (HSB) akan melakukan keajaiban (kami akan menggunakan HSB untuk ini rumus bukan RGB) . Anda dapat dengan mudah menyingkirkan warna putih membosankan di atas latar belakang berwarna, dan mengubahnya menjadi karya Picasso seperti di bawah ini:

Jadi di mana penambahan dan pengurangan HSB masuk?

Dua pendekatan untuk memahami warna

Sebenarnya ada dua pendekatan yang bisa kita lakukan, dan seperti yang bisa kita lihat, kedua opsi memiliki warna dasar yang sama # B9F4BC (latar belakang lingkaran) tetapi berbeda ketika datang ke warna Folder dan Strip. Saat kita mulai, selalu ingat bahwa angka pertama berhubungan dengan Hue, diikuti oleh Saturasi dan terakhir, Brightness.

Opsi A

Opsi A

Di Opsi A, kita bisa melihat bahwa kita menyimpan nilai Hue 123 semua di seluruh bentuk (lingkaran, folder, strip) sementara Saturasi dan Kecerahan adalah tempat perubahan terjadi.

Sekarang, saat kita fokus pada Saturation of the base yang 24 dan Brightness-nya, 96, kedua nilai berubah ketika kita membuat hijau gelap untuk Folder. Dari Saturation of 24 menjadi 40 (increment +16) dan dari Brightness of 96 menjadi 82 (decrement -14), yang menunjukkan kepada kita bahwa perubahan saturasi apakah inkremental atau decremental membutuhkan penyesuaian berbanding terbalik dengan kecerahan, agar untuk membuat kontras yang baik (sebaliknya) . Dan hal yang sama terjadi di Strip, menggunakan Saturasi dan Kecerahan Folder sebagai nilai dasar, kami pindah dari 40 menjadi 44 (peningkatan +04), dan menurun dari82 hingga 75 (pengurangan -07) untuk Brightness. Dengan demikian, mengarahkan kami ke rumus:

“Darker Value = Increment in Saturation adalah penurunan Brightness.
Nilai Lebih Ringan = Penurunan dalam Kejenuhan adalah kenaikan dalam Kecerahan ”

Formula ini membantu saya setiap kali saya bertanya-tanya warna apa yang harus saya gunakan pada desain saya. Saya belajar bahwa titik awal terbaik adalah memiliki warna dasar, dan dari sana, mulai penyesuaian dalam Saturasi dan Kecerahan sambil menjaga nilai Hue tetap sama.

Opsi B

Opsi B

Di Opsi B, prinsip yang sama masih diterapkan (rumus yang kami punya di atas) tetapi nilai Hue berubah. Dan terminologi RGB dan CMY yang biasa kami lewati dalam berbagai bahan desain, sekarang akan masuk akal bagi kami.

RGB berarti Merah, Hijau, dan Biru, sedangkan CMY adalah Cyan, Magenta, dan Yellow. Terminologi ini tidak membuat penting bagi saya ketika saya mulai, sampai saya menemukan penemuan menggunakan RGB dan CMY untuk kombinasi warna.

Sekarang di Opsi B, jika kita ingin memiliki variasi warna dasar yang lebih gelap, yang perlu kita lakukan adalah memindahkan color picker kita ke arah di mana RGB terdekat berada di palet warna kita, atau memindahkannya ke arah CMY untuk variasi yang lebih ringan. Sebagai contoh:

Pemilih warna

Pemilih warna

Karena kami ingin membuat variasi yang lebih gelap dari warna dasar kami # B9F4BC (latar belakang lingkaran) yang akan diterapkan dalam ikon Folder kami, kami perlu memindahkan pemilih warna kami ke arah tempat RGB terdekat berada (yaitu Biru dalam kasus). Tetapi jika kita ingin memiliki versi yang lebih ringan dari Folder kita, kita akan memindahkan pemilih kita ke kiri, dekat CMY (dalam hal ini Kuning).

“* Lebih sering RGB mengarah ke variasi yang lebih gelap dan CMY untuk yang lebih terang”

Setelah memindahkan pemilih warna ke variasi yang kami inginkan, kami sekarang menerapkan rumus di Opsi A, yang menghasilkan kami untuk memiliki kombinasi warna ini:

“Merah, Hijau, Biru (RGB) + Opsi A rumus = Variasi yang lebih gelap. Cyan, Magenta, Yellow (CMY) + Option A formula = Variasi yang lebih ringan ”

4. Gunakan spasi untuk memisahkan kelompok 

 Jadilah pemberi ruang yang murah hati

Selain menambahkan garis antara dua kelompok untuk menunjukkan pemisahan, menggunakan ruang yang murah hati di antara keduanya adalah solusi yang lebih baik dan lebih mudah.

Seperti yang dinyatakan oleh Hukum Kedekatan:

“Objek yang dekat, atau berdekatan satu sama lain, cenderung dikelompokkan bersama.”

Dari contoh saya di atas, tujuan saya adalah untuk membuat pemisahan antara judul saya dan penulisnya dengan menggunakan celah ruang besar di antara mereka yang 24px.

5. Gunakan warna untuk memisahkan baris

Warna sebagai pemisah

Melakukan antarmuka baris terkadang membosankan untuk mendesain, karena hanya membutuhkan duplikasi komponen untuk beberapa kali. Tetapi di sisi pengguna, membacanya bisa sulit khususnya jika tidak ada perbedaan besar antara satu baris dengan yang lainnya. Jadi selain menggunakan garis, menambahkan latar belakang warna dalam baris dapat sangat membantu bagi pengguna dalam membaca, dan juga akan lebih menyenangkan untuk dilakukan bagi kita desainer ????

6. Lipat gandakan bukannya Drop shadow text 

 Desain tajuk

Cukup menantang mendesain komponen tajuk atau menambahkan teks pada gambar khususnya jika latar belakang gambar akan dinamis (atau dapat diubah dari waktu ke waktu).

Biasanya solusi umum untuk teks dengan latar belakang gambar dinamis adalah menambahkan drop shadow, tetapi itu tidak membantu keterbacaan pengguna. Ini menambahkan lebih banyak kekacauan visual di sekitar huruf dan kata-kata karena mereka mengisi ruang di antara mereka.

Bagi sebagian orang, overlay warna hitam / putih adalah solusi yang dapat membantu meretas jenis desain ini. Namun baru-baru ini, saya telah menemukan tentang menggunakan Multiply sebagai alat campuran untuk mengisi gradien.

Spesifikasi untuk opsi campuran Multiply

Melakukannya jauh lebih mudah daripada menciptakan latar belakang hitam di atas gambar dan mengurangi opacity-nya. Juga, memiliki skala abu-abu membuat bagian lain dari gambar mempertahankan warna alami, dan membuat bagian di mana teks berada sedikit lebih gelap, untuk keterbacaan teks.

7. Panjang Garis

Hal umum yang dilakukan sebagian besar perancang adalah membuat panjang garis lebih panjang sehingga bisa masuk ke dalam wadahnya. Tetapi melakukan hal itu, menciptakan ketegangan mata bagi pengguna kami, tidak seperti memiliki 45-65 karakter per baris yang ideal.

Jika Anda pernah menemukan dilema untuk membuat panjangnya lebih pendek untuk membuatnya ideal tetapi akan menghasilkan ruang putih besar di sisi kanan seperti di bawah ini:

dengan ruang putih besar di sebelah kanan

Jangan ragu untuk melakukannya, dan buat pusat kolom seluruh teks sejajar dengan wadahnya, sehingga Anda dapat menghilangkan spasi.

konten terpusat

8. Jangan menemukan kembali roda

Apa yang membuat desain tidak konsisten adalah ketika tidak berbasis komponen. Ini adalah ketika Anda menyadari bahwa Anda telah membuat 5 jenis antarmuka kartu, 10 tombol, 5 judul gaya judul dll.

Sebelum Anda mulai membuat antarmuka untuk konten tertentu, cobalah melihat-lihat desain yang Anda buat sebelumnya, karena Anda mungkin melihat pola yang dapat Anda daur ulang dan gunakan.

Alih-alih menciptakan kembali roda dan membuat kartu lain untuk Grup Seni (contoh di atas), kita dapat menggunakan kartu Artikel dan menggantinya dengan konten Grup Seni. Ini akan menghemat waktu bagi para desainer dan juga membuat antarmuka konsisten.

9. Gunakan warna merek sebagai aksen

Kami biasanya berpikir bahwa warna branding harus memenuhi sebagian besar warna antarmuka kami. Kami mengalami kesulitan untuk menampilkan warna branding kuning, oranye, dan merah muda mengejutkan klien kami dalam tata letak kami yang bersih dan minimalis. Jawabannya? menggunakannya sebagai warna aksen.

10. Gantungkan peluru </ h2>Dan terakhir, jika Anda membuat desain daftar seperti yang ada di atas, buatlah peluru, mesin terbang, atau angka berada di margin untuk menyorot daftar. Ini akan membuat aliran keterbacaan pengguna tidak terganggu dan lebih terbaca.Masih ada daftar panjang lembar contekan desain yang ingin saya tambahkan, tetapi untuk sekarang, saya harap 10 tip desain ini akan membantu Anda dalam menciptakan antarmuka desain. Juga, jangan ragu untuk menambahkan kode cheat Anda dalam tanggapan ????

sumber:blog.marvelapp.com

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles