Perbedaan antara kabel dasar, prototipe dan mockup konsep Desain 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 kartu Sim?

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. Singkatnya, Wireframe 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.

Apalagi jika Anda menggunakan topi dan pensil seperti balsem. 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, memberikan prototipe kepada pengguna untuk mengumpulkan umpan balik, berkenalan dengan 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 desain prototipe produk adalah proses berkelanjutan yang membutuhkan pengulangan dan peningkatan.

Alat prototipe

Mencari alat prototyping cepat yang bagus? Tidak ada anggaran? Tidak ada alasan. Mockplus Black Friday 2017 ada di sini! Bergabunglah dengan grup Slack Resmi Mockplus sekarang, dan admin akan menawarkan Anda kupon diskon 40% dan paket kit UI dan font gratis. Penawaran terbatas waktu ini berlaku untuk semua paket dan berlaku hingga 31 November, menghemat setidaknya $ 80 dari harga biasanya. Selain itu, Anda akan menerima dukungan teknis gratis seumur hidup di Mockplus, bahkan jika saat ini Anda bukan pengguna berbayar. Datang dan nikmati Mockplus Black Friday 2017!

Mockplus

Mockplus adalah alat prototyping lengkap untuk kebisingan cepat, desain cepat dan tampilan cepat. Ini memungkinkan Anda untuk membuat perangkat seluler untuk seluler (Android dan iOS), desktop (PC dan Mac) dan aplikasi 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.

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, termasuk grafik, tata letak, warna, dan presentasi visual yang lebih rinci. 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 memahami esensi desain dan memahami perbedaan antara kawat, maket, prototipe, Anda berada di garis depan dunia pengalaman desain pengguna.

Jika Anda dapat mengubah seri desain produk Anda menjadi alur kerja yang kohesif dan efisien, akan ada tikungan yang menakjubkan.

Kiat

  • Saat membuat Wireframe, 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