Sumber Terbaik Untuk Sketsa Wireframes Berasaskan Grid

Proses merancang antara muka sentiasa bermula dengan generasi idea. Ini termasuk visualisasi, menyelidik laman web lain, dan prototaip cepat. Fasa idea awal ini adalah penting untuk memahami susun atur dan pengalaman pengguna anda berhasrat untuk membina. Jadi, bagaimanakah anda sebenarnya melaksanakan kerja wireframing pada projek baru?

Saya peminat kertas tradisional dan pensil dengan alat tambahan yang diperlukan. Tetapi wireframing digital juga besar, dan ia adalah pilihan untuk pereka moden. Dalam artikel ini, saya ingin berkongsi sumber terbaik untuk kedua-dua teknik untuk membantu anda membuat sendiri wireframes UI berasaskan grid.

Conceptualization UI / UX Awal

Mari kita mulakan dengan menjelaskan perbezaan antara a wireframe dan a prototaip. Kedua-dua perkataan ini sering digunakan secara bergantian kerana ia berkaitan dengan proses yang sama.

A wireframe ialah lakaran statik tunggal daripada UI halaman web atau aplikasi. Ia mungkin mempunyai petikan untuk menerangkan teks butang, margin, saiz unsur, atau bahkan animasi. Tetapi wireframes hanya draf kasar untuk halaman individu.

Begitu juga, a prototaip adalah seperti a carta aliran menunjukkan bagaimana halaman yang berbeza menghubungkan bersama-sama. Oleh itu prototaip menghubungkan wireframes untuk menunjukkan bagaimana butang yang berbeza atau pautan harus membawa kepada halaman lain.

Takrif ini tidak diukir dalam batu, sesetengah pereka mungkin mempunyai terminologi mereka sendiri, dan mungkin tidak bersetuju dengan kata-kata saya yang tepat. Tetapi ini adalah bagaimana saya sering melihat mereka diterangkan, dan berapa banyak pereka memahami istilah ini yang terbaik.

Jadi apa yang anda sepatutnya lakukan dengan kepingan konseptual awal ini? Adakah mereka benar-benar perlu? Saya akan mengatakan bahawa prototaip tidak selalu diperlukan, tetapi ia adalah idea yang sangat baik, terutamanya untuk mereka bentuk aplikasi dengan interaksi yang kompleks.

Tetapi wireframing sentiasa idea yang baik untuk setiap projek baru. Ia membantu anda tumpu pada gambar besar tanpa bimbang tentang butiran. Anda dapat memahami bagaimana keseluruhan halaman dibentangkan, dan ini tidak ternilai apabila anda merancang susunan konkrit.

Matlamat Untuk Wireframing

Setiap kali anda memulakan projek baru, anda harus merenung apa yang anda cuba selesaikan. Setiap tapak dibina dengan matlamat tertentu dalam fikiran. Banyak laman web mempunyai beberapa matlamat di mana beberapa matlamat lebih penting daripada yang lain.

Gunakan wireframing sebagai panduan untuk membantu anda mencari strategi terbaik untuk menangkap matlamat laman web. Ini mungkin tidak akan berlaku pada wireframe pertama, jadi bersiaplah untuk lakarkan banyak idea yang berbeza.

Cari laman web yang serupa, dan tuliskan ciri terbaik mereka. Menganalisis bagaimana kandungan dianjurkan dan bagaimana anda bergerak melalui setiap halaman.

Fikirkan wireframes dari a sudut pandang interaktif. Ini bukan sekadar gambar cantik. Mereka adalah perwakilan antara muka digital, dan anda mahu melukis idea anda dengan itu.

Mempunyai sumber berasaskan grid di tangan, sama ada mereka diperbuat daripada kertas atau mereka digital, boleh membantu banyak dalam lakaran cepat. Sekarang mari kita periksa sumber terbaik untuk membuat wireframes.

Grid Sketchpads

Anda boleh mula dengan lakaran lakaran asas asas pada kertas pencetak hanya untuk memetakan idea kasar. Secara peribadi, saya biasanya mula bekerja pada kertas pencetak, kerana dengan cara ini saya kurang prihatin mengenai grid dan lebih banyak tentang menjana idea.

Sketchpads grid dot adalah cara terbaik untuk pergi jika anda mahu membersihkan idea, dan memberi lebih banyak struktur. Grid membantu anda anggaran jarak antara item pada halaman, dan buat sejenis simetri dalam rangka kerja.

Terdapat banyak produk hebat di sana jika anda mahu mulakan wireframing di atas kertas, contohnya Pad Rhodia Dot datang dalam pelbagai saiz untuk kegunaan harian. Ia hanya mempunyai 80 muka surat tetapi ini adalah tipikal kebanyakan sketsa grid.

Satu lagi produk yang sangat sejuk dan disesuaikan adalah Dotgrid. Semua item Dotgrid lebih mahal daripada buku Rhodia, tetapi mereka datang dengan lebih banyak bahan dan reka bentuk penutup khusus.

Dotgrid bahkan menerima pesanan yang dipesan lebih awal reka bentuk pad papan kekunci anda sendiri. Setiap buku mengandungi hanya 100 lembaran, jadi termasuk bahagian depan & belakang anda mendapat kira-kira 200 muka surat untuk lakaran grid.

Beberapa sketsa grid dot lain yang saya ingin sebutkan termasuk Grid Behance Dot yang terikat pada hardcover dan spiral, walaupun hanya mengandungi 50 helai kertas.

Sketchbook Design Responsif adalah salah satu sumber terbaik untuk pereka web. Tidak ada pereka produk lain yang memerlukan sketsa reka bentuk responsif, tetapi pereka web sangat bermanfaat dari kebebasan menjana idea pada lebar peranti yang berbeza-beza di atas susun atur grid.

Pad rekabentuk responsif ini juga mempunyai 50 helaian berjumlah 100 muka surat, tetapi setiap halaman mempunyai empat grid responsif yang berbeza mewakili titik putus yang berbeza dalam reka bentuk responsif: desktop, komputer riba, tablet dan telefon pintar.

Walaupun reka bentuknya adalah hambar berbanding dengan buku-buku Dotgrid, tidak ada orang lain yang menganggap sketsa responsif untuk pereka web. Sekiranya anda masuk ke dalam perkara itu maka ia patut dipesan untuk memandu ujian.

Jika anda benar-benar menjadi barangan buatan tangan, dan tidak mahu menghabiskan apa-apa wang yang anda boleh juga cetak halaman grid anda sendiri dengan lakaran antara muka. Tawaran tapak percuma ini templat grid yang berlainan bahawa anda boleh mencetak, dan gunakan untuk wireframes yang ditarik tangan.

Grid datang dalam saiz surat A4 dan AS untuk pelbagai gaya kertas pencetak. Anda boleh memilih daripada banyak pilihan, seperti templat untuk penyemak imbas web bersaiz penuh, atau skrin iPhone yang berbeza.

Semua pilihan ini hebat, dan patut diterokai jika anda masuk lakaran pensel. Kertas adalah salah satu medium termudah untuk mendapatkan idea-idea baru dengan cepat, oleh itu sering pilihan yang dipilih oleh pereka UI.

Alat Digital dan Aplikasi Web

Terdapat begitu banyak program wireframing hebat di luar sana yang mereka boleh tidak dilindungi tanpa risiko analisis lumpuh, jadi untuk sekarang mari kita memberi tumpuan kepada beberapa pilihan terbaik untuk wireframing berasaskan grid.

Pertama, saya ingin menyebutkan bahawa anda boleh menggunakan alat Adobe seperti Illustrator buat sendiri wireframe anda. Ini bukan sebahagian daripada alur kerja setiap orang dan Illustrator pasti tidak bebas. Tetapi jika anda sudah bekerja dengan Adobe Creative Cloud maka itu mungkin tempat yang baik untuk bermula.

1. Moqups

Moqups adalah salah satu alat dalam talian yang terbaik untuk wireframing. Anda bekerja dengan editor visual dan perpustakaan aset untuk menyeret dan melepaskan seluruh halaman.

Setiap projek Moqups baru mempunyai grid yang telah ditentukan sebelumnya, dan menggunakan garis-garis ungu yang terang untuk membantu anda menjejaskan unsur menjadi penjajaran. Ini alat web yang hebat yang membuat reka bentuk dengan grid jadi lebih mudah.

Laman ini beroperasi secara lalai pada pelan bebas yang membatasi pengguna untuk 300 objek halaman. Laman ini mempunyai pilihan premium tetapi membayar yuran bulanan mungkin lebih menjengkelkan daripada hanya pergi dengan alat Adobe, atau pembelian satu kali Sketsa.

2. Grid Papr

Aplikasi web Grid Papr benar-benar percuma, dan menawarkan akaun awam dan peribadi untuk wireframe anda. Anda mencipta nama untuk projek anda, dan dapatkan URL unik anda untuk wireframe yang anda boleh edit daripada mana-mana komputer.

Setiap wireframe baru datang dengan grid yang membolehkan anda melakukan snap-to-grid pada semua elemen. Ciri-ciri mudah, tetapi ia cukup untuk buat lof fi nama lo-fi dalam beberapa minit. Hanya seret apa sahaja yang anda mahu ke halaman, dan ikut grid untuk membuat rentetan garis lintang.

3. Wireframe.cc

Wireframe.cc adalah salah satu alat yang paling sederhana dan paling minimum yang boleh anda gunakan untuk wireframing. Ia mempunyai a antara muka bebas kekacauan dengan grid pra-dibina dan bar alat terurus. Anda hanya klik & seret untuk membuat elemen baru pada kanvas. Anda juga boleh menyimpan dan berkongsi kerja anda.

Ini adalah satu lagi alat yang ditawarkan secara percuma dengan rancangan premium pilihan. Setiap pelan dibilkan setiap bulan, jadi ia sangat mirip dengan Moqups dalam struktur harga. Alat percuma boleh digunakan dari mana-mana komputer tanpa akaun.

4. Mockingbird

Mockingbird adalah satu lagi pilihan yang hebat, yang menawarkan lebih banyak ciri daripada kebanyakan alat wireframing. Anda boleh memulakan secara percuma tetapi perbicaraan terhad kepada 7 hari. Ini boleh menjadi gangguan kepada sesetengah pengguna, tetapi alat ini sangat luar biasa dan berjalan di semua pelayar.

Mockingbird mempunyai perpustakaan UI yang tidak berkesudahan seperti tab, accordion, menu dropdown, pemain video, dan pautan teks mudah. Grid lalai menggunakan sistem grid 960gs, tetapi anda boleh memilih dari 12, 16, dan 24 lajur.

Perkataan Akhir

Tidak kira sama ada anda memilih pemalsuan tradisional atau digital, ia sentiasa mengenai kualiti output. Terdapat banyak perkara yang perlu dipelajari apabila melakukan kerja seperti ini, jadi dapatkan alat apa pun yang paling selesa untuk anda.

Melangkah ke hadapan yang terbaik untuk dilakukan adalah baru mulai wireframing. Dapatkan rasa apa sahaja yang anda suka yang terbaik (kertas atau digital), dan buat sendiri. Sumber-sumber dalam artikel ini harus memberi anda lebih daripada cukup untuk memulakan dengan melayari interface digital anda sendiri.

(Cover foto oleh Oykun Yilmaz)