Halo teman-teman! 👋 Jadi kali ini aku pengen sharing tentang sesuatu yang seru banget di dunia desain, yaitu wireframe. Mungkin ada yang masih bingung, ‘Apa sih wireframe itu? Nah, jadi wireframe itu bisa dibilang kayak kerangka dasar tampilan web atau aplikasi. Ibaratnya sebelum rumah jadi indah dengan cat warna-warni dan perabot lengkap, pasti ada dulu dong gambar kerangka atau denahnya. Nah, wireframe juga gitu, tampilannya masih sederhana, biasanya cuma kotak-kotak aja tanpa warna, tanpa detail, tapi penting banget karena dari situ kita bisa lihat alur dan susunan tampilan yang akan kita buat nantinya.
Nah wireframe ini tuh kayak pondasi sebelum kita masuk ke tahap desain visual. Soalnya kalau langsung loncat ke desain penuh warna tanpa tahu susunannya, ntar bisa-bisa hasilnya berantakan atau malah nggak sesuai kebutuhan. Dengan wireframe ini, kita bisa tahu nih, menu mau ditaruh di atas atau di samping, tombol penting harus ada di bagian mana, gambar sebaiknya ditaruh di sisi mana, sampai kira-kira teks bakal terlihat nyaman atau nggak. Jadi, step ini bener-bener ngebantu banget biar desain kita lebih terarah dan matching.
Umumya, layout sebuah Headerwebsite terdiri dari: Header, Nav, Main, Footer, Header:
- Bagian ini biasanya berisi informasi awal dari sebuah website, biasanya diisi nama website, logo, dll
- Nav: Bagian ini berisi menu atau link navigasi suatu website
- Main: Bagian ini berisi konten utama di dalam website. Pada bagian main biasanya terdapat bagian-bagian kecil yang lain atau disebuah section.
- Footer: Bagian ini berisi informasi akhir dari sebuah website, biasanya diisi nama perusahaan, logo, link sosial media, alamat, email, dll.
Nah, di postingan ini aku bakal tunjukin gimana cara aku bikin wireframe di Figma dengan step yang simpel banget. Jangan bayangin ribet, karena kan kita belum mencobanya.
Jadiii, yuk ikutin aku! Siapa tahu setelah lihat cara aku, kamu jadi ikutan semangat bikin wireframe sendiri.
Jadi caranya seperti ini:
- Kalian Buka figma
- Buat file baru dan beri nama Wireframe Website (terserah kalian).
- Selanjutnya buat frame pada figma
- Pada bagian toolbar, klik Region Tools — Frame
- Selanjutnya setelah kita klik frame akan muncul frame yang akan digunakan. Karena pada tulisan ini kita akan membuat wireframe web, maka pilih frame Desktop.
- Jika sudah klik Desktop maka, akan muncul pada kanvas
Membuat Header
- Pilih ractangle untuk membuat kotak Rectangle ini digunakan untuk membuat header.
- Kemudian, buat ractangle pada frame
- Selanjutnya, Kita buat logo terlebih dahulu. Untuk membuat logo, kita bisa menggunakan shape Eclipse.
- Klik Shape Tools — Eclipse.
- Ubah warna Eclipse dengan warna yang lain atau gunakan warna abu abu yang berbeda agar dapat di bedakan .
- Selanjutnya, kita membuat kotak sebagai tanda bahwa nanati akan ada sebuah nama brand ataupun produk di samping logonya.
- Selanjutnya, pilih ractangle dan buat dengan enggunakan ukuran yang kecl saja, hingga jadi seperti ini.
- Jika sudah kita akan buat hal yang sama seperti tadi tetapi ini nantinya untuk menandakan menu menu seperti ( home,profile, dll ).
Hero Section (Bagian Tengah Atas)
- Selanjutnya kita akan membuat Teks utama (headline) dan penjelasan singkat.
- Caranya sama kita pilih ractangle kemudian buat sehingga menjadi seperti ini.
- Selanjutnya kita akan membuat peilihan seperti gratis ongkir, diskon, dll.
- Caranya sama kita pilih ractangle kemudian buat sehingga menjadi seperti ini.
- Tombol/box kategori, ini akan Membantu user cepat menemukan produk sesuai kategori yang diiginkan nantinya.
- caranya sama kita hanya perlu mebuat sebuah kotak dengan ukuran yang berbeda.
- Pertama buat kotak dengann ukuran 325 x 176 yang nantinya jadi seperti ini, dan berikan juga kotak kecil di atas pojok kanan untuk menmpatkan harga dengan enggunkaan warna abu abu agar terlihat.
- Selanjunya kita akan membuat tanda + dan kotak sebagai tanda bahwa user akan memesan produk tersebut
- pilih ractangle kemudian pilih pada line-buat tanda seperti dibawh ini, lalu buat kotak persegi panjang hingga menjadi seperti pada gambar di bawah ini.
- setelah kita sudah membuat bagan kotak seperti di atas.
- Selanjutnya kita seleksi semua kotak lalu di group, dan copy ( ctrl C+V ) menjadi 6, dan susun menjadi seperti gambar dibawah ini.
- Terdiri dari 2 baris × 3 kolom dengan total 6 produk yang nantinya ditampilkan.
Footer
- Selajuttnya kita akan membuat informasi kontak, alamat toko, social media, dll yang nantinya akan di letakkan di bawah.
- Buat ractangle untuk dasarnya sesuai dengan lebar sesuai dengan ukuran wiereframenya.
- Hasilnya kurang lebih seperti berikut.
0 Komentar