Merancang aplikasi seluler yang indah dari awal

Saya mulai belajar desain grafis saat berusia 13 tahun. Saya belajar mendesain situs web dari kursus online dan terbiasa bermain-main dengan Photoshop dan Affinity Designer sepanjang hari. Pengalaman itu mengajari saya cara berpikir seperti seorang desainer.

Saya telah merancang dan mengembangkan aplikasi selama hampir setahun sekarang. Saya menghadiri program di MIT tempat saya bekerja dengan tim untuk mengembangkan Universeaty. Dua bulan lalu, saya mulai mengerjakan aplikasi baru, Crypto Price Tracker, yang saya luncurkan baru-baru ini pada 28 Januari.

Dalam posting ini, saya akan membagikan proses desain langkah demi langkah yang saya ikuti bersama dengan contoh aplikasi yang saya kerjakan. Ini akan membantu siapa saja yang ingin belajar atau meningkatkan keterampilan desain digital mereka. Desain tidak semua tentang mengetahui cara menggunakan perangkat lunak desain, dan posting ini tidak akan mengajari Anda cara menggunakannya. Ada ratusan tutorial online berkualitas baik untuk dipelajari. Desain juga tentang memahami produk Anda dari dalam ke luar, fitur dan fungsinya, dan mendesain sambil mengingat pengguna akhir. Itulah yang dimaksudkan untuk diajarkan oleh posting ini.

Proses Desain :

  1. Buat diagram alur pengguna untuk setiap layar.
  2. Buat / gambar wireframes.
  3. Pilih pola desain dan palet warna.
  4. Buat mock-up.
  5. Buat prototipe aplikasi animasi dan minta orang untuk mengujinya dan memberikan umpan balik.
  6. Berikan sentuhan akhir pada mock-up agar layar akhir siap untuk memulai pengkodean.

Ayo mulai!

Diagram Alur Pengguna

Langkah pertama adalah mencari tahu fitur yang Anda inginkan di aplikasi Anda. Setelah Anda mendapatkan ide, rancang diagram alur pengguna. Diagram alur pengguna adalah representasi tingkat yang sangat tinggi dari perjalanan pengguna melalui aplikasi / situs Anda.

Biasanya, diagram alir pengguna terdiri dari 3 jenis bentuk.

  • Persegi panjang digunakan untuk merepresentasikan layar.
  • Berlian digunakan untuk mewakili keputusan (Misalnya, mengetuk tombol masuk, menggesek ke kiri, memperbesar).
  • Panah menghubungkan layar dan keputusan bersama.

Diagram alur pengguna sangat membantu karena memberikan ide logis yang baik tentang bagaimana aplikasi akan berfungsi.

Berikut adalah diagram alur pengguna yang saya gambar ketika saya mulai mengerjakan desain aplikasi saya.

Wireframes

Setelah Anda menyelesaikan diagram alur pengguna untuk setiap layar dan mendesain perjalanan pengguna, Anda akan mulai mengerjakan wireframing semua layar. Wireframe pada dasarnya adalah representasi dengan kesetiaan rendah tentang tampilan aplikasi Anda. Pada dasarnya sketsa atau garis besar ke mana gambar, label, tombol, dan barang-barang akan pergi, dengan tata letak dan posisinya. Sketsa kasar tentang cara kerja aplikasi Anda.

Saya menggunakan template tercetak dari UI Stencils untuk menggambar wireframe. Ini menghemat waktu dan memberikan kanvas yang bagus untuk menggambar dan membuat catatan.

Berikut contoh wireframe.

Setelah membuat sketsa wireframe, Anda dapat menggunakan aplikasi bernama Pop dan mengambil gambar semua gambar Anda menggunakan aplikasi dan memiliki prototipe dengan menghubungkan semua layar melalui tombol.

Pola Desain dan Palet Warna

Ini bagian favoritku. Ini seperti window-shopping. Banyak pola desain dan palet warna untuk dipilih. Saya pergi tentang memilih yang saya suka dan bereksperimen dengan mereka.

Platform terbaik untuk menemukan pola desain adalah Pola Seluler dan Pttrns. Dan untuk menemukan palet warna yang bagus, buka Color Hunt.

Maket

Ini adalah saat Anda akhirnya beralih menggunakan perangkat lunak desain. Maket dalam arti desain adalah representasi desain Anda dengan ketelitian tinggi. Ini hampir seperti Anda masuk ke aplikasi ini di masa depan dan Anda mengambil beberapa tangkapan layar darinya. Ini harus terlihat realistis dan hampir seperti aslinya.

Ada perangkat lunak desain dan alat untuk membuat mock-up. Saya menggunakan desainer Affinity. Alat yang paling umum digunakan untuk desain iOS adalah Sketch.

Berikut adalah contoh beberapa desain awal aplikasi saya.

Saya lebih banyak bereksperimen dengan berbagai palet warna.

Saya membagikan mockup awal dengan teman-teman saya untuk tanggapan mereka. Banyak orang sepertinya menyukai gradien emas dan skema hitam.

Bersedia untuk menerima umpan balik dan bereksperimen dengan saran baru! Anda akan menemukan ide-ide luar biasa datang dari pengguna Anda saat berbicara dengan mereka, bukan saat Anda menelusuri Dribbble atau Behance dengan panik.

Jadi saya mendesain ulang mock-up dan menghapus grafik latar belakang karena membuatnya secara teknis merupakan proses yang memakan waktu dan mengurangi keterbacaan. Seperti inilah tampilan mock-up yang didesain ulang.

Saya cukup puas dengan skema warna, ikon pada bilah tab, dan tata letak keseluruhan. Saya melanjutkan dan mendesain layar lainnya mengikuti pedoman desain yang sama. Prosesnya panjang, tapi pasti menyenangkan!

Setelah semua layar saya siap, saya menyusun prototipe dalam Adobe XD dan meminta beberapa teman untuk bereksperimen dan memberikan umpan balik.

Setelah sentuhan akhir dan semacamnya, seperti inilah desain akhir saya.

Setelah semua layar selesai, saya mengimpornya ke Xcode dan mulai mengkodekan aplikasi.

Itu dia! Saya harap posting ini akan membantu Anda memulai dengan desain aplikasi atau membantu Anda menjadi desainer yang lebih baik. Dan jika Anda menyukai aplikasi saya, Anda dapat mengunduhnya di sini.

Saya mengakhiri posting dengan salah satu kutipan favorit saya tentang desain.

“Desain bukan hanya seperti apa bentuknya dan rasanya. Desain adalah cara kerjanya "

-Steve Jobs