{"id":12980,"date":"2023-01-17T11:04:00","date_gmt":"2023-01-17T04:04:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=12980"},"modified":"2023-01-17T09:10:32","modified_gmt":"2023-01-17T02:10:32","slug":"web-design-yang-trend-dan-hits","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/web-design-yang-trend-dan-hits\/","title":{"rendered":"10+ Web Design yang Trend dan Hits di 2023"},"content":{"rendered":"\n<p>Untuk memastikan website mampu menarik pengunjung, perlu mengetahui <em>trend web design<\/em> terbaru dongs, ya. Apakah saat membuat website dan sebagai perancangnya kalian merasa bingung mencari inspirasi web design yang menarik? Tak usah bingung karena ada referensi <em>trend web design<\/em> terbaik bagi kalian, loh. Okay, simak yuk <strong>10+ Web Design yang Trend dan Hits di 2023<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>10+ Web Design yang Trend dan Hits di 2023<\/strong><\/h2>\n\n\n\n<p>Mari simak pembahasannya satu persatu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Full-Page Header<\/strong><\/h3>\n\n\n\n<p><em>Full-page header<\/em> adalah header berukuran penuh yang mengisi sebagian besar halaman website. Peran <em>header <\/em>sangat penting ya karena menjadi hal pertama yang dilihat pengunjung website.&nbsp;<\/p>\n\n\n\n<p>Nah, untuk memudahkan membuat <em>full page header<\/em>, simak beberapa tips desain website berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Gunakan ukuran header website terbaik. <\/strong>Ukuran<em> full page header<\/em> yang disarankan adalah 1600\u00d7500 pixels. Jadi, bisa menampung elemen <em>header <\/em>dengan proporsional.<\/li><li><strong>Usahakan file header tidak terlalu besar.<\/strong> Disarankan ukurannya tidak lebih dari 400kb. Selain itu, gunakan format PNG yang sudah dioptimasi&nbsp; dengan <em>tools <\/em>semacam <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Tiny PNG<\/a>.<\/li><li><strong>Gunakan gambar header sesuai brand bisnis.<\/strong> Kalian bisa memasang gambar manusia untuk menciptakan kesan personal, <em>slider <\/em>untuk menampilkan produk-produk menarik, dan berbagai gambar lain yang mencerminkan bisnis kalian.<\/li><li><strong>Pertegas bagian yang paling penting. <\/strong>Bisa memperbesar atau mempertebal objek tertentu, seperti judul header, besaran diskon, dan sebagainya.<\/li><li><strong>Berikan CTA dengan desain yang menarik.<\/strong> Pastikan kalian membuat CTA yang menarik untuk mengarahkan pengunjung ke halaman lain sesuai tujuannya<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Gradient Color<\/strong><\/h3>\n\n\n\n<p><em>Gradient color<\/em> adalah desain yang menunjukkan transisi warna secara bertahap. <em>Trend website design<\/em> ini menciptakan kedalaman visual sehingga website terlihat lebih hidup.<\/p>\n\n\n\n<p>Website <a href=\"https:\/\/bud.agency\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bud Agency<\/a> bisa menjadi contoh. Seperti yang dapat kalian saksikan, pemakaian <em>gradient color<\/em> membuat website ini terlihat <em>eye-catching<\/em>. Pendekatan <em>trend web design<\/em> ini cocok untuk bisnis <em>agency<\/em>, kursus online atau sejenisnya.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"525\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-1-1160x525.jpg\" alt=\"web design yang trend\" class=\"wp-image-12982\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-1-1160x525.jpg 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-1-800x362.jpg 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-1.jpg 1380w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/figure><\/div>\n\n\n<p>Sebagai referensi, silakan gunakan tips untuk membuat <em>gradient color<\/em> ini:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Pilih warna yang sesuai dengan brand bisnis kalian.<\/strong> Sesuaikan gradasi warna pada desain website.&nbsp;<\/li><li><strong>Gunakan gradasi warna secukupnya.<\/strong> Cukup pilih dua sampai tiga warna saja untuk efek gradasi yang ditampilkan.<\/li><li><strong>Tentukan fokus desain.<\/strong> Gunakan teknik arah cahaya datang untuk membuat area gelap dan terang. Hal ini penting untuk menciptakan fokus.&nbsp;<\/li><li><em>Cari inspirasi di dunia nyata. <\/em>Silakan perhatikan objek nyata di sekitar kalian dan pelajari pola gradasinya. Gunakan sebagai inspirasi agar desain gradasi terlihat lebih <em>real<\/em>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Bold Font<\/strong><\/h3>\n\n\n\n<p>Jangan ragu menggunakan huruf tebal dalam desain website. <em>Bold font<\/em> masih menjadi <em>trend web design<\/em> tahun ini.<\/p>\n\n\n\n<p>Fungsinya adalah untuk mempertegas suatu elemen sekaligus digunakan untuk memandu pengunjung pada bagian yang ditonjolkan.&nbsp;<\/p>\n\n\n\n<p>Berikut adalah beberapa cara untuk membuat <em>bold font <\/em>yang menarik:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Tentukan porsi yang pas.<\/strong> Pastikan hanya bagian terpenting saja yang dipertegas.<\/li><li><strong>Atur kontras dengan baik. <\/strong>Sesuaikan warna <em>font <\/em>dengan warna latar belakang desain yang digunakan.<\/li><li><strong>Pilih jenis <em>font <\/em>yang tepat.<\/strong> Sesuaikan <em>font <\/em>yang digunakan dengan jenis desain dan <em>brand <\/em>bisnis kalian.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Human Face<\/strong><\/h3>\n\n\n\n<p>Siapa sangka jika <em>human face<\/em> menjadi<em> trend web design <\/em>yang menarik? Faktanya, desain yang menampilkan <em>human face<\/em> mampu membuat website terlihat lebih <em>powerful<\/em>, loh!<\/p>\n\n\n\n<p>Salah satu alasannya adalah website dengan<em> human face<\/em> mampu meningkatkan kredibilitas bisnis.<\/p>\n\n\n\n<p>Berikut ini tips menggunakan desain <em>human face<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Manfaatkan untuk membangun fokus pada produk.<\/strong> Hal ini penting bagi yang menjalankan bisnis <em>fashion <\/em>dan aksesoris.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-2.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"542\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-2-1160x542.jpg\" alt=\"web design\" class=\"wp-image-12983\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-2-1160x542.jpg 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-2-800x374.jpg 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-2.jpg 1380w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Gunakan pandangan mata ke arah informasi penting atau CTA.<\/strong> Langkah ini penting untuk membantu pengunjung website menemukan informasi paling penting dari sebuah website.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"305\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-3.png\" alt=\"web design hits\" class=\"wp-image-12984\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Tampilkan ekspresi sesuai <em>value <\/em>yang ditawarkan.<\/strong> Dengan cara ini bisa membangun kesan terkait produk sesuai tujuannya.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"552\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-4-1160x552.png\" alt=\"human face\" class=\"wp-image-12985\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-4-1160x552.png 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-4-800x381.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-4.png 1345w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Grid Layout<\/strong><\/h3>\n\n\n\n<p><em>Grid <\/em>adalah garis yang membagi halaman dalam beberapa kolom. Website <em>layout <\/em>ini sering digunakan <em>web designer<\/em> untuk membuat desain website dengan konten lebih tertata rapi.<\/p>\n\n\n\n<p>Jika menggunakan grid, tentu akan lebih mudah mengatur komposisi sehingga website jadi lebih menarik.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Hand-Drawn Design Element<\/strong><\/h3>\n\n\n\n<p>Ingin membangun ikatan personal dengan pengunjung website? Sok atuh, gunakan <em>hand-drawn design <\/em>saja. Sebab,<em> hand-drawn design <\/em>terlihat lebih natural daripada jenis design lainnya sehingga dapat menciptakan <em>engagement <\/em>yang lebih powerful.<\/p>\n\n\n\n<p>Eitss, tetap gunakan desain dengan proporsi yang tepat, ya. Jangan sampai terlalu fokus pada estetika hingga menghilangkan fungsionalitas website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>7. Progress Bar<\/strong><\/h3>\n\n\n\n<p>Progress Bar adalah elemen untuk menggambarkan kemajuan akan suatu hal pada sebuah website. Elemen ini biasanya digunakan untuk menunjukkan seberapa panjang halaman atau artikel yang sedang dibaca.<\/p>\n\n\n\n<p>FYI, website dengan desain progress bar akan tetap menjadi <em>trend <\/em>di tahun 2023 sebab 75% pengunjung website menyukainya. Bahkan, progress bar mampu membuat pengunjung termotivasi untuk mengakses website lebih lanjut.<\/p>\n\n\n\n<p>Berikut beberapa contoh ide progress bar yang bisa dijadikan inspirasi:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Tracking.<\/strong> Progress bar berbentuk jalan ini berfungsi untuk melacak progress pengiriman suatu barang.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"316\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-5.png\" alt=\"progress bar\" class=\"wp-image-12986\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Radial Progress Display.<\/strong> Progress bar ini cocok untuk menunjukkan <em>progress <\/em>dari konten yang menggunakan format <em>step by step<\/em>.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"238\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-6.png\" alt=\"progress bar\" class=\"wp-image-12987\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Progress saving.<\/strong> Dengan <em>custom <\/em>bentuk progress bar, kemajuan proses <em>saving<\/em>, <em>download<\/em>, dan berbagai proses lainnya bisa terlihat lebih menarik.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"202\" height=\"195\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-7.png\" alt=\"progress bar\" class=\"wp-image-12988\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Round progress bar. <\/strong>Progress bar ini cocok untuk berbagai kebutuhan dan bisa diletakkan secara horizontal maupun vertikal.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-8.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-8.png\" alt=\"progress bar\" class=\"wp-image-12989\" width=\"37\" height=\"96\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Color changing progress bar.<\/strong>&nbsp; Meski sederhana, transisi warna pada progress bar membuat proses menunggu lebih <em>fun <\/em>dan tidak membosankan.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-9.png\" alt=\"progress bar\" class=\"wp-image-12990\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>8. Ultra Minimalist Navigation<\/strong><\/h3>\n\n\n\n<p><em>Trend web design<\/em> ini akan membantu pengunjung lebih mudah menjelajahi website kalian, loh.<\/p>\n\n\n\n<p><em>Ultra minimalist navigation<\/em> juga membuat konten terlihat lebih <em>stand out<\/em>. Tujuan website pun dapat tersampaikan dengan lebih maksimal.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-10.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"557\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-10-1160x557.png\" alt=\"ultra minimalist\" class=\"wp-image-12991\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-10-1160x557.png 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-10-800x384.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-10.png 1380w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/figure><\/div>\n\n\n<p>Website Grab Indonesia, terlihat dengan menu yang ringkas, website jadi terlihat lebih <em>simple, <\/em>dan mudah dijelajahi. Selain itu, informasi pada website juga dapat tersampaikan dengan jelas.<\/p>\n\n\n\n<p>Berikut ini tips membuat navigasi yang minimalis:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Rancang hierarki menu dengan tepat. <\/strong>Tentukan menu utama yang ditampilkan sehingga tidak perlu menampilkan semua menu sekaligus di website kalian.&nbsp;<\/li><li><strong>Gunakan nama yang singkat dan jelas. <\/strong>Gunakan nama umum yang sudah dipahami pada menu navigasi website tersebut. Contohnya: Beranda, Kontak Kami, dan banyak lagi.<\/li><li><strong>Gunakan ikon. <\/strong>Dengan menggunakan ikon, tak perlu membuat penjelasan panjang pada tiap menu, ya.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>9. Mouseover Effect<\/strong><\/h3>\n\n\n\n<p><em>Mouseover effect<\/em> adalah efek yang membuat elemen website berubah terkait penggunaan <em>mouse<\/em>. Perubahan tersebut dapat berupa transisi warna pada suatu objek, modifikasi bentuk <em>cursor<\/em>, <em>zoom in<\/em>, dan banyak lagi.<\/p>\n\n\n\n<p>Berikut ini beberapa kelebihan penggunaan <em>mouseover<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Meningkatkan <em>user experience<\/em>.<\/strong> Adanya animasi, transisi warna, modifikasi bentuk, dan berbagai <em>mouseover effect<\/em> lainnya membuat website lebih interaktif.&nbsp;<\/li><li><strong>Menampilkan informasi lebih jelas.<\/strong> Perubahan elemen website saat ada interaksi dengan <em>mouse <\/em>bisa dimanfaatkan menonjolkan informasi utama. Jadi, akan lebih memudahkan pengunjung memahami informasinya.<\/li><li><strong>Website terlihat minimalis.<\/strong> Tak perlu langsung menampilkan informasi secara keseluruhan, kok. Sebab, bisa diatur agar informasi muncul saat di <em>mouse <\/em>menunjuk elemen tertentu. Dengan demikian, desain bisa dibuat lebih minimalis<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>10. White Space<\/strong><\/h3>\n\n\n\n<p><em>White space <\/em>adalah ruang kosong dalam website. Pemberian <em>white space <\/em>penting untuk menjaga tampilan website lebih minimalis sekaligus membuat informasi pada website mudah dipahami.<\/p>\n\n\n\n<p>Bahkan, penggunaan white space terbukti mampu meningkatkan pemahaman audiens hingga 20%.&nbsp;<\/p>\n\n\n\n<p>Simak yuk beberapa tips membuat <em>white space<\/em> pada website:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Gunakan background image yang sesuai.<\/strong> Pastikan gambar tersebut menyediakan ruang yang cukup untuk teks. Atur <em>transparency <\/em>pada format gambar sehingga teks yang ada di atasnya terlihat dengan jelas.&nbsp;<\/li><li><strong>Minimalkan penggunaan border pada gambar atau elemen lain pada website.<\/strong> <em>Border <\/em>akan memakan ruang pada website sehingga membuat website terlihat lebih padat.<\/li><li><strong>Gunakan teknik tipografi, seperti bold font, italic, dan banyak lagi.<\/strong> Penggunaan tipografi akan memudahkan teks untuk dibaca.<\/li><li><strong>Kelompokkan informasi pada halaman website kalian.<\/strong> Dengan begitu, informasi akan terlihat lebih terstruktur dan tidak terlalu padat.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>11. Dark Mode<\/strong><\/h3>\n\n\n\n<p><em>Trend Dark Mode<\/em> juga menjadi trend web design di tahun ini. Bahkan, WhatsApp dan Instagram sempat menjadi <em>trending topic <\/em>karena meluncurkan fitur <em>dark mode<\/em>. Ini menunjukkan bahwa cukup banyak orang yang menanti dan membutuhkan fitur ini.<\/p>\n\n\n\n<p>Selain fungsional, dark mode juga membuat website terlihat lebih elegan. Dengan menerapkan konsep dark mode, website tersebut terlihat lebih mewah dan nyaman dipandang. Konten yang disajikan pun lebih menonjol karena perbedaan warna yang kontras.<\/p>\n\n\n\n<p>Oia, sebelumnya pertimbangkan dulu ya jika ingin menggunakan <em>dark mode<\/em>. Alasannya, bisa saja tidak sesuai dengan bisnis dan audiens kalian.&nbsp;<\/p>\n\n\n\n<p>Simak tips penerapan <em>dark mode<\/em> berikut ini agar tidak salah penggunaan:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Atur kontras dengan sesuai. <\/strong>Pastikan level kontras antara teks dengan background mencapai standar minimum WCAG Level AA, yaitu 4,5:1. Silakan tes rasio warna dark mode dengan Tanaguru Contrast Finder.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-11.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1064\" height=\"784\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-11.png\" alt=\"dark mode\" class=\"wp-image-12992\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-11.png 1064w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-11-800x589.png 800w\" sizes=\"auto, (max-width: 1064px) 100vw, 1064px\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Jangan gunakan pure black sebagai warna background. <\/strong>Untuk meminimalkan ketegangan mata, pakailah warna dark grey (#474141) daripada pure black (#000000).<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-12.png\"><img loading=\"lazy\" decoding=\"async\" width=\"814\" height=\"438\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-12.png\" alt=\"dark mode\" class=\"wp-image-12993\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-12.png 814w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-12-800x430.png 800w\" sizes=\"auto, (max-width: 814px) 100vw, 814px\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Pilih warna yang sesuai untuk gambar dan teks.<\/strong> Daripada menggunakan warna yang tajam, gunakan warna yang lembut, seperti abu-abu muda, pastel, dan warna kalem lainnya. Warna yang terlalu tajam, seperti putih pada teks, akan membuat informasi sulit dibaca.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-13.png\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"513\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-13.png\" alt=\"dark mode\" class=\"wp-image-12994\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-13.png 805w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-13-800x510.png 800w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Bedakan warna elemen sesuai dengan hierarkinya.<\/strong> Semakin tinggi level hierarki maka warna yang digunakan pun semakin terang. Dengan begitu, audiens akan mudah membedakan antara warna latar dengan level elemen.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>12. Dynamic Scrolling<\/strong><\/h3>\n\n\n\n<p>Ingin menampilkan halaman website yang panjang tanpa membosankan? Pakai <em>dynamic scrolling<\/em>, yuk.! <em>Dynamic scrolling<\/em> yaitu transisi antarhalaman dengan efek animasi saat pengunjung menggulirkan <em>mouse<\/em>.<\/p>\n\n\n\n<p>Dengan <em>dynamic scrolling<\/em>, kalian akan punya website yang unik dan pastinya membuat pengunjung lebih betah.&nbsp;<\/p>\n\n\n\n<p>Ada beberapa jenis<em> dynamic scrolling<\/em> yang bisa dicoba:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Horizontal scrolling<\/strong><\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-14.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"557\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-14-1160x557.png\" alt=\"dynamic scrolling\" class=\"wp-image-12995\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-14-1160x557.png 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-14-800x384.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-14-1536x737.png 1536w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-14.png 1600w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/figure><\/div>\n\n\n<p><em>Horizontal scrolling<\/em> merupakan teknik <em>scrolling <\/em>yang mana pengguna menggulir website dari kiri ke kanan. Teknik ini cocok bagi website dengan konten yang banyak menunjukkan konten visual, seperti komik.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Infinite scrolling<\/strong><\/li><\/ul>\n\n\n\n<p><em>Infinite scrolling<\/em> adalah teknik <em>scrolling <\/em>yang mana animasi pada website muncul ketika pengguna menggulir ke bawah. Teknik Infinite Scrolling cocok untuk website dengan format <em>one single page<\/em>. Selain itu, cara <em>scrolling <\/em>ini direkomendasikan untuk website dengan konsep <em>story telling<\/em>.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Parallax scrolling<\/strong><\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"552\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-15-1160x552.png\" alt=\"web design yang trend\" class=\"wp-image-12996\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-15-1160x552.png 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-15-800x381.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/01\/10-Web-Design-yang-Trend-15.png 1380w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/figure><\/div>\n\n\n<p><em>Parallax scrolling<\/em> yaitu teknik <em>scrolling <\/em>yang mana objek di atas latar belakang diatur dengan kecepatan berbeda seiring audiens menggulir website. Hal ini menimbulkan efek animasi sehingga objek pada website terlihat bergerak.<\/p>\n\n\n\n<p>Santuy, apapun jenis <em>dynamic scrolling <\/em>yang digunakan, akan tetap membuat website tampil unik.! Baik dengan <em>horizontal<\/em>, <em>infinite<\/em>, <em>parallax scrolling<\/em>, dan jenis <em>dynamic scrolling <\/em>lainnya.<\/p>\n\n\n\n<p>Jadi gimana, Guys? Sudah mempertimbangkan untuk memperbarui desain website kalian, kah? Silakan pilih sesuai kebutuhan website kalian dan tentunya menawarkan <em>user experience<\/em> yang lebih optimal.<\/p>\n\n\n\n<p>Semoga bermanfaat dan tunggu info-info menarik lainnya dari kami, ya \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Untuk memastikan website mampu menarik pengunjung, perlu mengetahui trend web design terbaru dongs, ya. Apakah saat membuat website dan sebagai perancangnya kalian merasa bingung mencari inspirasi web design yang menarik? Tak usah bingung karena ada referensi trend web design terbaik bagi kalian, loh. Okay, simak yuk 10+ Web Design yang Trend dan Hits di 2023 &#8230; <a title=\"10+ Web Design yang Trend dan Hits di 2023\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/web-design-yang-trend-dan-hits\/\" aria-label=\"Read more about 10+ Web Design yang Trend dan Hits di 2023\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":12981,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[283,7,4254,1660,4255],"class_list":["post-12980","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-domain-murah","tag-hosting-murah","tag-trend-web-design","tag-web-design","tag-web-design-hits","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=12980"}],"version-history":[{"count":2,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12980\/revisions"}],"predecessor-version":[{"id":13026,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12980\/revisions\/13026"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/12981"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=12980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=12980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=12980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}