Unit 1: User Interface - Junior Web Developer

1. Dasar Desain UI/UX

Prinsip Dasar Desain

UI (User Interface) dan UX (User Experience) adalah dua aspek penting dalam pengembangan web modern:

User Interface (UI)

Visual design
Layout dan tata letak
Warna dan tipografi
Interaksi elemen

User Experience (UX)

Kemudahan penggunaan
Navigasi yang intuitif
Kecepatan loading
Kepuasan pengguna

5 Prinsip Desain Fundamental:

Keseimbangan

Distribusi visual yang harmonis

Hierarki

Prioritas informasi yang jelas

Konsistensi

Pola yang seragam

Warna dan Tipografi

Contoh Palet Warna:

#2563eb Primary

#10b981 Success

#f59e0b Warning

#6b7280 Neutral

Tips: Gunakan maksimal 3-4 warna utama untuk menjaga konsistensi visual.

2. Tools Figma

Figma adalah tool desain interface yang powerful dan gratis. Mari pelajari cara menggunakannya:

Langkah-langkah Membuat Wireframe:

1. Buat File Baru

Design File → Desktop/Mobile frame

2. Buat Layout

Gunakan Rectangle tool untuk kotak konten

3. Tambah Teks

Text tool untuk heading dan konten

Komponen Dasar Website:

                                        Header/Navigation
                                        Logo di kiri atas
Menu navigasi horizontal
CTA button di kanan

                                    

                                        Hero Section
                                        Headline besar
Deskripsi singkat
Call-to-action button

                                    

                                        Content Area
                                        Grid layout untuk konten
Card components
Image placeholders

                                    

                                        Footer
                                        Contact information
Social media links
Copyright notice

                                    

Tips Figma:

Gunakan Auto Layout untuk responsive design
Buat Components untuk elemen yang berulang
Gunakan Constraints untuk positioning
Manfaatkan Plugins seperti Lorem Ipsum generator

3. Struktur HTML5

HTML5 memperkenalkan elemen semantik yang membuat kode lebih mudah dibaca dan SEO-friendly.

Struktur Dasar HTML5:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <header>
        <nav>
            <!-- Navigasi -->
        </nav>
    </header>
    
    <main>
        <section>
            <!-- Konten utama -->
        </section>
    </main>
    
    <footer>
        <!-- Footer -->
    </footer>
</body>
</html>

Elemen Semantik HTML5:

Struktur Utama

<header> - Bagian atas halaman
<nav> - Menu navigasi
<main> - Konten utama
<footer> - Bagian bawah

Konten

<article> - Artikel independen
<section> - Bagian dokumen
<aside> - Konten sampingan
<figure> - Media dengan caption

Contoh Form HTML5:

<form action="#" method="post">
    <div class="form-group">
        <label for="nama">Nama Lengkap:</label>
        <input type="text" id="nama" name="nama" required>
    </div>
    
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div class="form-group">
        <label for="pesan">Pesan:</label>
        <textarea id="pesan" name="pesan" rows="4" required></textarea>
    </div>
    
    <button type="submit">Kirim</button>
</form>

4. Styling dengan CSS

CSS Box Model:

                                                Content
                                            
Padding
Border
Margin

CSS Flexbox:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.item {
    flex: 1; /* Mengisi ruang yang tersisa */
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

Responsive Design dengan Media Query:

/* Desktop First */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Tablet */
@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

Best Practices CSS:

Gunakan class names yang deskriptif
Organisir CSS dengan struktur yang konsisten
Gunakan CSS Variables untuk warna dan spacing
Optimasi performance dengan minifikasi

Praktik Unit 1: Membuat Landing Page Portfolio

Tugas Praktik:

Buat wireframe portfolio di Figma
Implementasikan design ke HTML5
Styling dengan CSS responsif
Test di berbagai device

Latihan 1: Figma Wireframe

Buat wireframe portfolio dengan komponen:

Header dengan navigasi
Hero section dengan foto profil
About section
Skills section dengan card
Portfolio gallery
Contact form
Footer

Latihan 2: HTML Implementation

Implementasi wireframe ke HTML dengan:

Struktur HTML5 semantik
Form dengan validasi
Optimasi SEO (meta tags)
Accessibility attributes

Template HTML Portfolio

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - [Nama Anda]</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Portfolio</div>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <img src="profile.jpg" alt="Profile Photo">
                <h1>Nama Anda</h1>
                <p>Junior Web Developer</p>
                <a href="#contact" class="btn">Hubungi Saya</a>
            </div>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>Deskripsi singkat tentang diri Anda...</p>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <h3>HTML5</h3>
                    <div class="progress">
                        <div class="progress-bar" style="width: 90%"></div>
                    </div>
                </div>
                <!-- More skills -->
            </div>
        </section>
    </main>

    <footer>
        <p>© 2025 Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Unit 1: Mengimplementasikan User Interface

Tujuan Pembelajaran

Daftar Materi