Membuat User Interface Aplikasi Mobile

Dalam membuat program, tentunya kita akan berfikir bagaimana cara agar user dapat dengan mudah menggunakan apikasi yang telah kita buat. Maka dari itu salah satunya dengan menggunakan teknik desain yang pastinya memudahkan penggunanya menjelajahi menu dengan menu yang tekah disajikan. Disanalah lahir sebuah user interface.  Kunci dari sebuah desain antar muka (user interface) website atau aplikasi yang bagus atau menarik adalah kemudahan pengguna dalam menggunakannya.

Prinsip dalam membuat desain antar muka (user interface) sangat penting karena jika terlalu memusingkan, pengguna harus belajar lagi cara menggunakannya dan akan membuat mereka menjadi bosan dan malah berpaling ke aplikasi lain.Membuat konsep desain antar muka (user interface) yang bagus mungkin mudah, tetapi dalam prakteknya ternyata tidak semudah itu. Bagaimana kah caranya? Berikut panduan supaya kamu tidak salah terlalu jauh :

  1. Kita buka projek baru di illustrator , lalu kita buat persegi panjang untuk bagian header dengan menggunakan rectangle tool rectangle too . Kita beri warna tosca , jangan lupa menghapus strokenya . 1
  2. Setelah itu, kita beri logo perusahaan misalkan saya menggunakan logo karisma academy. Selanjutnya kita akan membuat menu utama dibagian header, kita klik opsi lain di rectangle tool, kita pilih rounded rectangle tool.2
  3. Nah kita buat shape memanjang seperti ini :3
  4. Sebelum berlanjut ke projek tadi, kita akan belajar membuat salah satu icon pada menu utama seperti misalkan icon dari setting yang biasanya berlogokan gear. Kita buat di halaman baru, kita buat 2 buah lingkaran yang berbeda warna.5
  5. Kita akan melubangi lingkaran berwarna biru itu dengan menggunakan pathfinder path jika anda tidak menemukannya, anda bisa memilih menu windows lalu centang opsi pathfinder. Kita pilih logo kedua , yaitu minus front. Nah hasilnya seperti ini:6
  6. Selanjutnya kita pilih rectangle tool untuk membuat geriginya, kita tinggal mencopynya berulang agar memenuhi sekelilingnya seperti ini. Lalu kita ubah menjadi warna putih. a
  7. Selanjutnya kita kembali ke projek awal lalu kita posisikan gear buatan kita tadi di pojok sebelah kanan.7
  8. Setelah itu, kita masukkan menu apa saja yang akan dibuat di header misalkan saja seperti ini dibawah ini, kita juga dapat menambah kilau plastik dengan menggunakan pentool kita gambar dengan warna putih lalu opacitynya dikurangi menjadi 20%.8
  9. Kita drag gambar peta dunia png ke lembar kerja kita , lalu kita atur posisinya seperti ini9
  10. Setelah itu, kita akan membuat siluet dari anak yang sedang belajar di laptop ini menggunakan pentool (P) pentool lalu kita beri warna hijau tua. 10
  11. Kita copy ke lembar projek kita. Lalu kita beri persegi panjang berwana hitam dibawah siluet itu sebagai pembatas header dan body dengan menggunakan rectangle tool.11
  12. Lalu kita klik rectangle tool lagi untuk membuat background bodynya. Kita beri warna abu-abu.12
  13. Lalu kita bisa mulai membuat tampilan menu profile berupa form kotak kotak (flat design) seperti ini menggunakan rectangle tool.13
  14. Kita dapat menambahkan sebuah foto untuk interface tampilan foto profile usernya14
  15. Lalu kita buat fitur jam dan kalender seperti dibawah15
  16. Kita buat fitur status tugas juga disisi kanan, menggunakan rectangle tool untuk proses pembuatan shapenya16
  17. Kita buat lagi form status tugas seperti ini17
  18. Terakhir kita dapat membuat form sosial, yang berisikan options seperti grup, tambah teman, dll. Saya menggunakan icon png agar menghemat waktu18
  19. Nah desainnya sudah selesai , kita tinggal mengeksportnya menggunakan artboards art agar hasilnya rapi.19
  20. Langkah terakhir (Opsional) anda dapat menambahkan sedikit background da meletakkan hasil design anda seperti ini agar terlihat cantik.20Sekian tutorial dari saya , jika masih mengalami kesulitan anda bisa menyaksikan video tutorial saya pada link dibawah ini. Semoga bermanfaat
Advertisements
This entry was posted in Adobe Illustrator and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s