Pensil adalah alat wireframing yang dapat kita gunakan untuk membuat sketsa tiruan antarmuka pengguna aplikasi kami. Hal hebat tentang Pencil adalah bahwa ini ringan, mudah digunakan, dan terintegrasi dengan Firefox. Di atas semua itu adalah aplikasi open source gratis! Di akhir artikel kami akan memberikan Anda demo sederhana tentang cara menggunakan Pensil untuk membuat Brizzly seperti gambar rangka.
Mengapa kita membuat wireframes?
Sebuah wireframe adalah sketsa dari ide tata letak halaman. Sebuah wireframe berfokus pada desain informasi halaman untuk memastikan bahwa desain sesuai dengan apa yang dibutuhkan pengguna. Sebuah wireframe biasanya terdiri dari berbagai bentuk (seperti kotak, oval, dan intan) 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 dari suatu halaman. Bingkai kawat penting untuk membuat pengguna Anda fokus pada elemen penting di halaman Anda. Membuat sketsa kasar halaman, tanpa elemen visual yang mewah, 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 benar-benar diinginkan dan dibutuhkan klien dari perangkat lunak ketika pengguna mulai berfokus pada elemen-elemen penting dari suatu halaman. Membuat kerangka kawat memungkinkan Anda dan pengguna Anda berkolaborasi secara efektif dan mengidentifikasi masalah desain potensial sejak dini.
Memulai dengan Pensil
Unduh Pensil dari halaman add-ons Pensil. Setelah Anda memasang Pensil, itu dapat diakses dari ‘Alat’> ‘Sketsa Pensil’.
Membuat Rectangle
Langkah pertama dalam membuat bentuk bingkai kawat adalah menyeret bentuk dari menu ‘Koleksi Bentuk’ ke kanvas.
Membuat Tab
Rumah, konsep, tab gambar tiga tab yang ditumpuk di atas satu sama lain. Seret tiga 'Tabs Panel' ke dalam persegi panjang. Ubah ukuran setiap tab sehingga setiap tab ditampilkan berdampingan.
Membuat Teks
Seret bentuk ‘Teks’ ke kanvas untuk membuat setiap menu. Kita dapat menyesuaikan tampilan teks dengan mengakses jendela properti teks.
Tips Berguna untuk Mengubah Warna
Warna adalah salah satu bagian paling penting dalam memberikan 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 bisa menggunakan contekan warna HTML dari w3cschools.com untuk mencari kode HTML yang tepat untuk warna tertentu.
Kami juga ingin menggunakan colorzilla untuk memilih warna dari layar dan menggunakannya di Pencil. Klik pada ikon penetes mata di sudut kiri bawah Firefox untuk memilih warna pada layar. Kami juga dapat membuka colorer ColorZilla dengan mengklik dua kali ikon drop mata. Cukup salin tempel kode Hex ke kode HTML warna pensil.
Kesimpulan
Pensil mudah digunakan alat wireframing. Integrasi pensil dengan Firefox memungkinkan kami untuk menggunakan plugin Firefox lain untuk membantu menciptakan wireframe yang lebih baik
Tautan Unduh Pensil Unduh Colorzilla W3C HTML Color Cheat Sheet
