Wireframe

                                  

                                 Wireframe 

1. Pengertian Wireframe

    Wireframe adalah kerangka dasar dari sebuah tampilan aplikasi atau website. Isinya        hanya berupa garis, kotak, dan teks sederhana tanpa warna, gambar, atau dekorasi.          Tujuannya adalah untuk menunjukkan struktur, tata letak (layout), dan alur navigasi        dari suatu desain sebelum dibuat versi finalnya.
    Wireframe bisa disebut juga sebagai “blueprint” (cetak biru) untuk desain digital.            Jadi,  desainer, developer, dan klien bisa paham dulu gambaran kasar                                aplikasi/website sebelum menghabiskan waktu membuat desain detail.

2. Fungsi Wireframe  

   1. Membantu Perencanaan
       Menentukan posisi menu, tombol, gambar, teks, dan elemen lain.
   2. Komunikasi Antar Tim
       Menyampaikan ide desain dengan jelas kepada developer atau klien.
   3. Menghemat Waktu
       Lebih cepat memperbaiki kesalahan di tahap awal dibanding saat desain sudah jadi.
   4. Fokus pada Struktur
       Tidak terganggu detail visual (warna, font, ilustrasi), hanya fokus ke tata letak.

3. Ciri-Ciri Wireframe

    Sederhana, biasanya hanya berupa garis, kotak, dan teks dummy (contoh: lorem              ipsum).Tidak memakai warna atau dekorasi, hanya hitam-putih atau abu-abu.
    Menunjukkan urutan konten dan navigasi.
    Bisa dibuat dengan kertas (sketsa) atau software desain (misalnya Figma, Balsamiq,         Adobe XD).

4. Jenis-Jenis Wireframe

   1. Low-Fidelity Wireframe
      Sangat sederhana.
      Hanya kotak, garis, dan teks placeholder.
      Cocok untuk brainstorming cepat.
  2. Mid-Fidelity Wireframe
      Lebih detail, sudah ada ukuran elemen, grid, dan posisi lebih presisi.
      Bisa menunjukkan hierarki visual (mana yang lebih penting).
  3. High-Fidelity Wireframe (kadang disebut Mockup awal)
      Hampir mirip desain asli, lebih rapi.
      Kadang sudah ada ikon, tipografi, atau warna dasar.
      Dipakai untuk presentasi ke klien atau tim developer.
  4. Elemen yang Ada di Wireframe
      Header (judul, logo, navigasi utama).
      Sidebar (navigasi tambahan atau menu).
      Content area (isi utama halaman, misalnya artikel, gambar, video).
  6. Contoh Penggunaan Wireframe
      Misalnya kamu ingin membuat aplikasi jual beli baju:
      Halaman depan: ada logo, search bar, kategori produk, tombol login.
      Halaman produk: ada foto baju, harga, tombol “Beli”.
      Halaman checkout: form alamat, pilihan pembayaran, tombol “Pesan Sekarang”.

                        

             Membuat Header Dan Navigation

1.  Pertama buka figma.com dan login 

2. Lalu Di Dasbor figma,klik tombol New File (ikon+)

3. Lalu pencet logo persegi yang ada di bawah untuk menentukan frame yang akan di          gunakan 

4. Pilih ukuran sesuai kebutuhan dengan contoh Deskop

5.Menambahkan bentuk bentuk yang di inginkan,Dan tarik kanvas untuk membentuk.

6.Ubah Ukuran dan warna di panel kanan   

7. Atur warna dengan cara klik objek dan lihat fill di panel kanan dan pilih warna yang                          solid,gradien,atau image

8. Setelah itu pilih Text Tool (T) untuk menambahkan teks dan susun teks tersebut di tempah yang        diinginkan

 9. Import gambar dengan cara tekan Ctrl + Shift + K (Windows),Lalu pilih gambar dari        komputer dan atur posisi sesuai desain

10.Dan buatlah prototype dengan cara klik tab Prototype di panel kanan,pilih tombol /         objek dan tarik panah ke frame tujuan,lalu atur transisi (misalnya: On Click -                   Navigation to)

11. Setelah selesai save desain dengan cara klik tombol shere di kanan atas,salin                   link & dan bagikan