Pensil adalah alat wireframing yang dapat kita gunakan untuk membuat sketsa tiruan antarmuka pengguna aplikasi kita. Hal yang hebat tentang Pensil adalah ringan, mudah digunakan, dan terintegrasi erat dengan Firefox. Di atas itu semua, ini adalah aplikasi open source gratis! Di akhir artikel, kami akan memberi Anda demo sederhana tentang cara menggunakan Pencil untuk membuat wireframe seperti Brizzly.
Mengapa kami membuat wireframes?
Gambar rangka adalah sketsa ide tata letak halaman. Gambar rangka berfokus pada desain informasi halaman untuk memastikan bahwa desain tersebut sesuai dengan kebutuhan pengguna. Gambar rangka biasanya terdiri dari berbagai bentuk (seperti kotak, oval, dan berlian) untuk mewakili konten, fungsional, dan elemen navigasi. Bentuk-bentuk ini menampilkan penempatannya di halaman.
Pada awalnya mungkin tampak seperti membuang-buang waktu membuat sketsa kasar halaman. Bingkai kawat penting untuk membuat pengguna Anda fokus pada elemen penting di halaman Anda. Membuat sketsa kasar halaman, tanpa elemen visual yang menarik, mengalihkan perhatian pengguna ke elemen penting seperti ukuran, tata letak, dan penempatan komponen halaman Anda. Kami akan mulai mendapatkan pemahaman yang lebih baik tentang apa yang sebenarnya diinginkan dan dibutuhkan klien dari perangkat lunak saat pengguna mulai berfokus pada elemen penting dari sebuah halaman. Membuat kerangka kawat memungkinkan Anda dan pengguna Anda berkolaborasi secara efektif dan mengidentifikasi potensi masalah desain sejak dini.
Memulai dengan Pensil
Unduh Pensil dari laman pengaya Pensil. Setelah Anda memasang Pencil, Pensil dapat diakses dari ‘Alat’> ‘Sketsa Pensil’.
Seperti inilah penampilan Brizzly. Ini adalah aplikasi web yang cukup keren yang menggabungkan Facebook dan Twitter Anda dalam satu halaman.
Ini adalah hasil akhir dari rangka kawat. Bentuk utama dalam wireframe ini adalah, persegi panjang, kotak teks, dan tab. Bagian artikel selanjutnya akan memberikan contoh sederhana bagaimana membuat setiap bentuk.
Membuat Persegi Panjang
Langkah pertama untuk membuat bentuk bingkai kawat adalah menyeret bentuk dari menu 'Koleksi Bentuk' ke kanvas.
Ubah ukuran persegi panjang menjadi lebar dan tinggi yang sesuai.
Kami dapat menyesuaikan teks, batas, dan warna latar belakang bentuk apa pun dengan Pensil. Klik kanan persegi panjang dan pilih 'Properties' untuk membuka jendela Properties. Ini adalah layar properti latar belakang. Atur warna latar belakang Rectangle menjadi putih (#FFFFFF).
Klik tab 'Perbatasan' dan sesuaikan properti perbatasan. Atur warna tepi menjadi hitam (# 000000) dan ubah bobot tepi menjadi 1.
Layar properti teks memungkinkan kita menyesuaikan jenis font, ukuran, gaya, berat, warna, kecerahan, dan opasitas teks.
Membuat Tab
Tab beranda, draf, gambar adalah tiga tab yang ditumpuk satu sama lain. Seret tiga 'Panel Tab' ke dalam persegi panjang. Ubah ukuran setiap tab sehingga setiap tab ditampilkan berdampingan.
Buka layar properti teks untuk menyesuaikan warna font pada tab 'Gambar' dan 'Konsep'. Setel ke Gray (# 989898).
Membuat Teks
Seret bentuk 'Teks' ke kanvas untuk membuat setiap menu. Kita dapat mengatur tampilan teks dengan mengakses jendela properti teks.
Tip Berguna untuk Mengubah Warna
Warna adalah salah satu bagian terpenting dalam menghasilkan wireframe yang menyenangkan. Cara paling tepat untuk mengubah warna bentuk adalah dengan menentukan kode HTML warna. Mencari tahu kode HTML untuk warna tertentu bisa jadi sulit. Kita dapat menggunakan lembar contekan warna HTML dari w3cschools.com untuk mencari kode HTML yang tepat untuk warna tertentu.
Kami juga suka menggunakan colorzilla untuk memilih warna dari layar dan menggunakannya di Pensil. Klik ikon penetes mata di sudut kiri bawah Firefox untuk memilih warna di layar. Kami juga dapat membuka pemilih warna ColorZilla dengan mengklik dua kali ikon tetes mata. Cukup salin dan tempel kode Hex ke kode HTML warna Pensil.
Kesimpulan
Pensil adalah alat wireframing yang mudah digunakan. Integrasi Pencil dengan Firefox memungkinkan kami menggunakan plugin Firefox lain untuk membantu membuat wireframe yang lebih baik
Tautan
Download Pencil
Unduh Colorzilla
Lembar Cheat Warna HTML W3C
