Desain web sebagian besar terdiri dari desain antarmuka. Ada banyak teknik yang terlibat dalam membuat antarmuka yang indah dan fungsional. Inilah 10 koleksi saya yang menurut saya akan berguna bagi Anda dalam pekerjaan Anda. Mereka tidak terkait dengan tema tertentu, melainkan kumpulan teknik yang saya gunakan dalam proyek saya sendiri. Tanpa basa-basi lagi, mari kita mulai.
- Padded Block Links
Tautan (atau jangkar) adalah elemen sebaris secara default, yang berarti area yang dapat dikliknya hanya mencakup tinggi dan lebar teks. Area yang dapat diklik ini, atau ruang tempat Anda dapat mengklik untuk menuju ke tujuan tautan tersebut, dapat ditingkatkan untuk kegunaan yang lebih besar. Kita dapat melakukannya dengan menambahkan padding dan, dalam beberapa kasus, juga mengonversi tautan menjadi elemen blok. Berikut adalah contoh tautan sebaris dan berlapis, dengan area yang dapat diklik disorot untuk menunjukkan perbedaannya:
Jelas, semakin besar area yang dapat diklik, semakin mudah untuk mengklik tautan tersebut karena semakin kecil kemungkinan untuk melewatkannya. Mengubah tautan menjadi elemen blok membuat area teks menjangkau seluruh lebar wadah, kecuali lebarnya ditentukan lain. Ini membuatnya ideal untuk tautan yang terletak di sidebar.
- Typesetting Buttons
Perhatian terhadap setiap detail adalah hal yang membedakan produk hebat dari produk biasa-biasa saja. Elemen antarmuka seperti tombol dan tab di klik berkali-kali dalam sehari oleh pengguna Anda, jadi perlu mengesetnya dengan benar; dan dengan penyusunan huruf yang saya maksud adalah memposisikan label. Berikut beberapa contoh jenis label salah tempat yang terkadang saya perhatikan:
Sepintas terlihat baik-baik saja, tetapi perhatikan bahwa teks ditempatkan terlalu tinggi karena huruf kecil telah digunakan sebagai panduan untuk menyelaraskan teks secara vertikal di tengah, seperti:
Namun, jika kita menggunakan huruf besar serta huruf kecil dengan ascenders (“t”, “d”, “f”, “h”, “k”, dan “l”), keseimbangan bergeser ke atas, membuat label juga muncul. tinggi pada tombol. Dalam kasus seperti itu, kita harus mengatur jenisnya menggunakan tinggi huruf besar sebagai panduan – atau mengaturnya sedikit lebih tinggi jika sebagian besar hurufnya adalah huruf kecil. Inilah yang saya maksud:
Ini memberikan seluruh tombol tampilan dan nuansa yang lebih seimbang. Sentuhan kecil seperti ini sangat membantu membuat antarmuka Anda lebih halus dan memuaskan untuk digunakan.
- Using Contrast To Manage Focus
Demikian pula, Anda juga dapat mengatur fokus perhatian pengunjung Anda dengan kontras antar elemen. Berikut adalah contoh judul posting dan beberapa informasi meta di bawahnya mengenai siapa yang memposting artikel dan tanggalnya:
Semua teks diatur dalam warna hitam. Mari kurangi kontras antara informasi meta (tanggal dan nama penulis) dan latar belakang dengan meletakkan teks dalam bayangan abu-abu terang:
Elemen kontras tertinggi di sini adalah tajuk utama, sehingga benar-benar muncul di hadapan kita. Elemen lainnya menghilang ke latar belakang. Di sini, saya telah memilih penulis sebagai elemen terpenting kedua, dan tanggal sebagai yang terkecil. Font juga berbeda dalam ukuran dan gaya, tetapi tingkat kontrasnya bisa sangat kuat. Mari kita balik urutan kepentingan hingga saat ini, penulis, dan tajuk utama:
Anda dapat melihat seberapa efektifnya dalam mengalihkan fokus: tanggal sekarang muncul di hadapan Anda, sementara judulnya memudar. Teknik ini sangat berguna untuk situs web yang padat informasi, seperti blog, forum, dan jejaring sosial, di mana Anda ingin membuat banyak informasi dapat dipindai dengan mudah sambil tetap menampilkan banyak hal tambahan, seperti tanggal. Memudar ekstra memungkinkan pengunjung untuk dengan mudah memusatkan perhatian mereka pada bagian teks yang paling penting.
- Using Color To Manage Attention
Warna juga dapat digunakan untuk memfokuskan perhatian pengunjung Anda secara efektif pada elemen penting atau dapat ditindaklanjuti. Misalnya, selama pemilihan presiden AS, hampir semua situs kandidat memiliki tombol donasi berwarna merah. Merah adalah warna yang sangat cerah dan kuat sehingga menarik perhatian, dan bahkan lebih menonjol ketika situs web lainnya berwarna biru atau warna lain yang lebih dingin.
Warna yang lebih hangat seperti merah, kuning, dan jingga secara alami cerah sehingga cenderung menarik perhatian. Mereka juga “mengembang” saat dipasang dengan warna yang lebih dingin seperti biru dan hijau. Artinya, tombol oranye dengan latar belakang biru terlihat seperti mengalir ke luar dan menempati kursi depan. Sebaliknya, tombol biru dengan latar belakang oranye berkontraksi ke dalam, ingin tetap berada di latar belakang. Berikut gambar untuk diilustrasikan:
Berikut beberapa contoh situs web yang menggunakan warna secara efektif untuk mengarahkan perhatian pengguna ke elemen penting:
Fungsi menampilkan tautan “Kami Mempekerjakan” di halaman pekerjaannya. Untuk memastikan tautan tidak terlewatkan, para desainer mengaturnya dengan latar belakang merah yang muncul dari tajuk latar belakang gelap, yang secara efektif menarik perhatian.
Causecast menggunakan warna secara efektif. Empat elemen merah muda cerah muncul pada Anda: logo, tautan umpan balik, tautan donasi, dan pesan deskripsi situs web.
Ingin uraian “Tentang” di situs web Anda untuk menarik perhatian pengunjung? Buat latar belakang kuning. Ingin menonjolkan tombol “Gabung”? Warnai dengan oranye. Pastikan untuk tidak menyorot terlalu banyak elemen; jika Anda melakukannya, mereka mungkin tersesat di perusahaan satu sama lain.
- White Space Indicates Relationships
Salah satu elemen terpenting dalam antarmuka adalah ruang putih antar elemen. Jika Anda tidak terbiasa dengan istilah ruang putih, artinya hanya: ruang antara satu elemen antarmuka dan lainnya, baik itu tombol, bilah navigasi, teks artikel, tajuk utama, dan sebagainya. Dengan memanipulasi ruang putih, kita dapat menunjukkan hubungan antara elemen atau kelompok elemen tertentu.
Jadi, misalnya dengan meletakkan judul di dekat teks artikel, kami menunjukkan bahwa judul tersebut terkait dengan teks tersebut. Teks kemudian ditempatkan lebih jauh dari elemen lain untuk memisahkannya dan membuatnya lebih mudah dibaca. Berikut adalah contoh di mana ruang putih dapat ditingkatkan:
Teks terlihat baik-baik saja dan pasti dapat dibaca, tetapi karena spasi di atas dan di bawah setiap judul sama, mereka tidak memisahkan setiap bagian teks dengan jelas. Kita dapat memperbaikinya dengan menambah spasi putih di antara setiap bagian dan juga dengan sedikit memperketat tinggi baris paragraf:
Ini menghasilkan blok yang lebih jelas; kita dapat dengan mudah mengetahui judul mana yang sesuai dengan potongan teks mana dan dapat melihat bagian yang terpisah dengan jelas. Desainer yang baik sering menyipitkan mata atau melirik karya mereka dari kejauhan, yang memungkinkan mereka melihat blok elemen yang dipisahkan oleh ruang putih saat mereka menyatu. Jika Anda tidak dapat melihat grup ini dengan jelas, Anda mungkin perlu menyesuaikan ruang putih Anda.
- Letter Spacing
Desain web cukup membatasi untuk tipografi. Namun meskipun hanya ada sedikit font Web yang aman dan tidak banyak hal hebat yang dapat Anda lakukan untuk menatanya, perlu diingat bahwa kami masih memiliki beberapa tingkat kendali. “Tracking” adalah istilah yang digunakan dalam bidang tipografi untuk menggambarkan penyesuaian spasi antar huruf dalam kata. Kami memiliki kemampuan untuk melakukan ini dengan CSS menggunakan properti spasi-huruf.
Jika digunakan dengan menahan diri dan rasa, properti ini bisa efektif dalam meningkatkan tampilan tajuk utama Anda. Saya tidak akan merekomendasikan penggunaan spasi huruf pada teks isi karena spasi default umumnya memberikan keterbacaan terbaik untuk ukuran font yang lebih kecil.
Berikut adalah contoh spasi huruf yang digunakan:
Efeknya bisa berguna saat Anda ingin membuat tajuk yang lebih estetis atau orisinal. Di sini, saya hanya menggunakan beberapa piksel untuk spasi huruf, tetapi sudah membuat perbedaan besar pada gaya font.
- Auto-Focus On Input
Banyak aplikasi Web dan situs web menampilkan formulir. Ini mungkin berupa formulir pencarian atau formulir masukan yang mengundang Anda untuk mengirimkan sesuatu. Jika formulir ini adalah fitur inti dari aplikasi atau situs web Anda, Anda mungkin ingin mempertimbangkan untuk memfokuskan kursor pengguna secara otomatis pada bidang input saat situs web dimuat. Ini akan mempercepat karena pengguna dapat mulai mengetik langsung tanpa harus mengkliknya. Contoh bagusnya adalah situs web Google dan Wikipedia.
Saat tiba di Wikipedia.org, kotak pencarian sudah disorot, siap menerima teks.
- Custom Input Focus
Pada proyek baru-baru ini, kami memiliki serangkaian gaya fokus yang dibangun ke dalam sistem desain yang tidak konsisten dan tidak efektif, yang menghasilkan pengalaman pengguna akhir yang tidak terlalu bagus. Kami memutuskan untuk mengunjunginya kembali untuk membuat pengalaman fokus yang lebih baik di seluruh sistem desain.
Ketidakkonsistenan muncul karena beberapa elemen menggunakan gaya fokus default browser, seperti tautan dan tombol, sementara elemen lain seperti kotak teks dan dropdown mengandalkan gaya fokus khusus. Dalam beberapa kasus, gaya fokus tidak efektif karena kontras warna gaya fokus dibandingkan dengan elemen fokus tidak cukup untuk memastikan visibilitas oleh sebanyak mungkin pengguna. Selain itu, terkadang gaya fokus tidak memiliki kontras yang cukup tinggi dengan latar belakang halaman.
Contoh gaya fokus yang menggunakan campuran gaya default browser dan fokus khusus:
Kami juga mendukung sub-merek dengan sistem desain, dan mereka juga memiliki gaya fokus yang sama tidak konsisten dan tidak efektif. Sistem desain tidak menyediakan gaya fokus khusus untuk semua elemen sehingga tim membuat gaya fokus tambahannya sendiri yang menghasilkan dua gaya fokus khusus. Ini menghasilkan pengalaman fokus yang tidak konsisten dan salah satu gaya fokus tidak sesuai dengan kontras warna.
Contoh gaya fokus submerek yang menggunakan dua gaya berbeda untuk gaya fokus:
Saat kami memikirkan tentang cara membuat gaya fokus baru untuk sistem desain yang diterapkan secara konsisten dan akan sesuai dengan tema untuk submerek kami, kami menguraikan tonggak panduan kami untuk pekerjaan tersebut.
- Hover Controls
Beberapa aplikasi Web memiliki kontrol utilitas tambahan, seperti tombol edit dan hapus, yang tidak harus selalu ditampilkan di samping setiap item. Mereka dapat disembunyikan untuk menyederhanakan antarmuka dan memusatkan perhatian pengunjung pada kontrol dan konten utama. Misalnya, kontrol arahkan kursor ini digunakan di Twitter saat Anda mengarahkan kursor ke pesan:
- Verbs In Labels
Anda dapat membuat dialog opsi lebih bermanfaat dengan memikirkan label yang Anda gunakan pada tombol dan tautan. Jika kesalahan atau pesan muncul dan opsinya adalah “Ya”, “Tidak” dan “Batal”, Anda harus membaca seluruh pesan untuk dapat menjawab. Tampak normal, bukan?
Tapi kita sebenarnya bisa mempercepat dengan menggunakan kata kerja di label. Jadi, jika alih-alih “Ya”, “Tidak”, dan “Batal”, kami memiliki tombol “Simpan”, “Jangan Simpan”, dan “Batal”, Anda bahkan tidak perlu membaca pesan untuk memahami opsi apa berada dan tindakan apa yang harus dilakukan. Semua informasi terkandung dalam label tombol.
Menggunakan kata kerja dalam label pada tombol dan tautan membuat dialog opsi lebih bermanfaat karena label berisi semua informasi yang dibutuhkan pengguna untuk dapat membuat keputusan.
To Conclude
Mudah-mudahan, Anda telah menemukan beberapa teknik baru yang akan berguna dalam pekerjaan Anda. Seperti biasa, menggunakannya secara efektif bermuara pada pengekangan dan implementasi yang bijaksana. Misalnya, kontrol yang muncul saat mengarahkan kursor dapat membersihkan antarmuka Anda, tetapi kontrol tersebut juga akan meningkatkan kurva pembelajaran karena orang mungkin tidak memperhatikan kontrol ini pada awalnya. Tetapi menampilkan semua kontrol setiap saat mungkin juga bukan strategi terbaik karena pengguna perlu memindai lebih banyak hal untuk menemukan apa yang mereka cari.