Perbedaan antara Konsep Desain UI / UX ekstensi kawat, prototipe dan mockup (Diperbarui)

prototipe mockup telframe

Apa perbedaan antara kawat, maket dan prototipe? Desainer berpengalaman telah menetapkan kondisi desain untuk desainer UI / UX.

Perbedaan antara kawat, prototipe dan mockup selalu membingungkan oleh banyak desainer, meskipun menjadi desainer yang berpengalaman, saya telah melihat banyak orang bertanya kepada Quora dan Reddit tentang istilah-istilah ini, jadi apa itu? untuk mengerti. Ini memecahkan banyak masalah dan menghemat energi untuk desainer.

Apa itu Wireframe?

Ini adalah struktur grafis dari situs web atau aplikasi yang berisi konten dan elemen. Seperti desain bangunan, dibutuhkan banyak pekerjaan dan peserta untuk menjadikannya gedung pencakar langit. Demikian pula, kabel kawat terlihat sederhana dan perlu dilakukan oleh desainer UX, UI, IxD. Sederhananya, telframe adalah desain tata letak sederhana yang memiliki 3 tujuan sederhana namun langsung:

  • Berisi informasi dasar
  • Gambar struktur dan tata letak
  • Visualisasikan antarmuka pengguna

Fitur visual dari kawat berkabel

Secara visual, headset berkabel memiliki batasan visual yang sangat jelas karena hanya memerlukan garis, kotak, dan abu-abu sederhana (warna abu-abu berbeda) untuk menyelesaikannya.

Layar berkabel memiliki batasan visual yang sangat jelas. Umumnya, desainer harus menggunakan hanya garis, kotak, dan abu-abu untuk melakukan (abu-abu yang berbeda berarti tingkat yang berbeda)

2. Kawat vektor sederhana

Symphrams sederhana termasuk gambar, video dan teks

3. Keuntungan dari kabel listrik

Konstruksi kawat cepat dan murah.

Terutama jika Anda menggunakan kertas dan pensil dan wiper seperti Balsamiq. Tentu saja, Anda harus menggunakan alat desain ini untuk membantu Anda memulai segera.

Dibandingkan dengan telframe definisi tinggi yang lengkap dan terperinci, jauh lebih mudah dan lebih penting untuk mengumpulkan ide melalui symphrame kelas atas. Kenapa tidak Ini karena orang lebih menekankan pada kinerja perangkat lunak, arsitektur informasi, pengalaman pengguna, jadwal interaksi pengguna dan penggunaan daripada mempertimbangkan fitur estetika elemen-elemen ini. Namun, dalam hal ini Anda dapat dengan mudah mengubahnya sesuai kebutuhan, tetapi Anda tidak harus mengonfigurasi pengodean dan pengeditan grafis.

4. Symphram Interaktif

Kadang-kadang, desainer lebih memilih untuk meningkatkan keandalan kabel untuk meningkatkan pentingnya antarmuka pengguna dalam beberapa hal dan untuk menunjukkan logika interoperabilitas antara pengujian instan dan elemen visual. Untuk menyelesaikan masalah ini dengan benar, program menggunakan simfram interaktif, juga dikenal sebagai telframe cetak.

Jika Anda ingin membuat kawat yang sedemikian rumit, Anda memerlukan UXPin, yang merupakan alat untuk memasang dan membuat prototipe kabel. Membuat prototipe interaktif dapat menjadi presentasi terbaik untuk tim dan klien yang sedang berkembang. Anda bertanya, "Apa yang terjadi ketika saya menekan tombol ini?" Ketika Anda memiliki masalah, Anda hanya perlu mengklik dan menunjukkan kepada pelanggan bagaimana berinteraksi dengan prototipe interaktif. Bahkan, itu mengesankan dan langsung.

5. Arahkan kawat dengan hati-hati

Jika Anda harus memberinya telfram kepadanya, Anda harus berhati-hati dengan pria yang benar-benar layak. Dia mungkin klien Anda, serta manajer non-teknis Anda. Tetapi dia tidak tahu bahwa kawat dan produk akhir mungkin tampak saling berhubungan. Dengan demikian, ia mungkin tidak memahami komunikasi internal dan mode kerja di antara mereka. Jadi, Anda harus mempresentasikan dan bagaimana membuat keputusan yang tepat.

Alat desain kabel

Kertas dan pensil

Kertas dan pensil adalah alat yang paling mudah untuk desain Wireframing. Buat strip acak dengan kertas, ini adalah kawat sederhana dengan garis dan kotak sederhana. Dengan bantuannya, desainer dapat menyajikan ide secara intuitif dengan teks atau komunikasi verbal yang lebih rinci dengan pelanggan dan eksekutif. Tetapi ini tidak digunakan dalam proyek resmi untuk perusahaan besar.

Balsamic

Kadang-kadang, desainer lebih memilih untuk meningkatkan keandalan kabel untuk meningkatkan pentingnya antarmuka pengguna dalam beberapa hal dan untuk menunjukkan logika interoperabilitas antara pengujian instan dan elemen visual. Balsamiq menyajikan serangkaian elemen untuk telframe statis dengan dua cara berbeda. Gaya lukisan tangannya membantu fokus pada tata letak, desain fungsional, semua warna putih dan hitam. Jadi Anda tidak akan mendengar keluhan tentang pengaturan warna dan efek visual.

Apa itu prototipe?

Permintaan prototipe lebih tinggi dari permintaan telfram. Perbedaannya adalah bahwa prototipe harus interaktif dan, sebanyak mungkin, prototipe resolusi tinggi yang sesuai dengan antarmuka pengguna akhir. Pada saat yang sama, ini memberikan pengalaman lengkap bagi penguji dengan mensimulasikan antarmuka produk yang sebenarnya dan interaksi fungsional.

1. Keuntungan dari prototipe

"Membuat prototipe yang ramah tim membantu lebih banyak konektivitas antara desainer dan pengembang."

Mengapa ini sangat penting? Prototipe ini biasanya digunakan oleh pengguna untuk pengujian produk. Menguji prototipe dapat menghemat biaya dan waktu pengembangan pada tahap yang sangat awal. Dengan demikian, arsitektur produk tidak berkurang karena antarmuka interaktif yang tidak masuk akal. Jadi prototipe adalah pencapaian sempurna bagi perancang dan pengembang untuk menguji produk.

Selain itu, menyediakan prototipe bagi pengguna untuk mengumpulkan umpan balik adalah manfaat yang akan membuat Anda mengetahui semua detail produk Anda dan menginspirasi seluruh tim. Sebagian besar alat prototyping dapat membangun prototipe dengan cepat dan efisien, tetapi tidak perlu dikodekan.

Tujuan prototipe jelas: untuk menyederhanakan interaksi pengguna dan antarmuka sebanyak mungkin. Ketika tombol ditekan, operasi yang sesuai harus dilakukan dan halaman yang relevan muncul, mencoba meniru pengalaman produk lengkap. Anda bertanya, "Apa yang terjadi ketika saya menekan tombol ini?" Ketika Anda memiliki masalah, Anda hanya perlu mengklik dan menunjukkan kepada pelanggan bagaimana berinteraksi dengan prototipe interaktif. Bahkan, itu mengesankan dan langsung.

2. Fitur visual dari prototipe

Jelas, prototipe harus memiliki fitur estetika produk, dan mencoba menyamakan versi terbaru. Pada dasarnya, ini adalah skin produk yang tidak memiliki HTML / CSS / JS, dan Anda tidak perlu menelusuri server dan database.

3. Tes prototipe

Pengujian prototipe merupakan langkah penting dalam proses desain prototipe, yang merupakan langkah penting dalam keseluruhan proses. Cara melakukan tes validasi adalah topik besar untuk dibicarakan di sini. Tes sederhana dapat memakan waktu hingga satu jam, dengan 5 atau 6 acara utama untuk diuji. Berikut adalah beberapa pertanyaan umum untuk referensi Anda:

  • Bagaimana cara pengguna memulai? (Cari atau lihat?)
  • Apa yang pertama kali dilakukan pengguna? dan selanjutnya?
  • Bagaimana dia membuat keputusan akhir?
  • Apakah mereka mengerti tujuan dari desain? Apakah ada tantangan?

Membuat prototipe produk adalah proses berkelanjutan yang membutuhkan iterasi dan peningkatan.

Alat prototipe

Mockplus

Mockplus adalah alat prototyping komprehensif untuk kebisingan cepat, desain cepat dan tampilan cepat. Ini memungkinkan Anda membuat mockup untuk aplikasi seluler (Android dan iOS), desktop (PC dan Mac) dan web. Mockplus 3.2 telah menambahkan mode desain aliran UI, perangkat keras pengulangan, proyek dan template demo, dan sketsa impor. Fitur lain, seperti Mode Desain Peta Pikiran, akan tersedia dalam versi setelah Mockplus 3.2.

https://www.mockplus.com

iDoc

Berkolaborasi dengan iDoc sebagai alat pengiriman desain, memberikan sumber daya desain, serta prototipe cahaya. Proses berkelanjutan memungkinkan perancang UI memuat skrip visual dari Photoshop, Adobe XD, dan plugin Sketch.

Sangat mudah dan mudah untuk membuat koneksi interaktif dengan menambahkan titik kontak untuk menghasilkan prototipe dalam hitungan detik. Dengan 7 gerakan dan 13 animasi, Anda dapat mencapai prototipe interaktif yang mudah dicetak. Ada 3 pengaturan untuk tautan, beranda, dan tautan eksternal. Pelajari lebih lanjut, itu akan lebih mengejutkan Anda!

UXPin

UXPin telah menciptakan lebih dari 900 elemen UI yang berbeda sehingga Anda dapat membuat kabel dan prototipe. Fungsi breakpoint yang responsif memungkinkan pengguna untuk membuat prototipe dan kartu sim sensitif yang beroperasi pada berbagai perangkat dan resolusi.

Apa itu maket?

Mockup adalah "skrip visual" yang digunakan untuk menampilkan desain visual suatu produk. Ini memiliki elemen visual yang lebih kaya daripada kabel string, termasuk grafik, tata letak, warna, dan presentasi visual terperinci lainnya. Sampai batas tertentu, ini adalah desain akhir dari produk.

Seperti kabel, Mockup itu statis dan tidak berfungsi. Ini berfokus pada penampilan produk dengan menambahkan banyak elemen visual untuk mencapai akurasi yang lebih besar. Ini sering digunakan dalam diskusi desain visual untuk meningkatkan desain visual produk.

Alur desain

Setelah Anda mengetahui esensi desain, perbedaan antara teleframe, maket, prototipe, Anda berada di garis depan dunia pengalaman pengguna.

Jika Anda dapat mengubah seri desain produk Anda menjadi alur kerja yang jelas dan efisien, hal-hal menakjubkan akan terjadi.

Kiat

  • Saat membuat kawat, coba gunakan elemen yang dapat diedit dan dapat digunakan kembali. Dalam hal ini, Anda akan terus menghapus elemen untuk melakukan prototipe berdasarkan kabel berkabel.
  • Saat memasang kabel, cobalah untuk mengumpulkan ide dan ide dari tim Anda dan pelanggan Anda, dan cobalah untuk mencerminkan mereka dalam desain simfoni.
  • Gunakan alat Anda yang paling nyaman

Juga tertarik pada:

Alat dan aplikasi desain mockup dan teleframing terbaik untuk desainer UI / UX 2017

UX vs UI vs IA vs IxD: 4 Mencampur Ketentuan Desain Digital

Buku Desain dan Sumber UI / UX Terbaik untuk Desainer

Awalnya diterbitkan di www.mockplus.com.