Tingkatkan alur kerja Anda dengan alat prototipe untuk desainer

Saya tidak tahu tentang Anda, tetapi saya selalu mencari alat pembuatan prototipe yang sempurna untuk alur kerja desain web saya. Ada banyak pilihan di luar sana, tetapi satu hal yang pasti: Anda dapat bekerja lebih efisien pada proyek Anda dengan pembuatan prototipe cepat.

Adakah penggemar HTML, CSS, atau Javascript di luar sana? Jika ini adalah teknologi yang Anda sukai, Anda mungkin saja menjadi Prototipe Cepat. Sebagai desainer web, semakin banyak dari kita telah menjembatani kesenjangan dan melakukan beberapa pekerjaan pengembangan front-end. Selain menjadi materi iklan visual superstar, kami juga ahli pembuat kode.

Dengan memiliki prototipe kode yang berfungsi, Anda dapat memulai dan menjalankannya dengan cepat, dengan kemampuan untuk membagikan situs Anda dengan klien dan mendapatkan umpan balik di awal proses. Jika pengkodean bukan keahlian Anda, tetapi Anda masih ingin membuat prototipe dengan cepat, ada sejumlah alat di luar sana untuk memberikan prototipe berkualitas kepada klien Anda.

Mengapa prototipe cepat?

Prototyping cepat sering menjadi komponen kunci dalam proses tangkas. Contoh situs Anda yang aktif dan berfungsi dirancang dan dikembangkan, dan seringkali kode dari prototipe dapat digunakan kembali nanti untuk proses pengembangan yang sebenarnya. Umpan balik dicari dan diberikan sejak awal proses, yang membantu mengurangi jumlah perubahan selama fase pengembangan. Desainer sering setuju bahwa itu meningkatkan desain akhir karena variasi yang berbeda dicoba di sepanjang jalan. Saat membuat prototipe, penting untuk memilih alat yang memungkinkan Anda bekerja dengan cepat dan efisien, terlepas dari apakah kode terlibat atau tidak.

Rapid Prototypers memberikan nilai pada setiap proyek, dan klien pasti senang melihat contoh yang berfungsi. Kebanyakan orang visual dan jika prototipe tersedia untuk mereka, mereka merasa bermanfaat untuk melihat desain di browser, lebih disukai di beberapa perangkat.

Prototipe statis dan bekerja

Secara tradisional, desainer akan membuat mockup statis untuk prototipe, seringkali di Photoshop atau Illustrator. Maket statis ini memberikan nilai yang luar biasa, tetapi prototipe yang berfungsi adalah pilihan yang bagus karena desain dapat diuji secara instan di browser saat dikembangkan. Banyak desainer menemukan bahwa ketika keterampilan pengkodean mereka semakin kuat, mereka membuat kode lebih cepat dan mendesain di browser menjadi norma bagi mereka. Jika Anda menginginkannya, Anda tidak harus bergantung pada mockup Photoshop/Illustrator statis seperti dulu.

Seberapa rinci prototipe harus?

Tidak ada jawaban benar atau salah untuk jumlah detail desain yang perlu Anda berikan, itu hanya tergantung pada klien dan proyek. Anda mungkin akrab dengan istilah, "kesetiaan," di dunia desain. Ini mengacu pada jumlah detail dan interaksi yang termasuk dalam desain. Fidelitas rendah sangat mendasar, sering kali "seperti sketsa", dan tidak memungkinkan pengguna untuk berinteraksi dengan desain. Sangat sedikit detail desain yang disediakan dan fidelitas rendah hanya mencakup informasi dasar untuk penempatan komponen dalam prototipe. Prototipe kesetiaan tinggi sering memungkinkan interaksi pengguna dan dekat dengan representasi situs web yang sebenarnya. Elemen desain sering kali mengandung banyak detail dan sangat halus.

Prototipe kesetiaan rendah.

Prototipe kesetiaan tinggi.

Alat yang Anda pilih untuk prototipe Anda akan bergantung pada persyaratan fidelitas. Yang satu belum tentu lebih baik dari yang lain, itu hanya tergantung pada ruang lingkup proyek.

Alat Prototipe Hebat

Sekarang setelah kita membahas dasar-dasar pembuatan prototipe, mari kita lihat beberapa alat yang tersedia. Alat prototipe memiliki tingkat dan batasan fidelitas yang berbeda. Jika pengkodean ada di ruang kemudi Anda, luar biasa! Namun kita juga akan melihat sekilas beberapa opsi yang tidak memerlukan pengetahuan kode apa pun.

Alat prototipe untuk pengkodean cepat

Kerangka kerja adalah alat yang menyediakan titik awal kode standar yang terdiri dari HTML, CSS, JS, dll. Dalam kasus prototipe, kerangka kerja adalah pilihan yang bagus untuk membuat proyek web dengan cepat. Ini juga dapat sangat membantu untuk membuat tema pemula yang dapat Anda gunakan kembali untuk prototipe berikutnya.

Ada dua kerangka kerja hebat yang memungkinkan pembangunan cepat. Bahkan saat coding, Anda memiliki pilihan untuk memilih fidelitas yang lebih rendah atau fidelitas yang tinggi. Anda bisa mendapatkan detail, atau dasar, seperti yang Anda inginkan saat mendekati pembuatan prototipe cepat. Setelah Anda mempelajari nuansa alat ini, Anda akan terkejut melihat betapa cepatnya segala sesuatunya berjalan.

Opsi prototipe cepat satu – Twitter Bootstrap

Saat ini Twitter Bootstrap ada di versi ketiganya, jadi telah disempurnakan di sepanjang jalan. Ini adalah kerangka kerja yang bagus untuk membuat prototipe yang berfungsi jika Anda ingin membuat beberapa kode. Ini bagus karena responsif, mudah dipelajari, dan memiliki banyak komponen desain seperti tombol, model, ikon, dll. Dengan elemen ini, Anda dapat membuat dan menjalankan proyek web dengan cepat dan mudah. Banyak situs web yang dibangun menggunakan Bootstrap, sehingga kode prototipe juga dapat digunakan di kemudian hari.

Opsi prototipe cepat dua – Pondasi

Seperti Twitter Bootstrap, Foundation adalah pilihan yang bagus untuk membuat prototipe dengan cepat. Kerangka kerja ini lebih mendasar daripada Bootstrap, dan membutuhkan lebih banyak gaya CSS di muka karena tidak banyak default. Ini juga merupakan pilihan yang bagus karena Anda dapat memulai dan menjalankan dengan cepat sambil juga mengembangkan kode yang dapat digunakan kembali. Anda dapat menggunakan alat ini untuk membuat prototipe yang dapat berupa fidelitas rendah atau fidelitas sangat tinggi, tergantung pada preferensi Anda.

Opsi prototipe yang tidak memerlukan pengkodean

Seperti yang dijanjikan, berikut adalah beberapa opsi pembuatan prototipe yang tidak memerlukan pengkodean apa pun. Ada banyak pilihan untuk kesetiaan tinggi dan rendah, atau sesuatu di antaranya.

Opsi prototipe cepat tiga – kertas dan pensil tua yang bagus

Prototipe statis ini dapat dibuat dengan sangat cepat. Metode ini mudah digunakan, dan Anda seharusnya sudah terbiasa dengan fungsinya! Meskipun dianggap sebagai kesetiaan yang rendah, membuat sketsa dapat menghilangkan tekanan dari proyek dan memungkinkan ide mengalir dengan bebas. Percaya atau tidak, terkadang hanya ini yang Anda butuhkan untuk sebuah prototipe. Itu hanya tergantung pada proyek dan klien.

Opsi prototipe cepat empat – ubin gaya

Ubin gaya adalah pilihan yang bagus jika Anda lebih suka pendekatan statis prototyping dan juga menginginkan sesuatu yang fidelitasnya tinggi. Maket desain memiliki tempat yang kuat dalam desain web, (bagaimanapun juga, elemen desain adalah apa yang kita butuhkan untuk membangun halaman). Tetapi sebelum menginvestasikan waktu untuk membuat mockup satu halaman penuh, ubin gaya adalah solusi yang bagus. Ini berfungsi sebagai langkah penting sebelum menginvestasikan waktu dalam prototipe lengkap yang terperinci. Tesis berisi semua informasi visual yang akan dimiliki mockup statis. Warna, citra, gaya tombol, dll. disertakan untuk memberi klien gambaran tentang seperti apa elemen desain itu nantinya.

Opsi prototipe cepat lima – Omnigraffle

OmniGraffle adalah opsi hebat yang memungkinkan Anda membuat wireframe situs web dengan cepat, yang berfungsi sebagai prototipe fidelitas rendah hingga sedang. Anda dapat menambahkan tautan, memilih dari gaya dan objek yang telah ditentukan sebelumnya, dan banyak lagi. Ini adalah cara yang bagus untuk memetakan prototipe Anda dan kemudian menciptakan sesuatu yang dapat berinteraksi dengan klien Anda.

Opsi prototipe cepat enam – Invision Ap

InVision adalah opsi unik karena Anda dapat mengunggah prototipe statis yang ada dan membuatnya interaktif, tanpa memerlukan kode. Ini adalah cara yang bagus untuk memanfaatkan prototipe statis, membaginya dengan klien Anda, dan melacak umpan balik. Selain itu, Anda dapat melakukan pengujian pengguna, dan mengomunikasikan umpan balik lainnya dengan alat ini.

Opsi prototipe cepat tujuh Axure

Axure memungkinkan Anda membuat prototipe interaktif. Selain itu, ada berbagai elemen UI yang dapat digunakan agar Anda dapat mengembangkan dan berbagi ide. Dari wireframes cepat hingga desain yang dipoles dengan warna, gradien, gambar, dll., alat ini menawarkan berbagai pilihan fidelitas. Itu juga dilengkapi dengan opsi berbagi yang praktis sehingga pengguna Anda dapat mengklik dan melihat bagaimana proyek Anda akan bekerja.

Opsi prototipe cepat delapan – Lucidchart

Lucidchart berbasis cloud dan berfungsi di banyak perangkat. Kolaborasi juga menjadi mudah jika Anda memiliki banyak orang yang mengerjakan proyek. Ini memungkinkan obrolan waktu nyata dengan tim Anda dan Anda juga dapat meninggalkan komentar langsung di prototipe. Prototipe situs web fidelitas menengah yang dinamis dibuat dengan banyak elemen UI yang ditawarkan.

Apa berikutnya?

Ada banyak hal yang perlu dipertimbangkan ketika menemukan alat prototyping pilihan Anda. Apakah Anda lebih suka kode langsung atau tidak, ada alat yang menawarkan berbagai opsi fidelitas. Jika Anda bekerja sendiri atau sangat bergantung pada komunikasi tim, Anda akan menemukan yang sempurna yang akan mengakomodasi kebutuhan Anda.

Sekarang setelah Anda dipersenjatai dengan alat pembuatan prototipe yang sempurna, Anda dapat dengan bangga mengenakan lencana Rapid Prototyper.