Tutorial Figma Membuat UI/UX Halaman Login & Halaman Register

Ngulik Kode - Halo teman-teman balik lagi dengan Admin TokoCoding - Ratih, apa kabar ? Semoga kalian sehat selalu.

Dalam membangun sebuah Aplikasi, peran UI/UX sangat dibutuhkan. Bagaimana tidak, jika User Interface aplikasi yang kita buat tidak baik, maka User akan kurang tertarik untuk menggunakan Aplikasi kita. Begitu juga dengan User Experience, Aplikasi yang kita buat dengan UX yang buruk maka akan mempersulit User menggunakan aplikasi kita.

Maka dari itu kali ini Admin akan membuat tutorial menggunakan Figma untuk Design Mobile Application. Dalam tutorial pertama membuat design UI/UX kali ini, yang akan kita buat adalah Login Page dan Register Page Interface Mobile di Figma.

Figma sendiri adalah Web Based Application yang bisa digunakan di dalam situs nya figma.com tanpa harus mendownload aplikasi desktop nya. Tetapi jika kalian ingin mendowload nya, kalian bisa download disini https://www.figma.com/downloads/

Okay, setelah menyelesaikan proses download dan login di Figma, kalian bisa langsung membuat file baru yang berada di kanan atas, atau kalian bisa dengan mudah menggunakan shortcut Ctrl+N

A. Mengenal Tools di Figma

Nah sebelum kita memulai, kita akan melakukan pengenalan terlebih dahulu dengan tools yang ada di dalam figma yang perlu kalian ketahui. 

Nah, untuk memudahkan pengerjaan, kita bisa menggunakan shortcut seperti di bawah ini: 

    • F - Untuk membuat frame

    • T - Untuk Membuat text

    • R - Untuk membuat persegi

    • O - Untuk membuat lingkaran

    • L - Untuk membuat garis

B. Membuat Login Page

Nah setelah itu kita akan membuat frame untuk halaman login terlebih dahulu. Ketik F, lalu sebelah kanan akan muncul design frame yang ingin kalian buat, karena kita ingin membuat tampilan di mobile, kalian pilih frame untuk phone. 

Admin akan memilih iPhone 8 Plus, tapi kalian bebas menentukan pilihan yang kalian suka. Jika sudah, akan muncul frame yang kalian pilih di canvas seperti berikut :

Lalu kalian bisa mengikuti Langkah-langkah selanjutnya dibawah ini, telah disajikan gambar properties/style untuk memudahkan kalian dalam mengikuti tutorial di bawah.

Style:

• Text--font-poppins, weight-regular, size-18, color: #000
• Rectangle--border radius-15, color:#ddd
• Text--font-poppins, size-10, weight-light
• Rectangle--border radius-15, color: #454545
• Text--font-poppins, size-12, weight-light
• Text--font-poppins, size-14, weight-light
• Rectangle--border radius-3, color:#454545
• Text--font-poppins, weight-regular, size-18, color: #fff
• Ellipse --olor:#c4c4c4

Jika kalian liat, di bawah Prototype terdapat Icon Google dan Facebook. Nah kali ini kita akan mendownload plugin Brandfetch. Kalian klik menu lalu ke plugins, lallu klik browser plugins in community. 

Jika sudah, ketik "Brandfetch" lalu install.

Balik ke design kalian, lalu ketik Ctrl + /  kemudian ketik Brandfetch, kalian bisa mencari logo brand yang kalian inginkan. Sebagai contoh disini Admin menggunakan logo Faceboook. Jika sudah select pada bagian ellipse dan klik gambar yang ada di plugins.

Jika menjadi seperti gambar di bawah, tandanya kalian sudah berhasil. 

Lakukan juga ke ellipse lainnya, kalian boleh mengisinya dengan contoh brand Google. Seperti gambar di bawah ini. 

Lalu kita akan menambahkan icon show/hide di dalam rectangle password. Silahkan kalian download plugins icons8 icons di plugins community seperti sebelumnya. Jika sudah, klik ctrl + / dan cari plugins icons8 icons. Lalu ketikkan show hide seperti gambar berikut :

Kalian juga bisa mengubah warna di kanan atas plugin nya menjadi warna sesuai selera kalian. Jika sudah, klik dan arahkan ke dalam rectangle password seperti gambar. 

Okay memasuki langkah terakhir yaitu menambahkan vector. Sekarang kalian klik link ini https://undraw.co/search dan ketikkan “login” kalian boleh pilih  sesuka hati, lalu setelah itu kalian download. Kemuadian, kalian copy ke frame seperti ini :

Fyi, kalian bisa mengganti warna dari gambar yang udah kalian download tadi dengan cara klik dua kali lalu ubah warnanya. 

Nah untuk touching terakhirnya,  Admin merubah warna gambarnya menjadi lebih gelap dan menambah beberapa shape untuk meramaikan white space dan terakhir menambahan Text Register di ujung kanan atas seperti gambar berikut :

C. Membuat Register Page

Hal pertama yang harus kalian lakukan adalah duplicate hasil login page yang sudah jadi dengan shortcut Alt + Shift lalu geser ke tempat yang kalian inginkan, lalu ikuti seperti gambar dibawah ini :

• Ganti text “ Register” menjadi “Login”
• Download gambar berbeda dari sebelumnya di sini https://undraw.co/search Kalian bisa search dengan menggunakan keyword “Register” dan pilih sesuai selera kalian. Setelah itu copy seperti gambar diatas
• Ganti text “Login” menjadi “Register”
• Ganti text “Login” menjadi “Register”
• Duplicate salah satu label text dan textfieldnya. Lalu ubah menjadi “Email”
• Ubah text menjadi seperti diatas.

Nah desain halaman Login dan Halaman Register kita sudah selesai nih, gampang banget kan ?. Sekian dulu Tutorial Figma dari Admin, kita akan lanjut sama-sama mempelajari Figma untuk mendesain aplikasi kita pada artikel berikutnya. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar, begitu juga dengan kritik dan saran. Maaf bila ada salah kata, dan terima kasih telah membaca tutorial ini. Semoga ilmu nya bermanfaat.

Proyek GudangKita Bagian 2 – Menghubungkan Aplikasi Android ke Firebase

Ngulik Kode - Assalamu’alaikum teman-teman kembali lagi di Artikel Admin TokoCoding - MuhFikriH, kali ini kita akan melanjutkan Aplikasi GudangKita Part kedua. Di sesi kali ini, Admin akan membantu kalian bagaimana caranya menghubungkan Firebase ke Aplikasi Android dengan bahasa pemrograman Java Native kita. Sebenarnya untuk menghubungkan Aplikasi kita ke Firebase itu ada dua cara yakni :

• Otomatis by Assistant dari Android Studio
• Manual copy paste file google-service.json dari Firebase

Nah umumnya orang-orang menggunakan cara yang pertama, jadi banyak artikel yang sudah membahas cara mengkoneksikannya dengan cara yang pertama. Tapi tidak sedikit juga yang menggunakan cara kedua karna sering gagal jika menggunakan cara yang pertama, oleh karna itu Admin disini akan membantu  kalian yang gagal menggunakan cara pertama untuk menghubungkan Aplikasi Android kalian ke Firebase dengan cara yang kedua. Okey admin rasa sudah cukup pembukaannya maka kita langsung aja eksekusi.

1. Buka Situs Resmi Firebase Source 

Lalu klik "Buka konsol" pada bagian atas.

2. Add Project

Klik "Add project" untuk membuat project baru

3. Nama Project

Masukkan nama project kalian, sebagai contoh disini admin akan membuat project "GudangKita"

4. Google Analytics

Terdapat radio button sebagai pilihan apakah kalian akan mengaktifkan fitur "Google Analytics" atau tidak. Disini Admin akan mengaktifkannya. Sebagai informasi, dengan kalian mengaktifkan fitur ini terdapat banyak keuntungannya, salah satu fitur yang sangat diuntungkan adalah "Crash-free users" yang mana fitur ini akan memberi tahu kalian jika suatu waktu terdapat crash pada Aplikasi kalian, dan juga menunjukan Log dimana titik crash tersebut terjadi.

5. Requirement Google Analytics

Centang saja semua yang dibutuhkan pada form jika kalian masih menginginkan fitur "Google Analytics" lalu klik "Create project"

6. Registrasi Sukses

Tunggu beberapa saat maka project Firebase anda akan siap digunakan. Dan dibawah ini adalah tampilan Dashboard project Firebase kita. Tapi proses belum selesai, saat ini kalian baru saja berhasil membuat project Firebase kalian tapi belum bisa terhubung ke Aplikasi Android kalian. Oleh karena itu mari kita lanjutkan petualangan kita. 

Dibawah tulisan "Get started by adding Firebase to your app" terdapat beberapa button salah satunya Button Android, klik button tersebut.

7. Register App

Terdapat 3 data yang dibutuhkan dalam meregistrasikan App kita ke Firebase, yakni :

• Package name :
  Cara untuk mendapatkan package name App kita adalah dengan membuka project di IDE favorit kalian. Lalu buka file AndroidManifest.xml, lalu pada bagian paling atas tepatnya pada tag <manifest> akan tertera nama Package Apk kita, jika tidak dapat menemukannya kita juga bisa mengeceknya pada file build.gradle(app).

• App Nickname :
  Nickname App kalian di Firebase, kali ini terserah kalian mau menggunakan nama seperti apa yang penting mudah kalian ingat aja.

• SHA-1 :
  SHA-1 terdapat 2 tipe, yakni tipe Release dan Debug. Karena saat ini kita hanya membutuhkan untuk belajar Development saja, maka SHA-1 yang kita butuhkan adalah yang Debug. Untuk saat ini Admin belum membuat artikel bagaimana cara untuk mendapatkan SHA-1 pada laptop kalian. Tapi disini Admin sudah menyiapkan tutorial yang Admin temukan pada Stackoverflow, kalian bisa saja mengikuti tutorial berikut Source

8. Download Config File

Klik button yang bertuliskan "Download google-service.json" jika sudah, copy file yang sudah didownload tadi dan paste pada direktori "App" seperti gambar berikut.

Jika sudah, kembali pada Firebase lalu klik "Next".

9. Add Firebase SDK

Pada sesi kali ini, kalian wajib menambahkan SDK Firebase pada project kalian. Tapi jika kalian sudah mengikuti tutorial ini dari sesi pertama Source, kalian tidak perlu menambahkan banyak SDK. Hanya perlu menambahkan code ke dalam 2 file, yakni :

• Gradle level root (level project) build.gradle.

classpath 'com.google.gms:google-services:4.3.10'

• Gradle modul (level aplikasi), biasanya app/build.gradle.

apply plugin: 'com.google.gms.google-services'

Jika kedua codingan tadi sudah kalian masukkan, maka diatas akan ada notif perubahan pada file build.gradle, yang kalian perlu lakukan adalah dengan menekan tombol "Sync now" tunggu hingga proses selesai.

10. Finished

Kembali pada laman Firebase dan tekan tombol terakhir yang tersisa. Maka proses Registrasi App kita ke Firebase sudah selesai, dan Aplikasi kita sudah terhubung ke Firebase.

Baik teman-teman untuk tutorial GudangKita Part 2 sudah selesai sampai sini, jika ada pertanyaan bisa kalian tanyakan pada kolom komentar. Begitu juga jika ada kritik dan saran. Di tutorial berikutnya kita akan mulai mempelajari Firebase Authentication, yakni fitur dari Firebase yang memudahkan para Developer untuk membuat fitur Autentikasi yang mana nanti bisa terhubung ke Google Account, Facebook, dll.

Terima kasih sudah membaca tutorial ini, sampai jumpa di sesi berikutnya.

Proyek GudangKita Bagian 1 – Setup Aplikasi : Membuat Splash Screen, Mengganti Icon Aplikasi, Dan Setup Tema Aplikasi

Ngulik Kode - Assalamu’alaikum teman-teman selamat datang di artikel pertama saya di Blog Ngulik Kode. Perkenalkan saya Admin TokoCoding - MuhFikriH, disini kita akan belajar bersama-sama membuat CRUD dengan Firebase pada Aplikasi Android dengan Bahasa pemrograman Java. Bagi yang belum tau apa itu Firebase, saya akan bantu menjelaskan nya di lain Artikel. Di artikel ini saya asumsikan temen-temen sudah mengetahui apa itu Firebase. Nah artikel ini akan terbagi menjadi beberapa part. Jadi bagi yang ingin mempelejari nya, silahkan simak setiap artikel nya karena itu semua akan menjadi bagian yang berkelanjutan. Langsung aja yuk kita mulai.

1. Buat Project Android

Buka IDE kesayangan teman-teman, kalo disini saya menggunakan Android Studio. 

• Pilih “Start a new Android Stuideo project”
• Pilih “Empty Activity”

• Sesuaikan requirement device untuk Aplikasi kita

• Tunggu hingga proses selesai dan Aplikasi anda sudah selesai dibuat
• Migrate projek anda ke AndroidX
• Klik tab Refactor -> Migrate to AndroidX

2. Setup Library

Disini kita akan menggunakan beberapa library untuk menunjang kebutuhan aplikasi kita, diantaranya sebagai berikut :

Nama Library	Source	Keterangan
ButterKnife	Source	Library untuk Binding View
SDP	Source	Library untuk menulis satuan size yang akan responsive terhadap setiap ukuran device.
Picasso	Source	Library untuk menampilkan gambar
Converter GSON	Source	Library untuk mengkonversi data JSON ke GSON begitu juga sebaliknya
Google Material	Source	Library agar kita bisa menggunakan widget-widget dari Material Google
Firebase	Source	Library yang akan menjadi Library utama kita agar bisa menggunakan

• Buka file build.gradle(app) anda lalu ubah menjadi seperti berikut.
  
  
  

3. Mengganti Icon Aplikasi

• Siapkan gambar yang akan menjadi icon anda. Disini saya menggunakan asset dari iconfinder.com jika teman-teman ingin membuat nya sama seperti saya, silahkan download icon pada halaman berikut.
• Download gambar gratis : Source
  Download file dalam bentuk SVG
  
• Import gambar
• Buka kembali projek aplikasi teman-teman, lalu buka direkrori App->res->mipmap. Klik kanan pada folder mipmap, lalu pilih new->Image Asset seperti pada gambar

• Pilih letak file yang sudah anda siapkan pada form "path" lalu klik Next seperti pada gambar.

Jika kalian ingin mengganti warna background pada icon, klik pada bagian "Background Layer" dan pilih color, lalu masukkan kode hexa warna yang kalian inginkan.

• Klik finish maka Icon sudah siap digunakan

• Edit file pada AndroidManifest.xml menjadi seperti berikut. 
  
  
  
• Ubah pada bagian :
  - android:icon
  - android:roundIcon
  
• Run kembali projek anda, maka icon aplikasi anda akan berubah.
  
  

4. Membuat SplashScreen

• Buat Activity berikut dengan nama SplashScreenActivity.
  Klik kanan pada direktori gudangkita, lalu pilih new->Activity->Empty Activity

• Centang kolom Launcher Activity
• Edit file activity_splashscreen.xml menjadi seperti berikut.
  
  
  
• Edit file SplashScreenActivity.java menjadi seperti berikut.
  
  
  
• Edit file AndroidManifest.xml, hapus tag <intent filter> pada bagian MainActivity (Jika ada), seperti pada kode berikut :
  
  
  
• Dan berikut hasilnya

Baik teman-teman sekian dulu tutorial GudangKita kali ini. Jika ada saran, kritik, atau pertanyaan silahkan tinggalkan pada kolom komentar ya. Semoga ilmunya bermanfaat, terima kasih dan maaf bila ada salah kata. Sampai jumpa di artikel berikutnya.

Mengenal Apa Itu Design Best Practice Beserta Contohnya

Ngulik Kode - Assalamu’alaikum teman-teman selamat datang di artikel pertama saya di Blog Ngulikode. Perkenalkan saya Admin TokoCoding - Ratih, disini kita akan belajar bersama-sama berbagai pembahasan dan juga praktek dalam dunia design. 

    Design best practice mengacu pada suatu metode atau teknik dimana teknik tersebut sudah menjadi standar  yang telah ditetapkan dalam kualitas, etika, peraturan, tolak ukur dan lain-lainnya. Design best practice sendiri ada banyak, tapi kali ini kita akan membahas 10 Nielsen's 10 Usability Heuristic yang dikemukakan oleh Jakob Nielsen. Dimana prinsip ini sudah menjadi prinsip universal dan telah banyak digunakan produk-produk perangkat lunak.

1. Visibility of System Status

Istilah visibility atau visibilitas sendiri adalah keadaan yang dapat dilihat dan diamati. Jika dalam desain,  terutama UI design sendiri, visibility of system status adalah keadaan dimana design itu  mampu memberikan informasi yang terjadi, terlihat jelas dan dapat diamati oleh user. 

Contoh dari tampilan home Gojek yang menyuguhkan visibility of system status yaitu saldo gopay yang masih kosong.

2. Match Between System & Real World

Heuristik kedua ini menyatakan bahwa Sistem harus berbicara dalam bahasa user, dengan kata, frasa, dan konsep yang akrab bagi pengguna, daripada istilah yang berorientasi pada sistem.

Lagi-lagi kita memakai contoh dari app gojek. Gambar diatas merupakan contoh app tersebut menggunakan Bahasa yang mudah dipahami dan tidak menggunakan istilah system. 

3. User Control & Freedom

Pengertian ini secara singkat adalah memberikan kemudahan dan kebebasan kepada user dalam interface. Contoh yang paling sering adalah dengan adanya tombol undo dan redo di dalam UI design.

Contoh kali ini kita ambil dari app mitra gojek, yang mana 2 button tersebut adalah contoh dari user control and freedom, tentu saja, user bisa memilih salah satu pilihan disana dengan bebas.

4. Consistency & Standards

Konsistensi & Standar adalah nilai kunci dari setiap produk, merek, atau identitas. Dalam istilah sederhana, Sebuah design tidak boleh membingungkan user dengan menggunakan kata-kata, tindakan, desain, atau situasi yang berbeda untuk mendapatkan arti yang sama. 

Contoh button di app gojek seperti gambar diatas merupakan contoh design yang konsisten dalam pembuatan icon di dalam button. 

5. Error Prevention 

Selanjutnya, Error prevention merupakan bentuk pencegahan kesalahan yang mungkin saja dilakukan oleh user. Dengan adanya error prevention ini maka akan memperkecil kemungkinan kesalahan oleh user pemula hingga expert.

Contoh yang sering digunakan adalah memunculkan error message untuk menghindari adanya kesalahan yang lebih fatal. 

Fitur Show/Hide di kolom Password memberikan pencegahan terjadinya password yang salah/typo. User dapat melakukan cek terhadap text yang telah diinput, sehingga dapat meningkatkan kemungkinan password yang telah diinput adalah benar dan mengurangi kemungkinan eror login. 

6.  Recognition Rrather Than Recall 

Membuat user mengenali system daripada mengingat. Dengan kata lain meminimalkan beban untuk user mengingat dengan membuat objek, tindakan, dan opsi terlihat agar user tidak harus mengingat informasi dari satu bagian dialog ke bagian lain

Adanya breadcrumb di file path, atau file recent di Ms. Word memudahkan pengguna untuk mengenali system nya daripada harus mengingat. 

7. Flexibility and Efficiency of Use 

Pada dasarnya user terbagi menjadi dua, yaitu user berpengalaman dan user yang tidak berpengalaman, prinsip fleksibilitas dan efisiensi ini mengharuskan kita membuat design yang nyaman dan memudahkan penggunaan untuk kedua tipe user. 

Kali ini kita menggunakan app shopee, dengan adanya fitur filter, memudahkan user dalam mencari barang, contoh lain adalah fitur sort by ataupun fitur shortcut dan lain-lain.

8. Aesthetic and Minimalist Design

Nyaman dipandang dengan warna kontras yang baik, posisi sesuai dan serasi dengan adanya design minimalist ditambah white space yang sesuai agar user focus dan dalam nilai estetika nya membuat desain lebih elegan. 

Contohnya adalah home page Google yang terlihat sederhana dan elegan juga hanya menyediakan informasi yang sederhana dan penting. Juga fokus pada system yang dibutuhkan user. 

9. Help Users Recognize, Diagnose, and Recover From Errors 

Prinsip ke-9 ini mengharuskan kita membantu user jika ada kemungkinan kesalahan atau kegagalan yang terjadi pada system. Dalam kalimat sederhananya adalah memberi solusi jika ada error, tidak hanya pesannya. 

• Microsoft Edge
  Contoh dari Microsoft edge, bisa dilihat dari gambar dibawah, yang mana tidak hanya pesan error nya saja, tetapi ada juga Langkah langkah yang memudahkan user.

• App Gopay
  Contoh dari app gopay yang menampilkan pesan error untuk memberitahu informasi kepada user. 

10. Help and Documentation 

Berikan fitur bantuan dan dokumentasi dan membiarkan user belajar lebih banyak. Maka secara tidak langsung kita kita telah memberikan control lebih kepada user.

• Fitur bantuan di Gojek

• Fitur bantuan di Google Chrome