Pendiri Perusahaan Teknologi Menggunakan 5 Sumber Daya Ini untuk Membangun Prototipe Pertama Mereka

Nama saya Marina Chernyshova, dan saya adalah desainer produk dan mentor. Dalam artikel saya sebelumnya, “ Anggaran Terbatas? Gunakan Metodologi Desain Ini untuk Membangun MVP Pertama Anda Tanpa Desainer Penuh Waktu ,” Saya menjelaskan mengapa menurut saya perusahaan rintisan tahap awal tidak selalu membutuhkan desainer penuh waktu dan cara mendekati perancangan prototipe pertama dari sudut pandang teoritis. Dalam artikel ini, saya ingin mengajak Anda untuk melihat sisi yang lebih praktis. Saya membagikan sumber daya bermanfaat yang dapat digunakan oleh para pendiri dan pengusaha teknologi awal untuk membangun prototipe pertama mereka.

Jika Anda tertarik dan punya waktu untuk mendesain produk Anda sendiri, saya sarankan Anda mempelajari Figma. Figma adalah perangkat lunak desain berbasis cloud yang utamanya digunakan untuk menggambar, mendesain, dan membuat prototipe ide sebelum langkah pengembangan proyek. Dengan alat ini, para desainer dapat bekerja sama untuk membuat tata letak, menambahkan gambar, bereksperimen dengan warna dan font, dan banyak lagi, semuanya melalui peramban web. Figma adalah instrumen yang hebat tetapi sangat mudah digunakan pada saat yang sama dan sangat membantu untuk komunikasi antar semua anggota tim.

Selain Figma, FigJam dan Figma Slides juga cukup mudah digunakan. FigJam adalah alat papan tulis yang dirancang khusus untuk kerja tim yang kolaboratif. Alat ini memungkinkan tim untuk berkolaborasi secara langsung, memvisualisasikan ide, dan bertukar pikiran bersama. Figma Slides adalah alat presentasi yang dirancang khusus untuk desainer dan tim mereka. FigJam dan Figma Slides cocok bagi orang-orang yang sudah menggunakan Figma untuk memiliki semua desain, papan tulis, dan presentasi dalam satu ekosistem.

Kerangka kawat

Wireframe adalah representasi visual skematis kasar dari sebuah produk digital, seperti situs web, aplikasi, atau antarmuka perangkat lunak. Dalam artikel saya sebelumnya, saya menjelaskan apa itu User Flow — yaitu diagram visual yang memetakan jalur yang diambil pengguna melalui sebuah produk atau situs web untuk menyelesaikan tugas atau tujuan tertentu*.* Berdasarkan User Flow, Anda dapat membuat versi sederhana pertama dari wireframe.

Wireframe diperlukan untuk memahami struktur produk sebelum Anda atau tim Anda mulai mendesain produk. Wireframe membantu tim menyelaraskan persyaratan, menjaga percakapan desain UX tetap fokus dan konstruktif tanpa terganggu oleh nuansa desain seperti warna, font, dan ikon.

Wireframe dapat dibuat dengan cara yang sangat berbeda, bisa dengan detail tinggi atau detail rendah. Lihat beberapa contoh dasar di bawah ini:

• Gambar Kiri (UI seperti Wireframe dengan blok konten)
• Gambar Kanan (UI fidelitas tinggi dengan grafik dan komponen terperinci)

Saya sarankan memulai dengan yang paling sederhana: atur layar utama dengan header dan tombol perkiraan dan jangan terlalu peduli dengan teks.

Jika Anda bekerja di Figma, bingkai dapat langsung dibuat dalam ukuran realistis melalui templat.

Untuk membuat wireframe yang lebih detail dengan elemen antarmuka yang lebih realistis, Anda dapat menggunakan aset Figma yang sudah jadi untuk wireframing guna menghemat banyak waktu (misalnya perpustakaan ini ).

Pada tahap ini, Anda sudah dapat membuat prototipe tanpa memperhatikan hal-hal kecil seperti warna atau font, dan menunjukkannya kepada salah satu teman Anda. Jika ini adalah aplikasi seluler, maka Anda dapat membuka tautan dari ponsel Anda untuk membuatnya tampak lebih realistis. Penting untuk memeriksa apakah ada semua transisi yang diperlukan antara semua layar dan pengguna dapat kembali atau membatalkan tindakan.

Perpustakaan komponen siap pakai

Tidak perlu mendesain semuanya dari awal. Akan sangat membantu jika Anda menjelajahi aset siap pakai di komunitas Figma yang dapat Anda gunakan untuk mendesain produk Anda.

Ada banyak pustaka yang tersedia di Figma seperti Material UI. Pustaka ini berisi banyak elemen yang berguna, mulai dari sekumpulan ikon hingga halaman yang sudah dirakit.

Elemen-elemen tersebut biasanya sudah berisi semua status (Hover dan status yang dipilih, peringatan, deskripsi, dll.). Seluruh abstraksi antarmuka dapat disusun dari komponen-komponen kecil, misalnya, dialog modal dengan tombol dan tabel di dalamnya. Selain elemen-elemen itu sendiri, mungkin ada petunjuk tentang cara menggunakannya dengan benar dengan margin, spasi, dll. Pustaka-pustaka ini telah mengembangkan komponen dan bahkan seluruh tata letak yang dapat digunakan oleh pengembang.

Jika diperlukan, Anda dapat menambahkan elemen Anda sendiri di sana di masa mendatang. Misalnya, jika Anda memerlukan beberapa bagan, Anda dapat mengambilnya dari pustaka lain. Jika Anda memerlukan elemen nonstandar, elemen tersebut dapat dirancang dari awal dan ditambahkan ke pustaka beserta semua statusnya.

Aset grafis siap pakai

Produk apa pun dapat terlihat jauh lebih matang dan penuh perhatian karena grafisnya yang seimbang dan dirancang dengan baik: ilustrasi, ikon, animasi, dll.

Tidak perlu membuang waktu ekstra untuk ini, di sini Anda juga dapat menggunakan set yang sudah jadi. Ada banyak set seperti itu dalam berbagai gaya dan warna. Mereka juga dapat ditemukan di Komunitas Figma atau Komunitas Spline jika Anda menyukai grafis 3D. Seringkali set yang besar berbayar untuk penggunaan komersial, tetapi harganya cukup terjangkau.

Aset ini dapat digunakan tidak hanya di dalam produk Anda, tetapi juga untuk materi pemasaran, gambar jejaring sosial, dan pitch deck Anda. Anda dapat menemukan berbagai templat presentasi di sana dan mengubahnya tergantung pada gaya Anda.

Referensi & Inspirasi

Ada beberapa platform yang mengumpulkan aliran pengguna dan tangkapan layar dari berbagai produk, seperti halamanflows.com atau mobbin.com Anda dapat menjelajahinya untuk analisis pesaing atau sekadar inspirasi. Fitur-fitur ini sangat membantu saat Anda mengerjakan fitur tertentu dan Anda tahu bahwa itu adalah pola UX yang umum seperti memeriksa atau menyimpan item ke favorit. Anda dapat menelusurinya berdasarkan kategori atau mencari fungsi tertentu berdasarkan kata kunci.

Saat bekerja untuk memberikan pengalaman pengguna yang lancar, akan lebih baik untuk mengandalkan solusi yang sudah ada karena solusi tersebut jelas dan familiar bagi pengguna. Bahkan jika Anda sedang mengerjakan fungsionalitas yang inovatif, Anda selalu dapat menggunakan pola yang maknanya mirip dari area lain.

Kesimpulan

Saat ini pasar digital cukup kompetitif dan pengguna berpengalaman dalam UX dan UI yang baik. Lebih baik tidak mengabaikan hal ini bahkan pada tahap awal pengembangan produk karena dianggap membuang-buang waktu untuk "dekorasi" tetapi cobalah untuk menggunakannya sebagai keunggulan kompetitif.

Menurut saya, ada keseimbangan antara tidak adanya desain sama sekali dan banyaknya waktu yang dihabiskan untuk desain yang sempurna pada setiap layar. UX yang lancar dapat dicapai karena penyederhanaan dan menghindari langkah-langkah dan tindakan yang tidak perlu, dan UI yang dapat diterima dapat sangat sederhana tetapi menarik.

Hal utama adalah jangan ragu untuk menggunakan solusi yang sudah jadi dan jangan lewatkan langkah-langkah sebelum desain seperti pembuatan alur pengguna. Dalam hal ini, risiko membuat kesalahan atau membuang-buang waktu berkurang secara signifikan, yang akan menghemat sumber daya Anda dan tidak akan memengaruhi motivasi.