Selasa, 04 Februari 2025

Desain Landing Page HTML dan CSS di Figma

JOBSHEET

Membuat Desain Landing Page HTML di Figma

A. TUJUAN

  1. Memahami konsep desain UI/UX untuk landing page.
  2. Mendesain tampilan landing page yang menarik dan fungsional di Figma.
  3. Menggunakan komponen dasar Figma seperti frame, text, image, dan auto layout.
  4. Menyiapkan desain yang siap dikonversi ke HTML & CSS.

B. ALAT DAN BAHAN

✅ Laptop/PC dengan koneksi internet
✅ Akun Figma (www.figma.com)
✅ Aset gambar/icon (opsional)
✅ Referensi desain (dribbble, behance, atau web favorit)

C. LANGKAH KERJA

1. Membuat Project Baru

  1. Buka Figma dan login ke akun Anda.
  2. Klik New File untuk membuat proyek baru.
  3. Atur ukuran frame dengan memilih Desktop (1440px width) atau sesuai kebutuhan.

2. Menentukan Struktur Landing Page

Landing page umumnya memiliki:
✅ Header → Logo, Navigasi, CTA (Call to Action)
✅ Hero Section → Gambar utama, headline, subheadline, tombol aksi
✅ Fitur/Benefit → Daftar keunggulan produk/jasa
✅ Testimoni → Ulasan dari pengguna
✅ CTA Section → Formulir pendaftaran atau tombol ajakan
✅ Footer → Informasi kontak, link sosial media

3. Mendesain Komponen Landing Page di Figma

  1. Header

    • Gunakan Text Tool (T) untuk menambahkan logo dan navigasi.
    • Buat tombol CTA dengan Rectangle (R) dan berikan warna mencolok.

  2. Hero Section

    • Tambahkan headline dan subheadline menggunakan Text Tool.
    • Masukkan gambar dengan Place Image (Shift + Ctrl + K).

  3. Fitur/Benefit

    • Buat 3-4 kolom dengan Auto Layout untuk daftar fitur.
    • Tambahkan ikon menggunakan plugin Material Icons atau Feather Icons.

  4. Testimoni

    • Gunakan Ellipse Tool (O) untuk foto pelanggan.
    • Tambahkan teks ulasan dan nama pelanggan.

  5. CTA Section

    • Desain tombol atau form sederhana untuk pengisian email.

  6. Footer

    • Tambahkan informasi kontak, link ke sosial media, dan copyright.

4. Finishing dan Prototyping

  1. Gunakan warna yang sesuai dengan branding (Gunakan plugin Coolors untuk palet warna).
  2. Pastikan teks memiliki kontras yang baik agar mudah dibaca.
  3. Atur Padding & Spacing agar desain rapi dan nyaman dipandang.
  4. Gunakan fitur Prototype untuk melihat interaksi dasar (misal: hover pada tombol).

5. Export Desain untuk Coding HTML

  1. Klik Export di panel kanan untuk menyimpan gambar aset (PNG/SVG).
  2. Copy kode CSS dari Figma (Inspect > CSS).
  3. Siapkan desain untuk dikonversi ke HTML & CSS.

D. PENILAIAN

No Kriteria Penilaian Skor (1-5)
1 Struktur halaman sesuai standar landing page
2 Penggunaan warna, font, dan elemen UI yang konsisten
3 Kerapihan layout dan kesesuaian ukuran elemen
4 Fungsi tombol CTA jelas dan menonjol
5 File siap digunakan untuk pengkodean HTML & CSS

📌 Catatan:

  • Pastikan desain responsif untuk tampilan mobile dan desktop.
  • Simpan file Figma dengan nama yang sesuai, misalnya 1. Nama_LandingPage

🚀 Selamat Mencoba dan Berkreativitas! 🎨💻



Lihat link youtube berikut untuk lebih jelasnya.

Tutorial Membuat Desain Halaman Website Landing Page Dengan Figma