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:
- WIREFRAMINGPedoman Wireframing untuk PemulaWinnie Lim
- UXPedoman Wireframing untuk Pemula pada OmnigraffleJustin Smith
- UX10 Tips untuk Membuat Wireframe dengan IllustratorIan Yates
- WIREFRAMINGMembuat Wireframe dengan SketsaAdi Purdila
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.

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.

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.
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.
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!
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).
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.
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.
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.
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?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post