Pentingnya bagi seorang designer mobile app. memahami “design pattern” dan guidelines desain aplikasi

Waaah…. desainer baru…. begitu dilihat pengalamannya ternyata basic-nya adalah desainer web yang sudah bekerja selama 5 tahun lebih.

Tiba-tiba kebutuhan akan aplikasi mobile begitu tinggi, alhasil beberapa desainer web beralih profesi mengerjakan desain-desain antarmuka aplikasi mobile.

Nah, ada kesalahan fatal yang terjadi, menyebabkan potensi kesalahan di dalam pengembangan, ntah itu timeline menjadi tambah panjang, developer yang menjadi sulit mengimplementasikan desain yang diberikan, dan sebagainya.

Siapapun yang menjadi desainer aplikasi mobile, dimohon jangan samain seperti mendesain website yah..hehe
Desain aplikasi platform apapun itu, baik itu iOS, Android, Windows Phone, Blackberry, ada prinsip-prinsip desain yang harus dipahami, ada guidelines yang harus dipatuhi. Setiap OS mobile punya pattern desain sendiri yang mesti diikuti. Tidak bisa “semau gue, menurut gue itu keren”.

Seorang designer antarmuka aplikasi mobile mesti mendalami pengetahuan seputar perangkat OS platform tersebut, mindset-nya juga harus diubah. Sama seperti pada waktu seorang designer web mendapatkan job dari perusahaan ternama (pernah saya alami di BNI, Jakarta), mereka (BNI…yg saya tau) punya guidelines terhadap website mereka. Misal : Warna tema website mereka.. di guidelines-nya dijelasin hexa codenya apa, logo web-nya pakai yang mana, resolusi “width height“-nya berapa, ukuran hurufnya berapa, pake typeface apa, dan sebagainya..maka terjadilah konsistensi desain di web yang dimiliki perusahaan ternama tersebut.

Begitu juga dengann platform mobile. Antarmuka di aplikasi mobile punya konsistensi, ketika mendesain layout, peletakan menu slalu di sebelah mana, icon aplikasi bentuknya seperti apa, di hape layar kecil resolusinya berapa, di hape layar besar resolusinya berapa, kalo bikin tab taruh di mana, default typeface pake apa, dan sebagainya.

Saya rasa tantangan yg mereka (designer web) hadapi ketika menjadi designer apps adalah bagaimana caranya agar menguasai design interaksi dan UX-nya.

Untuk mengubah sebuah tampilan website menjadi tampilan aplikasi yg mungil, layar terbatas, jangkauan pengguna ketika menyentuh layar bagaimana, dan hal-hal lain yang perlu diperhatikan… bukanlah sebuah pekerjaan yang mudah. Sebagai contoh : ketika mengatur ukuran huruf yang nyaman dibaca pengguna aplikasi, mengatur komponen apa aja yang dapat dijangkau pengguna aplikasi ketika menyentuh layar, dan dari langkah tersebut, desainer masih dibuat pusing lagi ketika menguji hasil karya antar mukanya.

Si desainer sudah merasa yakin mendesain aplikasi di hape layar besar (di atas 5 inch), ternyata di hape layar kecil membuat pengguna kurang nyaman, terkadang mengalami masalah komponen layout-nya oversize di hape layar kecil, terkadang ukuran hurufnya kegedean diterapkan di hape layar kecil, dan masih banyak lagi masalah-masalah yang mungkin terjadi. Dan akhirnya si desainer aplikasiΒ  mencoba mengatur ulang layout-nya.

Dengan kata lain, mau tidak mau si desainer harus menyiapkan beberapa layout design untuk beberapa jenis ukuran layar smartphone maupun tablet (dari ldpi, mdpi, hdpi, xhdpi, sampai dengan xxhdpi).

Seperti yang sudah saya jelaskan, masing-masing perangkat mobile, baik itu smartphone maupun tablet punya UX berbeda. Apalagi beda platform, tentu User Experience di tiap platform berbeda. Pengguna device Android sudah terbiasa melihat menu dengan slide ke kanan atau tap pada pojok kiri dan kanan, sedangkan pengguna device iOS terbiasa dengan menu slide di bawah ke atas, dan berbeda lagi dengan pengguna WindowsPhone, menu disajikan per tab dengan label yang besar di atasnya, tidak ada menu pojok seperti di Android ataupun menu bawah seperti di iOS. Setiap platform punya guidelines-nya bagaimana meletakkan komponen design, seperti yang saya sampaikan yaitu menu, slide menu, tombol, tab, tabel, dan komponen lainnya.

Biasanya, seorang desainer itu melakukan coret2 dulu di wireframe (wireframing), diskusikan dengan tim (ntah dengan desainer web ataupun aplikasi mobile yang lain ataupun dengan developer dan system analyst) apa yang telah di-wireframing sudah pas atau belum, kemudian periksa guidelines di docs platform tersebut apakah sudah sesuai pattern OS tersebut atau belum, kemudian UX-nya bagaimana.. apakah sudah sesuai dengan kebiasaan pengguna di platform tersebut atau belum, setelah itu baru memulai perbaiki designnya agar menjadi tampilan antarmuka aplikasi yang ideal yang siap diimplementasikan ke dalam aplikasi.

Bagi teman-teman yang belum mengetahui guidelines atau panduan mendesain di masing-masing platform mobile, bisa merujuk ke link berikut ini :
Semua udah ditulis lengkap, resmi dan terstruktur, tinggal kitanya mau belajar dengan tekun atau tidak.
iOS : https://developer.apple.com/…/UserExp…/Conceptual/MobileHIG/
Android : http://developer.android.com/de…/get-started/principles.html
WP : https://dev.windows.com/en-us/design

Sekian πŸ™‚

Advertisements

Install Git Server di VPS berbasis Linux – CentOS

Di sini akan dicoba langkah-demi-langkah tutorial mengenai instalasi Git Server di VPS (Virtual Private Server) yang menggunakan OS CentOS.

Perlu diketahui, ketika kita menyewa sebuah lingkungan virtual, VPS, kita tentunya akan mendapatkan IP Address VPSmu, akun akses control panelnya (biasanya pakai Lxadmin), atau yang disediakan oleh hostingnya dengan menginputkan username dan password. Biasanya di dalam control panel tersebut disediakan menu : remote access dan ssh remote. Nah, inilah yang akan kita pakai dalam tutorial kali ini. Di sini saya mencoba meremote VPS yang saya sewa menggunakan putty dengan Connection Type : SSH.

Akses VPSmu, menggunakan Putty. Masukkan hostname (atau IP Address VPSmu), dengan port standard : 22.

Ketika sudah masuk ke session VPSmu, silahkan login dengan memakai superuser : root. Dan masukkan password yang telah diberikan oleh hosting tempat kamu menyewa VPS.

Ok, jika sudah, silahkan ikuti petunjuk di bawah ini :

Cek DAG Repository, Webtatic repo untuk Git Server yang akan kita install di VPS, dengan mengetik :

– Untuk Red Hat Enterprise Linux 5 / i386 :

rpm -Uhv http://apt.sw.be/redhat/el5/en/i386/rpmforge/RPMS/rpmforge-release-0.3.6-1.el5.rf.i386.rpm

– Untuk Red Hat Enterprise Linux 5 / x86_64:

rpm -Uhv http://apt.sw.be/redhat/el5/en/x86_64/rpmforge/RPMS//rpmforge-release-0.3.6-1.el5.rf.x86_64.rpm

Ok, tunggu sampai proses selesai, setelah itu dilanjutkan dengan perintah install Git server :

yum -y install git

Tunggu sampai proses install selesai.

Ketika installasi selesai, saatnya membuat repository.

Membuat repository itu mudah! sederhana, tinggal buat folder untuk reponya, terus diinit, perintahnya sebagai berikut :

mkdir newrepo [diasumsikan nama foldernya newrepo, tapi bebas, terserah kamu namanya]
cd newrepo
git init

Setelah repo sudah dibuat, kita dapat menduplikat atau membuat file-file proyek kita (bisa pakai SVN import) dan lakukan langkah berikut :

git add .
git commit

Nah, repo sudah dibuat nih, kamu mungkin ingin membagi repo mu ke temen-temen. Ini berarti orang lain dapat pull dan push file-file mereka ke repomu dan mengubahnya. Ada banyak cara sharing untuk SVN repository.
Tapi cara yang sederhana adalah menggunakan Git Daemon. Ini akan mengizinkan orang lain push+pull, share, dengan menggunakan perintah berikut :

git daemon --reuseaddr --base-path=/path/to/repos --export-all --verbose --enable=receive-pack

Perintah di atas akan mengizinkan repo untuk dishare melalui folder repo yang kita buat di atas (ex : newrepo). Ketika sudah membuat repo tersebut dapat dishare. Dan tentunya client atau user lain, dapat melakukan clone Git repo kamu. Dengan syntax :

git clone git://remote.computer.hostname/newrepo

Atau via Github atau via Tortoise SVN. πŸ˜€

Kamu bisa menggunakan gitolite atau Gitosis untuk integrasi ke Redmine (software project management) dan tentunya tercentral, private, sehingga aman dari ancaman dari luar dan mudah ter-manage

Selamat mencoba dan sukses! πŸ˜€

[Tips for Android Developer] Using Android Emulator or Android Virtual Device

If you don’t have a android phone, don’t worry..you can still develop apps android and try it through Android Emulator (Android Virtual Device – AVD)

you can use the command via command prompt (don’t forget to set adb tools on system variable path on your PC) :

emulator -avd emulator-name

to start the emulator. If you want to customize the emulator appearance, you can use the command:

emulator -avd emulator-name -skin 480Γ—320

where the Andori emulator appearance standard is:

480Γ—320, landscape: emulator -skin HVGA-L
320Γ—480, portrait : emulator -skin HVGA-P (default)
320Γ—240, landscape: emulator -skin QVGA-L
240Γ—320, portrait : emulator -skin QVGA-P

[Tips for Android Developer] Using ADB Tool and DDMS for support.

Hi, everyone! πŸ˜€

Welcome back πŸ™‚

First, i want to show you about how important ADB tool for support your Android Development.

There many advantage about using ADB (Android Debug Bridge), such as :

1st : You can install/uninstall application pass through PC via USB debugging mode and mini-USB cable connected.

2nd : You can enter Shell Command (like Linux Command) inside ADB Shell.

3rd : You can detect your device, debug your application, save to log file, and report you if there’s bugs.

4th : You can push/pull file to/from device to your PC through ADB push or ADB pull.

Ok, lets know about interface πŸ™‚

If you want to activate ADB Tools via Command Prompt on Windows, you can entry this path to System Environment Path on Windows, like :

Path” src=”https://butterflydroid.files.wordpress.com/2011/06/05-06-2011-14-21-23.png?w=256″ alt=”” width=”256″ height=”300″ />

Add new variable value on Path System Variable : [drive]:\[Location on Windows]\android-sdk-windows\platform-tools; (if you are using new ADB tool)

Or

[drive]:\[Location on Windows]\android-sdk-windows\tools (if you are using old ADB Tool)

Now, lets try it πŸ˜€

Several commands that you should know :

ADB install [APK File] : To install Android Application (APK) to your device (on emulator or Android Phone)

Example : adb install facebook.apk [enter]

ADB push [source_file] [destination_file] : To push your file on your PC to your device.

Example : adb install “c:\Temp\sample.txt” \sdcard\sample.txt [enter]

ADB pull [source_file] [destination_file] : to pull your file on the device to your PC.

Example : adb pull /sdcard/music.mp3 “c:\music\music.mp3” [enter]

ADB Shell : to enter shell command like linux (you can gain superuser access too, if you want to copy file from /sdcard to /system file)

Example : ADB Shell [enter] enter shell command prompt, start with “$” if you are ordinary user, or “#” if you re superuser.

So if you want to access superuser on your Android System, you just go :

adb shell [enter]

$ <= shown like this if you are ordinary user.

$ su [enter]

# <= shown like this if you have superuser.

If failed to access your shell with superuser, maybe your device is not rooted yet.

# reboot [enter] (for reboot your device) or on ADB Tools, you can entry command : adb shell reboot [enter]

now, lets talk about DDMS (Dalvik Debug Monitor)

This software is used for examining and tracing your application process, you can check every process, debug your application, take a capture of interface and logcat (event log).

If you want to check your application that supporting multitouch, you can use DDMS to check how it’s works.

You can access DDMS via command prompt or Run command : ddms [enter]

Enough πŸ™‚

Game sederhana Sudoku dan solvernya dengan metode algoritma Backtracking

Beberapa hari yang lalu temen minta bantu buatin game sudoku, ok..saya terima.
Saya coba-coba contoh game sudoku yang ada di code.google.com

Namun ternyata setelah itu, dosen dia meminta dia untuk ditambahin “penguatan tema skripsi” yang membuat skripsi tersebut lebih berbobot.

Terpikirlah oleh dia untuk menambahkan Solving problem masalah sudoku. Namun ternyata dia bingung…hahaha.
Dengan agak lama saya coba pelajari metode apa yang bisa dipakai untuk game sudoku tersebut.

Diapun bilang : “wid, coba metode Backtracking”

Ok..well, saya coba baca-baca ternyata gak ngerti..wakakakak..
Akhirnya terus berangsur-angsur saya coba pahami beberapa hal mengenai algoritma backtracking secara umum dari googling.

Dan kemudian game sudoku yang tadinya saya pelajari dari code.google, bisa bertahap saya tambahkan function backtracking.

Berikut gamenya :

Kalau mau nyobain di Android : silahkan download πŸ˜€

Game ini sudah ada fitur musik, problem solving sudoku dengan backtracking, dan level (mudah, sedang, sulit)

Kalau ada waktu, saya kembangin lagi deh πŸ˜€

Xrecovery Installation for Xperia X10i (with offline charging fixed)

Hi, android lovers! πŸ˜€

I’ve made simple application on android..The main function is to install xrecovery on Xperia X10i. It’s easy to use, you just click button “install” and wait till the status “OK”, then do reboot to check xrecovery menu (don’t forget to tap back button, during boot screen (before sony ericsson logo animation))

On this application, offline-charging have included.

Download here