20 Gaya Desain Web
dan Garis Keturunannya dari Poster
Desain web tidak muncul tiba tiba, ada sejarahnya. Grid, tipografi, warna, ornamen, bahkan pemberontakannya punya jejak panjang dari poster Art Nouveau hingga Swiss Style sebelum berubah menjadi flat design, bento grid, dan pengalaman imersif.
20
Gaya Populer
100+
Tahun Evolusi Visual
7
Chapter Praktis
Ditulis oleh Anjrah Ari Susanto, S.Psi.
Founder & Pengajar Alanotech
Ringkasan Cepat
Desain web mewarisi bahasa desain poster dan grafis. Art Nouveau serta Art Deco memperkenalkan ornamen dan geometri, Bauhaus serta De Stijl merapikan bentuk, lalu Swiss Style menegaskan grid, tipografi sans serif, dan hierarki. Era digital menerjemahkannya menjadi flat design, kemudian melahirkan banyak turunan seperti glassmorphism, neo-brutalisme, bento grid, motion, dan 3D. Artikel ini membedah ciri visual, sejarah singkat, brand pengguna, serta waktu yang tepat untuk memakai 20 gaya populer.
Garis Waktu Visual
Dari Dinding Kota ke Layar di Tangan
Bayangkan halaman web sebagai poster yang dapat disentuh, digulir, berubah ukuran, dan merespons pengunjung.
1890-an
Art Nouveau membawa garis organik dan ilustrasi dekoratif.
1920-an
Art Deco, Bauhaus, dan De Stijl menyaring bentuk menjadi geometri.
1950-an
Poster Müller-Brockmann mengukuhkan grid Swiss yang objektif.
2010-an
Flat design membuang skeuomorfisme dan merapikan antarmuka.
2020-an
Bento, kaca, brutal, motion, dan 3D hidup berdampingan.
Web adalah poster yang hidup
Poster mengatur perhatian pada satu bidang. Web mengerjakan hal yang sama sambil menambahkan waktu, interaksi, responsivitas, dan perilaku pengguna.
Navigasi
Peta 20 Gaya Desain Web
Tujuh chapter dari fondasi grafis sampai cara memilih sistem visual.
Fondasi Klasik dan Bahasa Kemewahan
Sebelum piksel, desainer telah memecahkan persoalan yang sama melalui poster, buku, dan identitas visual. Mereka mengatur fokus, membangun suasana, dan membuat pesan dikenali dari kejauhan. Tiga gaya berikut menunjukkan bagaimana sejarah lama tetap terasa modern saat dipindahkan ke layar.
1. Minimalisme dan Swiss Style
Ciri visualnya berupa grid bersih, sans serif, warna netral, hierarki tegas, dan whitespace luas. Akarnya tumbuh dari International Typographic Style pada 1950-an, terutama poster Josef Müller-Brockmann yang memakai grid matematis agar informasi terasa objektif. Apple, Google, dan Squarespace menggunakannya untuk membuat produk menjadi pusat perhatian. Gaya ini cocok bagi teknologi, layanan profesional, portofolio, dan produk yang membutuhkan kepercayaan serta navigasi cepat.
2. Art Deco dan Luxe Vintage
Ciri visualnya meliputi geometri tajam, simetri, garis berundak, warna hitam, emas, dan ornamen mewah. Art Deco berkembang pada 1920-an sebagai perayaan mesin, kemajuan, dan kemewahan setelah era Art Nouveau yang lebih organik. Kini bahasa ini banyak hadir pada situs hotel, properti premium, label luxury, dan bisnis heritage. Gunakan saat brand menjual eksklusivitas, sejarah, perayaan, atau pengalaman berkelas, bukan saat produk harus tampak murah dan utilitarian.
3. Editorial dan Magazine
Ciri visualnya tampak melalui judul besar, kolom, ritme foto dan teks, serif ekspresif, serta ruang yang terasa seperti halaman majalah. Asalnya berasal dari tata letak koran, buku, dan majalah yang selama berabad-abad mengembangkan hierarki untuk bacaan panjang. Anthropic memakai nuansa krim dan hangat, sementara Patagonia dan Ottolenghi menggabungkan editorial dengan cerita brand. Gaya ini cocok untuk media, thought leadership, kuliner, fashion, dan brand yang menjadikan narasi sebagai produk utama.
Insight desain
Minimalisme bukan berarti menghapus sebanyak mungkin. Intinya adalah menyisakan elemen yang mempunyai tugas jelas, seperti editor poster yang menjaga mata tetap bergerak menurut urutan.
Ketertiban juga punya karakter
Grid Swiss bisa terasa dingin, Art Deco bisa terasa megah, dan editorial bisa terasa intelektual. Struktur yang sama memperoleh suara berbeda melalui tipografi, warna, dan proporsi.
- Pilih Swiss Style ketika kejelasan dan kredibilitas menjadi prioritas.
- Pilih Art Deco untuk pengalaman premium yang punya akar sejarah.
- Pilih editorial ketika cerita panjang dan fotografi harus sama kuatnya.
Permukaan Digital dan Ilusi Kedalaman
Ketika antarmuka berpindah dari desktop ke ponsel, desainer harus menyeimbangkan keterbacaan, sentuhan, dan identitas. Sebagian gaya meratakan layar agar efisien. Sebagian lain mengembalikan kedalaman melalui bayangan, blur, dan volume.
4. Flat Design
Ciri visualnya berupa ikon datar, bidang warna solid, bentuk sederhana, dan minim tekstur atau bayangan. Ia menjadi arus utama pada awal 2010-an ketika Microsoft Metro dan kemudian desain mobile meninggalkan skeuomorfisme. Secara silsilah, flat design adalah pewaris Swiss Style di dunia digital karena sama-sama mengutamakan fungsi dan hierarki. Microsoft dan Airbnb menjadi contoh penggunaan yang matang. Gaya ini cocok untuk aplikasi, dashboard, layanan publik, dan produk yang harus cepat dimuat serta mudah dipahami.
5. Glassmorphism
Ciri visualnya adalah kartu transparan, blur latar, garis tipis, dan lapisan seolah kaca buram. Jejaknya terlihat sejak antarmuka Aero, lalu populer kembali melalui macOS dan ekosistem desain modern. Apple, Discord, dan Figma menggunakan efek kaca untuk menandai lapisan dan konteks. Gaya ini cocok bagi hero, panel media, aplikasi kreatif, dan produk teknologi premium. Pastikan kontras teks tetap tinggi karena kaca yang indah dapat merusak aksesibilitas.
6. Neumorfisme
Ciri visualnya memakai bayangan lembut ganda sehingga tombol tampak timbul dari permukaan yang sama. Gaya ini muncul sekitar 2019 sebagai perpaduan flat design dan skeuomorfisme. Stripe, eksplorasi antarmuka Apple, serta sejumlah platform fintech memakai sentuhan serupa secara terbatas. Neumorfisme cocok untuk kontrol sederhana, aplikasi wellness, dan prototipe berkesan taktil. Jangan menerapkannya pada seluruh navigasi karena batas komponen dapat terlalu samar.
7. Claymorphism
Ciri visualnya berupa objek tiga dimensi yang menggelembung, sudut sangat bulat, shadow lembut, dan warna cerah. Ia tumbuh dari tren ilustrasi 3D ramah pada awal 2020-an, seperti tanah liat digital yang lebih ekspresif daripada neumorfisme. Brand fintech, D2C, dan aplikasi wellness sering memakainya agar topik kompleks terasa bersahabat. Pilih gaya ini untuk onboarding, edukasi, layanan keluarga, dan produk yang ingin tampil optimistis, tetapi batasi aset 3D agar performa tetap baik.
Kedalaman harus menjelaskan
Blur, bayangan, dan volume sebaiknya menerangkan lapisan, keadaan tombol, atau urutan fokus. Jika hanya menjadi hiasan, efek tersebut menambah beban tanpa menambah makna.
Permukaan bukan sekadar kosmetik
Dalam antarmuka, pengguna harus tahu mana latar, mana kartu, mana tombol, dan mana elemen aktif sebelum sempat mengagumi efek visualnya.
- Uji kontras teks pada semua latar transparan.
- Gunakan shadow untuk status dan hierarki, bukan dekorasi semata.
- Kompres ilustrasi 3D dan siapkan alternatif untuk perangkat lemah.
Tatanan Grid dan Hierarki Informasi
Poster modern mengajarkan bahwa posisi elemen adalah argumen. Grid membantu pembaca memahami hubungan, sedangkan skala huruf menentukan pesan mana yang diterima pertama kali. Di web, dua pendekatan ini berkembang menjadi sistem modular yang responsif.
8. Bento Grid
Ciri visualnya berupa kotak modular dengan ukuran berbeda, radius konsisten, dan satu ide per kartu. Namanya merujuk pada bento box Jepang, tetapi silsilahnya juga terhubung ke box-grid poster dan sistem modular Swiss. Apple memopulerkan presentasi fitur berbentuk bento, disusul Linear, Notion, Vercel, dan Ramp. Pada 2026, bento grid sudah mendekati standar industri untuk landing page produk. Gaya ini cocok bagi SaaS, showcase fitur, dashboard, dan portofolio dengan banyak jenis konten.
9. Big Typography dan Type-led
Ciri visualnya menjadikan satu kata, angka, atau huruf raksasa sebagai hero. Pendekatan ini mewarisi poster iklan, Swiss Style, dan eksperimen tipografi modernis yang menggunakan huruf sebagai gambar. Nike serta kampanye Spotify sering memakainya, begitu pula banyak brand fashion. Gaya ini cocok saat pesan utama singkat, identitas verbal kuat, dan foto produk tidak perlu mendominasi. Hindari jika headline panjang atau harus diterjemahkan ke banyak bahasa tanpa perencanaan responsif.
Bento bukan kumpulan kartu acak
Bento yang baik mempunyai kartu dominan, ritme ukuran, dan urutan baca. Tanpa hierarki, ia hanya menjadi dashboard yang ramai.
Ukuran adalah suara
Tipografi besar tidak otomatis berteriak. Dengan ruang yang cukup, huruf besar justru dapat terasa tenang, percaya diri, dan mudah diingat.
- Tentukan satu kartu atau pesan yang menjadi pintu masuk.
- Jaga ritme gutter dan radius agar modul terasa satu keluarga.
- Uji headline pada layar kecil dan pada terjemahan terpanjang.
Pemberontakan Visual dan Ekspresi
Setiap sistem yang mapan melahirkan perlawanan. Ketika web korporat terlalu rapi dan seragam, desainer memunculkan permukaan mentah, border keras, warna menabrak, dan kepadatan ekstrem untuk mengembalikan identitas.
10. Brutalisme
Ciri visualnya meliputi layout mentah, tipografi keras, warna terbatas, tautan yang jelas, dan hampir tanpa border-radius. Namanya meminjam semangat arsitektur brutalist, sementara bahasa visualnya mengingatkan pada poster konstruktivis dan web awal yang belum dipoles. Balenciaga, Bloomberg, Craigslist, dan Concrete Playground menunjukkan spektrum penerapannya. Brutalisme cocok bagi media, seni, fashion eksperimental, direktori, atau brand yang ingin anti-korporat. Ia kurang cocok untuk layanan yang membutuhkan rasa lembut dan aman.
11. Neo-brutalisme dan Anti-design
Ciri visualnya memakai border tebal, hard shadow, warna primer atau pastel terang, bentuk datar, dan komposisi yang sengaja terasa canggung. Ia memperbarui brutalisme untuk produk modern dengan pengaruh poster punk, komik, serta grafis internet. Gumroad menjadi rujukan kuat, sedangkan Diesel, kampanye Mailchimp, dan ekosistem Figma memakai elemennya. Tren Swiss-grid brutalist-revival pada 2026 tampak pada Teenage Engineering, Resend, Carta, dan Mercury. Gaya ini cocok bagi kreator, startup, komunitas, dan brand muda yang ingin tampil jujur serta berani.
12. Maximalisme dan Dopamine Design
Ciri visualnya adalah warna sangat terang, kolase tumpang tindih, banyak pola, tipografi campuran, dan kejutan di setiap area. Akar sejarahnya menjalar dari poster psikedelik, pop art, zine, serta budaya klub yang menolak kesunyian modernisme. Spotify dan Liquid Death memanfaatkan kepadatan untuk energi kampanye dan karakter yang sukar dilupakan. Gaya ini cocok bagi musik, minuman, event, budaya pop, dan kampanye musiman. Ia membutuhkan disiplin aksesibilitas serta satu jalur tindakan yang tetap mudah ditemukan.
Kekacauan tetap perlu sutradara
Anti-design yang efektif tampak spontan tetapi tetap menjaga tombol, struktur informasi, dan responsivitas. Kekacauan tanpa sistem hanyalah hambatan.
Berbeda bukan berarti sulit digunakan
Brand boleh melawan estetika arus utama, tetapi pengguna tidak seharusnya dihukum hanya karena ingin mencari harga, membaca teks, atau menekan tombol.
- Pertahankan pola interaksi umum meski tampilannya eksperimental.
- Sediakan ruang tenang di sekitar CTA utama.
- Uji aksesibilitas warna dan kurangi gerak bagi pengguna yang membutuhkannya.
Nostalgia, Warna, dan Budaya Pop
Nostalgia bekerja karena bentuk visual membawa memori sosial. Chrome mengingatkan perangkat lunak lama, grain mengingatkan kaset dan cetakan, sedangkan geometri Memphis membawa optimisme 1980-an. Desainer web memakai memori itu untuk membangun kedekatan secara instan.
13. Y2K dan Retro Nostalgia
Ciri visualnya meliputi warna dopamin, chrome, shimmer, gelembung, pixel, dan nuansa internet awal 2000-an. Gaya ini lahir dari daur ulang estetika milenium ketika teknologi tampak futuristis sekaligus naif. Lush, Headspace, dan Starface memanfaatkan kecerahan serta bentuk playful untuk mendekati generasi muda. Y2K cocok bagi beauty, fashion, musik, kampanye Gen Z, dan produk yang boleh tampil ringan. Gunakan secukupnya agar nostalgia tidak mengganggu keterbacaan.
14. Vaporwave serta Grain dan Noise
Ciri visualnya berupa neon pastel, gradient ungu-merah muda, patung klasik, grid digital, efek VHS, dan tekstur grain. Vaporwave tumbuh dari subkultur musik internet awal 2010-an yang mengolah nostalgia konsumerisme 1980-an dan 1990-an. Kini estetika ini sering digunakan brand musik, streetwear, festival, dan komunitas Y2K. Ia cocok untuk pengalaman atmosferik dan kampanye budaya, tetapi tekstur harus dioptimalkan agar tidak membuat teks kabur atau file membengkak.
15. Memphis Design
Ciri visualnya adalah pola geometris playful, warna primer, garis zigzag, titik, dan bentuk yang seolah tidak saling cocok. Memphis Group di Milan memperkenalkannya pada 1981 sebagai penolakan terhadap modernisme yang dianggap terlalu serius. MTV membantu menyebarkan semangat serupa, sementara Fanta dan brand fashion playful menghidupkannya kembali. Gaya ini cocok untuk produk anak, hiburan, makanan, acara, dan kampanye yang ingin terasa spontan serta optimistis.
16. Dark Mode dan Neon Techno-futurist
Ciri visualnya berupa latar gelap, aksen neon, gradient bercahaya, garis tipis, dan kontras tinggi. Akarnya menggabungkan terminal komputer, poster film fiksi ilmiah, budaya klub, serta estetika cyberpunk. YouTube, X, Slack, dan Figma menawarkan dark mode, sementara banyak produk AI menggunakannya sebagai identitas futuristis. Gaya ini cocok untuk hiburan malam, developer tools, gaming, AI, dan dashboard yang dipakai lama. Hindari hitam murni berlebihan dan uji halo visual pada teks.
Nostalgia perlu hubungan dengan produk
Referensi masa lalu efektif jika memperkuat karakter brand. Menempelkan chrome Y2K pada layanan hukum hanya karena sedang tren dapat menurunkan kepercayaan.
Memori adalah jalan pintas emosional
Satu tekstur grain atau bentuk zigzag dapat membangkitkan satu era. Tugas desainer adalah memilih memori yang selaras dengan janji brand.
- Tentukan era dan alasan bisnis sebelum memilih atribut retro.
- Gunakan tekstur sebagai lapisan, bukan penghalang teks.
- Pastikan dark mode mempunyai kontras nyaman, bukan sekadar neon menyala.
Gerak, Cerita, dan Dimensi
Inilah wilayah yang benar-benar membedakan web dari poster. Huruf dapat bergerak, adegan dapat berubah mengikuti scroll, dan produk dapat diputar. Meski teknologinya baru, prinsipnya tetap lama, yaitu mengarahkan perhatian dalam urutan tertentu.
17. Kinetic Typography dan Motion
Ciri visualnya berupa teks bergerak, transisi ritmis, hover responsif, dan micro-interaction yang memberi umpan balik. Akar sejarahnya datang dari judul film, motion graphics, iklan televisi, dan eksperimen tipografi futuris. Nike, Ralph Lauren, dan Jitter memakai gerak untuk energi, kemewahan, atau demonstrasi produk. Gaya ini cocok untuk kampanye, creative tools, fashion, dan hero yang memiliki pesan pendek. Selalu hormati preferensi reduced motion dan jangan menggerakkan seluruh layar sekaligus.
18. Scrollytelling
Ciri visualnya adalah perubahan adegan, parallax, data, atau animasi yang terikat pada posisi scroll. Pendekatan ini mewarisi urutan naratif buku, komik, pameran, dan dokumenter, lalu memberi pembaca kendali atas tempo. Apple sering menggunakannya di halaman produk, begitu pula Porsche dan studio peraih penghargaan desain web. Scrollytelling cocok untuk peluncuran produk, laporan dampak, jurnalisme data, dan cerita yang membutuhkan demonstrasi bertahap. Sediakan jalur ringkas bagi pengguna yang ingin langsung menuju spesifikasi atau harga.
19. 3D, WebGL, dan Immersive
Ciri visualnya berupa objek tiga dimensi interaktif, ruang virtual, pencahayaan realistis, dan kamera yang merespons pointer. Sejarahnya terhubung ke grafis komputer, permainan video, CAD, dan visualisasi produk sebelum WebGL membawanya ke browser tanpa plugin. IKEA, Tesla, BMW, dan Apple menggunakan 3D untuk menunjukkan bentuk, konfigurasi, serta material. Gaya ini cocok bagi otomotif, furnitur, arsitektur, perangkat keras, dan produk yang perlu dilihat dari banyak sudut. Wajib ada fallback ringan untuk jaringan dan perangkat terbatas.
20. Hand-drawn dan Ilustrasi Doodle
Ciri visualnya berupa garis tidak sempurna, coretan tangan, karakter unik, anotasi, dan tekstur organik. Ia berakar pada ilustrasi editorial, sketsa ide, zine, serta poster buatan tangan sebagai reaksi terhadap keseragaman digital. PostHog, Notion, dan Mailchimp memakai ilustrasi untuk membuat teknologi terasa manusiawi. Gaya ini cocok untuk edukasi, komunitas, developer tools, produk kreatif, dan brand yang perlu mengurangi kesan kaku. Bangun satu aturan ilustrasi agar doodle tetap konsisten lintas halaman.
Interaksi adalah bagian dari narasi
Animasi terbaik menjawab tindakan pengguna atau membuka informasi pada saat yang tepat. Ia bukan screensaver yang meminta perhatian tanpa tujuan.
Semakin imersif, semakin besar tanggung jawab
Pengalaman yang memukau tetap harus cepat, dapat dihentikan, dapat diakses, dan mempunyai alternatif ketika teknologi tidak tersedia.
- Berikan fungsi pada setiap animasi dan micro-interaction.
- Sediakan reduced motion, fallback gambar, dan navigasi yang tetap normal.
- Ukur performa pada perangkat menengah, bukan hanya laptop desainer.
Memilih Gaya Tanpa Menjadi Korban Tren
Dua puluh gaya ini bukan menu filter yang dipilih berdasarkan selera pribadi. Gaya adalah konsekuensi dari strategi. Sebuah fintech dapat memakai claymorphism pada onboarding untuk terasa ramah, lalu memakai grid Swiss pada halaman transaksi agar presisi. Brand fashion dapat memakai big typography sebagai panggung, sementara katalog produknya tetap tenang dan teratur.
Mulailah dari tugas halaman. Landing page perlu membangun keyakinan dan mendorong tindakan. Dashboard perlu mempercepat keputusan. Artikel perlu menjaga kenyamanan membaca. Portofolio perlu menunjukkan karakter. Setelah tugas jelas, cocokkan dengan suara brand, jenis konten, aksesibilitas, kemampuan tim, dan anggaran performa.
Pada 2026, Swiss-grid brutalist-revival menguat melalui Teenage Engineering, Resend, Carta, dan Mercury. Bento grid telah menjadi pola industri. Namun popularitas bukan bukti kecocokan. Sistem yang baik dapat bertahan saat warna tren berganti karena dibangun di atas hierarki, tipografi, ritme, dan tujuan yang benar.
Rumus praktis memilih gaya
Gunakan satu gaya sebagai struktur utama, satu gaya sebagai lapisan karakter, dan satu atau dua efek sebagai aksen. Contohnya, grid Swiss menjadi struktur, editorial menjadi suara, lalu glassmorphism hanya dipakai pada kartu hero.
Jangan mulai dari tren
Mulailah dari siapa yang membaca, apa yang harus mereka pahami, perasaan apa yang mendukung keputusan, dan tindakan apa yang harus menjadi mudah.
- Tulis tiga sifat brand dan tiga kebutuhan pengguna.
- Pilih referensi berdasarkan masalah serupa, bukan industri saja.
- Tentukan sistem grid, type scale, warna, radius, dan motion sebelum membuat banyak halaman.
- Uji prototipe pada pengguna serta perangkat nyata.
- Hapus efek yang tidak memperjelas informasi atau memperkuat karakter.
Ditulis Oleh
Anjrah Ari Susanto, S.Psi.
Founder dan Pengajar Alanotech yang membantu pembelajar menghubungkan strategi brand, psikologi, desain, serta teknologi. Ia mengajarkan vibecoding bukan sebagai cara membuat layar cepat, melainkan cara membangun produk digital yang punya alasan visual dan bisnis.
Baca Juga
Artikel Terkait untuk Memperdalam Praktik
Elemen Desain Website untuk Vibecoding
Pelajari elemen UI dan UX yang perlu dipahami sebelum meminta AI membuat website.
AEOS Core dan Panduan Vibecoding
Bangun produk dengan konteks, aturan, dan alur kerja yang lebih terarah.
Product Planning Sebelum Ngoding
Susun tujuan, pengguna, fitur, dan keputusan produk sebelum implementasi.
Project Brain untuk Setiap Proyek
Jaga keputusan desain dan teknis agar konsisten sepanjang proses.
Cara Berpikir Brand Strategist Holistik
Hubungkan visual dengan bisnis, komunikasi, pengalaman, dan perilaku.
Komposisi Foto yang Terasa Profesional
Pahami grid, fokus, ruang, dan hierarki melalui medium fotografi.
Desain yang kuat lahir dari sejarah yang dipahami, strategi yang jelas, dan eksekusi yang terukur.