Web Design dan Link Download File Referensi
https://eu2.contabostorage.com/00f3241116844f24b628f46d81abb929:st1/folder4/4787/jmuser_file_1643843623_5d461f073495d93c3a0e0a79791a148b.ppt
2026-05-31 16:12:04 - Admin
<style> body{ font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color:#333; background:#fafafa; margin:0; padding:0; } header{ background:#4CAF50; color:white; padding:20px 10px; text-align:center; } nav{ background:#fff; border-bottom:1px solid #ddd; padding:10px; } nav a{ margin:0 15px; color:#4CAF50; text-decoration:none; font-weight:bold; } main{ max-width:960px; margin:20px auto; padding:0 15px; } h2{ color:#4CAF50; margin-top:30px; } ul{ margin-left:20px; } .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:20px; } .card{ background:white; border:1px solid #ddd; border-radius:5px; padding:15px; box-shadow:0 2px 4px rgba(0,0,0,0.05); } img{ max-width:100%; height:auto; border-radius:4px; } a{ color:#4CAF50; } a:hover{ text-decoration:underline; } </style><header> <h1>Pengantar Desain Web</h1></header><nav> <a href="#definisi">Definisi</a> <a href="#prinsip">Prinsip</a> <a href="#teknologi">Teknologi</a> <a href="#proses">Proses</a> <a href="#trend">Tren</a></nav><main> <section id="definisi"> <h2>Apa Itu Desain Web?</h2> <p>Desain web adalah proses perencanaan, perancangan, dan pembuatan tampilan serta interaksi sebuah situs internet. Tujuannya bukan hanya menciptakan tampilan yang menarik, tetapi juga memastikan pengalaman pengguna (UX) yang nyaman, efektif, dan responsif pada semua perangkat.</p> </section> <section id="prinsip"> <h2>Prinsip Dasar Desain Web</h2> <ul> <li><strong>Kejelasan (Clarity)</strong> Informasi harus mudah dipahami dengan hierarki visual yang jelas.</li> <li><strong>Konsistensi (Consistency)</strong> Penggunaan warna, tipografi, dan elemen UI yang seragam di seluruh halaman.</li> <li><strong>Responsif (Responsiveness)</strong> Desain harus beradaptasi dengan layar komputer, tablet, dan ponsel.</li> <li><strong>Kecepatan (Speed)</strong> Optimasi gambar, kode, dan sumber daya untuk mempercepat waktu muat.</li> <li><strong>Aksesibilitas (Accessibility)</strong> Memenuhi standar WCAG agar situs dapat diakses oleh semua orang, termasuk penyandang disabilitas.</li> </ul> </section> <section id="teknologi"> <h2>Teknologi Utama</h2> <div class="grid"> <div class="card"> <h3>HTML</h3> <p>Bahasa markup dasar yang membangun struktur halaman: heading, paragraf, tabel, dan elemen semantik lainnya.</p> </div> <div class="card"> <h3>CSS</h3> <p>Digunakan untuk mengatur tampilan visual: warna, tipografi, layout, animasi, serta media query untuk responsif.</p> </div> <div class="card"> <h3>JavaScript</h3> <p>Menambahkan interaktivitas, manipulasi DOM, serta menghubungkan ke layanan API.</p> </div> <div class="card"> <h3>Framework & Library</h3> <p>Contoh populer: React, Vue, Angular, serta CSS framework seperti Bootstrap, Tailwind CSS.</p> </div> <div class="card"> <h3>CMS</h3> <p>Content Management System seperti WordPress, Joomla, atau Drupal memudahkan pembuatan situs tanpa menulis kode dari nol.</p> </div> </div> </section> <section id="proses"> <h2>Alur Kerja Umum</h2> <ol> <li><strong>Riset & Analisis</strong> Memahami target audiens, kompetitor, dan tujuan bisnis.</li> <li><strong>Wireframing</strong> Membuat sketsa tata letak (lowfidelity) untuk menentukan posisi elemen utama.</li> <li><strong>Desain Visual</strong> Mengembangkan mockup berwarna, memilih palet warna, font, dan ikonografi.</li> <li><strong>Prototyping</strong> Menghubungkan halaman menjadi interaktif menggunakan tools seperti Figma atau Adobe XD.</li> <li><strong>Pengembangan</strong> Menulis kode HTML, CSS, dan JavaScript serta mengintegrasikan CMS atau backend.</li> <li><strong>Testing</strong> Memeriksa kompatibilitas browser, responsif, performa, dan aksesibilitas.</li> <li><strong>Peluncuran & Pemeliharaan</strong> Deploy ke server, memantau analitik, serta melakukan pembaruan rutin.</li> </ol> </section> <section id="trend"> <h2>Tren Desain Web 2024</h2> <ul> <li><strong>Dark Mode (Mode Gelap)</strong> Meski tidak menggunakan latar belakang gelap secara keseluruhan, banyak situs menawarkan opsi tema gelap untuk mengurangi kelelahan mata.</li> <li><strong>Neumorphism</strong> Gaya soft UI yang meniru efek timbul dan cekung, menambah dimensi visual.</li> <li><strong>Typografi Eksperimental</strong> Penggunaan font variabel yang dapat berubah ukuran atau berat secara dinamis.</li> <li><strong>Microinteractions</strong> Animasi kecil pada tombol, form, atau loading indicators yang meningkatkan kepuasan pengguna.</li> <li><strong>Desain Berbasis Data</strong> Menggunakan visualisasi data interaktif untuk menyajikan informasi secara menarik.</li> </ul> </section> <section> <h2>Tips Praktis Membuat Situs yang Baik</h2> <p>Berikut beberapa langkah konkret yang dapat langsung Anda terapkan:</p> <ul> <li>Mulailah dengan <em>mobilefirst</em>. Rancang layout untuk layar kecil, kemudian tambahkan elemen tambahan untuk layar yang lebih besar.</li> <li>Gunakan gambar dalam format <code>WebP</code> atau <code>AVIF</code> untuk ukuran file yang lebih kecil tanpa mengorbankan kualitas.</li> <li>Minify (perkecil) file CSS dan JavaScript serta gunakan <code>lazy loading</code> pada gambar yang tidak langsung terlihat.</li> <li>Pastikan kontras warna minimal 4.5:1 untuk teks biasa dan 3:1 untuk teks besar, agar teks mudah dibaca.</li> <li>Uji navigasi dengan keyboard saja; semua fungsi penting harus dapat diakses tanpa mouse.</li> </ul> </section> <section> <h2>Sumber Belajar Tambahan</h2> <p>Jika Anda ingin mendalami lebih jauh, berikut beberapa referensi yang terpercaya:</p> <ul> <li><a href="https://developer.mozilla.org/id/" target="_blank">MDN Web Docs</a> Dokumentasi lengkap HTML, CSS, dan JavaScript.</li> <li><a href="https://www.w3.org/TR/WCAG21/" target="_blank">WCAG 2.1</a> Pedoman aksesibilitas web.</li> <li><a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a> Kursus interaktif gratis untuk belajar frontend.</li> <li><a href="https://www.figma.com/" target="_blank">Figma</a> Alat kolaboratif untuk wireframe dan prototyping.</li> </ul> </section></main>