23Jul
adalah alat wireframing yang bisa kita gunakan untuk membuat sketsa tiruan dari antarmuka pengguna aplikasi kita. Hal yang hebat tentang Pencil adalah ringan, mudah digunakan, dan terintegrasi dengan Firefox. Di atasnya semua itu adalah aplikasi open source gratis! Pada akhir artikel kami akan memberi Anda demo sederhana tentang bagaimana menggunakan Pensil untuk membuat bingkai kawat seperti Brizzly.
Mengapa kita membuat wireframes?
Sebuah bingkai gambar adalah sketsa ide tata letak halaman. Bingkai gambar berfokus pada desain informasi halaman untuk memastikan agar desain sesuai dengan kebutuhan pengguna. Sebuah wireframe biasanya terdiri dari berbagai bentuk( seperti kotak, oval, dan berlian) untuk mewakili elemen konten, fungsional, dan navigasi. Bentuk ini menampilkan penempatan mereka pada halaman.
Pada awalnya mungkin tampak seperti pemborosan waktu membuat sketsa kasar dari sebuah halaman. Bingkai kawat penting agar pengguna Anda fokus pada elemen penting di halaman Anda. Membuat sketsa kasar dari sebuah halaman, tanpa elemen visual yang bagus, 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 perangkat lunak dari pengguna saat pengguna mulai berfokus pada elemen penting sebuah halaman. Membuat bingkai kawat memungkinkan Anda dan pengguna Anda berkolaborasi secara efektif dan mengidentifikasi masalah desain potensial lebih awal.
Memulai Pencil
Download Pensil dari halaman add ons Pencil. Setelah Anda menginstal Pencil, ini dapat diakses dari 'Tools' & gt;'Pensil Sketching'.
Ini seperti Brizzly. Ini adalah aplikasi web keren yang menggabungkan Facebook dan Twitter Anda dalam satu halaman.
Ini adalah hasil akhir dari rangka kawat. Bentuk utama dalam wireframe ini adalah, empat persegi panjang, kotak teks, dan tab. Bagian selanjutnya dari artikel ini akan memberikan contoh sederhana bagaimana cara membuat masing-masing bentuk.
Membuat Persegi Panjang
Langkah pertama untuk menciptakan bentuk bingkai kawat adalah dengan menyeret sebuah bentuk dari menu 'Shape Collections' ke atas kanvas.
Mengubah ukuran persegi panjang ke lebar dan tinggi yang sesuai.
Kita bisa mengkustomisasi warna teks, border, dan background dari bentuk apapun pada Pensil. Klik kanan persegi panjang dan pilih 'Properties' untuk membuka jendela Properties. Ini adalah layar latar belakang properti. Atur warna latar belakang Rectangle menjadi putih( #FFFFFF).
Klik tab 'Border' dan sesuaikan properti border. Atur warna border menjadi hitam( # 000000) dan ubah batas bobot menjadi 1.
Layar properti teks mari kita menyesuaikan jenis font, ukuran, gaya, berat, warna, kecerahan, dan keburaman teks.
Membuat Tabs
Tab home, draft, picture adalah tiga tab yang ditumpuk di atas satu sama lain. Tarik tiga 'Tabs Panel' ke dalam persegi panjang. Ubah ukuran setiap tab sehingga setiap tab tampil berdampingan.
Buka layar properti teks untuk menyesuaikan warna font tab 'Gambar' dan 'Draft'.Set ke Grey( # 989898).
Membuat Teks
Tarik bentuk 'Teks' ke kanvas untuk membuat setiap menu. Kita dapat menyesuaikan tampilan teks dengan mengakses jendela properti teks.
Tip Berguna untuk Mengubah Warna
Warna adalah salah satu bagian paling penting dalam menghasilkan bingkai gambar yang menyenangkan. Cara yang 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 lembar 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 Pensil. Klik ikon eye dropper di sudut kiri bawah Firefox untuk memilih warna di layar. Kita juga bisa membuka pemilah warna ColorZilla dengan mengklik ganda ikon drop mata. Cukup copy paste kode Hex menjadi kode HTML warna Pensil.
Kesimpulan Pensil
mudah digunakan dengan alat wireframing. Integrasi pensil dengan Firefox memungkinkan kita untuk menggunakan plugin Firefox lainnya untuk membantu membuat wireframe yang lebih baik.
Links
Download Pencil
Download Colorzilla
W3C HTML Color Cheat Sheet