.png)
Membuat Wireframe Website dengan Figma
- Buka Figma
- Buat File baru dan beri nama Wireframe Website
- Selanjutnya buat frame dengan cara : Pada bagian toolbar, klik Region Tools - Frame (F)
- Lihat di bagian Right Sidebar (Inspector), lalu pilih frame yang akan digunakan. Karena pada tulisan ini kita ingin membuat wireframe web, maka pilih frame Desktop. Jika nanti kita ingin membuat wireframe yang lain seperti phone atau table, maka kita bisa memilih frame tersebut.
- Frame Desktop yang dipilih akan dibuat pada canvas
- Buat background menjadi warna hitam
Membuat Header
- Buat sebuah Rectangle. Klik Shape tools — Rectangle (R)
- Kemudian, buat rectangle di Frame. Rectangle ini digunakan untuk membuat header website,untuk menambahkan opsi warna gradient tercantum pada gambar ke 2.
- Lalu buat logo terlebih dahulu. Untuk membuat logo, kita bisa menggunakan shape Eclipse dengan cara (Klik Shape Tools — Eclipse). Buat logo sederhana pada bagian Header.
(note: untuk membuat gambar user seperti di atas dapat dilakukan dengan cara membuat lingkaran berwarna abu 2x lalu duplikat lingkaran putihnya. lalu seleksi ketiga tersebut dan klik kanan pada mouse lalu cari perintah (use as mask)
Tambahkan Ikon dengan cara search pada asset
Tambahkan Ikon dengan cara search pada asset
- Tambahkan Rectangle di tengah tengah header (untuk search) dan tambahkan ikon search lewat asset.
Membuat Banner Promo
- Buat Rectangle lalu ujungnya dibuat melengkung (Corner Radius) dan diberi warna gradient
- Tambahkan Teks Promo Spesial dengan warna dan font yang berbeda.Teks Promo menggunakan font Aclonica sedangkan Spesial menggunakan font Alatsi
- Lalu Tambahkan 2 Rectangle yang bertujuan memperlengkap banner dan Font penjelasan Promo.
Membuat Navigasi
- Tambahkan 2 Rectangle untuk menu navigasi.
- Tambahkan Teks Seperti Promo,Semua Produk,dll. dan juga tambahkan garis line untuk pembeda/pembatas.
- Lalu yang Terakhir tambahkan gambar produk di kotakan kosong sebagai pelengkap.
Hasil Akhir
0 komentar:
Posting Komentar