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

DESIGN THINKING

 

Design Thinking: Pendekatan kreatif berbasis solusi.

1. Design Thinking

Design Thinking adalah pendekatan kreatif untuk menemukan solusi yang berfokus pada kebutuhan pengguna. Metode ini menggabungkan empati, kreativitas, dan analisis untuk menghasilkan solusi inovatif yang relevan dan bermanfaat.

2. Tahap Empathize

Tahap ini bertujuan memahami secara mendalam kebutuhan, masalah, dan perilaku pengguna.

Kegiatan utama:

-Mengidentifikasi kebutuhan pengguna dengan mendengarkan cerita, pengalaman, dan keluhan mereka.

-Memahami masalah yang dihadapi dari sudut pandang pengguna.

-Menganalisis perilaku untuk mengetahui kebiasaan atau hambatan mereka.

Teknik yang digunakan:

-Wawancara: Bertanya langsung untuk menggali informasi mendalam.

-Observasi: Mengamati perilaku pengguna di situasi nyata.

-Survei: Mengumpulkan data dari banyak orang melalui kuesioner.

3. Tahap Define

Pada tahap ini, hasil dari proses empathize diolah menjadi problem statement yang jelas, spesifik, dan fokus pada inti masalah.

Selain itu, dibuat User Persona, yaitu profil fiktif yang mewakili target audiens. User Persona berisi:

-Nama dan latar belakang

-Tujuan dan kebutuhan

-Tantangan atau masalah yang dihadapi

-Perilaku dan kebiasaan

Tujuan pembuatan User Persona adalah untuk memastikan solusi yang dirancang benar-benar sesuai dengan karakter dan kebutuhan pengguna.

Read More

Harapan Saya

Harapan Saya Setelah Belajar Desain Publikasi Berbasis Web 

Setelah mempelajari materi desain publikasi berbasis web, saya memiliki harapan besar terhadap kemampuan dan keterampilan yang telah dan akan saya kuasai. Desain publikasi berbasis web merupakan salah satu bidang yang sangat relevan dengan perkembangan teknologi saat ini. Hampir semua informasi kini disebarkan melalui platform digital, baik dalam bentuk website, media sosial, maupun aplikasi mobile. Oleh karena itu, pemahaman tentang bagaimana merancang publikasi yang menarik, komunikatif, dan sesuai standar desain web menjadi sangat penting.

Pertama, saya berharap dapat menguasai prinsip dasar desain grafis yang diterapkan dalam media digital. Hal ini mencakup pemahaman tentang layout, tipografi, warna, dan elemen visual lain yang mampu menyampaikan pesan secara efektif. Dengan penguasaan ini, saya berharap mampu menciptakan desain web yang tidak hanya menarik secara estetika, tetapi juga fungsional dan user-friendly. Saya ingin desain yang saya buat dapat membantu pengguna mengakses informasi dengan mudah dan nyaman.

Kedua, saya berharap dapat memahami ruang lingkup proyek publikasi web secara utuh. Ini meliputi tahapan perencanaan, pembuatan konsep, sketsa layout, hingga implementasi desain ke dalam bentuk halaman web yang sebenarnya. Saya ingin memahami bagaimana mengatur alur kerja secara profesional menggunakan Prosedur Operasional Standar (POS) agar setiap proyek dapat diselesaikan dengan efisien dan tepat waktu. Kedisiplinan dalam mengikuti prosedur akan menjadi bekal penting dalam menghadapi dunia kerja nantinya.

Ketiga, saya berharap materi ini menjadi dasar untuk mengembangkan kemampuan teknis lainnya, seperti penggunaan software desain (Adobe Photoshop, Illustrator, Figma), serta dasar-dasar HTML dan CSS yang dapat mendukung tampilan visual di web. Dengan bekal tersebut, saya tidak hanya bisa menjadi seorang desainer, tetapi juga mampu berkomunikasi dengan tim pengembang (developer) dalam sebuah proyek digital.

Keempat, saya ingin bisa menerapkan keterampilan desain untuk tujuan yang lebih luas, misalnya membantu UMKM lokal mempromosikan produk mereka secara online, membuat portofolio digital pribadi, hingga menciptakan karya desain yang berdampak sosial. Saya percaya bahwa desain memiliki kekuatan untuk menyampaikan pesan secara luas dan memengaruhi masyarakat. Oleh karena itu, saya berharap dapat menggunakan kemampuan desain web untuk hal-hal yang positif dan bermanfaat.

Terakhir, saya berharap setelah mempelajari desain publikasi berbasis web, saya menjadi pribadi yang lebih kreatif, kritis, dan adaptif terhadap perubahan zaman. Dunia digital berkembang sangat cepat, sehingga saya harus siap untuk terus belajar dan mengikuti tren desain terkini. Saya ingin menjadikan desain bukan sekadar pelajaran di sekolah, tetapi juga sebagai jalan untuk berkarya dan mengekspresikan diri.

Read More

HASIL TUGAS

 Hasil Tugas Tugas DKV

Photoshop

Adobe Illustrator

DESAIN PUBLIKASI

Read More

 Brief

1. Pengertian dan Struktur Design Brief

Pengertian:

Design brief adalah dokumen atau pernyataan tertulis yang menjelaskan secara ringkas dan jelas tentang kebutuhan, tujuan, serta batasan suatu proyek desain. Brief ini menjadi pedoman utama bagi desainer agar hasil desain sesuai dengan ekspektasi klien atau pihak terkait.

Design brief memfasilitasi komunikasi antara klien dan desainer, serta menjadi dasar untuk pengambilan keputusan kreatif selama proses desain berlangsung.

Struktur Design Brief (umumnya terdiri dari beberapa bagian berikut):

1. Informasi Klien:

Penjelasan singkat tentang siapa klien atau perusahaan, visi/misi, serta latar belakangnya.

2. Tujuan Proyek:

Apa yang ingin dicapai dari proyek desain ini (misalnya, meningkatkan kesadaran merek, mempromosikan produk baru, dll).

3. Target Audiens:

Siapa yang menjadi sasaran dari hasil desain tersebut (umur, jenis kelamin, minat, lokasi, dll).

4. Konten:

Informasi apa saja yang harus dimasukkan dalam desain (teks, gambar, logo, slogan, dsb).

5. Gaya Visual yang Diinginkan:

Penjelasan mengenai tampilan desain seperti tone warna, gaya (minimalis, elegan, fun, formal), serta contoh referensi jika ada.

6. Media atau Format Output:

Apakah desain akan digunakan untuk cetak, digital, banner, media sosial, atau lainnya.

7. Batas Waktu dan Anggaran:

Deadline pengerjaan dan kisaran biaya (jika diperlukan).

8. Referensi Tambahan:

Jika ada contoh desain yang disukai atau hal-hal yang harus dihindari.

2. Elemen-elemen Penting dalam Design Brief

* Klien Informasi tentang individu/perusahaan pemesan desain: nama, latar belakang, visi/misi.

* Tujuan Apa yang ingin dicapai melalui desain (misal: promosi, edukasi, branding).

* Audiens (Target) Siapa yang akan melihat/menggunakan desain (demografi, psikografi, perilaku).

* Konten Semua materi atau informasi yang akan dimasukkan ke dalam desain.

* Gaya Visual Estetika atau gaya tampilan desain: warna, tipografi, layout, nuansa.

Read More

PELIHARAAN

 Peliharaan ku: kucing

Read More

 Hobiku

Hobiku berenang.

Read More

TENTANG SAYA

 ABOUT KHUSNI 

Saya lahir pada tempat tanggal lahir tepatnya di 11 Maret 2008 Banyumas. Saya anak ketiga dari tiga bersaudara, saya bersekolah di SMKN 2 PURWOKERTO saya mengambil jurusan DESAIN KOMUNIKASI VISUAL dan saat ini saya berada dikelas XII DKV 1. Saya dulu bersekolah di TK Diponegoro 59 pangebatan,lalu melanjutkan sekolah di SDN Danasri, dan bersmp di SMPN 2 Karanglewas. Saya memiliki hobby membaca novel digital dan saya menyukai novel romance, makanan favorit saya untuk saat ini dimsum mentai dan nasi padang the best. 

CONTACT ME 

wa: 087719603940

ig: lovely._nii

Read More