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.

Read More

BRAINSTORMING

1. Konsep Brainstorming

Definisi 

Brainstorming adalah metode pengumpulan ide secara bebas dan kreatif dari sekelompok orang untuk memecahkan masalah atau menemukan solusi. Tujuannya adalah menghasilkan banyak ide tanpa langsung menilai baik-buruknya.

Aturan Brainstorming:

-Tidak mengkritik ide saat sesi berlangsung.

-Bebas berekspresi — semua ide diterima, bahkan yang aneh sekalipun.

-Kuantitas diutamakan terlebih dahulu sebelum kualitas.

-Bangun dari ide orang lain untuk mengembangkan gagasan lebih matang.

-Fokus pada topik yang sedang dibahas.

Manfaat:

-Memunculkan ide-ide segar dan variatif.

-Mendorong kerja sama dan komunikasi tim.

-Mengatasi kebuntuan ide.

-Menggabungkan perspektif berbeda menjadi solusi inovatif.

2. Teknik Brainstorming untuk Proyek Desain Publikasi Digital

Brainwriting: Peserta menulis ide di kertas/dokumen digital, lalu dibagikan ke orang lain untuk dikembangkan.

Round Robin: Setiap orang secara bergiliran menyampaikan ide.

Starbursting: Mengajukan pertanyaan (apa, siapa, kapan, di mana, mengapa, bagaimana) untuk menggali ide.

SCAMPER: Mengubah ide dengan Substitusi, Kombinasi, Adaptasi, Modifikasi, Penggunaan lain, Eliminasi, dan Pembalikan.

Rapid Ideation: Memberikan waktu singkat untuk menuangkan sebanyak mungkin ide.

3. Penggunaan Mind Map untuk Mengelola Ide

Mind map adalah diagram visual yang menghubungkan ide-ide dalam bentuk cabang dari satu topik utama.

Langkah penggunaan:

1. Tentukan topik utama di tengah.

2. Buat cabang utama sesuai kategori ide.

3. Tambahkan sub-cabang untuk detail.

4. Gunakan warna, ikon, atau gambar agar lebih jelas.

5. Kaji ulang dan rapikan mind map untuk presentasi.

Manfaat mind map:

-Memudahkan memahami hubungan antar ide.

-Membantu mengorganisasi informasi kompleks.

-Visual menarik sehingga mudah diingat.

4. Aplikasi Digital untuk Mind Mapping

Aplikasi Kelebihan Kekurangan:

Miro Kolaborasi real-time, banyak template, integrasi dengan tool lain. Butuh koneksi internet stabil.

Figma Desain bebas, fleksibel, kolaborasi langsung, cocok untuk visual kreatif. Mind mapping perlu dibuat manual (tidak otomatis).

Canva Banyak template siap pakai, mudah digunakan, integrasi desain publikasi digital. Kurang fleksibel untuk mind map interaktif.

MindMeister Fokus khusus pada mind map, fitur brainstorming terintegrasi, visual rapi. Versi gratis terbatas jumlah mind map. 

Read More