Gunakan Firefox untuk Membuat Maket Sederhana

Pensil adalah alat wireframing yang dapat kita gunakan untuk membuat sketsa tiruan dari antarmuka pengguna aplikasi kita. Hal yang hebat tentang Pencil adalah Pensil itu ringan, mudah digunakan, dan terintegrasi erat dengan Firefox. Di atas semua itu adalah aplikasi open source gratis! Pada akhir artikel, kami akan memberikan Anda demo sederhana tentang cara menggunakan Pensil untuk membuat gambar rangka seperti Brizzly.

Mengapa kita membuat wireframes ?

Gambar rangka adalah sketsa ide tata letak halaman. Gambar rangka berfokus pada desain informasi suatu halaman untuk memastikan bahwa desainnya sesuai dengan apa yang dibutuhkan pengguna. Bingkai foto biasanya terdiri dari berbagai bentuk (seperti kotak, oval, dan berlian) untuk merepresentasikan konten, fungsional, dan elemen navigasi. Bentuk ini menampilkan penempatannya di halaman.

Pada awalnya mungkin tampak seperti buang-buang waktu membuat sketsa kasar suatu halaman. Bingkai kawat penting untuk membuat pengguna Anda fokus pada elemen penting pada halaman Anda. Membuat sketsa kasar suatu halaman, tanpa elemen visual 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 fokus pada elemen-elemen penting dari suatu halaman. Membuat bingkai kawat memungkinkan Anda dan pengguna Anda berkolaborasi secara efektif dan mengidentifikasi masalah desain potensial sejak dini.

Memulai dengan Pensil

Unduh Pencil dari halaman add on Pencil. Setelah Anda menginstal Pensil, itu dapat diakses dari 'Alat'> 'Sketsa Pensil'.

Seperti inilah penampilan Brizzly. Ini adalah aplikasi web yang sangat keren yang menggabungkan Facebook dan Twitter Anda dalam satu halaman.

Ini adalah hasil akhir dari kerangka kawat. Bentuk utama dalam rangka gambar ini adalah, persegi panjang, kotak teks, dan tab. Bagian selanjutnya dari artikel ini akan memberikan contoh sederhana cara membuat setiap bentuk.

Membuat Rectangle

Langkah pertama membuat bentuk bingkai kawat adalah dengan 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 di Pensil. Klik kanan persegi panjang dan pilih 'Properties' untuk membuka jendela Properties. Ini adalah layar properti latar belakang. Atur warna latar Rectangle menjadi putih (#FFFFFF).

Klik tab 'Perbatasan' dan sesuaikan properti perbatasan. Setel warna tepi menjadi hitam (# 000000) dan ubah bobot batas menjadi 1.

Layar properti teks memungkinkan kita menyesuaikan jenis font, ukuran, gaya, berat, warna, kecerahan, dan opacity teks.

Membuat Tab

Tab home, draft, picture adalah tiga tab yang saling bertumpuk. Seret tiga 'Tabs Panel' ke dalam persegi panjang. Ubah ukuran setiap tab sehingga setiap tab menunjukkan berdampingan.

Buka layar properti teks untuk menyesuaikan warna font tab 'Gambar' dan 'Konsep'. Setel ke Gray (# 989898).

Membuat Teks

Seret bentuk 'Teks' ke kanvas untuk membuat masing-masing menu. Kita dapat menyesuaikan tampilan teks dengan mengakses jendela properti teks.

Tips Berguna untuk Mengubah Warna

Warna adalah salah satu bagian terpenting dalam memberikan bingkai gambar yang menyenangkan. Cara paling tepat untuk mengubah warna bentuk adalah dengan menentukan kode HTML warna. Mencari tahu kode HTML untuk warna tertentu bisa 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 dalam Pensil. Klik pada ikon penetes mata di sudut kiri bawah Firefox untuk memilih warna pada layar. Kita juga dapat membuka color picker ColorZilla dengan mengklik dua kali ikon eye drop. Cukup salin tempel kode Hex ke dalam kode HTML warna Pensil.

Kesimpulan

Pensil mudah digunakan alat wireframing. Integrasi pensil dengan Firefox memungkinkan kita untuk menggunakan plugin Firefox lainnya untuk membantu membuat gambar rangka yang lebih baik

Tautan
Unduh Pensil
Unduh Colorzilla
W3C HTML Cheat Sheet Warna