2021. (Tidakkah menyenangkan menambahkan “1?!”)

Sementara dunia menyesuaikan diri dengan tahun baru, begitu pula para desainer menyambut tahun baru desain. Setelah satu tahun dengan begitu banyak hal yang tidak diketahui, kami mulai melihat tren yang membawa kami kembali ke masa lalu yang nyaman sambil menekankan pengalaman pengguna yang berfokus pada masa depan.

Dari bekerja secara online hingga membeli secara online hingga bersosialisasi secara online, orang-orang berinteraksi dengan internet lebih dari sebelumnya, dan para desainer merangkul desain yang berani untuk mendorong batas-batas dari apa yang dapat kita alami bersama.

Meskipun ini tidak berarti lengkap, berikut adalah 11 tren desain web teratas yang kami lihat untuk tahun 2021:

1. Tata letak halaman dengan gulir horizontal
2. Kursor khusus
3. objek 3d
4. Pengalaman eCommerce yang luar biasa
5. Garis kisi yang terlihat dengan bobot garis tebal
6. Opsi preferensi pengguna di situs (bukan hanya aplikasi)
7. Pergeseran dari membangun situs web ke membangun solusi
8. Ilustrasi lucu
9. Tipografi sebagai desain, bukan hanya kata-kata
10. Bentuk geometris sebagai elemen latar belakang
11. WordPress sebagai CMS

1. Tata letak halaman dengan gulir horizontal

Situs web bergulir panjang dan desain paralaks telah populer selama beberapa tahun sekarang. Memasuki tahun 2021, kami mulai melihat pergeseran orientasi desainer yang menggunakan gerakan horizontal untuk “mengurangi” panjang halaman.

Meskipun pengalaman fisik tidak berbeda untuk pengguna (biasanya Anda masih menggulir mouse ke atas dan ke bawah), pengalaman visual memberikan sesuatu yang tidak terduga dan menarik. Ini menciptakan perjalanan melintasi situs web di mana pengguna tidak cukup tahu ke mana mereka akan dibawa, yang jarang terjadi sekarang karena kami telah mengembangkan pola normal seperti itu untuk situs web.

Situs web ini untuk Jony Guedj, seorang sutradara film lepas, menggunakan gulungan horizontal untuk bagian utama situsnya untuk menampilkan karyanya. Bilah warna-warni di bagian bawah bergerak bersama dengan mouse Anda, sebagai cara yang membantu untuk mengarahkan "di mana" Anda berada di halaman.

LinkSture, agensi yang berfokus pada solusi desain dan eCommerce, juga menggunakan gulir horizontal untuk menampilkan portofolio mereka di beranda. Namun, ini lebih jauh ke bawah halaman, menggunakan kombinasi gerakan vertikal dan horizontal saat Anda menggulir.

We Virtually Are, sebuah studio realitas virtual, menggunakan gerakan horizontal untuk benar-benar membuat Anda merasa seperti berada di tempat yang sama di situs mereka, sementara semua konten berubah. Ini benar-benar berbeda dari yang Anda harapkan dari kebanyakan situs web, pengalaman yang pas untuk perusahaan VR yang berspesialisasi dalam menciptakan realitas baru.

2. Kursor khusus

Saya sangat menyukai tren ini karena terasa familiar dan baru. Sebuah anggukan untuk kursor kustom dari pertengahan 2000-an (akui saja, Anda menggunakannya di profil Myspace Anda!), kursor kustom membuat comeback yang elegan.

Dari bentuk geometris minimal hingga pengalaman halaman web yang sepenuhnya interaktif, menyesuaikan kursor mouse menjadi cara kecil untuk menambahkan beberapa pengulangan pada branding Anda. Banyak agensi menggunakannya untuk mengulang bentuk atau warna dari logo mereka, atau sebagai cara untuk melibatkan pengguna dengan situs.

Dalam contoh ini dari Rox Studios, agensi desain butik, mouse adalah lingkaran kuning itu. Itu berubah berdasarkan konten latar belakang yang Anda arahkan, berubah menjadi tombol CTA itu sendiri untuk "Melihat" sebuah proyek.

Lihat wajah kecil yang menyenangkan di gambar pertama? Itu mouse Anda ketika Anda mendarat di situs web Concept Studio. Anda akan melihat beberapa makhluk serupa di seluruh situs, dan juga melihat kursor berubah untuk bagian yang berbeda.

Pada tangkapan layar kedua, mouse berubah menjadi tongkat yang bahkan menjatuhkan partikel kecil saat Anda bergerak. Itu tidak pernah mengganggu konten, dan sebaliknya hanya menambahkan elemen imajinasi dan interaktivitas saat Anda mengalami situs mereka.

Lihat lingkaran putih kecil itu? Itu mouse Anda di situs web Etienne Pharabot, pengembang front-end yang berbasis di Prancis. Namun, ada lebih dari yang terlihat. Saya sangat menyarankan menggulir berbagai kalimat di seluruh situs. (Beberapa kejutan emoji menunggu!)

Impero, agensi kreatif, menggunakan lingkaran kuning besar sebagai kursornya yang berada di belakang teks apa pun yang Anda arahkan. Mereka juga menggunakannya sebagai peluang untuk membantu pengguna menavigasi situs, misalnya menampilkan "seret" di atas bagian pengguliran horizontal. (Cara yang bagus untuk menggabungkan beberapa tren ini!)

3. objek 3d

Sementara desain datar memerintah selama beberapa waktu, kami mulai melihat pergeseran tiga dimensi dalam elemen pada desain web. Ini mungkin terinspirasi oleh munculnya realitas virtual dan augmented, mengalir ke dalam pengalaman penelusuran dua dimensi kami.

Contoh warna-warni dari Chip&Byte, agensi yang berbasis di Italia, menambahkan elemen menyenangkan ke situs mereka. Saat Anda menggerakkan kursor di sekitar (lingkaran abu-abu kecil!) bentuknya juga bergerak, menambah kesan dimensi.

Rasanya benar bahwa sebuah perusahaan bernama "Teleskop Kuning" memiliki teleskop kuning 3d yang ditampilkan dengan bangga di beranda mereka! Ketika Anda pertama kali mendarat di situs, Anda akan melihatnya "membangun dirinya sendiri" saat setiap bagian jatuh ke tempatnya, yang mungkin merupakan sinonim untuk bagaimana mereka membantu klien mereka membangun praktik yang andal.

Beans Agency menggunakan tren 3d untuk menghidupkan kacang mereka, menampilkannya dalam beberapa adegan di seluruh situs. Tren ini adalah cara yang bagus untuk membawa gerakan ke karakter, atau memberikan perasaan "realistis" hanya dengan ilustrasi abstrak dan datar.

Tidak sepenuhnya dijual pada tren 3d? Anda selalu dapat mengambil pendekatan yang halus, seperti C-HM Conseil. Kemiringan dan cahaya yang elegan pada latar belakang monokromatik bersandar pada tampilan material tanpa terlihat berlebihan.

4. Pengalaman eCommerce yang luar biasa

Tidak mengherankan jika ritel online telah meningkat secara dramatis selama setahun terakhir, yang juga menghasilkan pengalaman berbelanja yang lebih disengaja dan lebih baik. Lagi pula, dengan semakin banyak pesaing yang bergegas untuk membuat situs web mereka online, toko tidak lagi dapat diterima hanya ada di internet; itu perlu dioptimalkan dan memprioritaskan pengalaman pengguna agar pembeli tidak terpental.

Minsom, toko hewan peliharaan, memudahkan pembelian barang dan layanan langsung dari beranda mereka. Dengan tombol besar dan kategori sederhana, mudah dinavigasi sehingga Anda dapat memeriksa dengan cepat, daripada menghabiskan terlalu banyak waktu mencari di sekitar situs.

Toko anggur ini, Molly Dooker, bukan hanya pengalaman situs yang indah dan artistik, tetapi juga tempat berbelanja yang lancar. Sangat mudah untuk menelusuri anggur, melihat pratinjau apa yang ada di keranjang Anda, dan kemudian membeli – semuanya sambil menikmati desain situs yang menyenangkan.

Zoya's Pantry, toko makanan sehat dan organik, mengoptimalkan pengalaman berbelanja untuk menambahkan beberapa item ke keranjang Anda. Saat Anda mengklik “Tambahkan ke Tas”, jendela Anda tidak berubah, jadi Anda dapat melanjutkan penjelajahan tanpa kehilangan tempat di halaman. Kemudian untuk melihat keranjang Anda, yang harus Anda lakukan adalah mengarahkan kursor ke ikon di navigasi atas (alih-alih mengklik ke halaman terpisah).

Anda akan melihat beberapa tren desain tahun 2021 di situs The Cool Club. Dari pengalaman eCommerce yang mudah hingga tampilan 3D dari salah satu produk mereka (permainan kartu!), Sangat mudah untuk melihat dengan tepat apa yang Anda beli dan kemudian memasukkannya ke dalam keranjang Anda. (Bahkan tepat di paro atas di beranda!)

5. Garis kisi yang terlihat dengan bobot garis tebal

Grid telah berguna dalam desain web untuk waktu yang lama, tetapi kami mulai melihat tren memberi mereka semburat warna atau garis tebal. Alih-alih membuatnya minimal, desainer lebih condong ke bentuk alami yang mereka bangun di halaman dan membuat garis kisi mereka menonjol untuk mencapai tampilan geometris yang berani.

Eat Sleep Work menggunakan garis warna-warni untuk membantu menghidupkan desktop mirip Windows mereka. Meskipun tidak terlalu tebal, warna biru tebal melakukan trik untuk membuat kisi menonjol dan menciptakan struktur yang disengaja di seluruh situs.

Studio pengembangan perangkat lunak ini, OSM, menggunakan garis kisi dalam beberapa cara menarik di seluruh situs. Seperti yang dapat Anda lihat dari latar belakang, mereka bersandar pada bobot garis tebal dan gaya geometris dengan merek mereka, dan mengulanginya dengan berbagai cara, termasuk dengan tata letak kisi.

Tidak yakin apakah garis kisi tebal tepat untuk situs Anda? Anda dapat mencoba pendekatan “ruang negatif” seperti Rui Ma, seorang desainer dan direktur seni. Ini lebih halus daripada menekankan kisi-kisi dengan warna yang kontras, tetapi jarak yang lebar masih memungkinkan perasaan geometris itu bersinar.

6. Opsi preferensi pengguna di situs (bukan hanya aplikasi)

Menciptakan pengalaman yang unik dan dipersonalisasi menjadi semakin populer, dan salah satu cara desainer web melakukannya adalah dengan membangun opsi ke dalam desain situs. Dari preferensi seperti mode terang vs mode gelap hingga opsi aksesibilitas seperti bahasa apa yang digunakan, tren ini adalah tentang memberi lebih banyak kontrol kepada pengguna atas seperti apa pengalaman situs mereka.

Segera ketika Anda memuat situs web Hoang Nguyen, Anda akan melihat opsi untuk audio. Defaultnya disetel ke “off”, jadi meskipun situs dimuat sebelum Anda membuat pilihan, itu tidak akan mengejutkan Anda (walaupun jika disetel ke “on”, itu tidak akan; ini adalah musik yang sangat menenangkan!) . Ini memberi Anda kekuatan untuk menyesuaikan pengalaman Anda segera, dan jika Anda berubah pikiran nanti, ada opsi untuk suara tepat di sebelah logonya di bagian atas situs.

Situs Sofia Papadopoulou serupa karena menawarkan pengaturan untuk audio, tetapi mereka terjebak di sudut kanan bawah (di mana Anda mungkin secara tradisional menemukan tombol back-to-top yang lengket.) Defaultnya kembali disetel ke "off," meskipun suara yang hanya berisi instrumental yang menenangkan (tidak ada yang gila).

Contoh dari Studio OUAM ini, agensi kreatif di Prancis, memudahkan untuk memilih bahasa yang ingin Anda gunakan saat menjelajahi situs mereka. Terdaftar tepat di bagian atas menu, mereka memberikan pilihan untuk bahasa Prancis atau Inggris, menyesuaikan situs web mereka dengan dua audiens utama mereka.

7. Pergeseran dari membangun situs web ke membangun solusi

Sementara desain web sama pentingnya dengan sebelumnya (bahkan lebih kritis di era virus corona), agensi mulai mengalihkan fokus mereka ke penjualan solusi penuh, alih-alih pengiriman individu. Misalnya, alih-alih menyebut diri mereka biro desain web, studio kreatif mungkin menyebut dirinya sebagai "mitra pengalaman merek," atau sesuatu yang lain yang mengacu pada nilai penuh dari apa yang mereka berikan (bukan hanya bagian nyata).

Ini adalah Soda Studios, "mitra inovasi, studio desain, dan laboratorium." Mereka tidak terlalu peduli dengan daftar setiap layanan individu yang mereka berikan, melainkan berfokus pada solusi holistik untuk pelanggan mereka.

BORN Group adalah “agensi digital global yang didorong oleh pengalaman yang berpusat pada manusia.” Mereka memang memiliki halaman layanan untuk masuk ke detail lebih lanjut tentang apa yang mereka tawarkan, tetapi bahkan itu berfokus pada gambaran yang lebih besar dengan layanan seperti pengalaman merek, desain layanan, dan inovasi.

Kappow adalah agensi digital yang berfokus pada desain web, tetapi Anda belum tentu mengetahuinya dari beranda mereka. Sebaliknya, mereka berbagi nilai dari apa yang benar-benar diberikan pekerjaan mereka kepada klien mereka: pertumbuhan bisnis, peluncuran produk yang sukses, dan keunggulan dibandingkan pesaing. (Siapa yang tidak menginginkan semua itu?!)

8. Ilustrasi lucu

Munculnya ilustrasi telah meningkat selama beberapa tahun sekarang, dan kami belum melihatnya berkembang pesat. Ini adalah cara yang bagus untuk menambahkan elemen "manusia" ke situs Anda, terutama jika Anda tidak memiliki akses ke fotografer hebat dan ingin menghindari stok foto. Atau jika Anda/agensi Anda berspesialisasi dalam ilustrasi, ini adalah cara sempurna untuk memamerkan karya Anda!

Sungguh dunia yang indah untuk dijelajahi di situs RUYA, agensi branding dan digital. Mereka telah memberikan ilustrasi mereka lebar penuh dari beranda mereka, menjadikannya sebagai showstopper segera setelah Anda memuat halaman. Lebih baik lagi: Saat Anda mengarahkan mouse ke bagian gambar, Anda akan menemukan bahwa itu berfungsi sebagai elemen navigasi, membantu Anda mempelajari lebih lanjut tentang agensi, layanan, dan pekerjaan mereka.

Ilustrasi unik dari UPQODE, ​​agen desain web ini, dipasangkan dengan animasi untuk benar-benar menghidupkannya. Anda dapat melihat mereka berubah warna, ukuran, dan berinteraksi satu sama lain, yang membuat pengalaman beranda yang menghibur.

Jika ilustrasi lengkap tidak tepat untuk merek Anda, selalu ada opsi untuk menggunakannya sebagai aksen, seperti yang dilakukan No Clima. Anda akan menemukan "corat-coret" di atas foto di seluruh situs mereka, memberikan kesan artistik dan kerajinan tangan. Ini juga merupakan cara yang bagus untuk menggabungkan ilustrasi dan fotografi, jika Anda tertarik untuk menggunakan keduanya!

9. Tipografi sebagai desain, bukan hanya kata-kata

Terkadang kata-kata dimaksudkan untuk menjadi praktis, terkadang mereka dimaksudkan untuk menjadi seni. Dan desainer web saat ini tidak takut untuk menggunakannya untuk tujuan kedua, karena lebih merupakan elemen desain daripada paragraf atau isi teks.

Meskipun masih dapat dibaca, teks di beranda Dystopian Creatives mengaburkan batas antara praktis dan visual dengan cara yang menarik. Rasanya lebih seperti pola latar belakang daripada paragraf, dan berinteraksi dengan gambar lain di halaman dengan cara yang menarik.

Loop, agensi materi iklan layanan lengkap, menggunakan jenis sebagai elemen latar belakang di beranda mereka bersama dengan paragraf yang lebih mudah dibaca di bagian atas. Karena ukuran font latar belakang sangat besar (dan warna kuning yang bagus), mata Anda dapat membaca kedua kumpulan teks tanpa menjadi bingung. Saya juga menyukai caranya mendorong pengguna untuk menggulir, untuk menjawab pertanyaan, “Desain untuk…apa?”

Saat Anda menggulir ke bawah situs ini untuk Stone & Style, Anda akan melihat setiap judul sebagai blok teks normal, tetapi juga bergema dalam font serif besar di latar belakang yang keluar dari halaman. Ini adalah cara yang bagus untuk mengulangi pesan tanpa terdengar berulang dan menambahkan sedikit misteri elegan ke situs saat Anda mencoba membaca apa yang dikatakan teks latar belakang (sebelum Anda menemukan polanya).

10. Bentuk geometris sebagai elemen latar belakang

Ketika datang ke desain situs Anda, jangan terlalu memikirkannya. Meskipun bentuk geometris mungkin terasa terlalu "sederhana", namun bentuk tersebut familiar dan tidak rumit (keduanya merupakan kualitas yang baik untuk pengalaman pengguna!). Dan dengan blok bangunan yang begitu kuat, ada banyak hal yang dapat Anda lakukan untuk menempatkan merek biro iklan Anda pada mereka, sehingga mereka merasa seperti sesuatu yang tidak sederhana.

Contoh dari empat pilar ini menggunakan bentuk sederhana (pada dasarnya hanya balok dan titik!) yang dipasangkan dengan gerakan berdasarkan gulir pengguna untuk menciptakan pengalaman geometris yang dinamis. Saat Anda menggulir halaman ke bawah, Anda akan melihat balok-balok itu menumpuk dan pecah sendiri, terus berubah untuk terus menceritakan kisahnya. (Mungkin ada telur paskah permainan "Pong" di sana juga, jika Anda mencari sedikit istirahat!)

Sementara bentuk-bentuk seperti oval yang berwarna-warni pada Oh Happy Dani mungkin secara teknis tidak geometris, mereka pasti mencapai efek menyenangkan yang sama. Dipasangkan dengan warna mereknya, warna tersebut menjadi bingkai yang bagus di balik citra pahlawannya, dan Anda akan melihatnya berulang dengan cara baru di seluruh situs.

Blab, sebuah studio komunikasi, juga memanfaatkan bentuk hampir-geometris di beranda mereka. Pola berbentuk lingkaran/oval/telur ini tumbuh dan menyusut saat Anda beristirahat di halaman, lalu bergerak ke samping saat Anda mulai menggulir. Mereka mengingatkan saya pada suara yang keluar dari speaker, yang sangat cocok dengan salinan di halaman “Suara Anda lebih keras.”

Studio penuh warna ini, illo, menggunakan bentuk geometris tepat di belakang pesan utama mereka di beranda. Saat Anda mengarahkan kursor ke frasa yang digarisbawahi, salah satu bentuk akan bergerak untuk menampilkan gambar di dalamnya, cara cerdas untuk menunjukkan fokus pertama – desain gerak.

11. WordPress sebagai CMS

Terakhir, tetapi tentu tidak kalah pentingnya, adalah bagaimana situs-situs ini dibangun. (Lagi pula, jika back-end tidak memenuhi tujuan yang Anda butuhkan, tidak peduli seberapa bagus tampilan front-end!)

WordPress sekarang mendukung lebih dari 40% internet. Itu hampir setengah dari semua situs web (termasuk yang tidak dibangun di atas CMS), dan kemungkinan karena betapa fleksibelnya CMS selama bertahun-tahun.

Tidak dijual di atasnya? Semua situs web dalam kumpulan ini diberdayakan oleh WordPress, untuk memberi Anda contoh bagus tentang semua yang dapat Anda bangun dengannya! Dari tema cantik yang membantu Anda memulai dengan cepat hingga lebih dari 55.000 plugin gratis yang membantu Anda memperluas fungsionalitas, WordPress dapat melakukan apa saja.

Apa pendapat Anda tentang tren desain web ini untuk tahun 2021? Apakah Anda setuju dengan munculnya kursor khusus, atau berpikir bahwa desain 3d hanya iseng-iseng? Beri tahu kami di komentar di bawah tren mana yang Anda sukai, atau mana yang menurut Anda hilang dari daftar ini!