10 Website Untuk Inspirasi Website Modern
2026-06-03 21:21:04 - Admin
<style> body{ font-family: Arial, Helvetica, sans-serif; line-height: 1.6; margin:0; padding:0; background:#f9f9f9; color:#333; } header{ background:#4CAF50; color:#fff; padding:20px 10%; text-align:center; } nav{ background:#fff; padding:10px 10%; box-shadow:0 2px 4px rgba(0,0,0,0.1); } nav a{ margin-right:15px; color:#4CAF50; text-decoration:none; font-weight:bold; } main{ max-width:1000px; margin:30px auto; padding:0 20px; } h2{ color:#4CAF50; margin-top:40px; } .site-card{ background:#fff; padding:20px; margin-bottom:30px; border-radius:6px; box-shadow:0 2px 5px rgba(0,0,0,0.1); } .site-card img{ max-width:100%; height:auto; border-radius:4px; margin-bottom:15px; } .site-card a{ color:#4CAF50; text-decoration:none; } .site-card a:hover{ text-decoration:underline; } footer{ text-align:center; padding:20px; margin-top:40px; font-size:0.9em; color:#777; } </style> <header> <h1>10 Website untuk Inspirasi Desain Modern</h1> </header> <nav> <a href="#dribbble">Dribbble</a> <a href="#behance">Behance</a> <a href="#awwwards">Awwwards</a> <a href="#siteinspire">Siteinspire</a> <a href="#cssdesignawards">CSS Design Awards</a> <a href="#lapa">Lapa.Ninja</a> <a href="#onepagelove">One Page Love</a> <a href="#cssnectar">CSS Nectar</a> <a href="#webdesignerdepot">Webdesigner Depot</a> <a href="#collectui">Collect UI</a> </nav> <main> <section id="dribbble" class="site-card"> <h2>1. Dribbble (dribbble.com)</h2> <img src="https://via.placeholder.com/800x400?text=Dribbble+Screenshot" alt="Screenshot Dribbble"> <p>Dribbshot adalah komunitas desainer visual terbesar di dunia. Di sini kamu dapat menemukan ribuan contoh UI/UX, branding, ilustrasi, dan layout modern. Fitur pencarian berbasis tag memudahkan menemukan inspirasi yang relevan dengan proyekmu.</p> <p>Keunggulan: update harian, koleksi tema, dan artikel yang membahas tren desain terbaru.</p> <p><a href="https://dribbble.com" target="_blank">Kunjungi Dribbble </a></p> </section> <section id="behance" class="site-card"> <h2>2. Behance (behance.net)</h2> <img src="https://via.placeholder.com/800x400?text=Behance+Screenshot" alt="Screenshot Behance"> <p>Behance milik Adobe menyediakan platform portofolio bagi kreator di seluruh dunia. Kamu dapat menelusuri proyek lengkap dengan proses desain, wireframe, dan prototype. Ini sangat berguna untuk memahami alur kerja kreatif.</p> <p>Keunggulan: integrasi dengan Creative Cloud, filter berdasarkan industri, dan koleksi proyek terkurasi.</p> <p><a href="https://behance.net" target="_blank">Kunjungi Behance </a></p> </section> <section id="awwwards" class="site-card"> <h2>3. Awwwards (awwwards.com)</h2> <img src="https://via.placeholder.com/800x400?text=Awwwards+Screenshot" alt="Screenshot Awwwards"> <p>Awwwards menilai situs web berdasarkan kreativitas, kegunaan, dan inovasi teknis. Setiap bulan mereka menampilkan Site of the Day dan Site of the Month yang menjadi contoh paling mutakhir dalam desain modern.</p> <p>Keunggulan: penilaian juri internasional, artikel mendalam, dan tutorial teknik animasi serta interaksi.</p> <p><a href="https://awwwards.com" target="_blank">Kunjungi Awwwards </a></p> </section> <section id="siteinspire" class="site-card"> <h2>4. Siteinspire (siteinspire.com)</h2> <img src="https://via.placeholder.com/800x400?text=Siteinspire+Screenshot" alt="Screenshot Siteinspire"> <p>Siteinspire adalah galeri yang dikurasi khusus untuk website dengan desain bersih dan fungsional. Kamu dapat memfilter berdasarkan tipe (portfolio, e commerce, blog) serta warna dan layout.</p> <p>Keunggulan: UI minimalis, pencarian advanced, dan koleksi yang terus diperbarui.</p> <p><a href="https://siteinspire.com" target="_blank">Kunjungi Siteinspire </a></p> </section> <section id="cssdesignawards" class="site-card"> <h2>5. CSS Design Awards (cssdesignawards.com)</h2> <img src="https://via.placeholder.com/800x400?text=CSS+Design+Awards+Screenshot" alt="Screenshot CSS Design Awards"> <p>CSS Design Awards menyoroti situs dengan kode front end yang menakjubkan. Setiap entry menampilkan detail tentang teknologi yang dipakai (CSS Grid, animasi WebGL, dll).</p> <p>Keunggulan: fokus pada aspek teknis, rating berdasarkan UI , UX , dan Innovation .</p> <p><a href="https://cssdesignawards.com" target="_blank">Kunjungi CSS Design Awards </a></p> </section> <section id="lapa" class="site-card"> <h2>6. Lapa.Ninja (lapa.ninja)</h2> <img src="https://via.placeholder.com/800x400?text=Lapa+Ninja+Screenshot" alt="Screenshot Lapa.Ninja"> <p>Lapa adalah koleksi landing page paling kreatif. Berguna bila kamu membutuhkan contoh konversi tinggi, tipografi besar, dan hero image yang menarik.</p> <p>Keunggulan: tampilan cepat, kategori (SaaS, aplikasi, produk), dan label Trending .</p> <p><a href="https://lapa.ninja" target="_blank">Kunjungi Lapa.Ninja </a></p> </section> <section id="onepagelove" class="site-card"> <h2>7. One Page Love (onepagelove.com)</h2> <img src="https://via.placeholder.com/800x400?text=One+Page+Love+Screenshot" alt="Screenshot One Page Love"> <p>Jika kamu memikirkan desain satu halaman yang elegan, One Page Love menyediakan contoh terbaik dari navigasi smooth scroll, animasi micro interaction, hingga grid kreatif.</p> <p>Keunggulan: filter berdasarkan industri, rating pengguna, dan tutorial pembuatan satu halaman.</p> <p><a href="https://onepagelove.com" target="_blank">Kunjungi One Page Love </a></p> </section> <section id="cssnectar" class="site-card"> <h2>8. CSS Nectar (cssnectar.com)</h2> <img src="https://via.placeholder.com/800x400?text=CSS+Nectar+Screenshot" alt="Screenshot CSS Nectar"> <p>CSS Nectar menampilkan website dengan tampilan visual yang kuat. Koleksi mereka menonjolkan penggunaan warna gradien, tipografi dinamis, dan efek paralaks.</p> <p>Keunggulan: tiap entry dilengkapi dengan penjelasan singkat tentang tools dan framework yang dipakai.</p> <p><a href="https://cssnectar.com" target="_blank">Kunjungi CSS Nectar </a></p> </section> <section id="webdesignerdepot" class="site-card"> <h2>9. Webdesigner Depot (webdesignerdepot.com)</h2> <img src="https://via.placeholder.com/800x400?text=Webdesigner+Depot+Screenshot" alt="Screenshot Webdesigner Depot"> <p>Selain artikel tutorial, Webdesigner Depot memiliki bagian Inspiration yang mengkurasi website dengan desain responsif, animasi SVG, dan penggunaan tipografi eksperimental.</p> <p>Keunggulan: kombinasi inspirasi visual dan panduan teknis, serta update mingguan.</p> <p><a href="https://webdesignerdepot.com" target="_blank">Kunjungi Webdesigner Depot </a></p> </section> <section id="collectui" class="site-card"> <h2>10. Collect UI (collectui.com)</h2> <img src="https://via.placeholder.com/800x400?text=Collect+UI+Screenshot" alt="Screenshot Collect UI"> <p>Collect UI mengumpulkan potongan UI dari berbagai proyek, mulai dari tombol, form, hingga dashboard. Sangat membantu bila kamu mencari elemen spesifik untuk disisipkan ke dalam desainmu.</p> <p>Keunggulan: koleksi berbasis kategori, update harian, dan filter warna.</p> <p><a href="https://collectui.com" target="_blank">Kunjungi Collect UI </a></p> </section> </main> <footer> 2026 Inspirasi Desain Modern </footer>