Tutorial Wireframe Portofolio

 🖥 Wireframe dalam Desain 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:

1. Membuat Frame Desktop

Buka Figma → pilih New File.

2. Pilih Frame Tool

Tekan tombol F (Frame) atau klik ikon Frame di toolbar.

3. Pilih Preset Frame

Setelah itu, lihat panel kanan.

Pada bagian Frame Presets, pilih ukuran sesuai kebutuhan.

Untuk Desktop, biasanya: Desktop 1440 × 1024. 

Frame ini akan menjadi wadah utama dari wireframe, seperti sebuah halaman kerja di mana semua elemen desain ditempatkan.

4. Frame Siap Dipakai

Sekarang kamu bisa mulai menambahkan elemen desain (text, shape, gambar, dll.) di dalam frame.

Klik Frame dekstop dan ubah warna Fill yang saya pakai #A5B8B8, atau sesuai kebutuhan kalian.

5. Membuat Header/Logo

Buat sebuah rectangle (R) di bagian atas frame.

Sisipkan placeholder untuk logo (kotak kecil di kiri) dan beberapa kotak untuk menu (di kanan).

Fill → warna kotak adalah hijau tua (#093A3B).

Opacity → 100% artinya warnanya solid penuh.

Corner Radius → 30 px membuat sudut tumpul, jadi bentuknya tidak kaku.

6. Membuat Background Belakang

Buat kotak 2 besar di tengah untuk area konten utama.

Tambahkan placeholder berbentuk kotak besar untuk gambar atau ilustrasi, serta beberapa garis panjang tipis untuk teks.

Untuk ukuran sesuai kebutuhan, ukuran yang saya pakai 445 x 798 dan 992 x 942

Atur warna yang saya pakai #093A3B

Setelah itu kita grup kedua kotak tersebut CTRL + G

7. Membuat Tombol Navigasi

Pilih Rectangle Tool (R) → buat kotak horizontal. Contoh: W = 181, H = 49.

Atur Corner Radius = 30 px biar bentuknya oval/lonjong.

Ganti warna tombol di panel Fill (misalnya abu-abu muda #A5B8B8).

Duplikat 3 kali ulangi untuk menu lain: About, Contact, Artwork.

8. Buat Kotak untuk Background Depan

Pilih Rectangle Tool (R) → buat kotak horizontal. Contoh: W = 1125, H = 775.

Atur Corner Radius = 30 px biar bentuknya oval/lonjong.

Ganti warna tombol di panel Fill (misalnya abu-abu muda #A5B8B8).

9. Buat Tombol Menu Lain

Pilih Rectangle Tool (R) → buat kotak horizontal. 

Contoh: Kotak belakang W = 64, H = 63, Kotak depan W = 54, H = 15

Atur Corner Radius = 15  px.

Ganti warna tombol di panel Fill (misalnya #A5B8B8 dan #296768 ).

10. Buat Kotak Vertikal Supaya Kelihatan Tidak Berdiri Sendiri

Pilih Rectangle Tool (R) → buat kotak Vertikal. 

Contoh: Kotak W = 109, H = 705

Atur Corner Radius = 50  px.

Ganti warna tombol di panel Fill (misalnya #2093A3B ).

11. Buat menu Software

Pilih Rectangle Tool (R) → buat kotak Horizontal. 

Contoh: Kotak belakang W = 284.19, H = 74.7, Kotak depan W = 250.02, H = 65.72

Atur Corner Radius = 30  px.

Ganti warna tombol di panel Fill (misalnya #2093A3B dan A5B8B8).

12. Buat Kotak Untuk Logo Software CDR, PS, AI

Pilih Rectangle Tool (R) → buat kotak. 

Contoh: W = 162 , H = 152

Atur Corner Radius = 30  px.

Ganti warna tombol di panel Fill (misalnya #A5B8B8).

Pilih Stroke Position = Inside, Weight = 15

Ganti warna tombol di panel Fill (misalnya #093A3B).

 13. Buat Kotak Untuk Foto

Pilih Rectangle Tool (R) → buat kotak Vertikal. 

Contoh: W = 400, H = 648

Atur Corner Radius = 30  px.

Ganti warna tombol di panel Fill (misalnya #296768).

Hasil Frame 1

Setelah frame pertama berhasil dibuat, sekarang kita bisa melanjutkan ke frame berikutnya untuk menambahkan bagian lain dari portofolio.

14. Buat Frame Untuk Isi Menu Lain 

Pilih Rectangle Tool (R) → buat kotak Horizontal. 

Contoh: Kotak belakang W = 358, H = 74.7, Kotak depan W = 314.95, H = 65.72

Atur Corner Radius = 30  px.

Ganti warna tombol di panel Fill (misalnya #093A3B dan A5B8B8).

Duplikat 3 kali CTRL+D 

15. Buat Seperti Foto Profil

Pilih Ellipse Tool (O) → buat Lingkaran. 

Contoh: W = 284 , H = 284

Atur Corner Radius = 0  px.

Ganti warna tombol di panel Fill (misalnya #D9D9D9).

Pilih Stroke Position = Inside, Weight = 10

Ganti warna tombol di panel Fill (misalnya #093A3B).