Gunakan Firefox untuk Buat Mockups Mudah

Pensil adalah alat peremasan yang dapat kita gunakan untuk melukis antara muka pengguna aplikasi kami. Perkara yang menarik tentang Pensil ialah ringan, mudah digunakan, dan bersepadu dengan Firefox. Selain itu semua aplikasi open source percuma! Pada akhir artikel ini kami akan memberi anda demo ringkas mengenai cara menggunakan Pensil untuk membuat Brizzly seperti wireframe.

Kenapa kita membuat wireframes ?

Wireframe adalah sketsa dari idea susun atur halaman. Struktur garis depan memberi tumpuan kepada reka bentuk maklumat halaman untuk memastikan reka bentuk sesuai dengan keperluan pengguna. Wireframe biasanya terdiri daripada bentuk yang berbeza (seperti kotak, oval, dan berlian) untuk mewakili unsur kandungan, fungsi, dan navigasi. Bentuk-bentuk ini memaparkan penempatan mereka pada halaman.

Pada mulanya ia mungkin kelihatan seperti membuang masa mencipta lakaran kasar halaman. Bingkai wayar adalah penting untuk membolehkan pengguna anda memberi tumpuan kepada elemen kepentingan di halaman anda. Mewujudkan lakaran kasar halaman, tanpa unsur visual mewah, pergeseran perhatian pengguna kepada elemen penting seperti saiz, susun atur, dan penempatan komponen halaman anda. Kami akan mula mendapat pemahaman yang lebih baik mengenai apa yang pelanggan benar-benar mahu dan memerlukan daripada perisian apabila pengguna mula memusatkan perhatian pada elemen penting halaman. Mewujudkan rangka kawat membolehkan anda dan pengguna anda bekerjasama dengan berkesan dan mengenalpasti masalah reka bentuk yang berpotensi awal.

Bermula dengan Pensil

Muat turun Pensil dari halaman Tambah pada Pensil. Sebaik sahaja anda memasang Pencil, boleh diakses dari 'Tools'> 'Pencil Sketching'.

Inilah yang kelihatan seperti Brizzly. Ia adalah aplikasi web yang sangat kerap yang mengagregat Facebook dan Twitter anda dalam satu halaman.

Ini adalah hasil akhir rangka bingkai. Bentuk utama dalam wireframe ini adalah, segi empat tepat, kotak teks, dan tab. Bahagian seterusnya artikel akan memberikan contoh mudah bagaimana membuat setiap bentuk.

Mewujudkan Rectangle

Langkah pertama untuk membuat bentuk bingkai wayar ialah menyeret bentuk dari menu 'Bentuk Koleksi' ke kanvas.

Ubah saiz segi empat tepat pada lebar dan ketinggian yang sesuai.

Kita boleh menyesuaikan teks, sempadan, dan warna latar belakang mana-mana bentuk di Pensil. Klik kanan segiempat tepat dan pilih 'Properties' untuk membuka tetingkap Properties. Ini adalah skrin sifat latar belakang. Tetapkan warna latar belakang Rectangle ke putih (#FFFFFF).

Klik tab 'Sempadan' dan laraskan sifat sempadan. Tetapkan warna sempadan kepada hitam (# 000000) dan ubah berat sempadan kepada 1.

Skrin sifat teks membolehkan kami menyesuaikan jenis font, saiz, gaya, berat, warna, kecerahan, dan kelegapan teks.

Membuat Tab

Rumah, draf, tab gambar adalah tiga tab yang disusun di atas satu sama lain. Seret tiga 'Panel Tab' ke segi empat tepat. Ubah saiz setiap tab supaya setiap tab menunjukkan sisi bersebelahan.

Buka skrin sifat teks untuk menyesuaikan warna fon pada tab 'Gambar' dan 'Draf'. Tetapkan ia kepada Kelabu (# 989898).

Membuat Teks

Seret bentuk 'Teks' ke kanvas untuk membuat setiap menu. Kita boleh menyesuaikan penampilan teks dengan mengakses tetingkap sifat teks.

Tips Berguna untuk Menukar Warna

Warna adalah salah satu bahagian yang paling penting dalam menyampaikan wireframe yang menyenangkan. Cara yang paling tepat untuk mengubah warna bentuk adalah dengan menyatakan kod HTML warna. Memikirkan kod HTML untuk warna tertentu boleh menjadi sukar. Kita boleh menggunakan lembaran cheat warna HTML dari w3cschools.com untuk mencari kod HTML yang betul untuk warna tertentu.

Kami juga suka menggunakan colorzilla untuk memilih warna dari skrin dan menggunakannya dalam Pensil. Klik pada ikon penentu mata di sudut kiri bawah Firefox untuk memilih warna pada skrin. Kita juga boleh membuka pemetik warna ColorZilla dengan mengklik dua kali ikon drop mata. Hanya salin tampal kod Hex ke dalam kod HTML warna Pencil.

Kesimpulannya

Pensil adalah mudah digunakan alat wireframing. Integrasi pensil dengan Firefox membolehkan kita menggunakan plugin Firefox yang lain untuk membantu membuat wireframe yang lebih baik

Pautan
Muat Pensil
Muat turun Colorzilla
Lembaran Menipu HTML Warna W3C