12 Tren Desain Web yang Menginspirasi untuk Tahun 2022 – Desainer telah mulai membuat situs sebagai seni, situs sebagai proyek interaktif, dan situs yang hanya ada untuk bermain dan bersenang-senang. Ini mengingatkan kembali ke awal web ketika desainer menemukan cara untuk memamerkan teknik baru atau membuat situs web untuk kepentingan mereka sendiri.
12 Tren Desain Web yang Menginspirasi untuk Tahun 2022
webdesignpractices – Kami tampaknya berada dalam periode kebangkitan web awal. Masuk akal. Fashion juga telah banyak meminjam dari akhir 90-an dan awal. Banyak dari kita telah menghabiskan waktu di rumah dengan iseng berselancar di internet, mencari sesuatu yang mengalihkan atau mengasyikkan seperti yang biasa kita lakukan ketika web pertama kali muncul.
Melansir webflow, Secara visual, tren web mengambil isyarat dari era itu. Desainer menemukan kreativitas di luar tata letak yang lebih berfokus pada foto yang telah menjadi standar. Sebaliknya, desain ini menemukan cara kreatif untuk menggunakan tipografi, kisi dan garis, dan navigasi sederhana. Gaya yang diperbarui dengan banyak warna yang diredam, tekstur canggih, dan font serif membuat situs tidak terasa terlalu retro.
Baca juga : Kesederhanaan dalam Desain Web dan Grafis
Desain web juga bergerak ke masa depan dengan teknik kontemporer yang menarik seperti interaksi dan animasi canggih serta efek visual seperti glassmorphism dan grain. Dan desainer menggunakan alat tanpa kode untuk memungkinkan mereka melakukan semuanya lebih cepat dan lebih mudah dari sebelumnya.
Berikut adalah beberapa tren dalam desain web yang kami perkirakan akan berdampak di tahun mendatang.
1. Mini-sites of delight
Humor dapat mengambil banyak bentuk, dan situs web yang memancing tawa selalu menyenangkan untuk dibuat. Mengapa tidak bersenang-senang dengan bangunan Anda?
Pada hari-hari awal Pixar, studio mulai memberikan waktu kepada animator untuk membuat film pendek di samping setiap film fitur yang mereka produksi. Celana pendek ini adalah waktu yang kreatif untuk semua, waktu bagi animator untuk menjadi lebih santai dan lebih menyenangkan tanpa tekanan yang terlibat dalam film layar lebar mereka. Mereka juga akhirnya menghasilkan banyak teknik baru yang mendorong bidang animasi ke depan. Pengembang web menemukan bahwa mereka dapat melakukan hal yang sama dengan situs web.
Membuat situs mini yang menyenangkan memberi waktu bagi desainer untuk berkreasi, berlatih dan bereksperimen dengan teknik, dan mengeluarkan semua penghentian desain tanpa khawatir berlebihan pada pertunjukan profesional. Terkadang penciptaan demi penciptaan adalah cara yang bagus untuk keluar dari kebiasaan.
Anda dapat bereksperimen dalam beberapa cara: dengan menetapkan desain UX yang sengaja dibuat-buat, atau dengan sengaja menumbangkan ekspektasi (tetapi pastikan Anda tetap membangun dengan mudah diakses!). Bawa humor tidak hanya ke dalam salinan dan gambar tetapi juga ke navigasi situs, menu, dan interaksi. Jadilah halus. Buatlah seolah-olah itu adalah situs yang serius sampai tidak. Ini adalah kesempatan untuk membuat situs yang berfungsi dengan cara yang tidak terduga. Situs pemasaran bergaya telur Paskah untuk tujuan profesional dapat berfungsi jika dijalankan dengan baik.
Guns 2 Swords adalah situs mini/perusahaan dengan kejayaan Dungeons & Dragons tahun 80-an penuh, dengan cita rasa Choose Your Own Adventure. Itu dibuat oleh MSCHF, sebuah grup yang berada di antara artis gonzo dan pembuat aplikasi hype, untuk menjadi layanan yang sebenarnya. Pengunjung dapat mengirimkan senjata mereka untuk ditempa menjadi pedang oleh pandai besi kelas dunia. Benar-benar epik.
Blue Check Homes mengambil pendekatan yang berlawanan dengan membuat situs web “serius” yang sepenuhnya sah. Apa yang dimulai sebagai lelucon Twitter oleh Danielle Baskin mungkin akhirnya menjadi bisnis mini nyata yang menjual medali “centang biru” (seperti yang ada di akun Twitter terverifikasi) untuk rumah orang-orang terkenal.
2. Web-based scavenger hunts
Struktur situs web benar-benar cocok untuk teka-teki dan perburuan dengan sangat baik. Anda dapat membuat halaman daisy-chain dan melindungi bagian tertentu dengan kata sandi, membuat pengunjung memberikan jawaban atau menemukan petunjuk untuk membuka halaman berikutnya dalam seri.
Ada berbagai cara kreatif untuk menyembunyikan dan mengungkapkan petunjuk, petunjuk, dan jawaban. Ini adalah kasus di mana Anda dapat menggunakan kecakapan desain web Anda untuk membuat teka-teki yang memikat.
Beberapa ide untuk petunjuk:
- Berikan kata berdasarkan teka-teki atau petunjuk
- Temukan kata yang tersembunyi di situs utama Anda atau situs perburuan pemulung
- Temukan elemen tersembunyi yang dapat diklik di halaman
- Menggambar bentuk
- Decode sebuah sandi
Ingatlah untuk memberi audiens Anda semacam petunjuk atau solusi jika Anda benar-benar ingin semua orang dapat mencapai akhir. Perburuan pemulung dapat digunakan untuk mengungkapkan peluncuran produk, merilis video baru, atau memberikan informasi tersembunyi kepada pemirsa.
Agen pemasaran ThreeSixtyEight melakukan perburuan untuk mengungkapkan lokasi retret perusahaannya kepada timnya. Ini menciptakan suasana misterius dengan musik dan penyesuaian opacity di sekitar kursor yang dapat digunakan pengunjung untuk mengungkapkan bagian tertentu dari halaman sambil mencari petunjuk.
3. Pengalaman seperti aplikasi
Jeremy Beyt, salah satu pendiri ThreeSixtyEight, sangat yakin bahwa situs yang lebih kecil dan berfokus pada pengalaman ini adalah masa depan desain web. Dia menjelaskan: “Pengalaman web berbasis front-end yang benar-benar berlebihan dari sudut pandang desain adalah cara baru menggunakan web yang belum pernah ada sebelumnya; itu adalah pengalaman seperti aplikasi. Itu, bagi saya, adalah kesempatan saat ini.” Dunia telah terbiasa dengan aplikasi, di mana interaksi, animasi, dan pengalaman dinamis adalah hal yang biasa. Langkah logis berikutnya adalah membawa energi itu ke situs web dan menciptakan lebih banyak pengalaman unik di sana.
Beberapa orang membayangkan kita kembali ke masa di mana situs-situs itu mandiri, esoteris, dan penuh rasa ingin tahu. Namun alat baru untuk pembuatan situs, seperti tanpa kode, membuat desain dinamis yang berfokus pada interaksi menjadi lebih mudah dibuat secara signifikan. ThreeSixtyEight bahkan menambahkan langkah yang berfokus pada desain interaksi penuh ke dalam proses pengembangannya.
4. Situs web satu halaman
Terkadang situs yang paling efektif adalah yang paling tidak rumit. Kami telah melihat meningkatnya popularitas situs web satu halaman yang mengabaikan menu dan navigasi demi navigasi gulir sederhana. Situs satu halaman berfungsi paling baik ketika materi pelajarannya lebih sempit, seperti portofolio atau presentasi satu ide.
Situs-situs ini membangkitkan perasaan memegang selebaran atau membaca poster. Semua informasi yang Anda butuhkan untuk meninjau ada di satu tempat tanpa gangguan navigasi atau mencari beberapa halaman.
Situs web untuk Indi Harris (dibangun oleh Jordan Hughes) ini adalah resume digital. Ini memungkinkan subjeknya menjadi fokus perhatian. Ini membuatnya lebih mungkin bahwa pemirsa biasa akan membaca seluruh resume karena semua yang mereka butuhkan ada di depan.
5. Situs dengan sense of place yang kuat
Mungkin kita semua hanya mengkompensasi perjalanan yang hilang, tetapi beberapa situs web tampaknya mendapatkan lebih banyak rasa tempat. Kami melihat foto-foto lokal yang ditampilkan di beranda dan tentang bagian yang menarik perhatian ke kota, kota kecil, dan tempat alami di sekitar tempat tinggal pembuat konten.
Web dapat menjadi tempat terpisah di mana Anda sering tidak memiliki koneksi ke tempat asal situs yang Anda jelajahi. Menambahkan catatan seperti “dibuat dengan cinta di …” atau menampilkan gambar tempat terdekat favorit Anda akan mendorong pengunjung untuk membayangkan di mana Anda berada dan membuat koneksi kecil di dunia nyata untuk mereka. Jika kita jarang bepergian, setidaknya kita dapat mengingat bahwa kita menjalin hubungan di seluruh dunia secara online.
Grace Potter menggunakan gambar laut yang indah ini sebagai halaman arahannya, meskipun itu tidak terkait langsung dengan pekerjaannya. Dengan foto ini, dia mendasarkan situs webnya di akar Selandia Baru, membawa pengunjung ke dunianya.
6. Motif Art Deco
Bagaimanapun, kita berada di tahun 20-an lagi! Motif art deco sangat cocok dengan desain geometris yang sedang tren beberapa tahun terakhir. Meskipun asosiasi pertama orang dengan gaya art deco mungkin adalah situs speakeasy berornamen dan undangan pernikahan bertema Gatsby, hal itu dapat menghasilkan desain minimalis yang indah.
Tren tahun ini mengambil inspirasi dari garis lengkung yang bersih dan bentuk grafis berulang dari ilustrasi dan arsitektur art deco. Elemen-elemen tersebut dapat menginspirasi logo, font, motif spacer, border, dan ilustrasi yang indah. Untuk mendesain secara efektif dalam gaya ini, ada baiknya untuk memahami filosofi di balik gerakan art deco asli.
Art deco menggabungkan elemen dari alam dengan modernitas zaman mesin — garis tebal, simetri, kesederhanaan, dan pengulangan elemen yang tidak berubah. Lihat bagaimana bentuk di sayap capung ini diterjemahkan ke dalam pola reguler Gedung Chrysler art deco klasik.
Gaya seni Alegria yang dirancang BUCK untuk Facebook pada tahun 2017 tampaknya mengambil banyak petunjuk dari penggambaran figur manusia secara art deco. Garis yang bersih dan melengkung, wajah oval, detail yang dikurangi, dan proporsi yang berlebihan, semuanya mengingatkan pada gaya seni ini. Mungkin tipe baru dari desain figur modernis, seperti karya menakjubkan dari ilustrator Rodolfo Reyes ini, bisa menjadi versi terbaru dari tren ini.
7. Lebih sedikit gambar dalam pahlawan
Tahun ini, banyak desainer memilih untuk membuat bagian pahlawan dan halaman arahan yang berbicara dengan desain daripada mengandalkan foto atau ilustrasi. Gambar pahlawan memberikan dampak visual yang besar langsung dari kelelawar, tetapi terkadang menghilangkan gangguan gambar heboh menempatkan fokus lebih pada gaya dan konten.
Keempat situs web dari Humain, SVZ, Heyday, dan RADAR ini sangat berbeda, tetapi masing-masing menggunakan tata letak, tipografi, warna, dan bentuk untuk mengomunikasikan identitas merek yang kuat dan unik. Gambar yang hilang juga menciptakan sedikit misteri, menarik pengunjung untuk mencari tahu apa lagi yang ada di luar bagian pahlawan.
8. Tipografi kebesaran
Tipografi dengan ukuran yang tidak biasa adalah tren desain yang segar dan berani untuk tahun ini. Pada ukuran tertentu, kata-kata menjadi lebih dari elemen grafis dari sekedar bagian dari salinan. Ini adalah teknik serbaguna yang dapat digunakan dalam desain minimalis atau maksimal dengan efektif dan dapat disesuaikan dengan berbagai gaya.
Situs web portofolio film untuk Eva Habermann (dibuat oleh Daniel Spatzek) melapisi teks besar ke gulungan portofolio film bergerak. Teks sebagian memblokir gambar, membuat pemirsa penasaran untuk melihat lebih banyak, dan font sans-serif dalam dua warna memberikan jumlah kontras yang tepat tanpa tidak terbaca atau berlebihan.
9. Font interaktif
Mengambil penggunaan teks lebih jauh, beberapa desainer telah menemukan cara kreatif untuk membuat teks mereka bergerak dan bermain dengan mouse pengguna. Cara mudah untuk membuat teks menjadi interaktif adalah dengan menerapkan perubahan status melayang seperti yang Anda lakukan dengan tombol. Ini membantu bahwa sekarang lebih mudah untuk membuat efek yang lebih rumit menggunakan platform tanpa kode modern daripada sebelumnya mencoba menulis interaksi ini dengan tangan. Saat menggunakan interaktivitas ke font, penting untuk mengingat keterbacaan karena beberapa orang terganggu oleh karakter yang bergerak.
Situs web untuk Dillinger menggunakan font yang berubah beratnya saat kursor melayang di atas teks. Perhatikan bahwa teks yang menyusut dengan latar belakang hitam membuat teks yang dipilih lebih mudah dibaca, tambahan yang bagus untuk kegunaan. Ukuran kursor yang berlebihan juga membuat situs terasa lebih imersif. Perancang Tim Ricks berbaik hati membuat versi yang dapat dikloning dari situs ini untuk siapa saja yang ingin melihat bagaimana efeknya dibuat.
10. Desain gerak yang bertanggung jawab
Sekarang kita berbicara tentang interaktivitas, saatnya berbicara tentang desain gerak yang bertanggung jawab, yang kita lihat mulai menjadi praktik standar. Sementara gerakan adalah aspek menarik dari desain web, mudah untuk tidak hanya berlebihan, tetapi juga membahayakan orang dengan menyebabkan mabuk perjalanan. Mabuk perjalanan cukup umum, dan animasi seperti penskalaan yang dipicu mouse, efek paralaks, atau pengguliran yang bergeser-pesawat (juga dikenal sebagai scrolljacking) harus dihindari.
Gerakan dapat digunakan dengan cara yang halus dan bertanggung jawab. Corey Moen, Perancang Merek Senior di Webflow menjelaskan secara rinci tentang cara membangun sambil mempertimbangkan pengaturan ‘Kurangi gerakan’ di MacOS.
11. Ilustrasi kolase
Grafik gaya kolase dapat memberikan ilustrasi situs nuansa sentuhan, membuka lebih banyak ruang putih dalam desain, dan memungkinkan Anda menggabungkan gambar tanpa memfokuskan seluruh desain di sekitar foto. Pastikan Anda mencampur bentuk, pola, dan warna dalam kolase. Anda dapat menambahkan efek monokrom, rona warna, atau filter ke foto untuk membantunya menyatu dengan desain keseluruhan.
Situs Vanta menggunakan ilustrasi bergaya kolase di halaman arahan dan di seluruh situs. Mengedit foto-fotonya untuk tampilan seperti kolase memungkinkannya menempatkan grafik secara tidak teratur dan di luar sumbu, memecah kisi situs.
12. Ilustrasi abstrak
Ilustrasi abstrak yang memiliki tekstur lebih organik dan rasa tangan manusia yang membuatnya menjadi lebih populer. Meskipun grafik vektor poppy yang bersih dan ilustrasi manusia dan objek yang lucu telah menguasai desain web selama beberapa tahun sekarang, mungkin orang mencari sesuatu yang terasa sedikit lebih alami dan canggih.
Ilustrasi semacam ini dapat dibuat dengan tinta dan kertas dan dipindai atau dibuat dalam perangkat lunak ilustrasi. Kuncinya adalah menggabungkan berbagai tekstur dan ketidakteraturan alami seperti cat air, tinta, cat, efek silkscreen, atau tekstur kertas. Garis juga bisa lebih lembut, meniru variasi berat garis yang berasal dari penggunaan grafit atau tinta.
Abstrak tidak harus berarti sederhana! Ilustrasi posting blog ini oleh desainer Adam Ho adalah contoh sempurna. Lihatlah kerumitan desainnya yang aneh. Dengan garis ultra-tipis dan bentuk grafis, mereka merasa seperti gambar teknis tanpa secara langsung mewakili objek tertentu.
