Sumber Daya Terbaik Untuk Membuat Sketsa Wireframes Berbasis Grid
Proses dari mendesain antarmuka selalu dimulai dengan ide generasi. Ini termasuk visualisasi, meneliti situs lain, dan prototyping cepat. Fase ide awal ini sangat penting untuk memahami tata letak dan pengalaman pengguna Anda berniat membangun. Jadi, bagaimana seharusnya Anda benar-benar melakukan pekerjaan wireframing pada proyek baru?
Saya penggemar kertas dan pensil tradisional dengan alat tambahan sesuai kebutuhan. Tapi penyadapan digital juga besar, dan itu merupakan opsi yang layak untuk desainer modern. Pada artikel ini, saya ingin berbagi sumber daya terbaik untuk kedua teknik untuk membantu Anda membuat sendiri gambar rangka UI berbasis jaringan.
Konseptualisasi UI / UX awal
Mari kita mulai dengan menjelaskan perbedaan antara a bingkai foto dan a prototipe. Kedua kata ini sering digunakan secara bergantian karena berhubungan dengan proses yang sama.
SEBUAH bingkai foto adalah sketsa statis tunggal UI dari halaman web atau aplikasi. Mungkin ada info untuk menjelaskan teks tombol, margin, ukuran elemen, atau bahkan animasi. Tapi bingkai gambar itu adil konsep kasar untuk masing-masing halaman.
Demikian pula, a prototipe seperti flowchart yang menunjukkan bagaimana berbagai halaman saling terhubung. Jadi prototipe menghubungkan wireframes untuk menunjukkan bagaimana berbagai tombol atau tautan mengarah ke halaman lain.
Definisi-definisi ini tidak diukir di atas batu, beberapa desainer mungkin memiliki terminologi sendiri, dan mungkin tidak setuju dengan kata-kata persis saya. Tapi ini adalah bagaimana saya sering melihat mereka menggambarkan, dan itu adalah bagaimana banyak desainer yang memahami istilah-istilah ini yang terbaik.
Jadi apa yang seharusnya Anda lakukan dengan potongan konseptual awal ini? Apakah itu benar-benar perlu? Saya akan mengatakan prototyping tidak selalu diperlukan, tapi itu ide yang sangat bagus, terutama untuk merancang aplikasi dengan interaksi yang kompleks.
Tapi penyadapan selalu merupakan ide bagus untuk setiap proyek baru. Ini membantu Anda fokus pada gambaran besar tanpa khawatir tentang detail. Anda memahami bagaimana keseluruhan halaman ditata, dan ini sangat berharga ketika Anda merancang tata letak yang konkret.
Tujuan Untuk Wireframing
Setiap kali Anda memulai proyek baru, Anda harus merenungkannya apa yang Anda coba pecahkan. Setiap situs dibangun dengan tujuan tertentu. Banyak situs bahkan memiliki beberapa tujuan di mana beberapa tujuan lebih penting daripada yang lain.
Gunakan wireframing sebagai panduan untuk membantu Anda menemukan strategi terbaik menangkap tujuan suatu situs web. Ini mungkin tidak akan terjadi pada bingkai gambar pertama, jadi bersiaplah untuk itu membuat sketsa banyak ide berbeda.
Cari situs web serupa lainnya, dan tuliskan fitur terbaiknya. Analisis bagaimana konten disusun dan bagaimana Anda bergerak melalui setiap halaman.
Pikirkan gambar rangka dari sudut pandang interaktif. Ini bukan hanya gambar cantik. Mereka adalah representasi dari antarmuka digital, dan Anda ingin membuat sketsa ide-ide Anda dengan itu dalam pikiran.
Memiliki sumber daya berbasis grid yang tersedia, apakah itu terbuat dari kertas atau digital, dapat banyak membantu dalam membuat sketsa cepat. Sekarang mari kita periksa sumber daya terbaik untuk membuat gambar rangka.
Sketchpads Grid
Anda selalu dapat memulai dengan sketsa gambar mini dasar di atas kertas printer saja memetakan ide-ide kasar. Secara pribadi, saya biasanya mulai bekerja pada kertas printer, karena dengan cara ini saya kurang peduli tentang kisi dan lebih banyak tentang menghasilkan ide.
Sketsa bantalan kotak dot adalah cara terbaik untuk pergi jika Anda mau bersihkan sebuah ide, dan berikan lebih banyak struktur. Grid membantu Anda memperkirakan jarak antar item pada halaman, dan buat semacam simetri dalam rangka gambar.
Ada banyak produk hebat di luar sana jika Anda mau mulai wireframing di atas kertas, misalnya Rhodia Dot Pad tersedia dalam berbagai ukuran untuk penggunaan sehari-hari. Itu hanya datang dengan 80 halaman tetapi ini cukup khas dari kebanyakan buku sketsa kotak.
Produk lain yang sangat keren dan dapat disesuaikan adalah Dotgrid. Semua item Dotgrid lebih mahal daripada buku Rhodia, tetapi mereka datang dengan lebih banyak bahan dan desain sampul khusus.
Dotgrid bahkan menerima pesanan khusus yang memungkinkan Anda desain sketsa khusus Anda sendiri. Setiap buku berisi hanya di bawah 100 lembar, jadi termasuk bagian depan & belakang Anda mendapatkan sekitar 200 halaman untuk membuat sketsa kotak.
Beberapa buku sketsa dot grid lain yang ingin saya sebutkan termasuk Behance Dot Grid yang hardcover dan spiral terikat, meskipun hanya berisi 50 lembar kertas.
Sketsa Desain Responsif adalah salah satu sumber daya terbaik untuk desainer web. Tidak ada perancang produk lain yang membutuhkan sketsa desain responsif, tetapi perancang web mendapat manfaat besar dari kebebasan untuk menghasilkan ide dengan berbagai lebar perangkat di atas tata letak kotak.
Bantalan desain responsif ini juga memiliki 50 lembar total 100 halaman, tetapi setiap halaman memiliki empat grid responsif yang berbeda mewakili breakpoint berbeda dalam desain responsif: desktop, laptop, tablet, dan smartphone.
Meskipun desainnya hambar dibandingkan dengan buku-buku Dotgrid, tidak ada orang lain yang menganggap buku sketsa responsif untuk perancang web. Jika Anda suka hal itu maka ada baiknya memesan satu untuk test drive.
Jika Anda benar-benar menyukai barang buatan tangan, dan tidak ingin menghabiskan uang, Anda juga bisa cetak halaman kisi Anda sendiri dengan Sketsa Antarmuka. Situs gratis ini menawarkan template kisi yang berbeda yang dapat Anda cetak, dan gunakan untuk wireframe yang digambar tangan.
Kisi-kisi tersedia dalam ukuran letter A4 dan US untuk berbagai gaya kertas printer. Anda dapat memilih dari banyak opsi, seperti templat untuk peramban web berdurasi penuh, atau layar iPhone yang berbeda.
Semua opsi ini sangat bagus, dan layak ditelusuri jika Anda tertarik sketsa pensil. Kertas adalah salah satu media termudah untuk mendapatkan ide-ide baru dengan cepat, sehingga seringkali merupakan pilihan yang disukai bahkan oleh desainer UI.
Alat Digital dan Aplikasi Web
Ada begitu banyak program penyadapan besar di luar sana yang hampir tidak dapat ditutup tanpa risiko kelumpuhan analisis, jadi untuk sekarang mari kita fokus pada beberapa opsi terbaik untuk wireframing berbasis grid.
Pertama, saya ingin menyebutkan bahwa Anda dapat menggunakan alat Adobe seperti Illustrator untuk buat wireframes Anda sendiri. Ini bukan bagian dari alur kerja semua orang dan Illustrator tentu saja tidak gratis. Tetapi jika Anda sudah bekerja dengan Adobe Creative Cloud maka itu mungkin tempat yang baik untuk memulai.
1. Moqups
Moqups adalah salah satu alat online terbaik untuk wireframing. Anda bekerja dengan editor visual dan perpustakaan aset untuk menarik dan melepas seluruh halaman.
Setiap proyek Moqups baru memiliki a kisi yang telah ditentukan sebelumnya, dan menggunakan garis-garis ungu cerah untuk membantu Anda mengambil elemen agar sejajar. Ini adalah alat web yang hebat yang membuat mendesain dengan kisi jauh lebih mudah.
Situs ini beroperasi secara default pada paket gratis yang membatasi pengguna untuk objek 300 halaman. Situs ini memang memiliki opsi premium tetapi membayar biaya bulanan mungkin lebih menyebalkan daripada hanya menggunakan alat-alat Adobe, atau pembelian Sketch satu kali.
2. Grid Papr
Aplikasi web Grid Papr sepenuhnya gratis, dan menawarkan akun publik dan pribadi untuk gambar rangka Anda. Anda membuat nama untuk proyek Anda, dan mendapatkan URL unik Anda sendiri untuk kerangka gambar yang dapat Anda edit dari komputer mana pun.
Setiap bingkai gambar baru dilengkapi dengan kotak yang memungkinkan Anda melakukan snap-to-grid pada semua elemen. Fiturnya sederhana, tetapi cukup buat bingkai foto lo-fi dalam hitungan menit. Cukup seret apa pun yang Anda inginkan ke halaman, dan ikuti kisi untuk membuat gambar rangka bintang.
3. Wireframe.cc
Wireframe.cc adalah salah satu alat paling sederhana dan paling minimal yang dapat Anda gunakan untuk wireframing. Ini fitur a antarmuka bebas kekacauan dengan grid pra-dibangun dan toolbar yang terorganisir. Anda cukup mengklik & seret untuk membuat elemen baru di kanvas. Anda juga dapat menyimpan dan berbagi pekerjaan Anda.
Ini adalah alat lain yang ditawarkan secara gratis dengan paket premium opsional. Setiap paket ditagih setiap bulan, sehingga sangat mirip dengan Moqup dalam struktur harga. Alat gratis ini dapat digunakan dari komputer mana pun tanpa akun.
4. Mockingbird
Mockingbird adalah pilihan hebat lainnya, yang menawarkan lebih banyak fitur daripada kebanyakan alat penyadapan. Anda dapat memulai secara gratis tetapi uji coba dibatasi hingga 7 hari. Ini dapat mengganggu sebagian pengguna, tetapi alat ini sangat luar biasa dan berjalan di semua browser.
Mockingbird memiliki perpustakaan yang tak ada habisnya elemen UI seperti tab, akordion, menu dropdown, pemutar video, dan tautan teks sederhana. Kisi default menggunakan sistem kisi 960gs, tetapi Anda dapat memilih 12, 16, dan 24 kolom.
Kata-kata terakhir
Tidak masalah apakah Anda memilih wireframing tradisional atau digital, selalu tentang kualitas hasil. Ada banyak yang harus dipelajari ketika melakukan pekerjaan semacam ini, jadi temukan alat apa pun yang terasa paling nyaman bagi Anda.
Bergerak maju yang terbaik untuk dilakukan adalah mulai saja wireframing. Rasakan apa pun yang Anda sukai (kertas atau digital), dan buat sesuai keinginan Anda. Sumber daya dalam artikel ini harus memberi Anda lebih dari cukup untuk memulai dengan wireframing antarmuka digital Anda sendiri.
(Foto sampul oleh Oykun Yilmaz)
