Logo Graphie
Blog Image

Tren Desain Web 2021: Dari Dark Mode ke Motion

10 Feb 2021

Tren desain web mana yang akan menggemparkan web tahun depan? Pakar Envato kami memberi kami tren teratas yang harus diperhatikan di tahun 2021.

Desain web telah berkembang pesat dalam beberapa tahun terakhir. Praktik ini terjadi di persimpangan antara kreativitas dan teknologi - dua industri yang bergerak paling cepat di dunia - jadi tidak mengherankan jika tren dan teknik desain web baru terus bermunculan. Jadi apa tren terbaru dalam desain web?

  1. Mode Gelap
  2. Kolase
  3. Anti-Desain
  4. Minimalis
  5. Desain Organik
  6. Ilustrasi
  7. Fungsionalitas, Inklusivitas & Aksesibilitas
  8. Gerakan & Interaktivitas
  9. Desain 3D & Geometris
  10. Pembuat Halaman & Kit Template

Meskipun akan selalu ada aspek tertentu dari desain web yang akan tetap ada - seperti navigasi yang ramah pengguna, keamanan data, dan waktu muat yang cepat - mode dan mode akan terus datang dan pergi. Namun tetap mengikuti tren, gaya, dan inovasi desain web terbaru dan terhebat, akan memastikan situs web Anda menonjol dalam ekosistem online yang terus berkembang.

Jadi, dari mode gelap hingga interaktivitas, tren desain web populer manakah yang akan membuat web menjadi populer di tahun depan? Kami bertanya kepada pakar Envato kami apa yang membuat situs web hebat di tahun 2020, serta pendapat mereka tentang tren desain web terbaru dan terbaik yang harus diperhatikan di tahun 2021 ....

01. Mode Gelap

Untuk waktu yang lama dalam desain web, latar belakang putih dianggap sebagai satu-satunya cara untuk membuat ruang kosong di situs web atau aplikasi. Sementara beberapa desainer mulai menambahkan tema dan elemen yang lebih gelap beberapa tahun lalu, tren Mode Gelap benar-benar menguasai industri pada tahun 2020, dan kami berharap untuk melihatnya berlanjut hingga 2021.

Apa Itu Mode Gelap?

Digunakan oleh merek besar seperti Apple, Hublot, dan bahkan untuk portofolio individual seperti Clock Strikes Twelve, mode gelap adalah cara yang bagus untuk menambahkan sentuhan modern dan elegan ke situs web apa pun. Selain memungkinkan desainer untuk bermain dengan elemen yang lebih kreatif, seperti pastel dan neon - dua tren desain grafis besar tahun 2020 - penelitian juga menunjukkan bahwa mode gelap lebih baik untuk masa pakai baterai dan penglihatan kita dengan mengurangi cahaya biru. paparan.

“Tampaknya ada pergeseran ke lebih banyak produk yang menawarkan pengaturan mode gelap, atau hanya gelap, berdasarkan studi yang mengungkapkan dampak silau dan paparan cahaya biru, dan pada masa pakai baterai kami yang berharga,” kata desainer Envato UI Sean Feehan.

Selain ramping, apik, dan lebih enak dipandang, mode gelap sangat bagus untuk meningkatkan kontras, dan membuat elemen desain lebih terlihat. Anda bahkan dapat menambahkan sakelar mode gelap ke situs web Anda - seperti yang terlihat pada contoh dari Johny Vino, Koos Looijesteijn, dan Adrian Verde Studio ini - untuk memungkinkan pengunjung menyesuaikan pengalaman mereka.

“Menurut saya mode gelap jelas merupakan tren yang memiliki dampak terbesar pada desain web pada tahun 2020,” kata desainer Envato UX, Tahlia Giannopoulas. “Sejak mode Gelap menjadi populer, saya telah melihat beberapa situs web yang memiliki tombol 'Mode Gelap' kecil (beralih antara mode terang dan gelap), yang merupakan cara yang hebat namun sederhana agar pengguna dapat menyesuaikan pengalaman mereka.”

Meskipun awalnya dirancang dengan skema warna putih dan terang secara eksklusif, semakin banyak desain neuromorfik - gambar gaya UX yang memecah belah pada skeuomorphism dan desain datar yang sering terlihat di iOS atau Android UI - juga menggabungkan tren mode gelap, yang dengan cepat mengambil alih tema warna yang lebih terang dalam popularitas.

Untuk menyeberang ke sisi (mode) gelap, lihat Dashboard UI Concept Dark Theme oleh hoangpts, Finance Wallet Dark Mode UI Kit PP oleh angelbi88 dan Spate Ui Kit ini oleh cerpow di Envato Elements!

02. Media Kolase & Pencampur

Kolase adalah salah satu tren terbesar yang mengambil alih lanskap desain grafis dan media sosial tahun ini, dan dengan cepat populer di dunia desain web. Gaya media campuran kembali menjadi sorotan karena artis digital dan influencer media sosial, dan juga diadopsi oleh banyak merek dan desainer web - termasuk Chobani, City Circus, dan Urban Outfitters.

Apa Kolase Itu?

Kolase adalah tentang mencampurkan media seperti foto, ilustrasi, grafik, gerakan, dan teks untuk menciptakan estetika yang menginspirasi dan menarik.

Sekarang setelah pindah ke dunia digital, tren kolase telah berkembang menjadi media campuran seperti kolase animasi, font dekoratif besar, tekstur artistik (seperti sapuan kuas cat) dan bahkan teks animasi terdistorsi, yang menghasilkan beberapa hasil yang sangat unik.

“Saya pikir konsep media pencampuran hanya akan menjadi lebih besar pada tahun 2021,” kata Tahlia. “Banyak orang sekarang menggunakan aplikasi menggambar di iPad, dan dengan kuas digital yang meniru media cat tradisional (seperti cat air, minyak, guas), batasan seni digital sedang didefinisikan ulang. Selain itu, kemudahan tambahan karena memiliki seni digital di perangkat Anda (tidak perlu khawatir tentang memotret atau memindai) berarti lebih mudah dari sebelumnya untuk berbagi di web. ”

Kolase adalah tren yang berpasangan dengan baik dengan desain UX minimal - atau bahkan anti-desain jika Anda ingin mendorong batasan tersebut. Mengintegrasikan media campuran dan kolase ke dalam desain situs web Anda adalah cara yang pasti untuk menambahkan percikan kreativitas ke pengalaman biasa dan membuat merek atau bisnis Anda menonjol.

Untuk mengintegrasikan kolase ke desain web Anda berikutnya, lihat Tema Portofolio Kreatif Brynn ini, Jembatan ini - Tema WordPress Serbaguna Kreatif, atau Boldlab - Tema Agensi Kreatif di ThemeForest. Atau, lihat item hebat yang terinspirasi kolase ini di Envato Elements!

03. Anti-Desain

Jika 2020 telah mengajari kita sesuatu, itu berarti membuang semua aturan dan harapan ke luar jendela. Anti-desain adalah tren yang dipicu oleh kebangkitan Brutalisme pada tahun 2019, dan gaya kontroversial baru-baru ini merembes ke ranah media sosial dan budaya pop, serta desain web dan grafis.

Apa itu Anti-Design?

Digambarkan sebagai 'mentah', 'tidak menyesal' dan bahkan 'mengerikan', gerakan anti desain adalah tentang merangkul kekacauan dan keburukan sebagai protes dari standar tradisional desain 'baik'. Ini menampilkan tata letak eksperimental dan asimetris, melebih-lebihkan, distorsi, pelapisan, dan elemen tradisional yang 'jelek', yang berarti tidak semua orang cocok. Tetapi jika Anda adalah seseorang yang suka menonjol dari yang lain, tidak dapat disangkal bahwa situs web anti-desain adalah alat yang sangat efektif untuk melakukan hal itu!

Banyak desainer sekarang mencoba-coba dunia anti-desain yang aneh, yang dapat dilihat dalam desain situs web yang kacau namun unik dari merek Belanda Roze Bunker, dan studio desain Play Type dan XXIX. Bahkan artis Australia Flume telah mengambil pendekatan yang ceria, berani, dan brutal dengan situs webnya. Meskipun gaya ini selalu menonjol (semoga untuk alasan yang tepat), desain web yang efektif adalah tentang keseimbangan. Jadi, jika Anda memilih untuk menjalani anti-desain di UI Anda, penting untuk memastikan bahwa UX situs Anda masih sederhana, fungsional, dan ramah pengguna.

"Saya pikir tren anti-desain mungkin akan mereda, tapi menurut saya 'Breaking the Rules' telah berkembang seiring dengan kolase dan media campuran," kata Tahlia. “Saya telah menemukan banyak situs web berbeda yang melapisi citra, mencampurkan serif dengan font san serif, dan menggunakan animasi dengan cara yang tidak konvensional. Namun, karena UX mereka yang hebat, mereka masih membuatnya berfungsi. ”

Jika Anda pro anti-desain, langgar aturan dengan Template HTML Portofolio Digital Kreatif Sambat oleh esensifiksi, CHAOS Instagram Social Media Kit oleh dirtylinestudioon dan Aksi Photoshop Poster Glitch Photocopy ini dengan membenturkan titik pada Envato Elements!

04. Minimalis

Tren desain yang benar-benar menolak untuk berhenti, minimalis telah menjadi roti dan mentega dari karya desainer web selama dekade terakhir. Tapi apa desain web minimalis? Kurang gaya visual dan lebih banyak prinsip desain, desain minimalis didasarkan pada hanya menggunakan elemen penting - seperti bentuk dasar, teks bersih, palet warna terbatas dan ruang kosong - untuk menciptakan sesuatu yang sederhana, fungsional dan berkesan.

Banyak merek telah menerapkan tren minimalis dengan indah dalam desain web mereka, seperti label sepatu mewah ETQ Amsterdam dan agensi pengembangan bisnis yang berbasis di Brooklyn, Huge Inc. Meskipun biasanya dikaitkan dengan ruang monokrom dan putih, minimalis tidak hanya hitam dan putih. Faktanya, minimalis penuh warna sedang meningkat dalam desain grafis dan web, menampilkan warna blok dan latar belakang yang berani, font sans serif sederhana dan tipografi minimalis, serta elemen desain minimal untuk membuat desain situs web yang sederhana namun menakjubkan.

Tren yang bertujuan tidak hanya untuk menyederhanakan desain visual situs web, tetapi juga kegunaan dan fungsionalitas - tren besar lainnya yang dipatok untuk tahun 2021 - desain web minimalis akan terus menjadi komponen kunci dari desain UI modern untuk tahun-tahun mendatang.

"Saya tidak terlalu menyukai tren, tapi saya yakin minimalis akan selalu relevan di ruang desain digital," kata Sean. “Semakin kami memperumit antarmuka kami, semakin banyak pengguna yang kesulitan untuk menggunakan produk kami.”

Untuk membuatnya tetap sederhana dengan minimalis, lihat Template PSD Situs Web Minimal Breal ini oleh VLThemes, Template eCommerce Minimalis Uniqlo oleh codecarnival dan Halaman Arahan Situs Web Minimal ini oleh cerpow di Envato Elements!

05. Desain Organik

Salah satu tren desain terbesar tahun 2020, desain organik adalah tentang menggunakan alam dan dunia di sekitar kita sebagai inspirasi. Meskipun sering terlihat dalam desain produk, desain interior, dan desain grafis, tren ini sekarang mulai mendapatkan momentum di dunia desain web juga.

Tren desain Organik dipengaruhi oleh peningkatan fokus pada keberlanjutan dan lingkungan, yang menampilkan warna hangat dan bersahaja, bentuk alami, dan tekstur organik mentah - seperti yang terlihat di situs web ini dari Ora Floral Agency, A Better Source, dan Melbourne's Abbotsford Convent.

Warna netral meniru palet alami lingkungan kita, dan merupakan salah satu cara termudah dan paling efektif untuk menambahkan lebih banyak nuansa organik ke situs web Anda. Selain warna cokelat lembut, beige dan putih, pink pudar, biru, dan hijau juga bisa menjadi tambahan yang bagus untuk palet warna netral, yang bisa digunakan sendiri atau dipasangkan dengan warna yang lebih cerah untuk membuatnya menonjol.

“Saya telah memperhatikan beberapa situs web beralih ke palet warna hangat yang bersahaja, yang merupakan perubahan yang disambut baik dari nada sejuk cerah yang biasanya kita lihat mendominasi layar kita,” kata Tahlia.

Untuk kembali ke dasar-dasar desain organik, lihat Mirabilis Portofolio Photoshop Template oleh Amabile, Portfolio Creative Lookbook oleh dirtylinestudio, atau Koleksi Bentuk & Pemandangan Alam oleh pixelbuddha_graphic di Envato Elements! Atau, masuklah ke dalam koleksi Earth Tones kami.

06. Ilustrasi

Ilustrasi benar-benar meledak tahun ini di seluruh desain grafis, media sosial, dan desain web. Banyak merek, bisnis, dan pencipta yang mengikuti popularitas ilustrasi dan seni digital, dengan banyak yang sekarang mengintegrasikan elemen yang digambar tangan ke dalam desain situs web mereka - termasuk perusahaan asuransi kesehatan seperti AHM dan bahkan merek fashion mewah Gucci.

Sebagai lanjutan dari desain organik, ilustrasi sangat bagus untuk menambahkan sentuhan otentik yang licik ke desain web Anda dan memberikan kesan ramah pada situs web Anda. Dengan peningkatan fokus pada keragaman dan representasi dalam desain pada tahun 2020, banyak ilustrator kini menampilkan orang-orang unik dari segala bentuk dan ukuran, gaya yang biasa disebut sebagai "tubuh aneh".

Ilustrator 3D dan penulis Elemen Amrit Pal Singh adalah pendukung besar untuk ilustrasi yang lebih unik dan inklusif ini, dengan fokus pada keragaman, individualitas, dan representasi dalam karyanya.

“Ilustrasi dan desain karakter selama bertahun-tahun telah benar-benar menetapkan standar kecantikan dan kepentingan yang salah. Mata almond, kulit cerah, dan tipe tubuh tertentu; kami dibesarkan dengan menonton kartun yang menciptakan bias ini, ”kata Amrit. “Sebagai kreator dan artis, itu tugas kita untuk memperbaikinya. Kita perlu secara sadar memikirkan representasi di setiap tahap. Saya selalu berusaha untuk membuat pekerjaan saya lebih beragam dan inklusif. "

Untuk mengintegrasikan ilustrasi ke dalam desain web Anda, lihat koleksi ilustrasi 3D ini. Atau lihatlah Wajah Mainan Ilustrasi 3D Karakter Pride ini oleh amritpaldesign, Taruih Sign Up Header by usedesignspace, dan Marketing Flat Illustration oleh roundicons di Envato Elements!

07. Fungsionalitas, Inklusivitas & Aksesibilitas

Fungsionalitas situs web selalu menjadi aspek kunci dari desain web. Namun, seiring dengan waktu muat yang cepat, kecepatan halaman, dan desain yang ramah seluler, peningkatan fokus pada inklusivitas dan aksesibilitas telah menciptakan kebutuhan yang semakin besar akan desain web untuk memperhitungkan kebutuhan penyandang disabilitas, dan membuat situs web dapat diakses dan berfungsi untuk semua. .

Untungnya, desain web yang dapat diakses diadopsi oleh lebih banyak merek dan bisnis - seperti pusat e-niaga Blue Receipt dan merek makanan kucing yang tidak merepotkan Cat Person - dan memiliki situs web yang fungsional, dapat diakses, dan ramah pengguna yang dapat dinavigasi dengan mudah oleh setiap pengunjung. sekarang penting untuk memberikan pengalaman online yang efektif.

Mengoptimalkan situs web Anda agar lebih fungsional, dapat diakses, dan inklusif tidak hanya baik untuk layanan pelanggan - itu juga meningkatkan konversi, meningkatkan SEO Anda, dan memperluas jangkauan audiens Anda.

Beberapa cara untuk membuat situs web Anda 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.

“Secara keseluruhan, saya telah melihat peningkatan yang nyata dari standar di situs web yang dirancang dengan baik, fungsional, dan dapat diakses yang benar-benar positif,” kata Sean. “Saya telah mengamati hal ini melalui warna kontras yang lebih tinggi, tipografi besar, salinan otentik, dapat dihubungkan, tombol besar, dan elemen UI yang melengkung lembut. Saya agak optimis percaya ini karena pemahaman dan apresiasi yang berkembang terhadap nilai desain yang baik dapat menambah bisnis. ”

Untuk membuat desain web Anda lebih fungsional dan inklusif, coba Portofolio Bisnis yang Dapat Diakses ini & Tema WordPress WooCommerce, Tema WordPress Desainer Produk untuk WooCommerce atau Pengaya Suara - Plugin Teks ke Suara ini untuk WordPress di CodeCanyon. Atau, lihat lebih banyak item di bawah ini di Envato Elements!

08. Gerakan & Interaktivitas

Video terbukti menjadi bentuk konten online yang paling menarik, jadi tidak mengherankan jika gerakan juga menjadi tren besar dalam desain web. Digunakan di mana saja mulai dari situs web butik seperti Alter Mind dan Gridspace hingga halaman saran karier SEEK, gerakan dan animasi dalam desain web adalah cara sederhana untuk membuat halaman web biasa menjadi lebih menarik dan menarik.

Dengan nada yang sama, banyak merek dan bisnis - seperti YouTube Rewind - mulai menambahkan lebih banyak elemen interaktif ke situs web mereka, termasuk kuis, game, jajak pendapat, dan survei. Contoh yang bagus adalah Estee Lauder, yang situs webnya menampilkan permainan arkade interaktif yang disebut 'THE ANRCADE' - sebuah pencarian futuristik yang berfokus pada mendapatkan 'poin kekuatan yang membangkitkan remaja' untuk mempromosikan krim Perbaikan Malam Tingkat Lanjut mereka.

Selain menjadi tambahan yang menyenangkan untuk pengalaman online, interaktivitas adalah cara yang bagus untuk melibatkan pengunjung Anda sekaligus mempelajari lebih lanjut tentang mereka. Namun, penting untuk mencapai keseimbangan dan memastikan gerakan atau elemen interaktif Anda tidak mendominasi atau mengganggu tujuan situs web Anda.

“Karena teknologi terus meningkat, semakin mudah untuk memanfaatkan dan menerapkan gerakan pada desain Anda, yang dapat memberikan pengalaman yang menyenangkan (bila digunakan dengan tepat),” kata Sean. "Saya melihat ini dilakukan dengan baik saat bertransisi antar konten, dan berinteraksi dengan elemen."

Untuk menambahkan lebih banyak gerakan dan interaktivitas ke situs web Anda, lihat Animasi Lottie untuk Elementor ini oleh merkulove, Tipografi Animasi oleh motionbeard, dan Elemen Coretan ini oleh FlashFXbox di Envato Elements!

09. Desain 3D & Geometris

Pola dan elemen geometris sering digunakan dalam dunia desain web modern - termasuk bentuk datar klasik seperti poligon, berlian, persegi panjang, segitiga, dan sesekali belah ketupat. Namun, tren desain web geometris telah berkembang untuk juga menyertakan elemen yang lebih modern seperti bentuk 3D, objek mengambang, dan garis kisi yang terlihat.


Penggunaan bentuk 3D dan objek mengambang dalam desain geometris memadukan gerakan surealis dengan objek realistis, menciptakan efek futuristik yang memukau - gaya yang dipopulerkan oleh gerakan berputar dan ditangguhkan yang sering digunakan dalam iklan teknologi untuk memamerkan produk baru. Ini sempurna untuk menambahkan lapisan atau dimensi lain ke desain web Anda, untuk memastikan situs web Anda memikat pengunjung Anda - seperti yang terlihat di situs web ini oleh The Artery, yang memasangkan elemen geometris dengan garis kisi minimalis dan sederhana untuk menata situs web mereka.

Berbeda dengan sifat kompleks 3D dan objek mengambang, penggunaan garis kisi sederhana, batas, dan elemen struktural lainnya juga telah menjadi gaya tren di ruang desain web - seperti di situs web ini oleh Rail Road Ladies, Monograph Comms dan The Imagineers.

"Saya juga melihat munculnya kembali lebih banyak elemen geometris dan garis kisi yang terlihat dalam desain web, yang menurut saya adalah seseorang yang menyukai struktur dan keteraturan," kata Sean.

Untuk mendapatkan geometris dengan desain web Anda, lihat Koleksi Objek 3D dan Koleksi Objek Mengambang di Envato Elements. Atau coba Halaman Arahan Terhubung ini oleh cerpow, Desain latar belakang warna cair oleh graphics4u dan Template Oscar untuk Perusahaan Rintisan, Portofolio & Agensi oleh designova!

10. Pembuat Halaman Wordpress & Kit Template

Dalam beberapa tahun terakhir, templat situs web swalayan dan pembuat halaman semakin populer. Pembuat situs web seperti Elementor dan Wordpress Gutenberg berarti bahwa, saat ini, bahkan orang yang paling tidak paham teknologi atau berpikiran desain dapat membuat situs web profesional dalam waktu singkat.

Pembuat halaman cepat, bebas kode, dan sepenuhnya fleksibel, menawarkan tata letak profesional dan penyesuaian tanpa batas bagi mereka yang tidak memiliki pengetahuan desain atau pengkodean.

Dengan sedikit sesuatu untuk semua orang, Envato Elements Template Kits for Elementor menawarkan berbagai macam desain dan template situs web yang profesional dan kohesif untuk segala hal mulai dari beranda hingga halaman kontak Anda. Kategori baru template pra-desain Envato dirancang untuk berjalan seiring dengan pembuat halaman WordPress Anda - yang membuatnya sangat mudah untuk membuat dan menjalankan situs web dalam waktu singkat.