Pelajari Desain UI dasar dalam 5 menit

Jika Anda memiliki pemahaman dasar tentang HTML dan CSS dan ingin membuat antarmuka pengguna yang menarik di browser, tidak perlu mencari lagi! Dalam artikel ini, Anda akan meningkatkan keterampilan desain UI Anda dengan mempelajari tentang tujuh dasar berikut:

  • ruang putih
  • penjajaran
  • kontras
  • skala
  • tipografi
  • warna
  • hierarki visual

Artikel ini dibuat berdasarkan kursus Scrimba gratis yang dibuat oleh Gary Simon yang brilian, yang juga dikenal sebagai DesignCourse. Kursus ini menawarkan serangkaian tutorial interaktif yang dapat Anda lakukan dengan kecepatan Anda sendiri dan bahkan ulangi untuk benar-benar menyematkan pembelajaran Anda.

Peluncuran kursus: Pelajari Dasar-dasar Desain UI?

Kami pikir semua pengembang front-end harus memiliki keterampilan desain UI dasar. Jadi dalam hal ini? Tentu saja, @designcoursecom mengajari Anda hal itu. Semua tanpa menggunakan alat desain apa pun, cukup HTML & CSS.

RT dihargai? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba) 28 Januari 2020

Jadi jika artikel ini membuat Anda menginginkan lebih, pastikan untuk memeriksa kursusnya. Sekarang mari kita mulai!

Ruang Putih

Dasar desain pertama yang akan kita lihat adalah Ruang Putih , juga dikenal sebagai ruang negatif. Seperti namanya, ini adalah ruang antar elemen pada halaman.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Elemen yang tertekan pada halaman tanpa spasi tidak hanya terlihat tidak menarik tetapi juga sulit dinavigasi dan sulit dibaca.

Ruang putih dapat disesuaikan dengan berbagai cara, termasuk padding, margin, dan tinggi garis. Lihat gambar sebelum dan sesudah di bawah ini untuk melihat apa perbedaan ruang putih yang efektif dapat membuat.

Sebelum dan sesudah penyesuaian spasi

Penjajaran

Selanjutnya adalah Alignment . Ini adalah proses untuk memastikan bahwa setiap elemen ditempatkan dengan benar dalam kaitannya dengan elemen lain, misalnya dengan memastikan bahwa kolom sejajar di bawah halaman.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Seperti yang Anda lihat dari gambar berikut, halaman pertama dengan elemen dalam banyak kolom berbeda (perataan lemah) jauh kurang menarik dan mudah dibaca dibandingkan yang kedua, yang memiliki perataan yang kuat

Halaman dengan perataan lemahHalaman dengan perataan yang kuat

Kontras

Penting juga untuk mempertimbangkan Kontras saat membuat halaman atau aplikasi. Kontras adalah perbedaan antara warna yang muncul bersebelahan pada halaman.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Seperti yang Anda lihat dari contoh ini, halaman dengan kontras yang buruk sulit dibaca dan elemennya tidak menonjol.

Halaman dengan kontras yang buruk

Halaman dengan kontras yang baik, seperti yang di bawah ini, tidak hanya terlihat jauh lebih baik tetapi juga lebih ramah pengguna dan dapat diakses.

Contoh kontras yang bagus

Untuk membantu Anda mendapatkan kontras yang tepat, WCAG (Panduan Aksesibilitas Konten Web) menyarankan rasio kontras minimum (AA) setidaknya 4,5: 1, atau 3: 1 untuk teks besar, atau rasio kontras 7 yang ditingkatkan (AAA) : 1 atau 4.5: 1 untuk teks besar. Ada berbagai plugin atau situs web untuk memeriksanya.

Skala

Skala juga merupakan bagian penting dari UI, jadi pertimbangkan ukuran setiap elemen dengan cermat. Misalnya, elemen harus cukup besar dalam kaitannya dengan halaman (jadi tidak ada celah yang besar). Selain itu, elemen dengan tingkat kepentingan yang lebih tinggi, seperti judul, harus lebih besar daripada yang kurang signifikan.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Lihatlah gambar sebelum dan sesudah di bawah ini, dan perhatikan betapa lebih baik tampilan halaman ketika diskalakan dengan benar.

Halaman dengan skala yang burukContoh skala yang baik

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Tipografi

Tipografi juga berdampak besar pada UI. Ada banyak cara untuk menyesuaikan ini, termasuk pilihan font, ukuran font, perataan, spasi huruf, tinggi baris, gaya font, warna dan kontras.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Sebagai aturan umum, gunakan tidak lebih dari 2 jenis font pada satu halaman dan pastikan aspek yang berbeda bekerja sama untuk menetapkan urutan kepentingan. Ini dikenal sebagai hierarki visual , yang akan kami bahas lebih detail di bawah ini.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Jika Anda mengikuti tip berikut, halaman Anda akan terlihat sebagus ini:

Contoh tipografi yang bagus

Dan tidak membingungkan dan tidak terbaca, seperti ini:

Halaman dengan tipografi yang buruk

Warna

Dasar desain UI yang pertama kali membentuk pengalaman pengguna adalah warna . Psikologi warna berarti bahwa setiap warna menimbulkan makna bagi orang-orang tertentu - misalnya, merah dapat menandakan bahaya, sedangkan putih dapat membangkitkan kebersihan dan ketenangan.

Berhati-hatilah dengan warna. Makna bervariasi di berbagai budaya, jadi selalu lakukan riset dan pertimbangkan audiens target Anda saat memilih warna.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Penting juga untuk diingat bahwa terlalu banyak warna dapat membuat UI yang buruk dan warna yang Anda pilih untuk digunakan harus saling melengkapi. Sebagai aturan praktis, Anda tidak bisa salah dengan menggunakan variasi yang lebih terang atau lebih gelap dari rona yang sama di samping satu sama lain. Lihat saja betapa lebih mudah dilihatnya gambar kedua di bawah ini dibandingkan dengan yang pertama!

Halaman dengan pilihan warna yang burukPenggunaan warna yang bagus

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Hierarki Visual

Item terakhir dalam daftar Dasar-dasar Desain kami adalah Hierarki Visual . Beberapa elemen UI lebih penting daripada yang lain. Hierarki visual memungkinkan kita untuk menetapkan kepentingan ini.

Ini dapat dilakukan dengan posisi, kontras, warna, skala, gaya, atau kombinasi dari yang disebutkan di atas, seperti yang ditunjukkan pada gambar kedua di bawah, yang memiliki hierarki visual yang jauh lebih baik daripada yang pertama.

Halaman dengan hierarki visual yang burukMenggunakan tipografi dan warna untuk membangun hierarki visual

Bungkus

Pada artikel ini kami telah membahas tujuh dasar desain utama: ruang putih, warna, kontras, skala, kesejajaran, tipografi, dan hierarki visual. Mereka semua sama pentingnya untuk UI - jika salah satu elemen ini kurang, seluruh pengalaman pengguna akan terganggu. Jadi, pastikan Anda mempertimbangkan semuanya saat membuat desain UI.

Kursus Dasar-dasar Desain UI

Jika Anda ingin menelusuri subjek ini lebih lanjut, lihat kursus gratis Dasar-dasar Desain UI di Scrimba. Di dalamnya, Anda akan mempelajari dasar-dasarnya dengan lebih detail.

Semoga berhasil, dan selamat coding :)