10 Elemen Penting untuk Setiap Desain Situs Web
Meskipun setiap desainer mungkin memiliki rencana berbeda dalam membangun situs web, mereka memiliki daftar periksa yang sama. Tidak peduli bagaimana Anda mencoba menghindarinya, ada beberapa elemen yang harus (dan biasanya dilakukan!) di setiap situs web.
Mulai dari banyak spasi dan gambar bagus, hingga fungsionalitas penelusuran dan ajakan bertindak yang jelas, elemen umum ini adalah hal-hal yang diharapkan pengguna saat menggunakan situs dengan mudah.
Hari ini kita akan melihat sepuluh elemen yang harus Anda prioritaskan di situs web Anda, contoh masing-masing elemen yang dirancang dengan sempurna, dan tips tentang cara menggunakan masing-masing elemen dalam proyek desain situs web Anda berikutnya. Seperti kata pepatah, “iblis ada dalam detailnya.”
Perangkat Desainer Terbaik: 2 Juta+ Aset
Envato memberi Anda akses tak terbatas ke 19+ juta sumber daya desain profesional, tema, templat, foto, grafik, dan banyak lagi. Semua yang Anda perlukan dalam perangkat sumber daya desain Anda.
Lihat Lebih Banyak
1. Ruang


Ruang adalah salah satu alat desain yang paling penting karena menentukan segalanya—mulai dari aliran hingga keterbacaan. Desainer mulai menggunakan ruang dengan cara yang tidak kita lihat di web satu dekade lalu. Desain situs lebih banyak mencakup ruang yang luas, peningkatan jarak antar baris teks, dan penggunaan ruang terbuka secara keseluruhan.
Hubungan spasial yang penting mencakup konsistensi dalam jarak. Elemen serupa harus menyertakan spasi yang serupa. Jumlah spasi antar baris dalam sebuah paragraf harus sama, begitu pula dengan jumlah pembungkus gambar.
Ruang juga penting dalam menciptakan titik fokus bagi pengguna. Sebuah gambar atau potongan teks yang dikelilingi oleh spasi akan tampak lebih besar dan lebih penting daripada gambar atau teks yang dijejali di lokasi yang lebih kecil atau lebih rapat dalam desain.
Penting juga untuk dicatat bahwa ruang tidak selalu berwarna putih. Ini mengacu pada kurangnya elemen, dan bisa juga berupa warna latar belakang atau tekstur.
Cara Menggunakannya: Mulailah dengan elemen kunci seperti menu navigasi, misalnya. Pastikan elemen diatur sedemikian rupa sehingga mencakup pengaturan jarak antar elemen. Ini akan membuat setiap tombol atau kata terlihat lebih jelas.
2. Navigasi Sederhana


Navigasi tidak perlu rumit. Itu harus mudah diidentifikasi dan mudah digunakan. Penting juga untuk meminimalkan menu navigasi agar tidak membebani pengguna. Tergantung pada jenis situsnya, lima hingga sepuluh item navigasi menu adalah tujuan utama yang harus Anda tuju.
Navigasi juga mencakup alat yang membantu pengguna menavigasi situs. Situs dengan pengguliran paralaks, misalnya, sering kali menyertakan panah arah untuk membuat situs lebih ramah pengguna. Semakin mudah orang menggunakan dan bernavigasi di seluruh situs Anda, semakin lama mereka berinteraction dengannya.
Contoh di atas menunjukkan dua jenis navigasi yang sangat berbeda: Zola, yang mencakup menu sederhana dan navigasi kemajuan dengan teks yang dapat diklik sebagai tombol, dan Anet Design, yang menampilkan gaya tombol yang lebih funky dan kreatif. Kesamaan yang dimiliki kedua situs adalah navigasi utama tidak pernah bergerak atau berubah, sehingga menciptakan konsistensi dan alur di setiap situs.
Cara Menggunakannya: Gunakan navigasi sederhana sebagai kerangka untuk membangun situs web Anda. Ingatlah bahwa pengguna menginginkan beberapa hal penting dari navigasi: pengetahuan tentang lokasi mereka di situs, cara untuk kembali (atau pulang), dan petunjuk arah (jika situs Anda memiliki antarmuka yang tidak biasa atau lebih rumit).
3. Tentang Kami


Sangat penting bagi usaha kecil atau pemilik situs untuk memberi tahu pengguna siapa mereka. (Hal ini kurang penting bagi perusahaan-perusahaan besar yang sudah terkenal, meskipun hal ini masih merupakan praktik yang umum.)
Halaman “Tentang Kami” harus memberi tahu pengguna siapa Anda dan apa yang Anda lakukan. Ini dapat menguraikan filosofi atau tujuan perusahaan atau bagaimana situs itu terbentuk. Halaman ini juga bisa menjadi tempat testimoni pelanggan atau pengguna, dan kisah sukses. Halaman jenis ini juga dapat berfungsi sebagai pintu gerbang ke halaman terkait atau bahkan profil media sosial.
Satu-satunya masalah yang sering terjadi pada halaman Tentang Kami adalah halaman tersebut menjadi panjang dan bertele-tele. Buat halamannya tetap sederhana; memberikan informasi secukupnya kepada pengguna agar tertarik tetapi tidak bosan. Dan ingatlah untuk menjaga desainnya tetap menarik.
Cara Menggunakannya: Gunakan halaman Tentang Kami untuk memberikan sedikit kepribadian pada merek Anda. Pertimbangkan untuk menyertakan foto tim Anda dan biografi singkat perusahaan.
4. Informasi Kontak



Informasi kontak biasanya muncul dalam salah satu dari dua cara – di header/navigasi utama, atau sebagai halaman Hubungi Kami dengan formulir atau informasi yang diperluas. Opsi mana pun dapat berfungsi dengan baik, bergantung pada desain situs Anda.
Kuncinya adalah membuatnya sangat terlihat. Memiliki informasi kontak seperti nomor telepon, alamat fisik, atau formulir untuk menghubungi pemilik situs web menambah legitimasi situs dan bisnis Anda. Pengguna mungkin frustasi jika ingin menemukan Anda dan informasinya tidak tercantum dengan jelas di situs.
Cara Menggunakannya: Tambahkan informasi kontak ke semua header dan/atau footer statis. Jika Anda memiliki alamat bisnis fisik, sertakan informasi lokasi. Pertimbangkan formulir kontak sehingga pengguna dapat mengirim email langsung dari situs web.
5. Telepon ke Action (atau Daftar)


Dalam kebanyakan kasus, situs web adalah pintu gerbang menuju suatu tindakan – melakukan penjualan, memberikan informasi, dan mengumpulkan informasi kontak. Untuk memastikan tindakan ini, pesan ajakan bertindak harus jelas dan kuat.
Pertama, tentukan apa yang seharusnya dilakukan situs Anda. Kemudian rancang sedemikian rupa sehingga tindakannya terlihat jelas dan mengarahkan pengguna ke sana. Teknik seperti warna, kontras, dan ruang dapat membantu mengarahkan pengguna ke tombol “kanan”. Connect Mania, misalnya, ingin pengguna mengunduh aplikasi. Satu-satunya ruang yang dapat diklik pada gulir di halaman arahan akan membawa Anda ke App Store.
Ajakan bertindak populer lainnya adalah formulir pendaftaran. Jika ini adalah tujuan Anda, letakkan formulir di lokasi utama dan ukur ukurannya dengan jelas. Buat formulirnya sederhana dan cepat diisi. (Jika Anda memerlukan lebih dari dua atau tiga informasi, pertimbangkan email tindak lanjut daripada formulir pendaftaran yang rumit.)
Cara Menggunakannya: Buatlah ajakan bertindak dengan jelas. Penempatannya harus berada di bagian halaman yang mudah terlihat dan di samping item terkait. Tombol harus berwarna kontras dan menyatakan dengan tepat apa yang harus Anda lakukan: Beli Sekarang, Gabung, Unduh, Daftar Gratis.
6. Pencarian


Berapa kali Anda ingin mencari informasi lama atau sesuatu yang Anda ingat pernah melihatnya di situs web favorit? Di situlah pencarian berperan. Alat ini penting bagi pengguna berulang. Rancang kotak sedemikian rupa sehingga tidak mengganggu namun mudah digunakan. Pastikan kotaknya cukup besar untuk mengetikkan istilah dari situs web Anda. Jika Anda menggunakan ikon untuk pencarian, tidak perlu menciptakan sesuatu yang baru; gunakan kaca pembesar standar.
Cara Menggunakannya: Rancang kotak sederhana yang ada di bagian atas situs web Anda untuk pencarian. Pojok kanan atas adalah lokasi paling populer, penggunaan ruang tersebut diharapkan dan mudah ditemukan oleh pengguna.
7. Catatan Kaki Informasi



Footer adalah cara Anda terhubung dengan audiens dengan banyak informasi tanpa mengganggu desain. Karena footer berada di bagian bawah halaman, ini adalah lokasi logis untuk peta situs kecil, informasi perusahaan atau kontak, tautan, dan konteks situs Anda.
Jadikan footer bermanfaat dan tetap sederhana. Baik Anda memilih beberapa tombol atau desain bergaya tautan, footer harus dirancang agar menyatu dengan situs Anda, namun mungkin memiliki nuansa yang jauh lebih minimalis. Buatlah mudah digunakan.
Cara Menggunakannya: Beberapa footer terbaik menggabungkan banyak elemen di atas. Footer sering kali merupakan pengulangan elemen yang ditemukan di tempat lain (seperti menambahkan pencarian ke bagian atas halaman di navigasi utama dan lagi di footer). Hal ini juga dapat memperkenalkan beberapa elemen di atas dan menampungnya jika tidak ada lokasi logis lainnya dalam skema desain.
8. Gaya untuk Tombol


Setiap tombol di situs harus dikenali sebagai sebuah tombol. Mereka harus memiliki bentuk, efek desain, dan nuansa yang sama terlepas dari tujuan atau lokasinya. Membuat serangkaian tombol yang berbeda bisa menjadi tugas yang menakutkan untuk situs dengan banyak item yang dapat diklik. Pertimbangkan untuk menggunakan kit desain untuk membuat serangkaian elemen yang konsisten.
Cara Menggunakannya: Kembangkan serangkaian tombol unik untuk situs Anda. Buat tema warna yang konsisten – setiap tombol memiliki rona tunggal – atau gaya keseluruhan, seperti bentuk atau tekstur.
9. Gambar Hebat


Orang suka melihat sesuatu beraction. Buat visual yang menakjubkan untuk menarik pengguna ke situs Anda. Gambar atau ilustrasi yang bagus adalah salah satu cara mudah untuk melakukan ini. Dengan sekumpulan foto bagus yang relatif kecil, Anda dapat menampilkan produk, orang, atau apa pun untuk menarik pengguna ke situs Anda.
Kedua situs di atas berfungsi baik dengan gambar yang menunjukkan produk dan gaya mereka. Jenis citra khusus ini penting. Berhati-hatilah dalam menggunakan terlalu banyak stok gambar, karena situs Anda bisa terlihat seperti situs lain.
Cara Menggunakannya: Pekerjakan seorang fotografer atau ilustrator untuk mengembangkan dan membuat kumpulan gambar yang bagus untuk situs Anda. Andalkan gambar khusus daripada gambar stok untuk pengalaman visual yang unik.
10. Font Web


Web pernah dipenuhi dengan beberapa tipografi – seperti Arial dan Courier – karena dapat dibaca oleh sebagian besar komputer dan browser. Itu bukan lagi batasan bagi para desainer. Namun font web tetap penting karena dua alasan utama – kompatibilitas dan lisensi. Dengan menggunakan layanan font web, tipe diketik di web, yang penting untuk optimasi mesin pencari, dan desainer tidak perlu membuat gambar di luar tipenya untuk mempertahankan tampilan tertentu.
Cara Menggunakannya: Mulailah dengan layanan seperti Google Web Fonts, yang gratis, untuk menerapkan serangkaian tipografi yang indah dan menarik ke dalam desain situs Anda tanpa harus menghabiskan banyak uang untuk perizinan, atau mengkhawatirkan masalah kompatibilitas.
Kesimpulan
Meskipun ada banyak komponen penting dalam desain situs web yang efektif, memasukkan sepuluh elemen kunci ini dapat membuat perbedaan. Berhati-hatilah saat mendesain dengan spasi, navigasi sederhana, tentang kami, informasi kontak, ajakan bertindak, pencarian, informasi footer, tombol, gambar, dan font web. Detail yang sering diabaikan ini dapat menyempurnakan atau menghancurkan keseluruhan desain situs Anda.
Sumber Gambar: Tagxedo.com, Pabrik Teh, Fiksasi Web & Desain, milik Zola, Desain Anet, bola bagaball, Andrew Reifman, Hari Delapan Jam, Jari-jari Becak, Denise Chandler, iPemberian, Karlyn/a>, Hubungkan Mania, Buku rasa, Liburan Tennessee, Proyek Kata Benda, Radio, Pekerjaan Perumahan, Pemantau Kampanye, Dropbox, Wi-Fi Karma, Siklus Perbaikan Murni, Benteng Dan Biro Status.