Juni 7, 2021 • Knowledge

Wajib Tahu! Inilah Tren Web Design Populer di Tahun 2021

Wajib Tahu! Inilah Tren Web Design Populer di Tahun 2021

Sebagai pemilik website, anda tahu bahwa desain website yang baik akan mampu menarik minat pengunjung. Maka dari itu, penting bagi anda untuk membuat desain website anda semenarik mungkin. Namun dalam membuat website, anda terkadang mengalami kebingungan untuk mencari inspirasi web design yang menarik dan trendy.

Memang, setiap tahunnya dunia web design mengalami perubahan tren. Untuk memastikan desain website anda mampu menarik minat pengunjung, anda perlu mengetahui tren  web design terbaru yang sedang banyak digemari. Apa sajakah tren web design yang sedang populer di tahun 2021 ini?

Kali ini kami akan merangkum tren web design apa saja yang populer tahun ini. Pastinya, artikel kali ini akan membantu anda dalam menemukan inspirasi untuk mendesain website semenarik mungkin. Jadi, baca hingga tuntas ya.

 

 

Sekilas Tentang Tren Web Design

Web Design adalah suatu kegiatan dalam membuat sekaligus merancang tampilan website berkaitan dengan bagaimana konten dalam website tersebut akan ditampilkan kepada pengunjung website. Sementara web designer adalah orang yang memiliki keahlian dalam membuat dan merancang tampilan website agar menjadi menarik. Seorang web designer juga harus fokus membuat desain website dengan pendekatan user experience sehingga nantinya website yang dibuat dapat digunakan oleh pengunjung dengan mudah.

Menurut studi yang dilakukan oleh WebFX, tampilan website adalah kesan pertama yang dirasakan oleh 94% pengguna. Oleh karena itu, penting bagi seorang web designer untuk membuat website dengan desain yang menarik namun juga mudah digunakan. Untuk memastikan website yang dibuat mampu menarik perhatian pengguna, web designer perlu mengetahui tren web design terbaru dan yang sedang populer.

Tren web design selalu berubah-ubah, namun seringkali dipengaruhi oleh perubahan budaya yang terjadi di dunia. Misalnya, dua tahun terakhir dunia dilanda pandemi Covid-19 yang mendorong kita untuk belajar lebih banyak tentang dunia digital dan mengubah cara kita menjalani hidup. Maka dari itu, tren web design juga mengalami perubahan secara dramatis, yaitu fokus dalam menciptakan kembali pengalaman di dunia nyata dan membuatnya ada secara digital.

Hal tersebut membuat tren web design di tahun 2021 tampak memiliki tema yang seragam. Yakni fokus dalam menjelajahi berbagai cara komunikasi visual secara digital yang dapat meningkatkan interaksi pengguna. Tren web design di tahun ini memadukan digitalisasi dengan kehidupan sehari-hari melalui cara yang tidak biasa, seperti tren typography baru, penggunaan animasi dan efek-efek yang realistis, serta simulasi produk 3D untuk website e-commerce.

Meskipun memiliki tema yang seragam, dengan banyaknya variasi tren web design tentu membuat anda merasa kebingungan untuk menentukan desain web yang tepat sesuai dengan kebutuhan. Untungnya, kami telah merangkum beberapa tren web design paling populer di tahun 2021 yang bisa anda jadikan inspirasi dalam mendesain web. Berikut adalah beberapa tren web design paling populer di tahun 2021 yang wajib anda ketahui.

 

 

Dark Mode

Tren dark mode sudah banyak digunakan sejak tahun lalu, namun diprediksi masih akan berlanjut pada tahun 2021 ini. Banyak pengguna yang menyukai dan membutuhkan dark mode, selain karena mode ini lebih ramah untuk penglihatan karena berkurangnya paparan cahaya tapi juga dinilai bisa menghemat daya perangkat yang digunakan. Tak heran, beberapa aplikasi populer seperti WhatsApp dan Instagram sukses menjadi trending topic setelah meluncurkan fitur dark mode.

Selain fungsional, ternyata dark mode juga membuat website terlihat lebih stylish dan elegan jika dibandingkan dengan mode biasa. Dengan menerapkan dark mode, konten yang disajikan dalam website terlihat lebih menonjol karena perbedaan warna yang kontras. Bahkan, web designer juga bisa berkreasi dengan menambahkan elemen-elemen desain lain agar tampilan website terlihat semakin menarik.

Namun, meski telah menjadi tren web design dari beberapa waktu yang lalu hingga sekarang, anda tetap perlu pertimbangan yang matang jika ingin menerapkan dark mode dalam website. Jika salah dalam penggunaan, bisa jadi website dengan dark mode anda malah tidak sesuai dengan kebutuhan bisnis dan audience anda.

 

Hal-Hal Wajib Tahu dalam Menerapkan Dark Mode

Agar tidak salah penggunaan, maka hal-hal yang wajib anda ketahui dalam menerapkan dark mode dalam website. Berikut merupakan beberapa tips yang perlu anda ikuti dalam mendesain website dengan dark mode.

  • Hindari penggunaan warna pure black sebagai background. Meskipun namanya dark mode, hindari menggunakan background berwarna pure black (#000000). Hal ini bisa membuat mata pengguna menjadi tegang dan sakit. Lebih baik gunakan warna dark grey (#474141) yang lebih nyaman bagi mata pengguna.
  • Pilih warna yang sesuai untuk gambar dan teks. Jika menggunakan dark mode, sebaiknya menggunakan warna-warna yang lembut seperti warna-warna pastel untuk digunakan pada gambar dan teks. Selain lebih enak dipandang dan bisa membuat pengunjung betah, pilihan warna-warna yang lembut bisa membuat informasi lebih mudah dibaca daripada menggunakan warna-warna tajam.
  • Atur kontras sesuai dengan standar aksesibilitas. Pastikan konten website dapat dibaca dengan nyaman dalam dark mode, bahkan ketika menampilkan teks berwarna putih. Caranya dengan mengatur level kontras antara teks dan background hingga mencapai standar minimum WCAG level AA, yakni 4.5:1. Anda bisa menggunakan tools kontras warna untuk menguji rasio kontras, misalnya dengan Tanaguru Contrast Finder.
  • Bedakan warna elemen sesuai dengan hierarkinya. Gunakan warna-warna yang berbeda namun masih satu kesatuan untuk masing-masing level hierarki. Misalnya, semakin tinggi level hierarki maka warna yang digunakan semakin terang. Hal itu bertujuan untuk memudahkan pengguna dalam membedakan antara warna latar dan level elemen.
  • Izinkan pengguna untuk beralih dari dark mode ke day mode. Sediakan opsi bagi pengguna untuk menentukan sendiri mode tampilan sesuai dengan keinginan mereka. Caranya dengan menyediakan fitur kontrol UI yang bisa mengaktifkan atau menonaktifkan dark mode. Dengan begitu, pengguna bisa memilih mode tampilan secara manual, berdasarkan preferensi mereka sendiri.

 

 

Parallax Animation

Tren penggunaan animasi berbasis web mengalami peningkatan dari tahun ke tahun. Animasi web di tahun 2021 semakin kompleks, dengan memisahkan elemen-elemen halaman secara ekstrim menjadi foreground dan background, sehingga menciptakan efek animasi parallax. Bagi yang belum mengenal, parallax merupakan sebuah ilusi optik dimana obyek yang berdekatan dengan jarak pandang bergerak lebih cepat dibandingkan dengan obyek yang berjauhan.

Ilusi parallax sebenarnya bisa kita saksikan di kehidupan sehari-hari, misalnya ketika kita melihat pemandangan yang luas saat mengemudi. Namun ketika diterapkan sebagai animasi website, efek parallax mampu menciptakan kesan futuristik dan suasana surealis pada website. Jadi, pengguna yang mengunjungi website akan merasakan suasana yang seakan-akan nyata seperti di kehidupan sehari-hari.

Namun, pastikan untuk tidak menggunakan terlalu banyak gerakan dalam mendesain website dengan animasi parallax ini karena ilusi optik bisa membuat pusing dan menyebabkan disorientasi bagi pengguna. Selain itu, penggunaan animasi parallax yang terlalu banyak bisa mengalihkan fokus dari informasi-informasi penting yang ada di website sehingga malah mempersulit pengunjung.

 

 

Neumorphism

Sejak tahun lalu, tren neumorphism telah banyak digunakan oleh para web designer, dan diprediksi akan semakin berkembang di tahun 2021 ini. Neumorphism merupakan suksesor dari skeumophism, yakni pendekatan desain dengan menggabungkan rendering bahan-bahan yang sudah tua dan ketinggalan zaman ke dalam desain modern. Singkatnya, neumorphism merupakan gabungan dari skeumophism dan flat design.

Tren ini memanfaatkan desain yang lebih datar, dimana web designer menyederhanakan ikon dan warna menjadi kurang realistis namun terlihat lebih seragam dan mudah dikenali. Secara umum, tren neumorphism memiliki desain yang efeknya menyerupai emboss atau debossing digital dengan warna semi-datar. Dengan demikian, web designer bisa berkreasi dengan memberikan sentuhan tambahan untuk desain yang lebih interaktif atau menambahkan desain 3D yang lebih realistis dan mudah untuk dinikmati oleh pengguna.

 

 

Dynamic Scrolling

Ketika pengguna melakukan scrolling pada website, sebenarnya mereka tak hanya menavigasi halaman, tapi mereka juga berinteraksi. Interaksi dalam konteks ini adalah pengguna berpartisipasi atau terlibat dalam kegiatan yang terjadi. Jadi, saat pengguna mengunjungi website dan mulai scrolling, mereka sebenarnya tertarik dengan informasi yang disediakan oleh website tersebut dan terus melakukan scrolling.

Lantas, bagaimana caranya agar aktivitas scrolling yang dapat dilakukan oleh pengguna tanpa merasa bosan? Solusinya ialah dengan menggunakan dynamic scrolling. Dynamic scrolling yakni transisi antar halaman dengan efek animasi saat mengunjung melakukan scrolling.

Dynamic scrolling bisa dilakukan dengan beragam efek visual, diantaranya perubahan warna, transisi animasi yang kompleks, hingga perubahan transisi dalam tata letak. Dengan demikian, anda akan memiliki website yang unik dan membuat pengunjung merasa lebih betah. Hal ini didukung oleh studi yang dilakukan oleh The New York Times yang menyatakan bahwa dynamic scrolling terbukti membuat pengunjung website lebih betah hingga 3 menit lebih.

Ada dua jenis dynamic scrolling yang bisa anda terapkan di website, yakni horizontal scrolling dan infinite scrolling. Berikut merupakan penjelasan dari masing-masing jenis scrolling tersebut.

 

Horizontal Scrolling

Horizontal scrolling adalah teknik scrolling dimana pengguna melakukan scrolling dari kiri ke kanan, bukan dari atas ke bawah seperti pada umumnya. Teknik ini cocok diterapkan pada website yang memiliki banyak konten visual, seperti website komik online. Beberapa hal yang harus anda pertimbangkan sebelum menerapkan horizontal scrolling pada website, antara lain:

  • Tentukan konten apa yang akan ditampilkan dalam mode horizontal scrolling. Contoh konten yang cocok ditampilkan dalam mode ini ialah galeri foto, karena horizontal scrolling dapat menampilkan preview kecil pada pengguna dan memungkinkan pengguna untuk scrolling lebih banyak.
  • Gunakan petunjuk visual yang jelas untuk menunjukkan konten mana yang bisa di-scrolling secara horizontal, dan jangan sembunyikan petunjuk ini di balik kursor.
  • Jangan memaksa pengguna untuk selalu bernavigasi secara horizontal, karena hal ini bisa membuat pengguna merasa tidak nyaman. Sebaiknya sediakan opsi yang memungkinkan pengguna untuk memilih mode scrolling sesuai dengan preferensi mereka.
  • Hindari penerapan horizontal scrolling untuk konten jenis teks yang perlu dibaca.

 

Infinite Scrolling

Selain horizontal scrolling, teknik scrolling lain yang sedang populer untuk diterapkan pada website di tahun 2021 ini adalah infinite scrolling. Infinite scrolling merupakan teknik scrolling dimana animasi pada website muncul ketika pengguna melakukan scrolling kearah bawah. Infinite scrolling cocok diterapkan untuk website dengan format single page atau website dengan konsep story telling.

 

 

Tren Typography Design

Penggunaan font berperan penting dalam menarik minat pengguna untuk mengunjungi suatu website dalam waktu yang lama. Oleh karena itu, dalam membuat website anda wajib menggunakan font yang tepat, sehingga informasi-informasi yang disajikan di website dapat dipahami dengan mudah oleh pengguna. Jangan sampai membuat pengguna justru malah kebingungan karena informasi yang sulit dibaca akibat kesalahan dalam pemilihan font.

Ada beberapa tren typography design yang sedang populer di tahun 2021 ini yang bisa anda jadikan pertimbangan dalam memilih font yang tepat untuk website anda. Diantaranya adalah bold font, efek & animasi typography, dan penggunaan emoji. Mari kita bahas tren-tren typography tersebut satu per satu.

 

Bold Font

Penggunaan bold font pada website kini dianggap sebagai sebuah keharusan dalam mendesain website. Penggunaan huruf tebal di website anda ini berfungsi untuk mempertegas suatu elemen. Jadi, bold font digunakan untuk memandu pengunjung website untuk fokus pada bagian yang ingin ditonjolkan.

Berikut adalah beberapa tips bagi anda yang ingin menerapkan penggunaan bold font di website agar tampilannya semakin menarik:

  • Tentukan komposisi yang pas. Pastikan anda hanya menggunakan bold font pada bagian-bagian terpenting saja yang ingin dipertegas.
  • Atur kontras sebaik mungkin. Caranya dengan menyesuaikan warna font dengan warna background yang digunakan agar informasi yang disajikan dapat terbaca dengan mudah.
  • Gunakan jenis font yang tepat. Selain menyesuaikan penggunaan font dengan jenis desain dan brand anda, kami merekomendasikan untuk memilih font jenis Sans Serif yang nyaman di mata.

 

Efek & Animasi Typography

Berbeda dengan penggunaan bold font yang berfungsi untuk mempertegas suatu elemen, penggunaan efek dan animasi typography lebih berfungsi untuk tujuan dekoratif. Tren typography design ini menggunakan font khusus dengan animasi yang bergerak berlawanan arah, naik turun, dan sebagainya. Web designer umumnya menggunakan teknik typography ini untuk tujuan branding yang lebih unik dan kreatif, serta untuk meningkatkan user experience bagi pengunjung karena website akan terlihat lebih menarik.

 

Penggunaan Emoji

Popularitas emoji semakin meningkat dan telah berkembang jauh sebagai salah satu cara untuk mengekspresikan perasaan dalam berkomunikasi secara digital. Jika dulu emoji hanya digunakan dalam email, aplikasi chatting, forum, dan social media, kini web designer juga telah memulai untuk menggunakan emoji sebagai salah satu elemen dalam mendesain website. Penggunaan emoji pada website, menurut para web designer akan membawa kesan menyenangkan namun tetap menawan, sehingga membuat pengguna merasa menjadi bagian dari konten-konten yang disajikan oleh website.

Memanfaatkan emoji dianggap sebagai cara sederhana tapi efektif untuk menyampaikan pesan-pesan yang ingin disampaikan oleh brand dengan bahasa non-verbal yang mudah dipahami oleh para pengguna yang berasal dari berbagai latar belakang. Dengan demikian, anda dapat berkomunikasi dengan audience dari berbagai bahasa dan aksen secara visual dan non-verbal, yang mana berdampak baik untuk kelangsungan bisnis dan brand anda.

 

 

Tren Color Design

Selain typography, warna juga merupakan elemen yang memegang peranan penting dalam tampilan sebuah website. Palette warna tak hanya digunakan sebagai background, tapi juga bagian-bagian lain pada website seperti icon dan text. Maka dari itu, seorang web designer yang handal dituntut untuk mampu memenuhi kebutuhan tampilan website yang menarik menggunakan pilihan warna-warna yang atraktif tapi tetap nyaman dipandang mata.

Beberapa tren color design yang tengah naik daun dan diprediksi bakal mendominasi di tahun 2021 ini antara lain penggunaan warna-warna terang dan gradien warna. Berikut merupakan ulasan dari kedua tren color design tersebut.

 

Warna-warna Terang

Sebagian dari anda mungkin bertanya-tanya, mengapa harus menggunakan warna-warna terang yang cenderung membuat mata cepat lelah? Jangan salah sangka, bedakan antara warna-warna terang dan warna-warna yang terlihat kontras. Kami tahu bahwa sebagian besar orang menghabiskan waktunya di depan smartphone atau laptop untuk membuka website, yang mana menyebabkan pengguna mengalami ketegangan mata karena menatap layar gadget dalam waktu yang lama.

Oleh karena itu, para web designer lebih memilih untuk menggunakan pilihan warna-warna yang lebih nyaman untuk dilihat dalam waktu yang lama. Warna-warna apa sajakah itu? Jadi, warna-warna terang tapi lembut dianggap sebagai warna yang nyaman untuk dipandang oleh pengguna sehingga diprediksi bakal mendominasi tren color design untuk tahun ini dan tahun-tahun yang akan datang.

Contoh palette warna terang tapi lembut yang cocok untuk diterapkan pada website antara lain warna pastel, light pink, biru muda, mint, coklat, coklat muda, kuning pucat, maroon, dan warna-warna soft lainnya. Menggunakan palette warna seperti ini dipercata lebih ramah untuk mata pengguna dibandingkan dengan menggunakan warna-warna kontras yang terasa mencolok di mata. Alhasil, pengguna bisa betah berlama-lama dalam mengakses website milik anda.

 

Gradien Warna

Selain warna-warna terang, tren color design lain yang bisa anda terapkan pada website anda adalah gradien warna. Gradien warna adalah desain yang menampilkan transisi warna secara bertahap dan saling berkesinambungan. Tren color design ini mampu menciptakan kedalaman visual sehingga website tampak lebih hidup dan eye catching.

Gradien warna cocok diterapkan pada website untuk bisnis agency, kursus online, dan sejenisnya. Beberapa tips yang bisa anda terapkan dalam penggunaan gradient warna, antara lain:

  • Gunakan warna yang sesuai dengan brand anda. Sebelum anda menggunakan gradient warna, sesuaikan dulu warna yang akan digunakan dengan logo brand anda.
  • Pakai gradasi warna secukupnya saja. Menggunakan gradasi warna bukan berarti anda dapat menampilkan warna sebanyak mungkin. Cukup gunakan dua sampai tiga warna saja untuk efek gradasi yang dihasilkan.
  • Tentukan fokus desain. Penting bagi anda untuk menciptakan fokus pada efek gradasi warna yang dihasilkan. Caranya ialah dengan menggunakan teknik arah cahaya datang untuk menentukan area gelap dan terang.
  • Temukan inspirasi dari dunia nyata. Banyak sekali obyek di dunia nyata yang memiliki pola gradasi. Pelajari pola gradasinya dan gunakan sebagai inspirasi agar gradien warna yang anda terapkan terlihat lebih real.

 

 

Tren Gambar & Ilustrasi

Satu lagi tren web design yang populer di tahun 2021 dan akan terus berkembang di tahun-tahun mendatang, yakni penggunaan gambar dan ilustrasi pada website. Menurut beberapa sumber, menggunakan gambar atau ilustrasi pada website mampu meningkatkan user experience bagi audience terhadap konten-konten yang disajikan oleh website tersebut. Beberapa tren gambar & ilustrasi yang bisa menjadi pertimbangan anda untuk diterapkan pada website antara lain human face, product photography, dan collage art.

 

Human Face

Seperti namanya, human face merupakan tren web design dengan menampilkan wajah manusia pada website agar terlihat lebih powerful. Selain agar terlihat powerful, menggunakan wajah manusia pada website mampu meningkatkan kredibilitas bisnis. Maka tak heran jika para web designer banyak yang menerapkan tren ini pada website mereka.

Beberapa jenis website yang dianggap cocok untuk menerapkan human face antara lain fashion dan beauty. Berikut merupakan cara menerapkan human face pada website agar mendapatkan hasil yang diinginkan:

  • Gunakan human face untuk membangun fokus pada produk. Khususnya bagi bisnis fashion dan aksesoris, manfaatkan penggunaan human face sebagai alat untuk memasarkan produk.
  • Mainkan pandangan mata ke arah informasi penting. Arahkan pandangan mata human face ke arah informasi paling penting dari website, atau kea rah tombol CTA sehingga lebih mudah ditemukan oleh pengunjung.
  • Tunjukkan ekspresi wajah sesuai dengan value produk. Hal ini bisa membangun kesan menarik bagi pengunjung terhadap produk yang ditawarkan.

 

Products Photography

Bagi anda pemilik bisnis e-commerce, tren web design yang satu ini wajib anda terapkan. Tren product photography memang bukanlah hal yang baru, namun seiring dengan perkembangan teknologi, para web designer telah membuat banyak inovasi menarik sehingga penggunaanya lebih optimal. Optimalisasi penggunaan product photography diantaranya adalah animasi 3D, gambar produk dalam ukuran aslinya, hingga penerapan teknologi VR.

Pengguna diharapkan bisa berinteraksi dengan produk yang ditawarkan seakan-akan mereka menggunakan produk tersebut di dunia nyata. Memang, salah satu kekurangan dari transaksi pembelian melalui e-commerce adalah pelanggan tidak bisa melihat dan merasakan secara langsung produk yang diinginkan. Jadi, dengan tren product photography yang semakin optimal diharapkan mampu meningkatkan user experience ketika pelanggan berbelanja secara online.

 

Collage Art

Bagi anda yang ingin menciptakan website dengan konsep yang tampil beda, menggunakan collage art bisa jadi pilihan yang tepat. Tren collage art sudah banyak digunakan sejak beberapa tahun yang lalu dan diprediksi masih akan terus berkembang, tidak hanya digunakan untuk website tapi juga di social media. Collage itu sendiri merupakan teknik yang menggabungkan beberapa media seperti gambar, foto, grafik, animasi, ilustrasi, dan teks untuk menciptakan website yang menarik perhatian pengunjung.

Teknik ini banyak digunakan oleh brand-brand terkenal maupun para influencer di website pribadinya. Apabila anda berniat untuk menerapkan collage art pada website, pertimbangkan terlebih dahulu hal-hal berikut ini:

  • Gunakan collage art jika ingin menampilkan banyak gambar sekaligus;
  • Gunakan collage art jika ingin membangun kesan retrospektif;
  • Gunakan collage art jika ingin menampilkan keberagaman atau keunikan brand anda.

 

 

Ringkasan

Itulah rangkuman dari beberapa tren web design yang populer pada tahun 2021 ini. Pada akhirnya, para web designer berusaha meningkatkan user experience dengan menerapkan inovasi desain yang terinspirasi dari hal-hal yang bisa ditemukan di kehidupan nyata. Meskipun beberapa tren lama bermunculan lagi, tampaknya web designer telah memaksimalkan penggunaan tren-tren web design tersebut agar terlihat modern dan tidak ketinggalan zaman.

Bagaimana dengan anda? Manakah diantara tren-tren web design diatas yang paling anda suka? Sudahkah anda mencoba menerapkannya ke dalam website anda? Jika belum, semoga artikel kali ini bisa menjadi panduan bagi anda untuk mendesain website agar lebih menarik dan menyenangkan bagi pengguna yang datang berkunjung. Sampai jumpa lagi!

Testing