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.
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.
Unduh Pensil dari halaman add-ons Pensil. Setelah Anda menginstal Pencil, itu dapat diakses dari 'Tools'> 'Pencil Sketching'.
Seperti inilah penampilan Brizzly. Ini adalah aplikasi web yang cukup keren yang mengumpulkan Facebook dan Twitter Anda dalam satu halaman.
Ini adalah hasil akhir dari kerangka kawat. Bentuk utama dalam wireframe ini adalah, persegi panjang, kotak teks, dan tab. Bagian selanjutnya dari artikel akan memberikan contoh sederhana cara membuat setiap bentuk.
Langkah pertama dalam membuat bentuk bingkai kawat adalah menyeret bentuk dari menu 'Koleksi Bentuk' ke kanvas.
Ubah ukuran persegi panjang menjadi lebar dan tinggi yang sesuai.
Kita dapat menyesuaikan teks, perbatasan, dan warna latar belakang bentuk apa pun dalam 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 batas menjadi hitam (# 000000) dan ubah berat pembatas menjadi 1.
Layar properti teks memungkinkan kita menyesuaikan jenis font, ukuran, gaya, berat, warna, kecerahan, dan opasitas teks.
Rumah, konsep, tab gambar tiga tab yang ditumpuk di atas satu sama lain. Seret tiga 'Tab Panel' ke dalam persegi panjang. Ubah ukuran setiap tab sehingga setiap tab ditampilkan berdampingan.
Buka layar properti teks untuk menyesuaikan warna font 'Pictures' dan 'Draft'. Setel ke Gray (# 989898).
Seret bentuk 'Teks' ke kanvas untuk membuat setiap menu. Kita dapat menyesuaikan tampilan teks dengan mengakses jendela properti teks.
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 color picker dengan mengklik dua kali ikon eye drop. Cukup salin tempel kode Hex ke kode HTML warna pensil.
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
