Membuat Wireframe Website dengan Figma

 Membuat Wireframe Website dengan Figma

1. Buka Figma

Read More

Apa itu Design Thinking, Tahap Emphatize dan Tahap Define

1. Apa itu Design Thinking?

Design Thinking adalah sebuah pendekatan kreatif untuk memecahkan masalah yang berfokus pada kebutuhan pengguna. Metode ini membantu desainer, pengembang, dan inovator untuk menciptakan solusi yang benar-benar relevan dan bermanfaat. Keunggulan Design Thinking adalah melibatkan empati terhadap pengguna, berpikir kreatif, dan melakukan iterasi solusi.

Pendekatan ini banyak digunakan dalam desain produk, layanan, hingga strategi bisnis karena mampu menghasilkan ide inovatif yang berbasis pada pengalaman nyata pengguna.

2. Tahap Empathize

Tahap pertama dalam Design Thinking adalah Empathize, yaitu memahami secara mendalam siapa pengguna kita, apa yang mereka rasakan, dan apa yang mereka butuhkan. Dengan empati, kita bisa melihat masalah dari sudut pandang pengguna sehingga solusi yang dibuat lebih tepat sasaran.

Cara untuk mengumpulkan informasi pada tahap ini antara lain:

• Wawancara (Interview): Menggali informasi langsung dari pengguna melalui tanya jawab.
• Observasi (Observation): Mengamati perilaku dan kebiasaan pengguna dalam kehidupan sehari-hari.
• Survei (Survey): Menggunakan kuesioner untuk mengumpulkan data dari banyak orang secara cepat.

Tujuan utama tahap ini adalah menemukan masalah yang sebenarnya dialami pengguna, bukan hanya asumsi kita.

3. Tahap Define

Setelah data dari tahap Empathize terkumpul, langkah berikutnya adalah Define. Tahap ini bertujuan untuk menyaring dan menganalisis informasi agar diperoleh pernyataan masalah (Problem Statement) yang jelas, spesifik, dan fokus.

Selain itu, pada tahap ini kita juga membuat User Persona, yaitu profil fiktif yang mewakili karakteristik target pengguna. User Persona biasanya berisi:

• Nama dan identitas dasar: Misalnya nama, usia, pekerjaan.
• Tujuan dan kebutuhan: Apa yang ingin dicapai oleh pengguna.
• Masalah atau tantangan: Kesulitan yang dialami dalam mencapai tujuan.

User Persona membantu tim memahami siapa yang akan menggunakan produk atau layanan, sehingga setiap solusi benar-benar sesuai dengan kebutuhan mereka.

Read More

PENGGUNAAN MIND MAP DAN APLIKASINYA

Penggunaan Mind Map untuk Mengelola Ide dan Aplikasi Digital untuk Mind Mapping

1. Pengertian Mind Map
   Mind Map adalah teknik pengorganisasian ide secara visual, dimulai dari satu topik utama di tengah lalu bercabang ke ide-ide terkait, kemudian berkembang lagi menjadi sub-cabang.
   Dalam proyek desain publikasi digital, mind map membantu merencanakan elemen visual, konten, dan strategi distribusi secara sistematis.

2. Tujuan Penggunaan Mind Map

   • Mengatur ide menjadi lebih terstruktur dan mudah dipahami.

   • Mempermudah proses brainstorming karena hubungan antar-ide terlihat jelas.

   • Mempercepat pengambilan keputusan kreatif.

   • Meningkatkan kerja sama tim melalui visualisasi ide bersama.

3. Langkah Membuat Mind Map untuk Mengelola Ide

   1. Tentukan topik utama dan tulis di bagian tengah. Contoh: “Desain Poster Event Musik”.

   2. Buat cabang utama seperti: tema, warna, tipografi, gambar, pesan utama, dan media publikasi.

   3. Tambahkan sub-cabang pada setiap cabang utama. Misalnya, pada cabang “warna” bisa ditambahkan: pastel, neon, atau monokrom.

   4. Gunakan kata kunci singkat, hindari kalimat panjang.

   5. Tambahkan ikon, warna, atau gambar kecil untuk memperjelas konsep.

   6. Revisi dan rapikan agar mind map mudah dibaca dan digunakan oleh tim.

4. Contoh Penerapan Mind Map di Proyek Desain Publikasi Digital
   Misalnya proyek kampanye promosi e-book:

   • Topik utama: “Promosi E-Book Edukasi” di tengah mind map.

   • Cabang utama: visual cover, media promosi, konten copywriting, jadwal posting.

   • Sub-cabang:

     • Visual cover → warna biru muda, font sans-serif, ilustrasi flat design.

     • Media promosi → Instagram, Facebook Ads, Newsletter.

     • Konten copywriting → tagline singkat, deskripsi manfaat, ajakan membeli.

     • Jadwal posting → pre-launch, launch day, follow-up.

5. Aplikasi Digital untuk Mind Mapping

1.MindMeister



Digunakan untuk membuat mind map secara online dengan fitur kolaborasi real-time, sehingga anggota tim dapat menambahkan ide bersama-sama. Terintegrasi dengan Google Drive dan Trello, cocok untuk tim kreatif yang bekerja jarak jauh.

2.XMind

Menyediakan berbagai template mind map siap pakai serta fitur presentasi langsung dari mind map yang dibuat. Dapat mengekspor hasil menjadi PDF, gambar, atau dokumen teks. Cocok untuk presentasi ide desain kepada klien.

3.Miro

Berfungsi sebagai papan kolaborasi online serbaguna yang mendukung mind mapping. Memungkinkan pengguna menambahkan gambar, ikon, atau link langsung di mind map. Sangat efektif untuk kerja tim desain publikasi digital yang membutuhkan interaksi cepat.

4.Coggle 

Aplikasi mind mapping berbasis web yang sederhana dan mudah digunakan. Mendukung pembuatan cabang tak terbatas, kolaborasi online, serta ekspor ke format SVG dan PDF. Cocok untuk pembuatan mind map cepat tanpa fitur rumit.

5.Canva

Menyediakan template mind map dengan desain visual yang menarik, sehingga cocok untuk membuat mind map yang siap dipresentasikan. Memiliki fitur drag-and-drop dan koleksi elemen grafis yang luas, berguna untuk memadukan mind map dengan elemen desain publikasi.

6.Lucidchart

Platform visualisasi ide dan diagram yang kuat, mendukung mind mapping dengan fitur kolaborasi tim. Terintegrasi dengan Google Workspace, Microsoft Teams, dan Slack. Cocok untuk proyek besar yang membutuhkan koordinasi lintas divisi.

Read More

KONSEP BRAINSTORMING DAN TEKNIK BRAINSTORMING

 

1. Konsep Brainstorming

A. Definisi

Brainstorming adalah teknik atau metode kreatif untuk menghasilkan ide sebanyak mungkin dalam waktu tertentu, biasanya dilakukan secara kelompok, guna memecahkan masalah atau menemukan solusi inovatif.
Metode ini pertama kali diperkenalkan oleh Alex F. Osborn pada tahun 1940-an.

B. Aturan Brainstorming

1. Tidak ada kritik
   Semua ide diterima tanpa penilaian atau penolakan saat proses berlangsung.

2. Bebas berimajinasi
   Ide liar atau tidak biasa sangat dianjurkan, karena bisa memicu ide-ide baru.

3. Kuantitas diutamakan
   Semakin banyak ide yang dihasilkan, semakin besar peluang menemukan solusi terbaik.

4. Bangun dari ide orang lain
   Kombinasikan, kembangkan, atau modifikasi ide yang sudah ada.

5. Fokus pada topik
   Semua ide tetap terkait dengan permasalahan yang sedang dibahas.

C. Manfaat Brainstorming

• Meningkatkan kreativitas dan melatih berpikir di luar kebiasaan.

• Memperbanyak alternatif solusi sebelum memutuskan pilihan terbaik.

• Mendorong kolaborasi tim dan meningkatkan rasa kebersamaan.

• Memunculkan perspektif berbeda dari berbagai latar belakang peserta.

• Menghemat waktu dalam proses pencarian ide, karena dilakukan secara intensif.

Teknik Brainstorming untuk Proyek Desain Publikasi Digital

1. Mind Mapping

Pengertian:
Teknik memetakan ide secara visual menggunakan diagram bercabang dari satu ide utama ke ide-ide terkait, untuk melihat hubungan antar-konsep.

Tujuan:

• Menguraikan ide menjadi bagian-bagian kecil.

• Mempermudah menemukan hubungan antar-elemen desain.

Langkah Pelaksanaan:

1. Tuliskan topik utama di tengah (contoh: “Desain Poster Event Musik”).

2. Buat cabang kategori seperti: tema, warna, tipografi, elemen grafis, pesan utama.

3. Dari tiap kategori, pecah menjadi sub-ide (misalnya: warna → neon, pastel, monokrom).

4. Hubungkan antar-cabang bila ada keterkaitan ide.

Tips:

• Gunakan warna berbeda untuk tiap cabang.

• Sertakan sketsa kecil atau ikon untuk memperjelas.

Contoh Penerapan:
Saat mendesain poster konser, cabang ide “tema” bisa menghasilkan opsi seperti retro, modern, atau futuristik, lalu dikaitkan dengan pilihan font dan palet warna yang sesuai.

2. Crazy 8s

Pengertian:
Teknik membuat 8 sketsa ide visual berbeda dalam waktu singkat (8 menit).

Tujuan:

• Memicu kreativitas cepat.

• Menghasilkan variasi desain sebanyak mungkin.

Langkah Pelaksanaan:

1. Lipat kertas menjadi 8 kotak sama besar.

2. Tentukan durasi ±1 menit per kotak.

3. Sketsa ide berbeda di tiap kotak, meski sederhana.

4. Setelah selesai, pilih ide yang paling potensial untuk dikembangkan.

Tips:

• Jangan terlalu fokus pada detail; utamakan kecepatan.

• Gunakan spidol/pensil tebal agar fokus pada bentuk besar.

Contoh Penerapan:
Untuk membuat desain feed Instagram promosi, setiap kotak bisa berisi tata letak dan kombinasi warna berbeda.

3. SCAMPER

Pengertian:
Metode memodifikasi atau mengembangkan ide/desain dengan tujuh langkah kreatif.

Tujuan:

• Menemukan alternatif desain dari konsep yang sudah ada.

• Mendorong inovasi.

Langkah Pelaksanaan:

• Substitute: ganti elemen (misal font serif → sans serif).

• Combine: gabungkan elemen (foto + ilustrasi).

• Adapt: sesuaikan dengan tren (layout majalah → layout media sosial).

• Modify: ubah bentuk, ukuran, warna.

• Put to another use: pakai desain untuk media lain (poster → banner website).

• Eliminate: hilangkan elemen tidak penting.

• Reverse: ubah urutan atau arah desain.

Tips:

• Fokus pada satu huruf SCAMPER per sesi agar lebih dalam.

• Lakukan analisis sebelum dan sesudah modifikasi.

Contoh Penerapan:
Mengubah desain flyer cetak menjadi animasi Instagram Story.

4. Moodboard Session

Pengertian:
Mengumpulkan referensi visual yang mewakili suasana dan arah desain.

Tujuan:

• Menyatukan persepsi tim soal gaya visual.

• Mempercepat proses eksekusi desain.

Langkah Pelaksanaan:

1. Tentukan tema proyek.

2. Cari referensi gambar, palet warna, font, ikon, ilustrasi.

3. Susun di papan digital (Pinterest, Figma, Miro).

4. Diskusikan kesan yang ingin dicapai.

Tips:

• Gunakan campuran referensi dari proyek nyata dan sumber inspirasi.

• Sertakan catatan singkat di tiap gambar.

Contoh Penerapan:
Untuk desain e-book promosi, moodboard bisa berisi palet warna biru laut, font sans-serif modern, dan foto lifestyle.

5. Round Robin

Pengertian:
Metode bergiliran memberikan ide, di mana setiap peserta menambahkan atau memodifikasi ide sebelumnya.

Tujuan:

• Menggabungkan kekuatan ide setiap orang.

• Menghindari dominasi oleh satu peserta.

Langkah Pelaksanaan:

1. Tentukan urutan peserta.

2. Peserta pertama mengemukakan ide dasar.

3. Peserta berikutnya menambahkan/mengembangkan ide tersebut.

4. Lanjutkan sampai semua mendapat giliran.

Tips:

• Gunakan timer untuk menjaga waktu setiap giliran.

• Catat semua ide di papan bersama.

Contoh Penerapan:
Saat menentukan konsep kampanye digital, ide pertama “tema retro” bisa dikembangkan jadi “tema retro + ilustrasi vektor + palet pastel.”

6. Brainwriting

Pengertian:
Setiap peserta menulis ide secara mandiri, lalu saling bertukar untuk dikembangkan.

Tujuan:

• Memberi kesempatan setara bagi semua peserta.

• Memunculkan ide dari orang yang cenderung pendiam.

Langkah Pelaksanaan:

1. Setiap orang menulis 3–5 ide di kertas/papan digital.

2. Kertas dipindahkan ke peserta lain.

3. Peserta mengembangkan atau menggabungkan ide yang diterima.

Tips:

• Gunakan template yang sama untuk memudahkan pembacaan.

• Jangan langsung diskusi verbal sebelum semua ide terkumpul.

Contoh Penerapan:
Untuk desain katalog online, peserta pertama menulis “layout grid minimalis” dan peserta lain menambahkan “efek hover interaktif”.

7. Role Storming

Pengertian:
Peserta berperan sebagai audiens atau tokoh tertentu untuk memberi ide dari perspektif mereka.

Tujuan:

• Memahami kebutuhan audiens dengan lebih empatik.

• Memunculkan sudut pandang baru.

Langkah Pelaksanaan:

1. Tentukan peran (misalnya: mahasiswa, influencer, pebisnis).

2. Setiap peserta memberi ide seolah mereka adalah tokoh tersebut.

3. Diskusikan ide yang muncul.

Tips:

• Gunakan persona yang jelas dan detail.

• Rekam sesi untuk analisis lebih lanjut.

Contoh Penerapan:
Berperan sebagai “remaja 17 tahun” untuk menentukan gaya visual poster konser K-pop.

8. Rapid Ideation

Pengertian:
Menghasilkan ide sebanyak mungkin dalam waktu sangat singkat tanpa menyaringnya.

Tujuan:

• Menghilangkan hambatan kreatif.

• Memicu ide spontan.

Langkah Pelaksanaan:

1. Tentukan durasi singkat (5–10 menit).

2. Semua peserta menuliskan ide tanpa memikirkan kualitas.

3. Setelah waktu habis, pilih ide terbaik untuk dikembangkan.

Tips:

• Gunakan timer untuk menjaga tempo.

• Jangan izinkan diskusi selama proses.

Contoh Penerapan:
Dalam mendesain kampanye media sosial, peserta menulis ide postingan tanpa batasan, seperti “meme interaktif” atau “infografis animasi”.

Read More

Pengertian Struktur Design Brief Dan Elemen-elemen Penting dalam Design Brief

1. Pengertian dan Struktur Design Brief

Pengertian Design Brief
Design brief adalah dokumen yang berisi panduan, tujuan, dan batasan proyek desain. Dokumen ini dibuat untuk memastikan komunikasi yang jelas antara klien dan desainer, sehingga hasil desain sesuai dengan kebutuhan dan harapan.

Fungsi Design Brief:

• Menyampaikan kebutuhan dan tujuan proyek dengan jelas.

• Memberikan panduan bagi desainer dalam proses kreatif.

• Menghindari kesalahpahaman antara klien dan desainer.

Struktur Design Brief
Biasanya terdiri dari beberapa bagian utama:

1. Informasi Klien – Identitas, profil, dan brand dari klien.

2. Tujuan Proyek – Apa yang ingin dicapai dengan desain ini.

3. Audiens/Target Market – Siapa yang menjadi target utama desain ini.

4. Konten dan Pesan – Informasi atau pesan yang harus disampaikan melalui desain.

5. Gaya Visual – Panduan estetika, seperti warna, tipografi, dan mood desain.

6. Batasan dan Waktu – Deadline, anggaran, dan aturan khusus lain yang harus diikuti

2. Elemen-elemen Penting dalam Design Brief

1. Klien

   • Identitas dan profil perusahaan atau individu yang memesan desain.

   • Menyertakan informasi brand, visi, dan nilai-nilai yang ingin disampaikan.

2. Tujuan

   • Menjelaskan apa yang ingin dicapai dengan desain, misalnya:

     • Meningkatkan penjualan

     • Meningkatkan awareness

     • Mengkomunikasikan pesan tertentu

3. Audiens

   • Siapa yang menjadi target desain.

   • Bisa meliputi usia, jenis kelamin, pekerjaan, minat, dan lokasi geografis.

4. Konten

   • Elemen-elemen yang harus ada dalam desain, misalnya teks, logo, gambar, atau informasi produk.

   • Menentukan prioritas konten agar pesan tersampaikan dengan jelas.

5. Gaya Visual

   • Panduan estetika yang mencakup warna, tipografi, ilustrasi, dan mood desain.

   • Bisa berupa referensi visual atau contoh desain yang disukai klien.

Read More

BELAJAR FIGMA

BELAJAR FIGMA

Apa Itu Figma?

 Figma adalah aplikasi desain grafis berbasis web yang digunakan untuk membuat UI (User Interface) dan UX (User Experience). Keunggulan utamanya adalah kemudahan kolaborasi secara real-time tanpa perlu instalasi software—cukup lewat browser. Figma memungkinkan beberapa orang bekerja dalam satu file desain, mirip seperti Google Docs untuk desain.

Fitur-Fitur Utama Figma

1. Kolaborasi Real-Time

   Semua perubahan yang dibuat oleh tim langsung terlihat tanpa harus mengirim ulang file.

2. Cloud-Based

   Bekerja langsung melalui browser tanpa instalasi. File otomatis tersimpan di cloud.

3. Komponen & Variants

   Komponen adalah elemen desain reusable. Variants memungkinkan berbagai versi dalam satu komponen (misal: tombol hover vs klik).

4. Auto Layout

   Mempermudah penyusunan elemen agar responsif terhadap perubahan ukuran.

5. Prototyping

   Tambahkan interaksi antar-artboard seperti klik, hover, animasi transisi.

6. Plugin

   Figma mendukung berbagai plugin seperti Unsplash (gambar), Iconify (ikon), dan Content Reel (konten dummy).

7. Developer Handoff

   Developer bisa melihat jarak, ukuran, dan kode CSS dari elemen desain.

Menu dan Interface Figma

Berikut elemen utama di interface Figma:

 Menu/Panel          | Fungsi                                                                

 Toolbar         | Alat desain seperti Select, Frame, Shape, Pen, Text, dan Hand tool.   

 Layers Panel   | Menampilkan struktur elemen dan artboard dalam bentuk hierarki.       

 Assets Panel    | Tempat komponen dan library disimpan untuk digunakan ulang.           

 Design Panel   | Mengatur properti objek: ukuran, posisi, warna, typografi, efek, dsb. 

 Prototype Panel | Menghubungkan artboard untuk membuat alur interaktif.                

 Inspect Panel   | Melihat spesifikasi desain untuk kebutuhan developer.                 

 Menu File       | Opsi menyimpan, mengekspor, berbagi file, serta pengaturan akun.      

Langkah-Langkah Belajar Figma untuk Pemula

 1. Membuat Akun

 Kunjungi [figma.com](https://www.figma.com), klik "Sign Up", dan buat akun gratis.

 2. Membuat File Desain Baru

 Klik tombol "New Design File" dari dashboard untuk memulai proyek baru.

 3. Memahami Workspace (Kanvas)

 Gunakan Frame Tool (F) untuk membuat layout layar (misalnya ukuran mobile, desktop).

Tambahkan elemen seperti Rectangle (R), Circle (O), Text (T), dan Image.

 4. Mengatur Layout & Auto Layout

 Terapkan Grid dan Constraints agar desain responsif.

 Gunakan Auto Layout untuk membuat komponen dinamis seperti daftar menu.

 5. Membuat Komponen dan Variants

 Seleksi elemen → klik kanan → pilih "Create Component".

Variants bisa ditambahkan untuk tombol dengan berbagai state (default, hover, disabled).

 6. Menambahkan Interaksi & Prototipe

 Buka tab Prototype, tarik garis antar frame untuk membuat flow.

 Atur trigger (misalnya: "On Click") dan animation (misalnya: "Smart Animate").

 7. Menggunakan Plugin

 Klik kanan → pilih "Plugins" → cari plugin seperti Unsplash, Figmotion, Iconify.

 8. Berbagi & Kolaborasi

 Klik tombol "Share", atur izin (View/Edit), dan bagikan tautan ke tim.

 9. Handoff ke Developer

 Gunakan tab Inspect untuk menunjukkan nilai CSS, jarak, warna, dan font kepada developer.

Tips Belajar Figma Secara Efektif

 Mulailah dari proyek sederhana seperti halaman login atau profil.

 Gunakan Figma Community untuk mencari inspirasi desain atau download UI kit gratis.

 Ikuti latihan membuat komponen, auto layout, dan interaksi dasar.

 Pelajari shortcut keyboard agar lebih produktif.

1. [Masivotech: Panduan Awal Figma untuk Desain UI/UX](https://masivotech.com/panduan-awal-figma-untuk-desain-ui-ux-yang-efektif/)

2. [Creativestation: Eksplorasi Kreativitas di Platform Figma](https://creativestation.id/eksplorasi-kreativitas-di-platform-figma-untuk-pemula/)

3. [Blog Advan: Panduan Menggunakan Figma untuk Pemula](https://blog.advan.id/10404/panduan-menggunakan-aplikasi-desain-figma-untuk-pemula/)

FOTO PENULIS:

Copyright @Rava

Read More

HOBI

 HOBI

Hobi Saya adalah mendengarkan musik. Saya mendengarkan musik dengan berbagai Genre seperti Classical, Pop, dll.

Read More

ALAMAT

 Saya beralamat di Jl. Moh. Yusuf  RT01/RW08, Kel. Purwokerto Wetan, Kec. Purwokerto Timur,

 Kab. Banyumas

Read More

SMK NEGERI 2 PURWOKERTO

 SMK NEGERI 2 PURWOKERTO

SMK Negeri 2 Purwokerto adalah Sekolah yang berada di Jl. Jend. Gatot Subroto No.82, Sitapen, Purwanegara, Kec. Purwokerto Timur, Kab. Banyumas, Jawa Tengah 53116

Read More