15 Latar Belakang Situs Web Yang Menonjol Dan Pedoman Yang Berguna – Latar belakang situs web dapat menjadi alat yang ampuh dalam menciptakan pengalaman. Tapi pengalaman seperti apa yang bisa Anda sampaikan dan bagaimana caranya? Baca terus untuk mengetahuinya.
15 Latar Belakang Situs Web Yang Menonjol Dan Pedoman Yang Berguna
Baca Juga : Cara Mendesain Situs Web Yang Benar
allfreebackgrounds – Latar belakang situs web Anda adalah bagian besar dari pengalaman pengguna. Itu dapat meningkatkan desain Anda, mengirimkan emosi dan cerita, dan menambahkan nilai yang sangat besar. Ini adalah bagian penting dari desain UX situs web Anda. Ada begitu banyak jalan yang dapat diambil oleh perancang jalan ketika datang ke latar belakang situs web mereka. Dari gradien warna yang menyenangkan, ilustrasi atau video unik dan interaktif yang melukiskan sebuah gambar, hingga satu gambar yang memenuhi seluruh layar. Masing-masing jalan ini menghasilkan serangkaian manfaat yang berbeda bagi pengguna dan desainer.
Tapi mana yang tepat untuk Anda?
Dalam posting ini, kami akan memandu Anda merancang latar belakang situs web dengan alat prototyping Anda yang mencerminkan kepribadian merek Anda dan bagaimana Anda dapat memainkan kekuatan Anda menggunakan latar belakang sebagai alat. Mari selami!
Konsep dasar untuk latar belakang situs web
Memiliki latar belakang situs web harus meningkatkan pengalaman pengguna, titik. Jika dilakukan dengan benar, ini dapat menyatukan desain dan membenamkan pengguna dalam produk Anda. Dilakukan dengan salah, dan itu dapat mengalihkan perhatian pengguna dari konten lainnya, mengganggu hierarki visual , dan bahkan memengaruhi SEO situs Anda. Dua jenis utama latar belakang situs web adalah latar belakang tubuh dan latar belakang konten . Yang pertama menutupi sebagian besar layar dan memiliki ilustrasi, tekstur, gradien, gambar penuh atau bahkan hanya blok warna solid. Yang terakhir mengelilingi area langsung di sekitar konten seperti teks atau gambar.
Melapisi tubuh dan latar belakang konten dapat membantu memberikan kesan mendalam pada halaman web Anda. Di sisi lain, ada beberapa desainer yang menggunakan latar belakang tubuh murni dan menyesuaikan konten di dalamnya. Opsi terakhir ini, jika dilakukan dengan benar bisa menjadi cantik dan minimalis, tetapi jika dilakukan dengan salah dan latar belakang situs web Anda dapat menelan konten. Jenis latar belakang yang Anda pilih akan bergantung pada gaya merek dan konten situs web Anda.
Pedoman untuk berbagai jenis latar belakang situs web
Latar belakang grafis sering kali terdiri dari gambar atau video latar belakang situs web lengkap dengan latar belakang konten semi-transparan. Meskipun latar belakang grafis sangat bagus untuk bercerita secara visual dan menarik perhatian pengguna Anda, pastikan bahwa itu tidak pernah mengalihkan pengguna dari konten utama halaman dan memastikan bahwa itu cocok dengan nuansa situs web. Banyak blog terdiri dari latar belakang situs web biasa dengan banyak ruang putih dan teks ditampilkan di atas dengan margin paragraf yang cukup tipis untuk membedakan teks dari latar belakang.
Namun, banyak blog akan memilih pendekatan tradisional untuk latar belakang tubuh dengan latar belakang konten tunggal berlapis di atasnya. latar belakang tubuh dengan latar belakang konten tunggal berlapis di atas. Memiliki latar belakang situs web yang berfokus pada header adalah cara brilian untuk menunjukkan kepribadian merek Anda. Ini juga merupakan tempat yang tepat untuk menggunakan elemen yang menarik perhatian seperti warna dan ilustrasi yang berani karena tidak akan mengalihkan pengguna dari konten berikutnya. Beberapa pengingat penting untuk desain tajuk situs web: jangan pernah membuat area ini terlalu jenuh dengan visual. Jangan gunakan ilustrasi besar atau elemen grafis dan gunakan banyak ruang negatif untuk membiarkan elemen bernafas.
Selanjutnya, Anda harus selalu memisahkan latar belakang grafis dari header dari sisa halaman. Cara praktis untuk melakukan ini adalah dengan menggunakan pemisah, yang juga menambah kesan aliran visual.Latar belakang situs web seluruh tubuh dapat memberikan UX yang berdampak. ketika dilakukan dengan benar, mereka menambahkan banyak nilai ke halaman. Namun, berhasil menerapkan satu membutuhkan keseimbangan dan presisi. Artinya, perhatikan kontras dan distribusi jangan pernah menggunakan warna yang terlalu terang. Cara lain untuk memastikan latar belakang situs web seluruh tubuh Anda mencapai efek yang diinginkan adalah dengan menggunakan sorotan untuk membuat bagian halaman yang berbeda guna meningkatkan hierarki visual dan alur halaman.
Sorotan adalah garis tipis, biasanya tidak lebih dari dua piksel dan warnanya berbeda dengan latar belakang. Mereka membantu memecahkan blok warna solid untuk bantuan visual. Jika Anda memilih untuk menggunakan gambar untuk latar belakang situs web seluruh tubuh Anda, pastikan Anda memilih yang berkualitas tinggi, yaitu, tidak kurang dari 300 dpi. Untuk latar belakang foto, JPEG adalah pilihan terbaik Anda menurut HubSpot, JPEG adalah format terbaik yang cocok untuk gambar berkualitas tinggi. SVG akan menjadi teman dekat Anda dalam hal gambar yang perlu Anda skalakan atau ubah ukurannya.
Namun, berikut adalah beberapa faktor penting yang perlu dipertimbangkan saat menggunakan gambar seluruh tubuh. Salah satunya adalah bobot dan kecepatan. Semakin baik kualitas gambar Anda, semakin penting kompresinya agar tidak memengaruhi kecepatan situs web Anda. Mengonversinya ke format WEBP adalah salah satu cara untuk membuat gambar Anda dimuat dua kali lebih cepat tanpa pengurangan kualitas.
Selanjutnya, gunakan warna dengan bijak dalam hal gambar seluruh tubuh untuk latar belakang situs web Anda. Selalu pastikan ada cukup kontras antara latar belakang dan konten utama. Anda dapat melakukannya dengan menggunakan rasio kontras warna yang dapat diterima untuk kegunaan yang optimal – untuk informasi lebih lanjut, lihat Panduan kami untuk pengujian aksesibilitas . Terakhir, pertimbangkan posisi sehubungan dengan gambar latar belakang Anda. Apakah Anda ingin gambar Anda tetap disematkan ke bagian tajuk, sebagai gambar pahlawan , atau Anda ingin gambar tetap diperbaiki saat pengguna menggulir?
Video latar belakang situs web sangat bagus untuk menambahkan percikan interaktivitas itu. Mereka juga ideal untuk branding dan pemasaran. Anda akan sering melihatnya di situs web merek mewah, situs web agen perjalanan, dan situs web hotel. Namun, jika Anda merencanakan latar belakang untuk situs web yang sarat konten, mungkin bijaksana untuk menunda latar belakang video. Karena video latar belakang situs web adalah file yang sangat berat yang dapat memperlambat situs web, banyak yang pasti perlu dikompresi. Seringkali desainer cenderung menggunakan 720p pada kecepatan bingkai sekitar 24 hingga 25 bingkai/detik.
Namun, satu-satunya cara Anda dapat mengetahui ukuran dan kecepatan bingkai mana yang berfungsi untuk latar belakang situs web Anda adalah melalui pengujian dan jenis hosting yang tersedia apakah itu server di tempat atau platform hosting bersama?. Yang terakhir biasanya jauh lebih lambat. Meskipun demikian, ketika Anda memang perlu mengorbankan kualitas video, overlay dapat bekerja dengan sangat baik. Anda akan terkejut bagaimana menggunakan hamparan semi-transparan, dengan warna yang dicocokkan dengan bagian situs web lainnya dapat meningkatkan kualitas video yang dirasakan secara signifikan.
Membatasi panjang video Anda adalah cara lain yang brilian untuk mencegah kecepatan situs web Anda terpengaruh. Pertimbangkan untuk memutar video mereka membuatnya tampak lebih lama sambil menjaga bobot tetap rendah. Jangan biarkan latar belakang video mengungguli konten utama. Ingat itu masih seharusnya menjadi latar belakang situs web – penyangga panggung, jika Anda mau. Terakhir, video dengan skema warna seragam yang mampu mempertahankan tingkat kontras memadai yang tidak terlalu bervariasi. Kontras yang besar dapat mengurangi dan merusak keterbacaan dan keterbacaan konten Anda.
Daya tanggap dan kegunaan di latar belakang situs web
Kegunaan tidak boleh dikorbankan demi latar belakang situs web. Untuk alasan ini, Anda harus selalu memastikan desain Anda responsif dan membawa pengalaman serupa di semua perangkat. Jika, misalnya Anda menggunakan latar belakang video, kembali ke gambar untuk latar belakang situs web seluler. Ini karena browser seluler cenderung lebih lambat daripada rekan desktop mereka dan laporan oleh Google menyatakan bahwa lebih dari 53% pengguna seluler terpental jika halaman membutuhkan waktu lebih dari tiga detik untuk dimuat. Anda selalu dapat menerapkan Javascript dan CSS untuk menyembunyikan video setelah breakpoint seluler agar tidak muncul di latar belakang situs web seluler. Terakhir, selalu tawarkan tombol jeda untuk video latar belakang.
15 contoh terbaik latar belakang situs web
1. For the Love of Bread
For the Love of Bread adalah contoh bagus dari latar belakang situs web video bertema hitam putih. Ini menarik perhatian pengguna dengan cemerlang dan, yang terbaik, Anda dapat menjeda dan memutar video latar belakang sesuka Anda.
2. Pistonheadnerds
Pistonheadnerds tahu bagaimana menarik pengguna dan menanamkan rasa kegembiraan dengan video lingkaran hitam dan putih dari lampu BMW yang menyala. Ini menambah suasana, tanpa mengganggu pengalaman pengguna.
3. JonsBones
JonsBones, penyedia tulang yang bersumber secara bertanggung jawab untuk penelitian medis tahu bagaimana merancang gradien warna latar belakang situs web secara bertanggung jawab. Ini halus, tidak mencolok dan bagian yang diarsir memberikan kontras yang bagus untuk teks.
4. Leonard
Situs web Léonard’s Inventive Agency menjadi sangat inventif dalam hal gradien latar belakang yang halus. Kami menyukai cara warna yang lebih hangat di bagian atas halaman secara halus menarik perhatian ke logo dan menu navigasi.
5. Frans Hulet
Gradien yang sedikit lebih menarik adalah yang ada di situs web portofolio Frans Hulet. Bagian layar yang berbeda kontras dengan tajam, dengan bagian gradien yang lebih terang menarik perhatian pada teks paraphnya yang lucu.
6. Superlist
Superlist adalah contoh bagus dari warna latar belakang situs web yang berani dan solid. Memilih untuk latar belakang bertubuh penuh, superlist berhasil mengistirahatkan grafik, teks, dan komponen mereka dengan baik di latar belakang tanpa elemen-elemen ini ditelan.
7. Bennett Tea
Bennetts yang menarik tentang warna latar belakang situs web yang solid menunjukkan bagaimana penggunaan sorotan dua piksel yang tipis dapat digunakan kembali untuk menarik perhatian ke berbagai paragraf teks dan opsi navigasi tanpa tersesat.
8. Coreshare
Latar belakang situs web Coreshare terdiri dari grafik animasi melingkar yang jazzy, yang meskipun berhasil menarik perhatian pengguna, namun tidak mengalihkan perhatian dari pernyataan misi utama dan CTA.
9. FlipaClip
FlipaClip membuat keputusan berani untuk menjaga latar belakang situs web mereka tetap minimalis. Hasilnya, semuanya mulai dari menu navigasi hingga CTA menonjol dan menarik perhatian pengguna. Saat pengguna menggulir, grafik yang memukau mengungkapkan produk mereka dengan segala kemegahannya.
10. I Love Me Wellness
I Love Me Wellness menggunakan pendekatan berlapis untuk latar belakang situs web mereka, tetapi tidak dengan cara konvensional. Gambar berlapis dengan latar belakang konten kuning, sedangkan teks, opsi navigasi, dan CTA terletak langsung di latar belakang. Dan itu berhasil karena kontras.
11. Ava Company
Ava Company telah memilih penjajaran yang menarik dari warna latar belakang yang solid, sambil melapisi pengujian header dan citra, dengan gambar terakhir sedikit merembes ke konten lainnya di halaman.
12. Eduardo del Fraile
Eduardo del Fraile, sebagai seorang desainer multidisiplin, telah memilih cara yang menarik untuk menampilkan produknya dengan segala kemegahannya sebagai bagian dari konten utama di layar. Dia pergi untuk kekosongan hitam dari latar belakang, dengan produk yang muncul dari bayang-bayang, memberi mereka sorotan penuh. Dan itu berhasil!
13. Pola
Menurut pendapat pribadi kami, latar belakang situs web grafis Pola dimulai dengan baik, dengan gerakan yang sangat kecil dalam bentuk animasi melingkar. Warna-warna berani dan pola yang menarik membantu menarik perhatian. Kontras luar biasa diberikan pada merek dengan warna solid di belakangnya. Namun, saat pengguna menggulir, ada terlalu banyak gerakan dan animasi grafis yang mengganggu.
14. Marcus Eriksson
Marcus Eriksson adalah seorang fotografer dan sutradara yang tinggal di Vancouver dan, langsung dari kelelawar, jelas untuk melihat jenis fotografi yang menjadi spesialisasinya. Di latar belakang situs webnya, dia mencari gambar kuat yang berputar terus menerus, sehingga Anda mendapatkan panduan instan dari portofolionya. Dalam hal ini, latar belakang situs web adalah portofolionya.
15. Couro Azul
Couro Azul menggunakan pendekatan mendongeng ke latar belakang situs web mereka. Citra yang ringkas, namun mengesankan, menangkap bisnis produksi kulit mentah mereka. Namun, menurut kami, teks, meskipun cocok dengan skema warna, dapat memiliki kontras yang jauh lebih baik dengan latar belakang video.