[UPDATE] 12 Tren Web Design Yang Akan Populer di 2021

462
Tren Web Design 2021
Berkah Ramadhan
13 min read

Berbicara tentang website, tampilan merupakan hal penting yang pertama kali dilirik oleh pengunjung. Setuju bukan? Ketika kita ingin menargetkan website untuk orang yang pertama kali mengunjungi website kita, pastikan bahwa website kita terlihat menarik. Oleh karena itu, web design adalah faktor penting dalam website.

Web design merupakan pada desain yang ditampilkan oleh website yang mengacu pada pengalaman pengguna (user experience) dan pengembangan website. Aspek yang termasuk dalam web design meliputi font, warna, gambar, layout dan lainnya.

Seorang pemilik website harus mengetahui web design apa yang sedang booming atau populer. Setiap tahunnya, selalu ada prediksi tren web design dari beberapa komunitas web designer. Tren web design pun sebenarnya tidak begitu jauh dari tahun sebelumnya bahkan tak jarang trennya masih sama. 

Biasanya tren web design merupakan improvisasi dari beberapa tahun terakhir yang merupakan perpaduan antara kreativitas dan teknologi yang berkembang setiap waktunya. Tak heran bila selalu bermunculan tren web design baru yang bisa kita terapkan untuk website kita nih.

Ilustrasi web design

Dengan mengikuti tren web design terbaru, website kita tidak ketinggalan zaman pastinya. Selain itu, dengan tampilan yang baru juga bisa membuat websitemu lebih stand out dalam ekosistem online yang makin berkembang. Tentu saja ini bisa membuat websitemu bisa melekat dengan pengunjung sehingga mereka akan mengunjungi websitemu terus dan betah untuk berlama-lama menikmati konten websitemu.

Di tahun 2020 lalu, Exabytes sudah pernah membahas tentang trend web design di tahun 2020 yang akan viral. Tentu saja nggak pas dong kalau kita nggak ulik untuk tren di tahun 2021 ini. Karena ada beberapa perbedaan nih dan bisa kamu terapkan tren di bawah ini mulai hari ini untuk website milikmu.

Lalu apa saja sih tren web design yang akan populer di tahun 2021? Simak dalam tulisan di bawah ini ya, scroll down!

Dark Mode

Seperti yang sudah diketahui, tren dark mode ini memang sudah banyak digunakan di tahun lalu bahkan diprediksi masih akan berlanjut di tahun 2021 lho. 

Kalau diingat dari tahun-tahun sebelumnya, website biasanya didominasi oleh warna putih yang memberikan kesan minimalis dan memberikan ruang kosong di website. Namun beberapa web designer pun mulai menambahkan elemen dan tema yang lebih gelap yang menjadi booming di tahun 2020 lalu.

Ilustrasi Dark Mode

Tak hanya website saja yang menggunakan mode ini, beberapa aplikasi dan sosial media seperti Instagram, Twitter dan Facebook juga menyediakan dark mode untuk penggunanya. Mode ini lebih ramah untuk penglihatan karena paparan cahaya yang berkurang dan juga dinilai bisa hemat energi atau baterai.

Mode gelap ini juga terlihat lebih stylish dan elegan dibandingkan mode yang biasa atau putih. Bahkan dengan mode ini, para web designer bisa menambahkan elemen desain lain agar bisa lebih menonjol.

Tetapi dalam penggunaan mode gelap ini, ada baiknya kamu mengikuti beberapa tips untuk mendesain website dengan dark mode :

Hindari warna hitam murni (pure black)

Untuk mode ini tidak harus berlatar belakang hitam murni yang full dan menggunakan tulisan teks berwarna putih. Justru ini bisa membuat mata sakit. Lebih baik gunakan dark grey (# 121212) daripada warna hitam ((# 000000). Permukaan abu-abu gelap dapat mengurangi ketegangan mata.

Hindari menggunakan warna terang pada dark mode

Warna terang memang bagus untuk meng-highlight text atau informasi yang ingin disampaikan. Tetapi jika kamu menggunakan dark mode, sebaiknya menggunakan warna yang lebih lembut. Hal ini untuk membuat mata lebih enak dipandang dan bisa pengunjung bisa betah berlama-lama di website.

contoh ilustrasi penerapan warna terang di dark mode
Source : uxplanet.org

Gunakan tone yang lebih terang (warna dalam kisaran 200–50) karena memiliki keterbacaan yang lebih baik pada permukaan tema gelap. Varian yang lebih ringan tidak akan membuat UI kurang ekspresif, tetapi membantu Anda mempertahankan kontras yang sesuai tanpa menyebabkan ketegangan mata.

Memenuhi standar kontras warna aksesibilitas

Pastikan konten website tetap dapat dibaca dengan nyaman dalam mode gelap bahkan dalam menampilkan teks putih. Google Material Design merekomendasikan penggunaan tingkat kontras setidaknya 15,8: 1 antara teks dan latar belakang. Kamu bisa menggunakan tools kontras warna untuk menguji rasio kontras dengan uxpro.cc.

Gunakan warna “On” untuk teks

Warna “On” adalah warna yang muncul di atas komponen dan permukaan utama. Mereka biasanya digunakan untuk teks. Biasanya warna defaultnya adalah warna putih  (#FFFFFF). Namun #FFFFFF adalah warna yang bisa sangat mencolok. Oleh karena itu disarankan untuk menggunakan putih yang lebih pudar atau gelap. Kamu bisa mencoba mengatur opacity sekitar 38-87%.

Izinkan pengguna untuk beralih dari mode biasa ke mode gelap (day mode to dark mode)

Kita bisa memberikan opsi untuk pengguna untuk memutuskan harus mengaktifkan atau menonaktifkan dark mode menggunakan kontrol UI. Pengguna dapat memilih mode secara manual, berdasarkan kebutuhan mereka sendiri.

Baca Juga  17 Istilah dalam Dunia Hacking yang Wajib Anak IT Ketahui 

Parallax Animation

Tren web design selanjutnya adalah animasi parallax. Buat yang belum paham apa itu parallax, parallax merupakan ilusi optik yang terjadi ketika objek yang dekat dengan pengamat tampak bergerak lebih cepat daripada objek yang jauh. Misalnya saat melihat pemandangan yang lewat saat mengemudi.

Contoh ilustrasi parallax animation

Biasanya animasi ini diterapkan dengan gerakan scroll secara halus dan progresif untuk menampilkan gambar atau teks. Kesan pertama kali sih dari animasi ini adalah seperti sulap dan terlihat futuristik. Animasi ini telah ada di beberapa tahun terakhir dan banyak digunakan oleh web designer lho.

Namun pastikan bahwa tidak terlalu banyak gerakan pada efek animasi yang satu ini karena ilusi optik (misalnya kedalaman) bisa membuat pusing atau menyebabkan disorientasi. Selain itu jika animasi parallax terlalu banyak maka mengalihkan perhatian dari informasi penting yang ada di website dan malah mempersulit pengunjung.

Collage Art

Tren collage art pun juga sudah sering digunakan di beberapa tahun terakhir. Collage adalah teknik menggabungkan atau mengintegrasikan beberapa media seperti gambar, foto, ilustrasi, grafik, teks dan animasi untuk menciptakan sesuatu yang menarik perhatian.

Contoh Collage Art

Tren ini berkembang nggak hanya di website saja tetapi juga di sosial media. Gaya campuran ini banyak diikuti oleh brand terkenal dan influencer. Ini cocok sekali untuk kamu yang ingin menciptakan image website atau brand yang tanpa batas dan ingin tampil beda.

Ada beberapa hal yang bisa dipertimbangkan untuk menggunakan tren kolase atau collage :

  • Ingin menampilkan banyak gambar sekaligus.
  • Ingin membangun perasaan retrospektif.
  • Jangan memiliki satu gambar pun yang memberikan pesan yang benar.
  • Jika tidak memiliki satu gambar resolusi tinggi, collage bisa digunakan untuk menggabungkan beberapa gambar sehingga pengguna akan berfokus melihat ke dalam 1 collage image
  • Ketika kamu ingin menampilkan keragaman atau keunikan brand 

Neumorphism

Neumorphism adalah penerus dari skeuomophism yakni pendekatan desain yang menggabungkan rendering bahan yang sudah dikenal tua ke dalam desain terkini. Neumorphism sendiri gabungan dari skeuomophism dan flat design.

Desain dari tren ini paling umum seperti menyerupai emboss atau debossing digital dengan warna semi-datar. Desain ini memungkinkan designer untuk memberikan sentuhan tambahan dengan desain yang lebih interaktif atau menambahkan 3D desain sehingga bisa dinikmati oleh pengguna.

Light Colors

Sebagian besar orang-orang menghabiskan waktu di depan komputer dan membuka website. Karena itu tak jarang pengguna mengalami ketegangan mata setelah menatap layar dalam waktu yang lama. 

Oleh karena itu, web designer mulai mempertimbangkan dan berfokus untuk menggunakan warna yang lebih nyaman dilihat. Maka dari itu, warna terang yang lembut akan mulai mendominasi tren web design kali ini.

Tren web design : light colors

Warna yang akan cocok digunakan untuk desain di dalam website ini seperti warna pastel, biru muda, mint, coklat, maroon, kuning pucat, merah muda terang (light pink), coklat muda dan warna soft lainnya. 

Palette warna ini dinilai lebih ramah untuk mata dibandingkan warna yang kontras yang mencolok di mata. Dengan warna ini, pengguna bisa betah untuk berlama-lama di website atau di halaman pertama.

3D Visuals and Colors

Seiring dengan perkembangan teknologi yang memunculkan layar beresolusi tinggi, desain 3D pun mulai berkembang pesat. Dalam tren web design tahun ini, 3D Visual dan 3D Colors akan banyak digunakan.

Pola dan elemen geometris sering digunakan dalam web design termasuk bentuk poligon, berlian, persegi panjang, segitiga dan belah ketupat. Namun saat ini elemen geometris itu dibuat lebih modern dengan bentuk 3D yang objeknya lebih mengambang dan garis kisi yang terlihat. 

Layout warna-warni yang penuh dengan pola element geometris 3D, bayangan drop, gradien dan elemen berlapis diprediksi akan menghiasi website-website di tahun ini. Hal ini dinilai karena element design 3D bisa menghidupkan dan memberikan kesan modern pada website.

Illustrations

Tren web design 2021 yang diprediksi akan meledak yang tak hanya di website tetapi di dunia desain grafis dan sosial media adalah ilustrasi. Sudah banyak brand hingga creator yang mengikuti popularitas ilustrasi.

Ilustrasi pun saat ini mengintegrasikan elemen yang digambar dari tangan ke desain digital atau website. Beragam ilustrasi yang ada, mulai dari black and white illustration, vector illustration, cartoon illustration dan masih banyak lainnya.

Contih ilustrasi web programming

Ilustrasi merupakan sentuhan yang bagus untuk desain website yang bisa memberikan kesan ramah dan unik untuk pengguna. Selain itu, ilustrasi memberikan keragaman dibandingkan gambar-gambar lain yang terlalu monoton. Dan yang terpenting, ilustrasi mewakilkan kreativitas dan keunikan dari sebuah brand atau creator.

Typography Effect and Animations

Tulisan atau typography merupakan elemen penting dalam desain website. Elemen ini bisa dikembangkan untuk menghias websitemu dengan animasi atau effect.

Tren desain ini menggunakan font khusus yang bisa bergerak. Contohnya saja untaian kata dengan animasi yang bergerak berlawanan arah, naik turun dan lainnya. Elemen ini tak hanya bertujuan untuk menyampaikan informasi berupa teks saja tetapi juga untuk tujuan branding yang lebih unik dan kreatif.

Typography yang menggunakan effect atau animasi ini bisa meningkatkan user experience karena menarik untuk dilihat.

Scrolling Transformation

Ketika pengguna men-scroll website, mereka sebenarnya tak hanya menjentikkan jari di atas mouse saja lho untuk menavigasi halaman tetapi mereka juga berinteraksi. Interaksi yang dimaksud adalah pengguna berpartisipasi atau terlibat dalam kegiatan yang terjadi.

Baca Juga  15 Tips Mengoptimalkan Loading Website WordPress

Saat mereka mengunjungi website dan mereka mulai scroll, maka mereka pun sebenarnya tertarik dengan website tersebut atau informasi apa yang disediakan disana. Oleh karena itu pengguna pun jadi tertarik dan terlibat dan terus men-scroll website.

Oleh karena itu, para desainer mulai memasukan visual saat mereka men-scroll. Visual yang ditambahkan bisa perubahan warna, transisi animasi yang kompleks hingga perubahan transisi dalam tata letak.

Desainer web ingin membuat pengalaman baru yang menyenangkan ketika orang men-scroll bisa seperti terlihat halaman baru bahkan situs web yang baru.

[UPDATE] 12 Tren Web Design Yang Akan Populer di 2021 - 2021
Source : 99designs.com by Hiroshy

Selain itu, beberapa web designer juga terus bereksperimen dengan scroll horizontal. Scroll horizontal ini berbeda dari yang umumnya atas ke bawah, horizontal ini ke kiri dan ke kanan seperti galeri gambar.

Untuk yang ingin menerapkan horizontal scrolling di dalam website, ada baiknya kamu mempertimbangkan beberapa hal ini :

  • Jangan memaksa pengguna untuk bernavigasi melalui konten horizontal karena ini bisa menyusahkan atau membuat pengguna tidak nyaman. Cara alternatif untuk bernavigasi bisa seperti tombol panah dengan label yang jelas.
  • Gunakan petunjuk visual yang jelas untuk menunjukkan di mana konten menggunakan scroll horizontal, dan jangan sembunyikan tanda ini di balik kursor.
  • Tentukan konten apa yang akan ditampilkan dalam horizontal scrolling. Contoh konten untuk hal ini adalah galeri foto karena horizontal scrolling akan menampilkan pratinjau kecil kepada pengguna, dan memungkinkan pengguna untuk men-scroll lebih banyak.
  • Hindari scrolling jenis ini untuk teks yang perlu dibaca

Multimedia Experience

Dalam website, tentu saja nggak hanya gambar atau tulisan yang ditampilkan. Apalagi sekarang internet sudah semakin cepat dan teknologi semakin berkembang sehingga kita bisa menikmati konten yang bervariatif yang menggabungkan beberapa multimedia.

Beberapa multimedia bisa ditambahkan dalam website yang membuat website menjadi kaya dan lengkap. Hal ini karena website bisa menggabungkan antara visual, teks, video hingga audio di dalam konten website yang bisa meningkatkan pengalaman pengguna lebih baik. 

Tetapi ada beberapa hal yang perlu diperhatikan bila ingin menggabungkan multimedia dalam website yakni :

  • Prioritaskan kesederhanaan, seperti saat menggabungkan gerakan dan audio. Terlalu banyak multimedia dapat mengganggu atau membebani pengguna sehingga loading website bisa menjadi lama. Bukannya merasa senang, jadinya pengguna tidak merasa nyaman karena loading yang lama.
  • Gunakan format media yang berbeda dengan cermat sebagai cara untuk memaksimalkan aksesibilitas konten.
  • Sertakan teks tertulis dan transkrip untuk semua multimedia yang direkam sebelumnya.
  • Sertakan teks alt untuk gambar, dan lengkapi gambar yang kompleks dengan teks deskriptif yang lebih panjang.
  • Pastikan bahwa semua teks dibuat dengan HTML daripada di render di dalam gambar.
  • Hindari memutar otomatis (autoplaying) konten video atau gerakan. Sebagai gantinya, berikan tombol “putar” (play) yang jelas yang memberi pengguna opsi untuk memutar dan menjeda konten.

Fungsionalitas, Inklusivitas & Aksesibilitas

Selain tampilan yang menarik, tentu saja fungsionalitas situs web selalu menjadi aspek kunci dari desain website. Namun, seiring dengan waktu loading yang cepat, kecepatan halaman, dan desain yang mobile friendly, peningkatan fokus pada inklusivitas dan aksesibilitas telah menciptakan kebutuhan yang semakin besar akan desain website untuk memperhitungkan kebutuhan penyandang disabilitas. Sehingga website dapat diakses dan berfungsi untuk semua orang

Mengoptimalkan website agar lebih fungsional, dapat diakses, dan inklusif tidak hanya baik untuk layanan pelanggan tetapi bisa untuk meningkatkan konversi, meningkatkan SEO, dan memperluas jangkauan audiens untuk visitor websitemu.

Beberapa cara untuk membuat situs website lebih inklusif dan mudah diakses meliputi:

  • Menciptakan kontras warna yang kuat antara teks dan latar belakang;
  • Menambahkan indikator fokus, seperti kerangka persegi panjang yang muncul di sekitar tautan saat menggunakan navigasi keyboard;
  • Menggunakan label dan instruksi dengan bidang formulir daripada teks placeholder konteks rendah;
  • Menggunakan tag alt fungsional untuk gambar;
  • Menampilkan salinan yang mudah dipahami, lugas, dan bebas jargon.

Custom Cursor

Tren web design terakhir yang telah dirangkum adalah custom cursor. Tanpa sadar, kursor (cursor) sebenarnya berperan penting meskipun dianggap kecil dan diabaikan. Umumnya kursor yang kita temui hanyalah panah biasa saja.

Contoh custom cursor untuk tren web design 2021
Source : Pen Tool

Disini web designer bisa bereksperimen untuk mengubahnya menjadi sesuatu yang keren banget dan bisa meningkatkan pengalaman pengguna yang lebih fun. Misalnya saja kursor bisa berubah bentuk atau warna ketika discroll, diklik atau menggerakannya saja.

Untuk melihat contoh custom cursor, kamu bisa melihat di Pen Tool dimana kamu bisa merasakan pengalaman yang berbeda saat menscroll atau mengklik website.

Itulah tren web design yang akan populer di tahun 2021 ini. Apakah kamu sudah menerapkan salah satu trennya? Untuk yang belum, ada baiknya kamu mencobanya mulai sekarang. Karena dengan mengikuti tren web design, kamu bisa meningkatkan pengalaman pengguna websitemu yang lebih menyenangkan dan juga website kamu tidak ketinggalan zaman.

Jika kamu membutuhkan hosting, Exabytes menyediakan beragam paket hosting berkualitas untuk kinerja websitemu. Kunjungi website Exabytes sekarang dan bangun website idamanmu sekarang juga.

Semoga artikel di atas dapat menjadi referensi ya. Selamat mencoba.

Apakah artikel ini membantu?
YaTidak
Berkah Ramadhan