Tip Desain Web Sederhana untuk Hasil Yang Baik

Ada banyak cara untuk mendesain situs web. Dengan mengingat hal itu, ada juga cara tak terbatas untuk mengacaukannya juga. Ada dua metode utama untuk menghindari jatuh ke dalam kategori kedua - pelajari dasar-dasar desain dan terapkan sesuai dengan itu. Anda juga perlu cukup berpengalaman untuk mempelajari apa yang berhasil dan mana yang tidak.

Semua desainer mengambil jalur pembelajaran yang berbeda dan seringkali berada pada tahapan yang berbeda dalam perjalanan mereka. Jika Anda membaca ini, semoga Anda juga berusaha untuk lebih meningkatkan pekerjaan Anda dan menghasilkan desain yang lebih baik.

Sayangnya, tidak ada cara untuk memasukkan semua pengetahuan yang dibutuhkan ke dalam 1500 kata. Sebagai gantinya, kami hanya akan menargetkan beberapa tip untuk membuat Anda memikirkan kembali bagaimana Anda dapat mendekati elemen UX / UI. Idealnya, cara berpikir ini juga bisa diterapkan pada bidang lain dari karya desain Anda.

Mulailah Dengan Pemahaman Yang Baik tentang Produk / Situs

Sangat sulit untuk melakukan desain ketika Anda tidak sepenuhnya memahami konten / situs web. Sekarang, Anda tidak perlu belajar kedokteran untuk membuat situs web medis, itu bukanlah tujuannya. Namun, Anda harus tahu bagaimana pengguna akan mengakses informasi apa pun yang mungkin dia perlukan.

Jika Anda ingin merancang aplikasi pembuatan musik, pertama-tama Anda harus mengambil beberapa yang sudah ada, bermain-main dengan mereka untuk merasakannya, membaca tentang teori di baliknya, dan bagaimana fungsi elemen tertentu.

Idealnya, Anda harus bekerja dengan klien Anda, yang juga harus sangat menyukai proyek dan ingin membantu Anda menerapkan UX yang lebih baik untuk pengguna mereka.

Namun, jika Anda tidak memiliki pemahaman mendasar tentang apa situs itu dan masalah apa yang dipecahkannya, Anda dapat melumpuhkan pengalaman pengguna atau memaksa diri Anda sendiri untuk mengikuti solusi yang ada dan hanya mengulitinya kembali (yang terkadang berhasil).

Untuk situs web, Anda harus memiliki peta situs di depan Anda untuk bekerja pada navigasi yang tepat dan membuat keputusan tentang elemen mana yang cocok untuk halaman arahan tertentu. Jika Anda melakukan desain "pabrik cokelat", Anda dapat menampilkan proses pembuatannya secara visual atau melakukan info dump. Itu semua tergantung pada tujuan situs.

Semua informasi ini adalah sesuatu yang Anda butuhkan sebelumnya untuk memiliki tingkat keberhasilan yang lebih tinggi. Mempertimbangkan betapa rumitnya hal ini, dapat terjadi pada Anda jika Anda adalah desainer freelance pemula, jadi sebaiknya ajukan banyak pertanyaan sejak awal. Jika Anda bekerja dalam tim, jangan lupa untuk berkonsultasi dengan anggota tim Anda tentang konten, UX, tujuan, dan lainnya.

Tip dan Trik Khusus Desain:

Sekarang, mari kita lihat beberapa tip UI / UX spesifik yang dapat Anda manfaatkan dalam desain Anda berikutnya:

1 - Kontras!

Sangat mudah untuk mengacaukan kontras di situs. Cara cepat untuk mengenali desainer yang kurang berpengalaman adalah dengan memeriksa kontras secara keseluruhan. Lihat contoh ini:

Sumber

Lihat betapa terang teks di mana-mana? Tombol hijau dengan teks putih, teks abu-abu terang ?. Mari bandingkan dengan UI yang lebih kontras:

Sumber

Sebagian besar font berwarna hitam (atau hampir hitam) dengan informasi yang kurang penting sedikit lebih abu-abu. Hijau lebih gelap, yang sekarang memungkinkan teks putih di atas.

Tip di sini adalah - ketika Anda bekerja dengan teks, mulailah dengan Hitam di atas putih atau putih di atas hitam. Saat Anda menambahkan lebih banyak elemen dan Anda perlu memisahkan dengan hierarki visual, coba cetak tebal atau ubah ukuran font terlebih dahulu. Hanya setelah itu, jika tidak berhasil, lanjutkan dengan perubahan warna, tetapi idealnya tidak lebih dari 30-40% perbedaan (umumnya opacity diatur ke 70%).

2 - Ruang Putih yang Konsisten

Kesalahan umum lainnya adalah memiliki jarak yang tidak konsisten di sekitar elemen. Faktanya, sangat umum bahwa sebagian besar desainer terus berjuang dengan ini setelah bertahun-tahun bekerja dan itu cukup bisa dimengerti - kami memindahkan kotak dengan mouse. Sangat mudah untuk menyelipkan sedikit dan memindahkannya satu atau dua piksel ke samping. Atau Anda mungkin belum melatih mata Anda dengan cukup baik untuk melihat perbedaan itu secara langsung.

Pada contoh berikut, lihat bagaimana komponen yang berbeda memiliki ruang putih yang berbeda di sekitarnya. Beberapa berantakan bersama-sama, beberapa terlalu banyak. Ini tidak terlihat sangat koheren secara visual.

Sebaliknya, berikut adalah contoh dengan jumlah konten / jenis komponen yang kurang lebih sama tetapi dengan tampilan yang lebih konsisten:

Sumber

Ada berbagai cara untuk mencapai hal ini, tetapi seringkali hal itu tidak berhasil hanya dengan pengukuran. Ini sering menjadi "perasaan" saat Anda melihatnya. Apakah itu terlihat seimbang? Jika Anda memiliki kotak, Anda selalu dapat mengukur sesuatu seperti 30px dari samping, 30px di bawah judul, 15px di bawah subtitle, dll. Dan itu pendekatan yang bagus! Tetapi dengan elemen visual yang lebih besar seperti judul atau gambar, Anda mungkin ingin meningkatkannya sedikit untuk mengganti elemen yang lebih berat.

3 - Warna

Komponen fundamental lain dari desain yang bagus. Warna harus bekerja sama dengan baik. Salah satu cara mudah untuk mendekati situs web adalah dengan tetap menggunakan satu warna primer dan menjaga warna monokromatis lainnya.

Contoh berikut mengikuti ketiga saran sejauh ini - Kontras yang baik, keseimbangan, dan penggunaan warna:

Sumber

Salah satu cara mudah untuk memulai dengan warna adalah dengan mengikuti beberapa skema warna yang diterima dengan baik dari situs-situs seperti https://colorhunt.co/ atau dapatkan inspirasi dari Dribbble untuk kombinasi. Bekerja dengan roda warna sangat membantu untuk mengetahui kombinasi, tetapi sering kali dibutuhkan sedikit sentuhan tambahan dari perancang untuk mendapatkan kombinasi terbaik. Roda warna seringkali tidak menghasilkan warna yang sempurna untuk diterapkan dalam sebuah desain.

Contoh dari roda warna Adobe:

Sumber

Warna hijau bagus di tengah tapi agak sulit menggunakan hasil di kiri / kanan.

4 - Tetap pada Gaya di Seluruh Situs

Membangun nuansa situs web adalah salah satu pekerjaan utama desainer. Meskipun gagasan “cantik” sangat sulit untuk didefinisikan, terutama karena orang sering memiliki pandangan berbeda tentang apa yang baik dan yang tidak. . Alih-alih mengkhawatirkan hal ini, fokuslah pada konsistensi dan pertahankan gaya.

Apa artinya? Baiklah, mari kita mendesain sebuah tombol. Kami mengatur ukuran font, font, warna, latar belakang, jarak dll. Dan kami mendapatkan sesuatu seperti ini:

Sekarang, jika kita ingin menambahkan gambar dan judul, kita dapat mencapai sesuatu seperti ini mungkin:

Lihat sudutnya. Semua sudut 90deg sempurna, tanpa pembulatan. Sekarang, itu berarti desain kami sebagian besar akan mengikuti sudut tajam. Dan akan terlihat lebih konsisten jika gambar memiliki sudut yang sempurna juga. Sama seperti jika kita menambahkan input, mereka semua akan memiliki sudut yang lebih tajam juga. Mari tambahkan satu elemen lagi:

Kami telah menambahkan kisi kotak di sudut kanan atas dan kiri bawah. Ini bisa jadi lingkaran, tetapi untuk mempertahankan tampilan yang tajam, kami telah mengaturnya ke kotak. Pemikiran yang sama harus dipertahankan di seluruh situs. Jika Anda mulai mengubah elemen, Anda mungkin mulai kehilangan kesannya, yang pada gilirannya akan menghasilkan desain yang tidak konsisten dan melemahkan merek.

Berikut adalah desain yang sama dari atas tetapi dengan tampilan membulat:

Itu sama, tapi rasanya jauh berbeda sekarang.

5 - Desain Dengan Komponen

Komponen ada di semua alat desain modern seperti Figma dan Adobe XD. Mereka ada di sana untuk alasan yang sangat bagus - pengembang menerapkan situs sedemikian rupa sehingga mereka dapat digunakan kembali sebanyak mungkin.

Jika Anda membuat elemen seperti di atas, Anda hanya ingin "menyalin-tempel" di halaman lain dan ini akan berfungsi. Tidak perlu mengkodekannya lagi dengan sedikit perbedaan. Sebagai seorang desainer, idealnya Anda ingin menggunakan kembali komponen Anda dengan cara yang sama.

Jika Anda membuat beranda dengan 3 posting berturut-turut, mungkin Anda bisa menggunakan kembali posting yang sama dari beranda. Ini menghemat waktu Anda, menghemat waktu pengembang dan menjaga desain tetap konsisten bagi pengguna.

Sumber

Bayangkan Anda sedang membuat judul bagian. Jika Anda perlu memiliki 8 bagian dengan judul, apakah Anda akan mendesainnya setiap saat atau Anda akan menyalin-tempel sebelumnya? Idealnya, Anda ingin menggunakannya kembali. Tetapi bagaimana jika Anda harus mengubahnya dari rata tengah ke kiri? Mungkin sedikit berubah ukurannya, mungkin warnanya? Tip dari ini adalah mencoba dan TIDAK melakukan itu. Cobalah untuk tetap seperti aslinya. Jika Anda memang membutuhkan tampilan yang berbeda (selain kiri / tengah / rata kanan), coba buat satu variasi saja. Bukan lima atau sepuluh dari mereka.

Contoh oleh DevriX

Singkatnya:

Untuk mencapai hasil yang baik, Anda memerlukan pemahaman yang kuat tentang dasar-dasar desain seperti warna, kontras, ruang putih, keseimbangan, hierarki visual, keteraturan, dan lainnya. Saat Anda mendesain dengan pemikiran tersebut dan fokus pada kegunaan, konsistensi, dan gaya, dan bahkan jika itu bukan "WOW!" desain, akan kokoh di semua lini dan berfungsi dengan baik, yang sering kali memberikan hasil yang lebih baik untuk suatu merek dalam jangka panjang.