Kamu dihadapkan pada tantangan untuk membuat Prototyping yang menarik untuk sebuah Mobility-App. Ini bukan hanya tentang desain; ini adalah tentang merancang pengalaman pengguna secara efektif dari awal, agar membantu pengguna menavigasi aplikasi dengan cara yang intuitif. Dalam tutorial ini, kamu akan dibimbing langkah demi langkah melalui proses pembuatan prototipe di Sketch. Mari kita mulai perjalanan menarik ini ke dunia desain!
Intisari Penting
- Prototyping adalah langkah penting dalam pengembangan aplikasi.
- Di Sketch, kamu bisa mulai dengan bentuk dan desain sederhana.
- Struktur yang jelas dan panduan pengguna adalah hal yang tak terpisahkan untuk kesuksesan aplikasimu.
Panduan Langkah demi Langkah
Mulailah dengan membuat struktur dasar aplikasi kamu di Sketch. Kamu bisa menggunakan alat kuas untuk menggambar elemen desain pertamamu. Cukup pilih alat kuas atau tekan tombol "P" untuk memilihnya.
Buatlah sebuah persegi panjang yang akan mewakili layar aplikasimu. Tahan tombol "Alt" saat kamu menarik persegi panjang dengan mouse. Ini akan memastikan bahwa persegi panjang tetap proporsional. Itu terlihat cukup bagus.
Sekarang saatnya untuk merancang halaman pertama aplikasi. Mulailah dengan bar tab bawah. Gunakan lagi alat kuas dan tarik garis lurus sambil menahan tombol Shift untuk memastikan bahwa kamu mendapatkan garis yang lurus.
Setelah merancang bar tab, tambahkan tiga ikon yang mewakili fungsi utama aplikasi. Dengan tombol ALT, kamu bisa dengan mudah menduplikasi bentuk sambil menyeretnya ke tempat yang sesuai.
Kini kita beralih ke bar navigasi atas. Tahan tombol ALT lagi saat kamu menarik area persegi panjang lainnya untuk bar navigasi.
Bubble chat adalah bagian berikutnya dari aplikasimu yang ingin kita desain. Gunakan alat kuas untuk menggambar sebuah bubble chat. Ini akan ditampilkan kepada pengguna segera sebagai sambutan. Tambahkan teks pendek yang menyapa pengguna, seperti "Halo dan selamat datang di Mobility App!"
Untuk memastikan semuanya terlihat menarik, kamu dapat menyalin dan menyesuaikan bubble. Pilih bubble tersebut dan seret ke bawah sambil menahan tombol ALT untuk menambahkan teks sambutan lainnya, seperti "Mulai dengan sesi Mobility pertamamu".
Langkah berikutnya adalah menambahkan tombol video, di mana pengguna dapat memutar pelajaran mereka. Gambar sebuah tombol bulat dengan alat kuas dan kombinasikan dengan segitiga untuk memperjelas tampilan dan fungsi.
Selanjutnya, salin semua elemen UI penting - seperti bar navigasi atas dan bawah - ke halaman berikutnya untuk memastikan konsistensi dalam desain. Kamu bisa dengan mudah menarik screenshot saat menahan tombol ALT untuk menduplikasi elemen ke halaman berikutnya.
Di layar baru yang telah kamu buat, desain pilihan untuk kursus. Di sini, kamu harus membuat tampilan sederhana dari kursus yang tersedia yang bisa dipilih oleh pengguna.
Di tampilan profil, kamu dapat membuat tempat untuk gambar profil, nama pengguna, dan jumlah jam kursus yang telah diselesaikan. Di sini penting untuk menyajikan informasi dengan jelas dan tepat.
Setelah menyelesaikan desain pemilihan kursus dan pelajaran, buatlah tampilan untuk pelajaran dan tambahkan tombol tutup sehingga pengguna dapat menutup pilihan kapan saja.
Dengan demikian, prototipe dasar untuk Mobility App kamu telah selesai. Kamu sekarang memiliki desain menarik yang secara jelas terstruktur untuk panduan pengguna dan sekaligus membantu dirimu sebagai desainer untuk memvisualisasikan visi aplikasi dengan jelas.
Ringkasan – Prototyping sebuah Mobility App di Sketch
Selama tutorial ini, kamu telah belajar langkah demi langkah bagaimana cara memprototipe sebuah Mobility App di Sketch. Dari ide pertama hingga elemen desain terakhir, kamu telah memperluas pengetahuanmu dan menciptakan alat yang berguna untuk pengembangan aplikasimu selanjutnya.
Pertanyaan yang Sering Diajukan
Bagaimana cara memulai desain di Sketch?Pilih alat kuas (P) dan mulai membuat elemen pertama.
Bagaimana cara menduplikasi elemen secara efisien?Tahan tombol ALT saat kamu menyeret elemen dengan mouse.
Apa yang harus saya lakukan jika saya tidak puas dengan desain?Kamu bisa kapan saja menyesuaikan atau mendesain ulang elemen yang ada untuk mencapai hasil yang diinginkan.
Bagaimana cara memastikan bahwa panduan pengguna jelas?Pastikan semua fungsi teratur secara logis dan pengguna dapat menavigasi dengan intuitif.
Bisakah saya mendesain untuk perangkat mobile di Sketch?Ya, kamu bisa menyesuaikan jenis dan ukuran elemen sesuai dengan ukuran layar perangkat mobile.
