Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Panduan Pemula untuk Wireframing

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Indonesian (Bahasa Indonesia) translation by Zesar Matin Aryona (you can also view the original English article)

Wireframing merupakan langkah penting dalam proses desain layar. Terutama memungkinkan Anda untuk menentukan hierarki informasi desain Anda, sehingga lebih mudah bagi Anda untuk merencanakan tata letak sesuai dengan keinginan bagaimana pengguna Anda memproses informasi. Jika Anda belum pernah menggunakan wireframing, inilah waktunya untuk membasahi kaki Anda.

A simple wireframe

Seperti cetak biru arsitektur; Anda harus melihatnya dalam diagram dua dimensi hitam dan putih sebelum Anda mengerti bagaimana untuk membangun rumah yang sebenarnya. Demikian pula untuk desain layar, Anda tidak bisa mulai membangun lapisan pixel di photoshop, atau menulis blok kode, tanpa mengetahui mana informasi yang digunakan.

Pada tingkat yang lebih dalam, wireframe ini juga sangat berguna dalam menentukan bagaimana pengguna berinteraksi dengan antarmuka. Sebagai contoh, wireframe dapat berisi berbagai tempat dari menu atau kebiasaan tombol.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

Wireframing penting karena memungkinkan desainer untuk merencanakan tata letak dan interaksi antarmuka tanpa terganggu oleh warna, pilihan jenis huruf atau bahkan salinan. Saya ingin menjelaskan kepada klien saya bahwa jika pengguna tidak tahu ke mana harus menggunakan wireframe hitam putih, tidak peduli apa warna yang Anda akhirnya gunakan. Tombol harus jelas meskipun tidak berkilau atau berwarna cerah.

Seperti pondasi bangunan, dasarnya harus kuat sebelum Anda memutuskan untuk memberikannya lapisan cat mahal.


Langkah 1: Mendapatkan Inspirasi

Sebelum masuk ke rincian lebih lanjut, karena gambar dapat digambar seribu kata, lihatlah i ♥ wirefames. Anda akan mampu memperoleh ikhtisar cepat dan memahami visual bagaimana desainer lain menangani proses wireframingnya.

I Heart Wireframes

Mungkin juga ambil browser bookmarklet yang bagus, Wirify yang memungkinkan Anda untuk melihat versi "wireframe-d" dari situs langsung.

cnncom with wirify

Jika Anda terus-menerus mengamati apa yang desainer lain atau situs lakukan untuk wireframenya, Anda akan perlahan-lahan mendapatkan gambar dalam pikiran Anda bagaimana wireframe membantu menyusun informasi untuk layar.


Langkah 2: Merancang Proses Anda

Desain adalah sebuah proses yang organik dan dengan demikian pendekatan wireframing desainer yang berbeda dan terjemahan visualnya atau kode dengan cara yang berbeda. Anda harus menemukan proses yang mengluarkan kekuatan Anda sendiri dan merasakan kenyamanan. Berikut adalah diagram yang menunjukkan beberapa proses khas:

Wireframes Process

37Signals ini dikenal untuk menganjurkan penggunaan sketsa dan langsung ke kode, meskipun tampaknya beberapa desainernya melibatkan visual mockups dalam proses mereka juga.

Bagi saya, saya telah melalui cukup siklus desain untuk kode untuk memiliki proses yang agak efisien. Ini adalah langkah yang beberapa orang mungkin tidak terpikirkan, tapi aku juga mempertimbangkan setiap kerangka html/css yang akan saya gunakan diproyek.

Sebagai contoh, saya gunakan untuk membangun banyak situs dalam cetak biru, jadi aku akan menetapkan wireframes dan cetak biru saya ke grid 12-kolom yang sama. Hal ini mempercepat waktu prototyping dan pengembangan, karena tanpa menulis setiap elemen lebar ke stylesheet css saya, mereka sekarang pra-definisi dari satu sampai dua belas lebar kolom. Saya sekarang menggunakan cssgrid sebagai pengganti dukungan desain responsifnya, tapi masih diatur ke grid 12-kolom yang dapat Anda unduh sebagai template photoshop.

the 12-column cssgrid template

Seperti sudah saya katakan, terserah Anda untuk memutuskan proses yang Anda rasa nyaman, kadang-kadang Anda mungkin harus mencobanya beberapa kali sebelum menyadari bahwa ini merupakan proses yang paling efektif. Beberapa orang mungkin benar-benar baik dalam mensketsa dan mereka dapat memilih untuk tidak menggunakan alat wireframing sama sekali. Desainer lain mungkin ingin memiliki langkah sebanyak mungkin untuk meminimalkan penyimpangan atau membiarkannya memikirkan setiap iterasi saat desain mulai membentuk dan terbentuk.

Anda akhirnya akan mengembangkan proses pilihan Anda sendiri tapi demi tutorial aku akan menggunakan proses khas saya sebagai contoh:

Alasan mengapa saya biasanya menggunakan Illustrator sebagai alat wireframing saya, karena tiga alasan:

  1. Gaya - Anda dapat menyimpan tipe dan gaya objek dan menggunakannya kembali, seperti CSS.
  2. Sangat mudah untuk mengubah, memindahkan atau skala beberapa objek.
  3. Memberikan transisi mudah ke Photoshop nantinya.

Namun, saya menggunakan alat-alat lain dan itu tergantung pada skenario proyek. Saya akan menjelaskan secara singkat beberapa alat yang populer, kekuatan dan kelemahannya pada bagian nanti.


Langkah 3: Pilih Alat Anda

Berikut adalah beberapa alat yang populer tanpa urutan tertentu:

Balsamiq

Balsamiq menjadi populer sebagai pemroduksi wireframe yang menyerupai sketsa, sehingga segera terlihat jelas bahwa wireframe bukanlah produk jadi tapi sebuah proses kerja. Balsamiq juga memiliki perpustakaan komponen besar yang dapat digunakan kembali dimana Anda dapat drag dan drop dengan sangat mudah untuk merancang wireframe Anda.

Sample Balsamiq wireframe from the Balsamiq website

Anda juga dapat menggunakannya pada hampir semua platform, dengan versi desktop tersedia untuk Mac, Windows dan Linux, ditambah ada versi web jika Anda lebih suka bekerja online. Aplikasi pihak ketiga seperti iMockups untuk iOS juga mendukung format ekspor Balsamiq.

OmniGraffle

Favorit Mac lama, Omnigraffle juga memiliki pendukung penyumbang perpustakaan komponen luas yang dapat digunakan kembali; Graffletopia.

youll like omnigraffle if you enjoy using beautiful stencils like this one

Sejak dikembangkan secara khusus sebagai aplikasi diagram, Omnigraffle juga memiliki fitur yang kompleks seperti layout otomatis, dukungan kustom gaya objek, panduan pintar dan alat-alat grafik. Beberapa fitur ini juga tersedia di Adobe CS suite, tetapi jika Anda tidak memiliki CS suite, Omnigraffle adalah nilai yang bagus (~ $100) untuk memproduksi wireframes yang rinci.

Axure

Hampir seperti kakek dari alat wireframing, Axure adalah salah satu alat wireframing/prototipe kelas profesional pertama. Sampai saat ini, hanya tersedia di Windows. Saya pribadi tidak memiliki banyak pengalaman dengannya, tetapi terkenal menjadi alat yang digunakan secara luas oleh para profesional di bidang industri.

Flairbuilder

Anak baru di blok, Flairbuilder memiliki dukungan yang sangat kuat untuk interaksi.

from show hide to if-else interactions

Ini juga memiliki sebuah perpustakaan komponen besar, mendukung halaman master dan Anda dapat mengekspor prototipe untuk dilihat secara online.

Aplikasi online

Jika perangkat lunak desktop bukan secangkir teh Anda, ada alat seperti mockflow, hotgloo dan mockingbird.

Keynote/Powerpoint

Keynotopia "mengubah aplikasi presentasi favorit Anda menjadi alat prototyping cepat terbaik untuk membuat mockups mobile, web dan aplikasi desktop". Untuk pengguna non-mac, jangan khawatir, Keynotopia juga menawarkan template powerpoint.

Saya pribadi sangat merekomendasikannya jika Anda butuh aplikasi wireframe atau protoype mobile dengan cepat. Alternatif baik lainnya adalah Keynote Kungfu.

Adobe CS

Bagi mereka yang sudah akrab dengan Adobe suite, Fireworks, Illustrator dan Indesign, alat wireframing yang sangat mampu dengan kekuatan individu dan kelemahannya.

Fireworks

Anda dapat bekerja pada seluruh proses desain dalam Fireworks, dari wireframe dasar ke visual penuh. Fireworks mendukung halaman master (memikirkannya sebagai template yang dapat digunakan kembali dimana setiap mengedit template master akan diterapkan ke seluruh halaman anak), elemen perpustakaan dan Anda dapat membuat prototipe interaktif dengan Fireworks relatif cepat.

Illustrator

Ini adalah salah satu alat favorit saya karena sudah sangat akrab dengan Illustrator dan saya yakin banyak desainer di sini akrab juga dengannya. Saya menggunakan Illustrator ketika saya mencoba untuk melakukan cepat, tetapi wireframe kompleks, tanpa perlu interaktivitas.

Apa yang membuatnya menang? Kemampuan untuk mengekspor PSD dengan lapisan yang dapat diedit, dukungan copy dan paste yang kuat untuk Photoshop, serta kontrol tipografi yang kuat dengan jenis gaya yang dapat Anda simpan, mengedit dan menggunakan kembali, hampir seperti CSS.

InDesign

Kekuatan serupa seperti Illustrator dengan gaya kontrol tipografi yang lebih kuat, dukungan master halaman yang kuat dan kemampuan baru untuk membuat prototipe interaktif.

Have you seen the interactive controls of InDesign

Saya memilih Indesign ketika saya harus membuat prototip multi-halaman ketepatan interaktif yang tinggi. Satu-satunya peringatan bagi saya adalah dukungan ekspor Photoshop yang lemah untuk merancang visual.

ProtoShare

"Prototyping yang Kuat Membuat Mudah." Baru saja merilis versi 9 dengan palet wysiwyg baru. Cocok untuk dilihat.


Langkah 4: Pengaturan Grid

Ada banyak teori tentang sistem grid, tetapi tanpa pergi terlalu jauh ke dalamnya, aku akan menjelaskannya sebagai "cara terstruktur dan sederhana untuk elemen tata letak".

Saya menggunakan Illustrator untuk tutorial ini, tetapi langkah-langkahnya dapat diterapkan untuk alat Anda.

Pertama, mengatur ukuran dokumen. Saya menggunakan 1280 x 900 karena saya akan menggunakan cssgrid yang akan memungkinkan situs web untuk skala antara resolusi mobile maksimum 1140 piksel dengan mudah.

Tempatkan template unduhan dari cssgrid ke dalam dokumen Anda.

Tips:

Ada banyak template grid yang tersedia untuk diunduh, tetapi jika Anda tertarik untuk menyesuaikannya sendiri dapat melihat responsify.it.


Langkah 5: Menentukan Layout dengan Kotak

Mulailah dengan menggambar kotak di grid. Pikirkan tentang urutan informasi yang ingin Anda tampilkan untuk pengunjung Anda, atas ke bawah adalah yang paling mudah, diikuti oleh kiri ke kanan. Berikut adalah contoh gambar wireframe yang memiliki tata letak yang umum digunakan oleh perusahaan software saat ini:

Kadang-kadang, tergantung pada tujuan Anda dan entitas yang Anda rancang untuk apa, Anda bisa kreatif dengan tata letak, meskipun tetap menjaga hirarki informasi dalam pikiran. Ini adalah contoh nyata dari salah satu klien saya di mana saya telah melanggar dari teknologi konvensional layout situs perusahaan:

Berikut adalah sebuah layout untuk blog, dengan menempatkan iklan secara hati-hati dengan petunjuk khusus untuk klien:


Langkah 6: Menentukan Hirarki Informasi dengan Tipografi

Setelah Anda puas dengan kotak yang disusun, mulailah menurunkan sedikit dan potongan konten Anda untuk merasakan apakah informasi itu terstruktur dengan baik. Aturan praktis adalah sama: informasi yang Anda inginkan untuk disampaikan kepada audiens harus jelas, meskipun di wireframe hitam putih.

Hanya menggunakan ukuran font yang berbeda sebagai awal adalah cara yang bagus untuk membedakan antara tingkat informasi yang berbeda.

Jangan takut untuk bereksperimen pada tahap ini. Kadang-kadang, ketika Anda mengisi lebih detail, Anda mungkin menyadari tata letak asli tidak bekerja dengan baik. Itulah inti dari proses wireframing; untuk membuat iterasi sebanyak mungkin untuk mempersempit cara terbaik yang Anda coba berkomunikasi untuk mewakili informasi.

Contoh di bawah ini, saya memutuskan saya ingin screenshot untuk memiliki dampak yang lebih besar dan saya juga mulai menggunakan kotak hitam untuk mendefinisikan daerah yang akan mengambil pentingnya visual untuk situs ini:

Langkah 7: Mencari Setelan dengan Grayscale

Menggunakan spektrum grayscale dapat membantu Anda menentukan kekuatan visual elemen Anda tanpa harus memilih palet warna. Pada kenyataannya, ini dapat membantu Anda selama proses desain visual nanti.


Langkah 8: Definisi Wireframe Tinggi

Ini adalah langkah opsional, tetapi jika Anda suka mengambilnya secara bertahap Anda mungkin ingin mencobanya. Membuat definisi wireframe tinggi berarti hanya menambahkan rincian lebih lanjut, sebanyak mungkin, tanpa terlalu rinci kedalam rincian visual. Itu mungkin berarti mengisi salinan aktual kedalam wireframe dan mencoba untuk menentukan ukuran font yang ideal:

Itu juga dapat melibatkan warna:

Ide umumnya adalah bahwa pada tahap visual/kode yang Anda inginkan dalam mode pemolesan dan tidak lagi dalam mode penyusunan atau eksperimen. Melakukan siklus iterasi (umpan balik <-> wireframing) secepat mungkin dalam aplikasi wireframing yang Anda rasa nyaman dalam menggunakannya, daripada bergerak ke lapisan dan piksel di photoshop.

Sudah dikatakan, dalam skenario tertentu mungkin lebih ideal untuk melewati mendefinisikan rincian terlalu banyak dan pergi langsung ke tahap interaktif prototyping (ala 37signals). Argumen untuk ini adalah bahwa rincian interaksi tertentu tidak dapat dikomunikasikan sepenuhnya pada gambar datar.

Jika Anda bekerja dengan tim pengembang, Anda mungkin ingin menyerahkan wireframe yang disetujui kepada pengembang untuk dikodekan kerangka dasar saat Anda mengerjakan visual.


Langkah 9: Menerjemahkan Wireframe ke Visual

Disebutkan sebelumnya, alasan mengapa saya cenderung lebih suka menggunakan Illustrator untuk wireframing adalah karena saya dapat mengekspor ke dalam .psd dengan sebagian besar jenis lapisan yang dapat diedit. Pada saat saya di Photoshop saya tidak perlu mengeditnya terlalu banyak (Photoshop memiliki alat kontrol tipe inferior, meski banyak perbaikan di CS6):

Photoshop Export Options

Berikut adalah contoh wireframe yang diterjemahkan ke dalam visual. Tulang punggung dari wireframe ini cukup utuh, meski ada tweak yang dibuat secara visual. Anda juga dapat melihat situs langsungnya:

Webwise 2010

Kesimpulan

Kita sudah berada diakhir tutorial ini. Saya berharap telah menginspirasi Anda untuk mulai bereksperimen! Proses desain apapun, jangan takut untuk mengulang dan ulangi lagi.

Juga, habiskan beberapa waktu bereksperimen dengan alat dan proses yang berbeda. Anda akan menemukan investasi waktu yang layak setelah Anda menemukan sebuah aplikasi yang terasa intuitif untuk Anda.

Jangan ragu untuk mengajukan pertanyaan di komentar, terima kasih telah membaca!


Sumber Daya Tambahan

Jika Anda ingin mengetahui lebih lanjut tentang wireframing, Anda mungkin ingin melihat sumber daya ini.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.