10 Website Referensi UI/UX Paling Lengkap
2026-05-14 22:00:14 - Admin
<div> <style> :root{ --bg: #f6f9fc; --card: #ffffff; --text: #1f2937; --muted: #5b6472; --primary: #2563eb; --primary-soft: #dbeafe; --border: #e5e7eb; --accent: #14b8a6; --shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --radius: 18px; } *{ box-sizing: border-box; } body{ margin: 0; font-family: Arial, Helvetica, sans-serif; background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%); color: var(--text); line-height: 1.6; } .page{ max-width: 1180px; margin: 0 auto; padding: 24px; } .hero{ background: var(--card); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; } .hero-inner{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; padding: 28px; } .badge{ display: inline-block; background: var(--primary-soft); color: var(--primary); padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; margin-bottom: 14px; } h1{ margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; color: #0f172a; } .lead{ margin: 0; color: var(--muted); font-size: 16px; } .hero-image{ width: 100%; border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08); display: block; object-fit: cover; min-height: 280px; background: #eef4ff; } .section{ margin-top: 28px; background: var(--card); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); padding: 28px; } .section h2{ margin: 0 0 12px; font-size: 26px; color: #0f172a; } .section p{ margin: 0; color: var(--muted); } .list{ display: grid; gap: 18px; margin-top: 22px; } .item{ border: 1px solid var(--border); border-radius: 20px; padding: 22px; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); } .item-header{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 12px; } .item-title{ margin: 0; font-size: 22px; color: #0f172a; } .tag{ display: inline-block; padding: 7px 12px; border-radius: 999px; background: #ecfeff; color: #0f766e; font-size: 13px; font-weight: 700; border: 1px solid #c6f7f5; } .item-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; margin-top: 14px; } .box{ background: #f8fafc; border: 1px solid var(--border); border-radius: 16px; padding: 16px; } .box h3{ margin: 0 0 8px; font-size: 16px; color: #111827; } .box p, .box li{ color: var(--muted); font-size: 15px; } .box ul{ margin: 0; padding-left: 18px; } .meta{ margin-top: 14px; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .meta-card{ background: #f8fbff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .meta-card strong{ display: block; color: #0f172a; margin-bottom: 4px; } a{ color: var(--primary); word-break: break-word; } .source{ margin-top: 10px; font-size: 14px; } @media (max-width: 900px){ .hero-inner, .item-grid, .meta{ grid-template-columns: 1fr; } } @media (max-width: 640px){ .page{ padding: 14px; } .section, .hero-inner{ padding: 18px; } .item{ padding: 18px; } .section h2{ font-size: 22px; } .item-title{ font-size: 19px; } } </style> <div class="page"> <div class="hero"> <div class="hero-inner"> <div> <span class="badge">UI/UX Reference</span> <h1>10 Website Referensi UI/UX Paling Lengkap</h1> <p class="lead"> Halaman ini menampilkan kumpulan website referensi UI/UX yang sering digunakan untuk mencari inspirasi desain, mempelajari pola antarmuka, melihat tren visual, dan memahami praktik terbaik dalam pengalaman pengguna. Setiap website disusun secara vertikal lengkap dengan deskripsi, kelebihan, kekurangan, lama portal beroperasi, serta tautan menuju halaman resminya. </p> </div> <img class="hero-image" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80" alt="Ilustrasi website referensi UI/UX di layar laptop" > </div> </div> <div class="section"> <h2>Daftar Website Referensi UI/UX</h2> <p> Berikut 10 website yang banyak dipakai desainer untuk referensi UI/UX, riset komponen, dan eksplorasi tampilan antarmuka. </p> <div class="list"> <div class="item"> <div class="item-header"> <h3 class="item-title">1. Dribbble</h3> <span class="tag">Inspirasi Visual</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Dribbble adalah platform komunitas desain yang menampilkan berbagai karya antarmuka, ilustrasi, branding, dan motion design. Banyak desainer menggunakan Dribbble untuk mencari ide tampilan UI modern dan gaya visual yang kreatif. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> sangat kaya inspirasi visual, tampilan karya beragam, komunitas aktif.</li> <li><strong>Kekurangan:</strong> sering lebih fokus pada estetika daripada detail UX fungsional.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2009</div> <div class="meta-card"><strong>URL</strong> <a href="https://dribbble.com/" target="_blank" rel="noopener">https://dribbble.com/</a></div> <div class="meta-card"><strong>Fokus</strong> UI showcase dan inspirasi desain</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">2. Behance</h3> <span class="tag">Portofolio Kreatif</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Behance adalah platform portofolio yang menampilkan proyek desain lengkap, termasuk UI/UX, desain produk, dan studi kasus visual. Website ini cocok untuk melihat proses berpikir desain yang lebih menyeluruh. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> banyak studi kasus mendalam, cocok untuk riset proses desain.</li> <li><strong>Kekurangan:</strong> kualitas proyek sangat bervariasi dan pencarian bisa memakan waktu.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2006</div> <div class="meta-card"><strong>URL</strong> <a href="https://www.behance.net/" target="_blank" rel="noopener">https://www.behance.net/</a></div> <div class="meta-card"><strong>Fokus</strong> Portofolio dan studi kasus desain</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">3. Awwwards</h3> <span class="tag">Web Design Award</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Awwwards menampilkan website-website terbaik dengan penilaian berdasarkan desain, kreativitas, usability, dan konten. Portal ini sering dijadikan referensi untuk melihat tren desain web yang premium dan inovatif. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> kurasi ketat, kualitas visual tinggi, cocok untuk inspirasi web modern.</li> <li><strong>Kekurangan:</strong> beberapa desain terlalu kompleks untuk dijadikan acuan implementasi sederhana.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2009</div> <div class="meta-card"><strong>URL</strong> <a href="https://www.awwwards.com/" target="_blank" rel="noopener">https://www.awwwards.com/</a></div> <div class="meta-card"><strong>Fokus</strong> Kurasi website berkualitas tinggi</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">4. Mobbin</h3> <span class="tag">Pattern Library</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Mobbin adalah pustaka referensi antarmuka dari aplikasi dan produk digital populer. Website ini sangat berguna untuk melihat pola UI nyata seperti onboarding, navigasi, checkout, dan form pada produk yang sudah matang. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> sangat praktis untuk studi pola antarmuka, banyak contoh nyata.</li> <li><strong>Kekurangan:</strong> akses penuh pada beberapa fitur bisa terbatas dan berbayar.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2019</div> <div class="meta-card"><strong>URL</strong> <a href="https://mobbin.com/" target="_blank" rel="noopener">https://mobbin.com/</a></div> <div class="meta-card"><strong>Fokus</strong> Referensi pattern UI aplikasi</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">5. Pttrns</h3> <span class="tag">Mobile UI Inspiration</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Pttrns berisi koleksi screenshot antarmuka mobile yang dikelompokkan berdasarkan kategori. Website ini membantu desainer memahami pola interaksi pada aplikasi mobile dan membandingkan pendekatan berbagai produk. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> fokus pada mobile UI, mudah dipakai untuk referensi cepat.</li> <li><strong>Kekurangan:</strong> tampilan situs cukup sederhana dan beberapa konten terasa kurang luas dibanding platform lain.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2011</div> <div class="meta-card"><strong>URL</strong> <a href="https://pttrns.com/" target="_blank" rel="noopener">https://pttrns.com/</a></div> <div class="meta-card"><strong>Fokus</strong> Screenshot dan pola UI mobile</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">6. Collect UI</h3> <span class="tag">Curated UI Gallery</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Collect UI adalah galeri desain antarmuka yang dikurasi secara rutin dari berbagai sumber. Website ini cocok untuk mencari inspirasi komponen, landing page, dan tampilan visual dengan gaya yang bersih. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> kurasi rapi, mudah untuk browsing inspirasi UI harian.</li> <li><strong>Kekurangan:</strong> kedalaman informasi proyek tidak selalu lengkap.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2014</div> <div class="meta-card"><strong>URL</strong> <a href="https://collectui.com/" target="_blank" rel="noopener">https://collectui.com/</a></div> <div class="meta-card"><strong>Fokus</strong> Kurasi inspirasi UI harian</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">7. Land-book</h3> <span class="tag">Landing Page Inspiration</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Land-book menampilkan referensi landing page dari berbagai industri, mulai dari SaaS, e-commerce, hingga agensi. Website ini membantu melihat struktur halaman, hero section, CTA, dan susunan konten yang efektif. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> sangat berguna untuk referensi landing page dan layout pemasaran.</li> <li><strong>Kekurangan:</strong> kurang fokus pada detail interaksi aplikasi yang kompleks.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2015</div> <div class="meta-card"><strong>URL</strong> <a href="https://land-book.com/" target="_blank" rel="noopener">https://land-book.com/</a></div> <div class="meta-card"><strong>Fokus</strong> Referensi landing page</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">8. UI8</h3> <span class="tag">Design Resources</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> UI8 menyediakan aset desain premium seperti kit UI, template, icon set, dan mockup. Website ini banyak dipakai untuk mempercepat proses desain sekaligus melihat standar komponen antarmuka yang konsisten. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> aset berkualitas tinggi, sangat membantu workflow desain.</li> <li><strong>Kekurangan:</strong> banyak sumber daya premium sehingga tidak semuanya gratis.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2013</div> <div class="meta-card"><strong>URL</strong> <a href="https://ui8.net/" target="_blank" rel="noopener">https://ui8.net/</a></div> <div class="meta-card"><strong>Fokus</strong> Aset dan template desain UI</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">9. Figma Community</h3> <span class="tag">Community Resources</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> Figma Community adalah ruang berbagi file desain, plugin, dan template dari para kreator di seluruh dunia. Website ini sangat bermanfaat untuk mempelajari struktur file, komponen, dan praktik kolaborasi desain. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> banyak file gratis, cocok untuk belajar dan mempercepat pembuatan prototipe.</li> <li><strong>Kekurangan:</strong> kualitas file sangat beragam karena berasal dari komunitas yang luas.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2019</div> <div class="meta-card"><strong>URL</strong> <a href="https://www.figma.com/community" target="_blank" rel="noopener">https://www.figma.com/community</a></div> <div class="meta-card"><strong>Fokus</strong> Template, plugin, dan file komunitas</div> </div> </div> <div class="item"> <div class="item-header"> <h3 class="item-title">10. One Page Love</h3> <span class="tag">Single Page Inspiration</span> </div> <div class="item-grid"> <div class="box"> <h3>Deskripsi</h3> <p> One Page Love adalah galeri website satu halaman yang berisi contoh desain untuk landing page, portofolio, dan situs promosi. Website ini membantu desainer mempelajari alur informasi yang ringkas namun tetap menarik. </p> </div> <div class="box"> <h3>Kelebihan & Kekurangan</h3> <ul> <li><strong>Kelebihan:</strong> cocok untuk inspirasi website sederhana dan fokus pada satu halaman.</li> <li><strong>Kekurangan:</strong> tidak selalu relevan untuk proyek web besar dengan banyak halaman.</li> </ul> </div> </div> <div class="meta"> <div class="meta-card"><strong>Lama beroperasi</strong> Sejak 2008</div> <div class="meta-card"><strong>URL</strong> <a href="https://onepagelove.com/" target="_blank" rel="noopener">https://onepagelove.com/</a></div> <div class="meta-card"><strong>Fokus</strong> Inspirasi website satu halaman</div> </div> </div> </div> </div> </div> </div>