Mendesain, Wireframing & Membuat Prototipe sebuah Aplikasi Android: Bagian 2

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Pada bagian satu dari seri dua-bagian ini, saya telah menunjukkan pada Anda bagaimana mengambil ide untuk aplikasi Android, dan mengembangkannya dalam rencana yang mendetail—hingga memetakan layar satu per satu yang akan melengkapi aplikasi Anda yang telah selesai.

Menggunakan contoh aplikasi perjalanan yang membantu pengguna untuk merencanakan dan mereservasi petualangan musim panas yang penuh bersama teman-temannya, kita mengidentifikasi target audiens kita dengan membuat persona pengguna (ingat teman kita bernama Sasha?) dan kemudian membuat daftar fitur yang akan sempurna untuk Versi 1.0 aplikasi kita (dan sempurna untuk Sasha). Terakhir, kita membuat daftar layar dan sebuah peta yang menunjukkan dengan tepat bagaimana semua layar ini akan melengkapi satu sama lain.

Kita telah mengulas banyak dasar-dasar pada bagian satu, tetapi hingga sejauh ini perencanaan kita sedikit merupakan level-tinggi dan abstrak. Pada bagian dua kita akan mendekat dan menjadi lebih personal dengan membuat wireframing dan prototipe layar satu per satu yang akan melengkapi aplikasi kita.

Di akhir tutorial ini Anda akan membuat sebuah prototipe digital yang dapat Anda pasang dan uji pada ponsel pintar atau tablet Android Anda.

Mari menggali lebih dalam dan mulai membuat wireframe!

Apa itu Wireframing?

Wireframing adalah di mana Anda membuat sktesa semua komponen penting UI yang ingin Anda letakkan pada layar tertentu. Tujuan dari wireframing adalah untuk menguraikan struktur layar—bukan tentang detail yang lebih baik tentang bagaimana layar akan terlihat, jadi cobalah untuk tidak terlalu berfokus pada desain grafis tertentu. Untuk sekarang, cukuplah untuk mengetahui bahwa Anda akan meletakkan sebuah menu pada Layar A; Anda tidak perlu khawatir tentang warna menu ini nantinya, atau bagaimana Anda akan mengatur model teks menunya.

Untuk informasi lebih tentang wireframing, pelajari sumber-sumber berikut ini:

Wireframe agak meniupu—mungkin terlihat cepat, kasar dan sketsa yang telah siap, tetapi wireframing sebenarnya adalah alat yang sangat kuat untuk mengeksplor, mengetahui, dan memperbaiki antar muka pengguna aplikasi Anda. Ia juga dapat membantu Anda untuk mengidentifikasi kekurangan yang terdapat pada desain layar awal Anda, sebelum Anda menghabiskan banyak waktu untuk menyempurnakan desain ini.

Jauh lebih mudah untuk menyilang wireframe, buka halaman pada buku catatan Anda dan mulai lagi daripada harus menuliskan kembali kode yang telah berjam-jam Anda kerjakan.

Jadi saya telah menanyikan pujian untuk wireframing cukup panjang! Bagaimana Anda memulai dalam mebuat wireframe?

Anda memiliki beberapa opsi:

Sketsa wireframe Anda menggunakan pensil dan kertas.

An example of a paper wireframe — Sebuah kertas dari layar Reservasi Hotel dari aplikasi kita.

Membuat wireframe digital enggunakan perangkat lunak penyunting gambar professional seperti Adobe Photoshop, atau program yang didedikasikan untuk wireframing seperti Pidoco, Axure, InDesign, Sketch, Omnigraffle, atau Balsamic Mockups.

An example of a digital wireframe — Halaman Depan wireframe, dibuat menggunakan Balsamiq.

Tetapi mengapa membatasi diri untuk menggunakan hanya satu alat, ketika Anda dapat menuai keuntungan dari keduanya? Kertas dan wireframe digital sempurna untuk membuat wireframe yang terpoles dan presisi. tetapi menavigasi banyak menu bukan merupakan cara terbaik untuk membuat ide mengalir—dan tentu saja tidak ideal ketika Anda ingin secepatnya menguji banyak ide berbeda! Pada sisi yang lain, wireframe kertas sangatlah hebat untuk sesi brainstorming yang cepat-berapi-api, tetapi Anda mungkin kesulitan untuk membuat wireframe kertas yang akurat dan cukup detail untuk tersaji sebagai blueprint untuk layar yang akan Anda buat.

Saya menyarankan membuat draft pertama Anda menggunakan pulpen dan pena (yang ideal untuk mendapatkan ide kreatif mengalir) dan kemudian, ketika Anda telah memiliki satu set wireframe kertas yang Anda telah puas dengan hasilnya, Anda dapat mengambil waktu lagi untuk memperbaiki draft ini menggunakan perangkat lunak wireframing digital.

Ini merupakan pendekatan yang akan saya gunakan pada tutorial ini, tetapi tetap ingat bahwa wireframing adalah latihan kreatif, sehingga tidak ada trik yang keras dan cepat di sini. Gunakan metode apapun yang efektif untuk Anda.

Membuat Wireframe Pertama Anda

Untuk memberikan Anda pratinjau yang terbaik dalam proses membuat wireframe dan prototipe, saya akan mengambil salah satu layar dari aplikasi perjalanan dan akan menggunakannya untuk saya kerjakan sepanjang artikel ini hingga selesai. Layar yang akan saya pilih sebagai kandidatnya adalah checklist, karena saya pikir ini adalah layar yang mengandung elemen UI yang menantang yang akan membuatnya menjadi contoh yang menarik.

Hanya untuk menyegarkan kembali ingatan Anda, pada bagian satu saya menuliskan deskripsi berikut ini tentang bagaimana saya membayangkan layar checklist yang telah selesai:

Pada pengaturan status default-nya, layar akan menampilkan checklist dari semua tugas yang pengguna harus selesaikan, untuk merencanakan perjalanan yang sukses. Mengetuk tugas mana saja akan membawa pengguna pada layar di mana mereka dapat menyelesaikan tugasnya. Ketika pengguna menyelesaikan tugasnya, item ini akan tercentang pada checklist nya.

Untuk membuat draft pertama wireframe, ambillah beberapa lembar kertas dan implementasi tulisan yang Anda pilih, kemudian gambar garis persegi berbentuk ponsel pintar atau tablet pada umumnya.

Saya akan mulai dengan menambahkan semua elemen navigasi pada wireframe saya. Lihat pada peta layar saya, saya dapat melihat bahwa pengguna perlu untuk dapat mencapai tiga layar dari checklist:

Memilih kota.
Mem-booking transportasi.
Mereservasi hotel.

Layar ini menampilakn dua jenis navigasi yang berbeda: navigasi mundur dan navigasi maju.

‘Pilih Kota’ adalah layar sebelumya pada alur aplikasi saya, sehingga ini menampilkan pengguna berpindah ke halaman sebelumnya dalam riwayat aplikasi. Android menangani mundur kembali ini secara otomatis (biasanya via tombol “kembali” pada ponsel pintar atau tablet) sehingga Anda tidak perlu menambahkan navigasi ‘Pilih Kota’ secara eksplisit pada UI Anda.

Dua layar lainnya agak berbeda, karena mereka menampilkan pengguna berpindah ke halaman selanjutnya pada aplikasi kita. Sistem tidak menangani navigasi maju ke depan secara otomatis, sehingga merupakan tanggung jawab Anda untuk menyediakan pengguna segala hal yang mungkin mereka perlukan untuk dapat menavigasi pada layar.

Elemen navigasi ini akan membentuk dua TextView, yang akan saya susun dengan model checklist (baik, dua item tidak terlalu seperti sebuah daftar, tetapi jika saya meneruskan pada proyek ini saya pada akhirnya akan menambahkan tugas yang lebih banyak pada daftar ini). Pada status default, masing-masing TextView akan mengingatkan pengguna bahwa mereka harus menyelesaikan suatu pekerjaan, semisal, “Anda masih perlu untuk mereservasi kamar hotel!” ketika pengguna mengetuk salah satu TextView, ketukan ini akan membawa mereka pada layar Book Transportasi atau Reservasi Hotel, sehingga mereka dapat menyelesaikan tugas ini.

Ketika pengguna menyelesaikan sebuah tugas, maka TextView yang bersangkutan akan memperbarui tampilan informasi tentang pengaturan tersebut (saya tidak akan menambahkan info tentang ini pada wireframe sekarang, tetapi untuk diingat saja).

Untuk membuat efek chcecklist, saya akan membuat ImageView berdasarkan masing-masing TextView. Pada keadaan default, masing-masing ImageView akan menampilkan silang merah, tetapi ketika pengguna telah menyelesaikan tugasnya, maka akan digantikan dengan tanda centang hijau.

A first draft paper wireframe of the checklist screen

Terakhir, saya akan menambahkan judul TextView, yang akan menampilkan apapun yang pengguna ingin sebut tentang perjalanannya.

Karena Anda tengah membangun wireframe Anda, Anda mungkin harus menghadapi elemen UI yang bekerja dalam berbagai posisi dan ukuran yang berbeda. Membuat wireframe kertas akan memakan waktu yang sedikit sekali, sehingga jika Anda memiliki ide lain maka ambil beberapa saat untuk mebuat wireframe-nya. Nyatanya, Anda harus berencana membuat sketsa beberapa alternative untuk setiap layar sehingga Anda dapat menentukan ide mana yang paling potensial.

A series of different wireframes for the checklist screen

Bilas dan ulangi beberapa kali untuk setiap layar yang akan melengkapi aplikasi Anda, hingga Anda memiliki set lengkap dari wireframe kertas. Langkah selanjutnya adalah mengubah draft pertama ini menjadi wireframe digital yang telah dipoles.

Ada banyak perangkat lunak di luar sana yang dibuat khusus untuk wireframing, jadi cukup baik juga jika Anda meluangkan waktu untuk menelaah pilihan Anda pada Google, walaupun kalau Anda ingin Anda dapat memilih menggunakan perangkat lunak penyunting-gambar yang Anda sukai, seperti Adobe Photoshop.

Saya pribadi, adalah penggemar Balsamiq Mockups!

The checklist screen as a digital wireframe created using Baksmiq Mockups

Habiskan beberapa saat membuat dan menyempurnakan desain Anda pada software yang Anda pilih, dan selalu perhatikan jika ada kesempatan untuk memperbaiki wireframe Anda. Bekerja dengan alat baru tentu dapat membuahkan beberapa ide baru, jadi jika Anda tiba-tiba mendapat ilham atau inspirasi bagaimana Anda dapat memperbaiki desain Anda, kemudian ambillah kertas dan buatlah wireframe dari ide tersebut. Jika telah menghasilkan wireframe yang teliti maka ubahlah menjadi wireframe digital.

Sekali lagi, ulangi beberapa kali untuk layar lainnya.

Membuat Protoype Proyek Anda

Waktunya untuk meletakkan desain Anda pada ujian dengan membuat prototipe digital berdasarkan wireframe Anda.

Membuat prototipe memberikan Anda kesempatan untuk mendapatkan pengalaman langsung tentang bagaimana desain Anda terlihat dan berfungsi pada perangkat Android sungguhan, juga memungkinkan Anda menguji desain Anda menerjemahkan konfigurasi beberapa layar via Android Virtual Devices (AVDs).

Jadi, bagaimana kita membuat prototipe digital?

Cara paling mudah adalah dengan menggunakan Android Studio, yang akan berfungsi ganda sebagai alat prototipe digital yang kuat berkat IDE layout grafis editor built-in. sepanjang bagian ini, saya akan menggunakan banyak fitur baru yang diperkenalkan pada Adroid Studio 2.2, sehingga jika Anda ingin mengikuti tutorial ini lebih jauh, pastikan Anda menjalankan Android Studio 2.2 Preview atau yang lebih tinggi.

Untuk membuat prototipe kita, aktifkan Android Studio dan buatlah proyek bau. Untuk membuat segala hal tetap sederhana, saya akan menggunakan template ‘Aktivitas Kosong’. Karena Anda akan menguji prototipe ini pada perangkat Android pribadi Anda, pastikan untuk mengatur minimum proyek SDK menjadi sesuatu yang compatible dengan ponsel pintar atau tablet Android Anda.

Ketika Android Studio telah membuat proyek Anda, bukalah file activity_main.xml dan hapuslah TextView ‘Hello World’ yang menyebalkan itu yang Android Studio tambahkan pada layout secara default. Pastikan Anda memiliki tab ‘Desain’ telah terpilih sehingga Anda dapat melihat palet Android Studio dan kanvasnya.

Sekarang kita telah siap mewujudkan wireframe kita! Mari mulai dengan yang paling atas, dengan judul layar. Sangat jelas bahwa ini akan menjadi TextView, tetapi bagimana dengan kontennya? Ketika pengguna mulai merencanakan liburan, mereka akan menamakan liburannya dengan menyebutnya apa saja, jadi bagaimana kita tahu tipe teks seperti apa untuk digunakan pada protptype kita?

Menghadapi variabel teks adalah tema yang berulang pada prototipe ini, jadi mari ambil beberapa saat untuk mengekplorasi permasalahan ini dalam detail lebih sekarang.

Prototipe adalah alat yang sangat baik pada persenjataan pengembang aplikasi, tetapi mari tidal terbawa arus—layar apa yang mengandung elemen variabel, tidak mungkin Anda dapat membuat prototipe setiap versi satu per satu layar. Hal ini pastinya merupakan hal dalam checklist kita, karena pengguna mungkin menamakan liburan mereka apa saja, dari yang paling singkat seperti Trip 1 hingga getaran dan semangat menggebu Liburan Musim Panas Penuh Keceriaan yang telah Diimpikan, and segala hal mungkin di tengah-tengahnya.

Karena tidak mungkin jika harus menguji setiap judul yang dapat dipahami, sebuah prototipe adalah kesempatan emas untuk Anda menempatkan desain Anda pada tekanan yang serius dengan menguji variabel yang paling aneh dan menakjubkan yang terpikir oleh Anda.

Untuk prototipe checklist saya, saya akan membuat tiga sumber garis: satu yang menampilkan judul yang “biasa” yang paling mungkin akan dipiih pengguna, satu yang teramat pendek, dan satu yang benar-benar panjang. Menguji hal se-ekstrim ini adalah cara paling efektif untuk mendorong permasalahan yang mungkin muncul untuk mengintai desain layar Anda.

Jika Anda telah membuat sumber garis ini, Anda harus memberikan teks ini di mana untuk diletakkan, jadi gunakan TextView dari palet dan letakkan pada kanvas.

Android Studio 2.2 memperkenalkan konsep pembatas, yang sangat berguna untuk membuat prototipe digital (dan antarmuka pengguna/UI umumnya). Anda dapat membuat pembatas secara manual, tetapi mengapa melakukannya jika Android Studio dapat melakukan pekerjaan pelik ini untuk Anda?

Ada dua cara membuat Android Studio membuatkan pembatas untuk Anda, jadi mari eksplorasi keduanya. Metode pertama adalah menggunakan autoconnect, jadi pastikan Anda membuat mode ini dapat diaktifkan dengan menyalaka tombol Autoconnect (di mana kursor diletakkan pada screenshoot di bawah ini).

Select Android Studios Autoconnect button

Sekarang, seret TextView Anda pada bagian di mana ia harus muncul pada tata letak. Saya ingin judul saya berada di tengah, sehingga saya akan menyeret TextView ke bagian tengah kanvas dan lepaskan. Ketika Anda melepaskan TextView, Android Studio akan merespon dengan membuat pembatas diharuskan untuk menahan TextView tetap di tempatnya.

Catatan, ketika dua pembatas menarik widget pada arah yang berlawanan, pembatas itu akan terlihat seperti garis bergerigi, yang menjadi alasan mengapa pembatasnya terlihat berbeda dari pembatas reguler.

Drag the TextView widget into the correct position and Android Studio will create constraints automatically

Jika Anda tidak yakin apakah TextView Anda berada tepat di tengah, seret sedikit pada sumbu horizontal. Tooltips akan muncul pada salah satu bagian widget, menampilkan posisinya sekarang di sepanjang garis horizontal kiri dan kanan sumbu. Seret TextView hingga Anda mendapatkan pembagian genap 50/50.

Atur TextView untuk menampilkan salah satu sumber garis yang Anda buat untuk judul Anda—tidak penting garis mana yang Anda mulai, selama Anda akan menguji semua juga pada akhirnya!

Selanjutnya, kita akan membangun checklist kita. Saya akan menggunakan dua gambar pada checklist saya: centang hijau yang akan muncul ketika pengguna telah menyelesaikan tugasnya, dan merah silang untuk mengindikasikan bahwa item in masih berada pada daftar ‘Harus Dilakukan’. Buatlah dua gambar ini dan tambahkan pada folder drawable proyek Anda.

Selanjutnya, bukalah file strings.xml dan buat dua pesan default:

Anda harus memesan hotel!
Anda harus memilih transportasi!

Seret dua TextView dari palet dan letakkan pada kanvas—jangan khawatir tentang membuat semuanya sejajar sekarang. Atur TextView untuk menampilkan sumber garis default Anda.

Selanjutnya, ambil dua ImageView dari palet dan letakkan pada kanvas. Sembari Anda melepaskan masing-masing ImageView, Android Studio akan membawa Anda untuk memilih sesuatu yang menarik untuk ditampilkan. Kita akan memulai dengan membuat prototipe versi default pada layar ini, jadi pilih gambar silang merah untuk kedua ImageView.

Pada tahap ini kita telah menambahkan elemen UI yang dibutuhkan, tetapi karena kita secara acak meletakkan semua ke atas kanvas, kemungkinannya adalah prototipe Anda tidak dapat menanggulangi terlalu banyak kemiripan dengan wireframe. Sekali lagi, mari gunakan pembatas!

Cara kedua yang Android Studi dapat buat dengan otomatis adalah garis pembatas via mesin tambahan lain. Sediakan waktu untuk menyeret TextView Anda dan ImageView pada posisi yang sempurna pada kanvas, kemudian berikan klik pada tombol Infer Constraints Android Studio (di mana kursor terletak pada gambar di bawah ini).

Ketika Anda mengklik tombol ini, Android Studio akan dengan otomatis membuat pembatas yang dibutuhkan untuk menyampaikan tata letak Anda saat ini.

Select the Infer Constraints button

Itu adalah versi default dari layar ini, tetapi kita juga perlu untuk menguji bagaimana layar ini beradaptasi ketika pengguna mulai mengecek tugas mereka padadaftar “Harus Dilakukan”. Terakhir, saya ingin TextView ini menampilkan beberapa informasi dasar tentang reservasi hotel pengguna dan rencana perjalanannya. Hal ini akan memenangkan kita dari permasalahan lama: teks variabel.

Layar ini harus menjadi cukup fleksibel untuk menyajikan informasi tentang hotel (dan bandara, stasiun kereta, dll.) dengan nama-nama yang panjang dan serius, tetapi pada saat yang bersamaan juga tidak terlihat janggal jika pengguna mereservasi hotel yang keren dan trendy yang namanya hanya terdiri dari satu huruf, atau symbol pi (yup, ini adalah hotel jenis itu).Layar ini harus menjadi cukup fleksibel untuk menyajikan informasi tentang hotel (dan bandara, stasiun kereta, dll.) dengan nama-nama yang panjang dan serius, tetapi pada saat yang bersamaan juga tidak terlihat janggal jika pengguna mereservasi hotel yang keren dan trendy yang namanya hanya terdiri dari satu huruf, atau symbol pi (yup, ini adalah hotel jenis itu).

Sekali lagi, solusinya adalah untuk membuat garis yang banyak yang akan menampilkan teks paling janggal yang mungkin harus diterjemahkan oleh tata letak Anda. Jika Anda tidak begitu yakin tentang seberapa ekstrim yang harus Anda hadapi ke depannya dengan sumber garis, maka Anda selalu dapat kembali pada teman Anda, Internet, untuk petunjuk. Pada skenario ini, saya akan menghabiskan waktu untuk menelaah hotel dan bandara, terutama yang memiliki nama yang panjang, pendek, atau ya aneh saja namanya, kemudian menggunakan contoh terbaik untuk sumber garis saya.

Jika Anda telah membuat semua sumber, Anda dapat melakukan pengujian awal sedikit dengan mengubah-ubah antara sumber garis dan drawable, kemudian memeriksa output pada editor tata letak built-in Android Studio.

Aktivitas ini tidak memberikan Anda level yang sama seperti menguji aplikasi Anda pada perangkat Android atau AVD, ini menjadi jauh lebih cepat, merupakan cara paling sempurna untuk mengidentifikasi permasalahan yang tiba-tiba dan cukup signifikan yang terjadi pada tata letak Anda.

Kemungkinannya adalah Anda harus mengatur ulang TextView dan ImageView Anda sedikit untuk menemukan keseimbangan yang sempurna antara tata letak yang dapat menampilkan teks dalam jumlah yang banyak dan tata letak yang tidak terlihat janggal ketika harus menampilkan sedikit huruf saja.

Jika Anda memerlukan sedikit sentuhan (saya tahu saya harus) maka cukup ambil widget pada kanvas danseret pada posisi yang baru. Jika Anda telah puas dengan hasilnya, klik tombol Infer Constraint lagi dan Android Studio akan membuat seperangkat pembatas baru untuk Anda.

Berikut adalah prototipe saya yang telah selesai.

The finished digital prototype

Tidak terlalu buruk, tetapi hasil uji yang sebenarnya tentang sebaik apa tata letak ini menerjemahkan pada setiap ponsel pintar atau tablet Android dengan konfigurasi layar yang berbeda-beda, sehingga berikut adalah langkah-langkah yang akan kita lakukan selanjutnya.

Menguji Prototipe Digital Anda

Tidak ada ganti yang tepat untuk mengalami pengalaman langsung menggunakan prototipe Anda tentang tampilan dan fungsinya selain pada perangkat asli. Jadi, mari mulai dengan memasang proyek kita pada ponsel pintar atau tablet Android Anda dan habiskan waktu beberapa saat berinteraksi dengan ini, hanya untuk merasakan pengalaman pengguna seutuhnya. Jangan lupa menguji prototipe Anda pada mode landscape dan portrait!

Jika Anda mengidentifikasi ada isu atau kesempatan untuk meningkatkan desain layar, maka buatlah sebuah catatan tentang itu, jadi Anda akan tahu benar-benar perubahan apa yang perlu Anda teraplan ketika Anda selesai menguji prototipe Anda.

Jika aplikasi Anda menyediakan pengalaman terbaik utnuk semua pengguna, maka aplikasi ini juga harus menjadi lebih fleksibel dalam beradaptasi pada konfigurasi layar tertentu. Jika Anda telah menguji secara terperinci prototipe Anda pada perangkat Android pribadi Anda, Anda harus mebuat AVD yang banyak yang akan memberikan perbedaan ukuran dan kepadatan yang berbeda, kemudian ujilah prototipe Anda pada masing-masing perangkat. Sekali lagi, jika Anda memperhatikan ada yang ‘aneh’ dari prototipe Anda, atau Anda memiliki ide tentang bagaimana untuk memperbaiki desainnya, maka buatlah catatan tentang perubahan ini sehingga Anda tidak akan melupakannya.

Jika Anda telah mengujinya secara menyeluruh versi default dari tata letak Anda, Anda perlu untuk menguji prototipe Anda dapat beradaptasi ketika pengguna mulai mencentang tugas-tugas mereka dari daftar.

Perbarui kedua ImageView untuk menampilak centang hijau, dan ubah teks default untuk dua sumber garis alternative—lagipula, karena kita akan menguji semua sumber garis kita, tidak terlalu penting menentukan yang mana untuk dimulai duluan.

Letakkan versi baru dari prototipe Anda pada proses pengujian yang kuat, yang artinya memasangnya pada perangkat Android Anda sebagai pengalaman langsung, dan kemudian mengujinya pada AVD dengan konfigurasi layar yang berbeda. Seperti biasa, buatlah sebuah catatan tentang temuan Anda. Kemudian ulangi untuk semua sumber garis yang Anda buat untuk checklist dan judul TextView.

Jika Anda telah selesai dengan pengujian, Anda harus mulai mengulas catatan Anda. Jika Anda hanya perlu melakukan sedikit sentuhan Anda mungkin dapat menerapkannya langsung pada prototipe dan wireframe digital Anda. Bagaimanapun, jika perubahan ini lebih dramatis atau jumlahnya banyak hampir hrus mengubah keseluruhan desain, kemudian Anda harus menghabiskan beberapa waktu menjelajahi mereka secara rinci lebih awal. Idealnya, Anda harus meletakkan ide baru Anda melalui wireframing yang sama, membuat prototipe, dan proses pengujian sebagai ide awal Anda, karena hal ini masih merupakan cara paling efektif untuk menyelesaikan isu dalam desain Anda.

Tentu saja, sangatlah membuat frustrasi untuk memulai membuat wireframe sedari awal lagi ketika nampaknya Anda telah akan selesai dengan seluruh proses desain, tetapi waktu yang dihabiskan untuk mengeksplorasi ide baru selalu berharga.

Walaupun Anda berakhir membuang ide awal Anda untuk desain original, tetapi setidaknya Anda tahu bahwa Anda benar-benar bekerja untuk desain layar terbaik yang dapat Anda bawa. Tidak ada yang lebih buruk daripada menghabiskan waktu dan tenaga serta usaha yang sangat banyak untuk sebuah proyek, ketika Anda memiliki banyak keraguan yang menggerogoti pikiran Anda yang mungkin, mungkin saja, Anda harus menempuh cara baru.

Pada dasarnya, jika membuat prototipe telah menimbulkan banyak ide, maka inilah saatnya untuk mengeksplorasi itu!

Jika Anda telah menguji semua versi prototipe Anda pada beberapa rentang AVD, maka hanya ada satu hal lagi yang harus dilakukan: buatlah prototipe untuk layar-layar lainnya pada peta layar Anda, dan tetap pastikan setiap yang terakhir pun masih dalam tingkat ketelitian yang sama.

Kesimpulan

Pada seri dua-bagian ini, kita telah melihat bagaimana untuk mengambil ide awl dan mengembangkannya menjadi desain mendetail.

Terdengar seperti pekerjaan yang sulit dan banyak (karena, mari jujur, ini memang membutuhkan usaha yang banyak) tetapi setiap langkahnya akan membantu Anda keluar dari permasalahan desain dan memberikan kesempatan Anda untuk meningkatkan aplikasi Anda.

Merencanakan, membuat wireframe dan prototipe dapat menghemat waktu Anda dalam jangka panjang dengan mengurangi kemungkinan Anda harus berurusan dengan masalah besar yang akan mengikutinya. Segera setelah Anda mulai menulis kode, memperbaiki permasalahan desain menjadi jauh lebih sulit.

Ttapi terakhir, menginvestasikan waktu dan ternaga untuk menyempurnakan desain dasar aplikasi Anda akan membantu Anda menghasilkan pengalaman yang lebih baik untuk pengguna Anda. Artinya, akan lebih banyak unduhan, lebih banyak ulasan positif, dan lebih banyak orang merekomendasikan aplikasi Anda pada teman-temannya dan keluarga—siapa yang tidak menginginkannya?