Referensi desain

Galeri Gaya Tampilan Web UI & Blog

Setiap gaya punya karakter, suasana, dan kasus pakai berbeda. Jelajahi 22 gaya di bawah ini — mulai dari tren terbaru 2026 seperti Discomorphism dan Liquid Glass, hingga klasik seperti Neumorphism dan Bento Grid — lengkap dengan contoh tampilannya untuk membantumu memilih arah desain blog atau aplikasimu.

22 gaya ditampilkan

Contoh tampilan gaya DiscomorphismTren 2026Baru

Discomorphism

Logo & ikon yang berkilau bak bola disko.

Micro-trend viral 2026 yang merender logo, ikon, dan elemen brand sebagai permukaan mosaik cermin layaknya bola disko. Memadukan nostalgia Y2K, skeuomorphism, dan tekstur hasil AI sebagai perlawanan terhadap flat minimalism yang generik.

Permukaan mosaik cerminKilau & refleksi pelangiNuansa Y2KTekstur glitter/chrome
Cocok untuk: Brand musik, event, kampanye playful, merch
Contoh tampilan gaya Liquid GlassTren 2026Baru

Liquid Glass

Glassmorphism yang membias dan mengalir.

Evolusi glassmorphism yang menambahkan refraksi, distorsi, dan gerak. Alih-alih sekadar blur, kaca disusun berlapis (displacement latar, refraksi tepi, dan specular highlight) sehingga konten di belakangnya tampak membias seperti kaca cair nyata. Terinspirasi bahasa desain Apple.

Refraksi & distorsiSpecular highlightArsitektur 4 lapisTepi membias
Cocok untuk: Hero section, modal, navigasi mengambang premium
Contoh tampilan gaya Spatial 3D / Depth UITren 2026Baru

Spatial 3D / Depth UI

Antarmuka berdimensi dengan kedalaman Z.

UI berbasis browser yang memanfaatkan sumbu Z untuk kedalaman nyata, sering ditenagai WebGL dan Three.js. Kartu dan objek melayang dalam ruang dengan perspektif, parallax, dan pencahayaan realistis untuk pengalaman imersif.

Kedalaman sumbu ZWebGL / Three.jsParallax & perspektifObjek 3D interaktif
Cocok untuk: Showcase produk, portofolio imersif, brand teknologi
Contoh tampilan gaya Kinetic TypographyTren 2026Baru

Kinetic Typography

Huruf raksasa yang hidup dan bergerak.

Tipografi sebagai elemen visual utama menggunakan variable font yang beranimasi mengikuti scroll atau interaksi pengguna. Berat, lebar, dan bentuk huruf berubah dinamis menciptakan kesan ekspresif dan sinematik.

Variable fontAnimasi saat scrollTipografi raksasaEkspresif & sinematik
Cocok untuk: Agensi kreatif, landing page brand, halaman editorial
Contoh tampilan gaya Tactile / TexturedTren 2026Baru

Tactile / Textured

Sentuhan fisik kembali ke layar.

Kembalinya isyarat fisik seperti grain, emboss, dan bayangan lembut yang memadukan flat design dengan elemen skeuomorphic. Memberi tekstur kertas, kain, dan kedalaman halus agar antarmuka terasa hangat dan nyata.

Grain & teksturEmboss & debossBayangan lembutPalet hangat netral
Cocok untuk: Brand artisan, produk lifestyle, blog hangat
Contoh tampilan gaya AI-Native / ConversationalTren 2026Baru

AI-Native / Conversational

Prompt sebagai pusat antarmuka.

Pola desain di mana input prompt menjadi titik interaksi utama, dengan konten dan kartu yang dihasilkan secara dinamis serta dipersonalisasi. Chrome minimal, aksen glow lembut, dan status loading shimmer menjadi ciri khasnya.

Prompt sebagai intiKonten generatif dinamisPersonalisasi adaptifAksen glow & shimmer
Cocok untuk: Produk AI, asisten, alat pencarian generatif
Contoh tampilan gaya Neumorphism (Soft UI)2019–sekarang

Neumorphism (Soft UI)

Tombol yang seakan timbul dari permukaan.

Gaya yang memadukan latar monokromatik dengan bayangan ganda (terang dan gelap) sehingga elemen tampak seperti diekstrusi atau ditekan ke dalam permukaan. Lembut, tenang, dan futuristik.

Bayangan ganda lembutPalet monokromSudut membulatKontras rendah
Cocok untuk: Dashboard, pemutar musik, widget pengaturan
Contoh tampilan gaya Neo-Brutalism2020–sekarang

Neo-Brutalism

Mentah, jujur, dan penuh percaya diri.

Warna-warna terang yang berani, garis hitam tebal, bayangan keras tanpa gradasi, dan tipografi besar. Menolak kehalusan demi tampilan yang mencolok dan penuh karakter.

Garis hitam tebalWarna ngejrengHard shadowTipografi raksasa
Cocok untuk: Landing page kreatif, portofolio, brand muda
Contoh tampilan gaya Glassmorphism2020–sekarang

Glassmorphism

Panel kaca buram yang melayang.

Kartu transparan dengan efek blur (frosted glass), tepi tipis, dan latar gradien berwarna di belakangnya. Memberi kesan kedalaman berlapis dan modern.

Background blurTransparansiTepi tipis terangLatar berwarna
Cocok untuk: Hero section, kartu overlay, aplikasi mobile
Contoh tampilan gaya Minimalism / Flat DesignSelalu relevan

Minimalism / Flat Design

Sedikit itu lebih.

Ruang kosong yang luas, tipografi bersih, satu warna aksen, tanpa bayangan atau ornamen berlebih. Fokus penuh pada konten dan keterbacaan.

Banyak white spaceIkon flatSatu warna aksenTanpa ornamen
Cocok untuk: Blog, portofolio, dokumentasi, produk SaaS
Contoh tampilan gaya Material Design2014–sekarang

Material Design

Kertas dan tinta digital dari Google.

Sistem desain Google yang memakai metafora lapisan kertas: elevasi lewat bayangan berlapis, warna primer berani, grid teratur, dan animasi ripple.

Elevasi & bayanganFloating action buttonGrid teraturAnimasi ripple
Cocok untuk: Aplikasi Android, web app produktif
Contoh tampilan gaya Skeuomorphism2007–2013, comeback

Skeuomorphism

Meniru benda nyata.

Antarmuka yang meniru tekstur dan material dunia nyata: kulit berjahit, logam, kertas, kaca mengkilap. Populer di era iOS awal dan kini kembali sebagai aksen.

Tekstur realistisBayangan & highlightMaterial nyataDetail kaya
Cocok untuk: Aplikasi nostalgia, game, skin pemutar media
Contoh tampilan gaya Claymorphism2021–sekarang

Claymorphism

Elemen empuk seperti tanah liat.

Kartu 3D menggembung dengan sudut sangat membulat, bayangan dalam dan luar yang lembut, serta warna pastel. Terasa ramah, ceria, dan menyenangkan.

Bentuk menggembungWarna pastelInner + outer shadowSudut sangat bulat
Cocok untuk: Produk anak, aplikasi edukasi, ilustrasi 3D
Contoh tampilan gaya Dark Mode UISelalu relevan

Dark Mode UI

Gelap, fokus, hemat mata.

Latar gelap charcoal dengan teks kontras tinggi dan satu aksen neon. Mengurangi kelelahan mata, menonjolkan data dan grafik, terkesan teknis dan premium.

Latar near-blackAksen neonKontras tinggiTepi halus
Cocok untuk: Dashboard analitik, alat developer, SaaS
Contoh tampilan gaya Editorial / MagazineKlasik–modern

Editorial / Magazine

Estetika majalah cetak di layar.

Tipografi serif elegan, hierarki kuat, tata letak multi-kolom, dan gambar besar. Mengutamakan ritme membaca dan kesan berkelas seperti media cetak.

Headline serifMulti-kolomHierarki kuatFoto besar
Cocok untuk: Blog, media berita, publikasi, esai panjang
Contoh tampilan gaya Retro / Vaporwave / Y2KNostalgia 80–2000an

Retro / Vaporwave / Y2K

Nostalgia digital yang berani.

Gradien sunset pink-teal, teks chrome mengkilap, grid horizon, dan nuansa CRT. Membangkitkan estetika 80an, 90an, hingga Y2K dengan sentuhan playful.

Gradien neonTeks chromeGrid horizonVibe CRT/pixel
Cocok untuk: Musik, event, brand kreatif, merch
Contoh tampilan gaya Swiss / International Style1950an–modern

Swiss / International Style

Grid, tipografi, dan rasionalitas.

Gaya tipografi internasional dengan sistem grid ketat, font sans-serif tegas (Helvetica), warna terbatas, dan komposisi asimetris yang seimbang. Bersih dan objektif.

Sistem grid ketatHelvetica/sans tegasAsimetri seimbangWarna terbatas
Cocok untuk: Poster, brand korporat, portofolio desainer
Contoh tampilan gaya Bento Grid2022–sekarang

Bento Grid

Kotak modular ala bento box.

Kumpulan kartu membulat dengan ukuran berbeda yang tersusun rapi seperti kotak bekal Jepang. Setiap tile menampilkan fitur, statistik, atau gambar. Populer di keynote Apple.

Tile beragam ukuranSudut membulatModular & rapiSatu aksen
Cocok untuk: Halaman fitur, profil, ringkasan produk
Contoh tampilan gaya Maximalism2021–sekarang

Maximalism

Lebih banyak adalah lebih.

Warna bertabrakan, pola berlapis, tipografi raksasa ekspresif, dan dekorasi padat. Kebalikan dari minimalisme: penuh energi, berani, namun tetap terkurasi.

Warna bertabrakanPola berlapisTipografi besarDekorasi padat
Cocok untuk: Agensi kreatif, fashion, brand ekspresif
Contoh tampilan gaya Aurora / Gradient Mesh2021–sekarang

Aurora / Gradient Mesh

Cahaya gradien yang mengalir lembut.

Latar mesh gradient berwarna yang mengalir halus dengan blob warna kabur, dipadu teks bersih dan kartu minimal yang melayang di atasnya. Modern dan menenangkan.

Mesh gradientBlob blurTeks bersihKartu minimal
Cocok untuk: Hero SaaS, halaman produk AI, startup
Contoh tampilan gaya Cyberpunk / Futuristic HUDTematik

Cyberpunk / Futuristic HUD

Antarmuka sci-fi yang menyala.

Latar gelap dengan neon cyan-magenta, panel bersudut tajam, aksen glitch, dan readout monospace. Terasa seperti HUD futuristik dari film fiksi ilmiah.

Neon cyan/magentaPanel bersudutAksen glitchTeks monospace
Cocok untuk: Game, web3, event tech, esports
Contoh tampilan gaya Memphis Design1980an, revival

Memphis Design

Geometri ceria penuh warna.

Bentuk geometris playful, garis zigzag, titik-titik, dan pola konfeti dengan warna primer berani. Gaya 80an yang ceria, energik, dan tak terduga.

Bentuk geometrisPola zigzag & titikWarna primerKomposisi ceria
Cocok untuk: Brand anak muda, event, ilustrasi, kampanye