TUTORIAL WIREFRAME PORTOFOLIO

Sebelum membuat portofolio di Figma, langkah pertama yang penting adalah membuat wireframe.

Wireframe bisa diartikan sebagai kerangka dasar dari sebuah desain, yaitu gambaran sederhana yang menunjukkan bagaimana elemen-elemen utama akan diletakkan pada halaman. Biasanya wireframe digambarkan menggunakan bentuk-bentuk sederhana seperti kotak, garis, atau placeholder teks tanpa detail visual. Tujuannya bukan untuk menampilkan desain akhir, melainkan untuk memetakan struktur, alur, dan tata letak dari sebuah halaman.

Dalam konteks portofolio, wireframe membantu desainer untuk:

- Menentukan bagian-bagian penting (seperti header, about, gallery karya, hingga kontak).

- Mengatur urutan informasi agar lebih mudah dipahami pengunjung.

- Memastikan desain rapi dan konsisten sebelum diberi warna, font, maupun gambar asli.

Dengan membuat wireframe terlebih dahulu, proses desain portofolio akan lebih terarah, efisien, dan hasilnya bisa lebih maksimal. Berikut langkah-langkahnya:

🎨 Tutorial Wireframe Portfolio di Figma (dengan Kontrol/Shortcut)

1. Buka Figma di Komputer

Web: figma.com

App: Figma Desktop

👉 Shortcut dasar yang bakal sering dipakai:

Ctrl + N → New File

F → Frame (artboard untuk halaman web)

Ctrl + 0 → Zoom 100%

Space + Drag → Geser canvas

2. Buat Frame untuk Halaman Portfolio

Tekan F → pilih ukuran Desktop 1440px.

Ini jadi canvas utama.

👉 Shortcut berguna:

Ctrl + 1 → Zoom to Fit (lihat full frame).

Ctrl + 2 → Zoom to Selection.

3. Bangun Struktur Wireframe

🔹 Header / Navbar

Buat Rectangle (R) untuk background navbar.

Tambah Text (T) → nama/logo di kiri.

Tambah Text (T) lagi → menu navigasi di kanan (Home, About, Skills, Projects, Contact).

👉 Shortcut berguna:

R → Rectangle

T → Text

Ctrl + D → Duplicate (gandakan menu teks biar cepat).

🔹 Hero Section

Bagi area jadi 2 kolom.

Kiri: Text (T) → Nama + profesi.

Text kecil (T) → deskripsi singkat.

Rectangle (R) → tombol CTA “Hire Me” & “Download CV”.

Kanan: Ellipse (O) → placeholder foto profil.

👉 Shortcut berguna:

O → Ellipse (lingkaran foto).

Alt + Drag → Copy elemen dengan drag.

Shift + A → Auto Layout (rapikan tombol bersebelahan).

🔹 About Me

Text besar (T) → “About Me”.

Rectangle panjang (R) → placeholder paragraf tentang kamu.

👉 Shortcut berguna:

Ctrl + G → Group elemen biar rapi.

Ctrl + Shift + G → Ungroup kalau mau pecah lagi.

🔹 Skills

Text besar (T) → “Skills”.

Buat grid kotak kecil (R) → representasi skill tools.

Text kecil (T) → label tiap skill (HTML, CSS, JS, Figma).

👉 Shortcut berguna:

Ctrl + D → Duplicate kotak skill dengan cepat.

Ctrl + Shift + H → Align Horizontal center.

Ctrl + Shift + V → Align Vertical center.

🔹 Portfolio / Projects

Text besar (T) → “Projects”.

Buat grid 3 kolom × 2 baris pakai Rectangle (R) untuk project thumbnail.

Text kecil (T) di bawah → nama project.

👉 Shortcut berguna:

Ctrl + D → Duplicate kotak project.

Shift + A → Auto Layout grid project supaya rapi.

🔹 Contact

Text besar (T) → “Contact Me”.

Rectangle panjang (R) → form input (Nama, Email, Pesan).

Rectangle kecil (R) + Text (T) → tombol “Send”.

Ellipse (O) → placeholder icon sosial media.

👉 Shortcut berguna:

Ctrl + Shift + K → Import icon sosial media kalau mau pakai gambar asli.

Alt + Drag → Copy lingkaran icon.

🔹 Footer

Rectangle (R) di bawah.

Text kecil (T) → “© 2025 [Nama]”

4. Rapikan & Finishing

Gunakan abu-abu terang (#E5E5E5) untuk placeholder.

Jangan pakai gambar asli dulu (wireframe → fokus ke struktur).

Kalau sudah mantap → nanti bisa upgrade jadi high-fidelity dengan warna, font, dan gambar.

👉 Shortcut berguna:

Ctrl + ] → Bring Forward (tarik layer ke atas).

Ctrl + [ → Send Backward (turunkan layer).

Ctrl + Shift + ] → Bring to Front.

Ctrl + Shift + [ → Send to Back.