Salah satu lokasi terpenting di situs web Anda adalah footer. Ya, serius. Ini mungkin bukan area dengan desain terbaik atau konten yang paling mengesankan, tetapi ini adalah tempat di mana pengguna sering mencari informasi. Jadi sangat penting bahwa Anda tidak mengabaikan area ini ketika merencanakan proyek desain web.
Tapi elemen apa yang harus Anda sertakan? Bagaimana Anda bisa menjaga footer tetap teratur dan sejalan dengan estetika keseluruhan Anda tanpa menonjol? Anda telah datang ke tempat yang tepat. Di sini kita akan melihat tip untuk membuat footer yang bagus dengan contoh beberapa situs web yang melakukannya dengan baik.
1. Pertahankan Desainnya Sederhana
Ya, ini adalah salah satu kunci untuk sebagian besar proyek desain, tetapi ada baiknya untuk langsung menyatakannya. Desain sederhana penting ketika bekerja dengan banyak informasi, yang kemungkinan akan terjadi pada footer. Tetap berpegang pada elemen yang bersih, banyak ruang, dan atur dengan tujuan. Cobalah untuk menghindari kekacauan dan pikirkan tentang elemen apa yang akan hidup di footer Anda dan mengapa mereka harus ada di sana. Ukuran footer sering dikaitkan dengan jumlah informasi dan jumlah halaman di situs web Anda.
Agra-Budaya menggunakan warna, ikon dan teks di footer tetapi sederhana dan memiliki aliran yang bagus. Setiap tautan mudah diklik dan detail halus dengan gambar pertanian di kotak hijau adalah sentuhan yang bagus.
2. Tautan ke Informasi Anda
Dua dari tautan terpenting di footer situs web mana pun pergi ke halaman “Tentang Kami” dan “Hubungi Kami”. Pengguna akan ingin tahu siapa Anda dan tentang perusahaan atau merek Anda. Permudah mencari informasi tersebut. Banyak juga yang ingin tahu tentang anggota tim Anda dan cara menjangkau mereka. (Ini adalah alat vital. Banyak orang kehilangan kartu nama dan akan kembali ke situs web Anda untuk mengambil informasi kontak itu.)
Heckford mencakup banyak tautan ke perusahaan, media sosial, dan informasi tentang pekerjaan mereka.
Meskipun Anda harus menautkan ke halaman “Hubungi Kami” yang lengkap, termasuk informasi kontak yang relevan di footer juga bagus. Sertakan nomor telepon utama, alamat email, dan alamat fisik. (Poin bonus untuk mengatur setiap elemen sehingga otomatis melakukan panggilan, email, atau peta saat diklik.)
Itu Studio Akar membuat footer yang hampir bertentangan dengan semua yang Anda bayangkan ketika Anda memikirkan “footer”, tetapi itu berhasil. Teksnya besar (serta kotak yang berisi itu) dan diringkas menjadi daftar informasi kontak yang sangat sederhana. (Ini adalah konsep desain yang berdampak untuk situs web yang ingin pengguna menghubungi mereka untuk proyek dan pekerjaan.)
Pengelompokan seperti item footer dapat menciptakan rasa organisasi yang bagus untuk tautan dan informasi. Pertimbangkan beberapa kolom (atau baris) informasi yang relevan seperti kontak, tautan, layanan, media sosial, dan bagian dari halaman Anda yang paling populer. Tempatkan setiap bagian di bawah dan tajuk sehingga setiap elemen mudah dilihat dan ditemukan.
SugarSync mencakup beberapa kolom informasi untuk akses mudah ke informasi footer. Dengan tajuk “Produk,” “Perusahaan,” Pelajari Lebih Lanjut” dan “Terhubung dengan Kami”, mudah untuk menemukan bagian situs yang ingin Anda gunakan selanjutnya.
5. Sertakan Pemberitahuan Hak Cipta
Baris kecil teks ini bisa menjadi penyelamat. Jangan lupakan itu. Meskipun sebagian besar situs menyertakannya sebagai satu baris di bagian bawah layar, Anda dapat mendesainnya agar lebih terintegrasi ke bagian footer lainnya. Pemberitahuan hak cipta dapat ditulis atau menyertakan simbol “c” berbentuk lingkaran kecil. Teks sering kali mencantumkan tahun penerbitan dan nama pemilik hak cipta. Beberapa pemberitahuan hak cipta dapat menjelaskan konten dan desain (untuk situs yang sebagian dibuat oleh pihak ketiga.)
Petualangan.com membuatnya tetap sederhana dengan pemberitahuan hak cipta di kanan bawah layar. Informasi ini menampilkan tipe kontras rendah sehingga tidak menghalangi elemen navigasi footer yang lebih penting.
6. Sertakan Ajakan Bertindak
Setelah pengguna menavigasi ke footer Anda, beri mereka sesuatu untuk dilakukan saat mereka berada di sana. Sertakan kotak untuk mendaftar buletin elektronik atau undang mereka untuk mengikuti Anda di saluran media sosial. Jangan lupa nilai ruang ini dalam hal mengonversi klik.
Kolaborasi mendedikasikan sejumlah besar ruang footer untuk “Bergabung dengan Newsletter Kami.” Ajakan bertindak ini mudah dilihat, sesuai dengan desain, dan memberi pengguna cara untuk berinteraction tanpa harus bergabung dengan kampanye.
7. Gunakan Elemen Grafis
Terlalu sering footer hanyalah sebuah blok tipe. Tambahkan logo atau elemen grafis untuk menambah minat visual. Berhati-hatilah untuk tidak membebani ruang kecil ini dengan terlalu banyak elemen. Pikirkan seperti ini: Daripada mengeja “Ikuti saya di Facebook/Twitter/apa pun”, sertakan ikon untuk outlet ini. Anda juga dapat menggunakan elemen ikonik kecil untuk tautan seperti peta atau nomor telepon (namun Anda mungkin harus menyertakan status melayang yang memiliki informasi yang “diuraikan” juga).
Itu Festival Kikk menggunakan ruang footer untuk menyoroti mitra festival hanya dengan menggunakan logo dan informasi kontak cepat. Perhatikan ukuran ikon – setiap ikon mudah dilihat dan dibaca – dan gunakan penggeser sehingga sejumlah besar elemen dapat ditampilkan dalam ruang kecil.
8. Waspadai Kontras dan Keterbacaan
Informasi footer biasanya kecil … sangat kecil. Hal ini membuat pemikiran tentang warna, bobot, dan kontras antara elemen teks dan latar belakang menjadi penting. Setiap kata harus dapat dibaca. Pertimbangkan tipografi sederhana (sans serif dengan bobot sedang bagus) dan sentuhan yang lebih terkemuka daripada yang biasanya Anda gunakan. Pilih warna dengan kontras tinggi, seperti latar belakang terang dengan teks hitam atau latar belakang gelap dengan teks putih. Hindari menggunakan berbagai warna atau tipografi hiasan.
P53 menggunakan salah satu kombinasi teks dan latar belakang klasik (dan paling mudah dibaca) untuk informasi footer – putih di atas hitam.
9. Pertahankan Tema Desain Anda
Footer situs web seharusnya tidak terlihat seperti renungan. Itu harus sesuai dengan tema desain keseluruhan untuk situs. Warna, gaya, dan elemen grafis harus mencerminkan nada keseluruhan. Jangan membuat kesalahan umum dengan menambahkan footer “kotak” yang tidak cocok. Pikirkan tentang ruang ini dan bagaimana itu akan digunakan dari awal proyek untuk menghindari terjebak dengan elemen yang tidak cocok di akhir proses desain.
Grup Interaktif Swiths menggunakan footer sederhana yang sepenuhnya terintegrasi dengan tampilan keseluruhan situs web, yang menampilkan seseorang yang duduk di meja dengan barang-barang berserakan di atasnya. Footer sederhana menunjukkan informasi yang relevan dan sepertinya itu milik situs.
10. Berpikir Kecil (Tapi Tidak Terlalu Kecil)
Footer secara alami mencakup banyak item kecil. Hanya berhati-hati untuk tidak pergi terlalu kecil. Teks bisa beberapa poin lebih kecil dari ukuran yang digunakan untuk badan utama situs web. Ikon atau gambar harus dapat dibaca dengan ukuran yang Anda pilih. (Jika Anda tidak tahu apa ikonnya, mungkin terlalu kecil.) Elemen harus cukup besar untuk diklik atau diketuk dengan mudah. Jika pengguna tidak dapat mengakses tautan karena terlalu kecil atau terlalu berdekatan, tautan tidak akan berfungsi sebagaimana mestinya.
Ketika Ruang Penasaran menggunakan gaya footer yang cukup non-tradisional, Anda bisa mendapatkan skala yang baik dari jenis ukuran yang digunakan. Teks footer sedikit lebih kecil, lebih tipis dan lebih ringan daripada semua salinan lain di halaman, tetapi masih cukup besar untuk dibaca dengan mudah.
11. Gunakan Banyak Ruang
Karena footer biasanya tinggal di lokasi yang sempit, ruang dan jarak menjadi penting. Sisakan banyak ruang di sekitar elemen di footer serta di antara baris teks. Spasi yang memadai akan menjaga area footer agar tidak terlihat sempit atau tidak menarik. Ini juga mengarah pada kemampuan klik atau ketuk. Karena banyak (jika tidak semua) item di footer ditautkan ke sesuatu yang lain, ini merupakan aspek penting dari fungsi pengguna. Jumlah ruang yang Anda gunakan tidak harus benar-benar mencerminkan jarak di seluruh situs, meskipun bisa. (Hal ini terutama berlaku untuk situs yang menggunakan spasi sempit di bagian utama situs untuk efek atau dampak tertentu.)
Kolektif Berlayar menggunakan banyak ruang secara vertikal dan horizontal antar elemen. Mereka dikelompokkan berdasarkan jenis dan dapat diklik.
12. Waspadai Terlalu Banyak Objek
Meskipun menggunakan elemen grafis dan header adalah ide yang bagus, ada batas antara tepat dan terlalu banyak. Gunakan barang-barang ini dengan hemat dan untuk tujuan yang sangat spesifik. Tanyakan pada diri Anda sendiri mengapa Anda menggunakan tajuk, ikon, atau foto. Jika jawabannya adalah “karena terlihat bagus”, pertimbangkan kembali. Setiap elemen harus memiliki tujuan. Ini akan membantu Anda merancang footer yang dapat digunakan yang memanfaatkan ruang yang tersedia dengan baik.
Kurang lebih seperti yang Anda lihat dari footer untuk Guru & Dinamis. Ikon dan teks sederhana sudah cukup untuk membawa Anda melalui konten footer dengan mudah.
13. Ciptakan Rasa Hirarki
Sama seperti situs web lainnya, footer harus bersifat hierarkis. Ini adalah desain dua kali lipat. Footer harus berada di bagian bawah hierarki situs secara keseluruhan. (Lagi pula, di situlah letaknya.) Footer juga harus berisi hierarki elemen di dalam “wadahnya”. Elemen yang paling penting (seringkali informasi kontak, ajakan bertindak atau peta situs) harus menjadi yang paling menonjol. Informasi standar, seperti pemberitahuan hak cipta, seringkali dalam skala terkecil.
Griflan Desain Inc. memberi tahu pengguna apa yang harus dilakukan di footer, sesuai urutan yang mereka inginkan. Pertama, kirimkan email kepada mereka; jika itu tidak berhasil, hubungi mereka; dan jika tidak satu pun dari opsi itu berfungsi, kunjungi perusahaan di media sosial.
Apakah footer Anda membutuhkan footer? Pertimbangkan sub-footer untuk layering tambahan. (Ini adalah praktik yang sangat populer.) Sub-footer mungkin merupakan tempat yang bagus untuk membuat beberapa hierarki tambahan, menambahkan dimensi ke ruang footer jika terlalu padat atau hanya menyediakan ruang untuk konten yang menyenangkan. Gunakan area ini untuk menyorot penghargaan atau menyisipkan ajakan bertindak.
Blog Penghasilan Pasif Cerdas melakukan pekerjaan yang hebat dengan footer multi-level. Ada ajakan bertindak, lalu tautan situs, lalu sub-footer dengan penyebutan media dengan warna pudar, diikuti oleh penafian dan kebijakan situs. Tingkat navigasi memberikan kedalaman di footer dan membuatnya mudah untuk dilihat dan diklik.
15. Jangan Garis Bawahi Semua Tautan Itu
Kesalahan footer terbesar? Mengizinkan tautan memiliki garis bawah. Masih banyak situs web dengan tautan yang digarisbawahi di bagian bawah. Teknik kuno ini tidak sesuai untuk desain situs modern.
Baxter dari California memiliki footer yang bersih dan menyertakan banyak tautan. Itu tidak terlihat berantakan berkat tautan sederhana, tanpa semua garis bawah yang mengganggu itu.
Kesimpulan
Footer dapat mengatakan banyak hal tentang situs web Anda. Ini memberi tahu pengguna siapa Anda, apa yang dapat mereka lakukan, dan cara menjelajahi halaman web Anda. Ini juga menunjukkan hal-hal halus tentang Anda sebagai seorang desainer seperti perhatian terhadap detail dan kemampuan untuk bekerja di ruang kecil.
Footer adalah bagian penting dari desain. Perhatikan itu. Pastikan untuk menyertakan campuran informasi, elemen desain, dan kegunaan yang tepat untuk mendapatkan hasil mactionmal dari ruang paling bawah di setiap proyek desain web.