Tips All

Jika karir UI/UX designer memiliki tugas utama dalam mendesain sebuah website atau aplikasi mobile maka UI engineer yang akan melanjutkan tugas tersebut dengan cara mengubah tampilan design menjadi barisan koding sehingga dapat digunakan secara online oleh masyarakat nantinya. UI Engineer berfokus membawa design kepada tahap development sebelum dikerjakan oleh tim Front-End Developer dan Back-End Developer. UI Engineer perlu berhati-hati dan juga teliti sehingga design yang telah diimplementasikan kepada tahap development sudah sesuai setidaknya 98% dari apa yang telah dikerjakan oleh UI/UX designer sebelumnya. Tools Yang Digunakan UI Engineer Sebelum Figma popular seperti saat ini, dulu UI engineer dan designer menggunakan software seperti Zeplin atau InvisionApp sehingga mereka dapat melakukan proses inspection pada design projek tersebut seperti melihat kode warna, typography, layout, margins, paddings, dan juga sebagainya. Namun saat ini proses design handoff dapat dilakukan oleh UI engineer hanya menggunakan Figma saja, jadi tidak perlu pindah ke software lain. UI engineer akan mulai melakukan slicing dan exporting dari asset-asset yang dibutuhkan seperti Icon, Photo, Illustration, yang digunakan pada projek website tersebut. Untuk Jadi UI Engineer Butuh Skills Apa Saja? Kita bisa berkarir dan fokus pada website atau mobile, jika saat ini kita lebih memilih website maka kita bisa mulai belajar HTML, CSS, dan juga JavaScript. Tugas kita menggunakan HTML dan CSS untuk membangun struktur layout website yang sempurna yang sesuai dari design yang telah dikerjakan oleh designer. UI Engineer juga perlu melatih critical thinking sehingga nanti mereka juga bisa peduli pada perfomance website tersebut, karena pengguna website akan frustasi apabila website yang digunakan membutuhkan waktu yang lama untuk proses loading, so, yes, pelajari juga ya ilmu meningkatkan perfomance website. Prospek Kerjaan UI Engineer Bagaimana? Well, di zaman yang serba digital saat ini sudah banyak perusahaan yang mulai membangun website pribadi mereka untuk dijadikan company profile, jual beli jasa atau produk, dan bahkan hal lainnya yang bisa menguntungkan customer dan perusahaan. Pekerjaan kita sebagai UI Engineer tentunya sangat dibutuhkan untuk membantu perusahaan dalam menjual produk mereka via website, dan kita bisa memperdalam skills website optimization dalam membangun website yang baik.

Ketika kita mengerjakan design project sering kali membutuhkan gambar atau stock image untuk melengkapi design kita agar lebih menarik, dengan kualitas gambar yang tinggi. Stock Image saat ini sudah banyak ditemukan di internet, namun kita perlu memperhatikan jenis lisensi dari stock image yang diunduh apakah dapat digunakan untuk komersial atau tidak. 6 Website Penyedia Stock Image Gratis Untuk Design Sebagian stock image di internet memiliki persyaratan hak cipta dan harus membayar royalti untuk keperluan komersial atau dapat memodifikasi karya yang diunduh. Ada berbagai website yang menyediakan stock image bebas royalti. Berikut di antaranya: 1. Freepik Tampilan Website Freepik penyedia stock image gratis Di Freepik kamu bisa menemukan berbagai assets (Foto, vector, icons, file PSD dan Ai) berkualitas tinggi. Konten di website ini sudah diunduh lebih dari satu miliar kali dan menjadi situs gambar yang populer dan banyak digunakan oleh freelancer. 2. Unsplash Tampilan Website Unsplash penyedia stock image gratis Kamu dapat mengunduh berbagai pilihan gambar di Unsplash secara gratis dengan berbagai ukuran sesuai kebutuhan. Setiap gambar yang dipublikasikan di Unsplash dilisensikan di bawah Creative Commons Zero (CC0), yang memberi kebebasan kepada pengguna untuk menyalin, memodifikasi, mendistribusikan, dan menggunakan semua gambar tanpa izin atau atribusi. 3. Pixabay Tampilan Website Pixabay penyedia stock image gratis Pixabay merupakan website yang sangat lengkap karena menyediakan jutaan gambar, vector, ilustrasi bahkan video dan sound effects. Pixabay juga dirilis di bawah lisensi Creative Commons (CC0) ke dalam domain publik. 4. Burst Tampilan Website Burst penyedia stock image gratis Burst adalah website yang didirikan oleh Shopify. Burst dibuat dengan tujuan untuk membantu para entrepreneurs baik dalam membuat website, campaign marketing, dan produk yang lebih menarik. Kebanyakan foto ini diambil oleh tim Burst dan Shopify sendiri. Website ini juga di bawah lisensi Creative Commons (CC0). 5. Pexels Tampilan Website Pexels penyedia stock image gratis Pexels memiliki ribuan gambar dan video gratis yang dapat diunduh, karena di bawah lisensi Creative Commons (CC0). Dari tampilannya, Pexels punya kemiripan dengan web Unsplash. 6. Picjumbo Tampilan Website Picjumbo penyedia stock image gratis Website Picjumbo tidak hanya menyediakan stock image gratis, namun juga menyediakan stock image premium untuk penggunya yang berlangganan (membership). Nah, itu dia 6 website penyedia stock image gratis untuk design, kita bisa mengunduh foto dan gambar gratis tanpa perlu pusing memikirkan pelanggaran hak cipta konten. Terima kasih dan semoga artikel ini bermanfaat.

Saat ini design tool Figma banyak digunakan oleh para Designer, baik oleh para Product Designer, UI/UX Designer dan bahkan Graphic Designer. Figma memiliki banyak plugin yang dapat digunakan untuk membantu kita bekerja lebih cepat dan efisien. Disini saya akan berbagi bagaimana cara mengunakan plugin “Background Remover” untuk membantu kamu bekerja lebih cepat dalam menghapus background gambar. Cara Menggunakan Plugin Figma Untuk Hapus Background Gambar Berikut cara menggunakan plugin Background Remover di Figma: 1. Buka File Design atau Buat File Design Baru Tampilan file baru pada Figma Plugin bisa dijalankan pada file design yang sedang kamu kerjakan atau kamu dapat membuat file design baru. 2. Tambahkan gambar Menambahkan gambar Tambahkan gambar yang akan dihapus backgroundnya. Kamu bisa menambahkan gambar dengan cara klik logo Figma dibagian kiri > File > Place image (Ctrl/Cmd+Shift+K) atau kamu dapat drag gambar ke file project design kamu. 3. Menjalankan Plugin Background Remover Menjalankan plugin Kamu bisa mencari plugin tersebut dengan klik kanan pada gambar > Plugins > Find more plugins (Apabila belum pernah menjalankan plugin tersebut). Plugin Icons8 Background Remover Lalu kamu bisa ketik “Remove background” > Run > Remove Background untuk menjalankan plugin. Ada banyak jenis plugin background remover yang serupa, namun pada artikel ini saya menggunakan plugin ‘Icons8 Background Remover’. 4. Menunggu Plugin bekerja untuk menghapus background Proses loading plugin background remover Dalam proses running plugin tersebut, lamanya waktu loading tergantung dengan ukuran atau resolusi gambar yang dipilih. Dan plugin di Figma ini memiliki batas ukuran gambar yaitu 5 MB. Apabila kamu memilih gambar dengan ukuran lebih dari 5 MB, akan muncul peringatan seperti ini: Peringatan ukuran gambar terlalu besar Untuk hasil akhirnya akan seperti ini: Hasil akhir menggunakan plugin background remover Background menjadi transparan Background pada gambar tersebut sudah terhapus dengan rapi. Tips: Untuk hasil ‘potongan’ yang lebih rapi kamu bisa menggunakan gambar dengan background/latar belakang yang polos, tidak terdapat bayangan atau gradasi. Terima kasih telah membaca artikel ini dan semoga bermanfaat!

Hello people spirit of learning! Pada aplikasi messaging seperti email, Saat ada message masuk pasti kita bisa menggesernya baik archive, delete , dan lain sebagainya. Itu kita bisa lakukan dengan menggunakan package Slidable. Sliable adalah item daftar yang dapat digeser dengan tindakan penggeseran arah yang dapat ditutup. Kita langsung saja masuk ke dalam tutorialnya. 1. Kunjungi Website Pub.Dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari keyword Sliadble Langkah kedua adalah ketik keyword Slidable. Pilih yang paling atas. 3. Install Package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Implementasi Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main(List args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( body: ListView(children: [ sliableExample( icon1: Icons.archive_outlined, icon2: Icons.delete, listTile: ListTile( tileColor: Colors.cyan, title: Text('Slide me Please', style: TextStyle( fontWeight: FontWeight.w700, color: Colors.white)), ), ), SizedBox(height: 30), sliableExample( listTile: ListTile( title: Text('Slide me please'), tileColor: Colors.amber, ), icon1: Icons.send_and_archive, icon2: Icons.delete) ]), ), ), ); } } class sliableExample extends StatelessWidget { final ListTile listTile; final IconData icon1; final IconData icon2; const sliableExample({ super.key, required this.listTile, required this.icon1, required this.icon2, }); @override Widget build(BuildContext context) { return Slidable( startActionPane: ActionPane(motion: ScrollMotion(), children: [ SlidableAction( onPressed: (context) {}, backgroundColor: Colors.blue, flex: 10, icon: icon1, autoClose: true, ), SlidableAction( onPressed: (context) {}, icon: icon2, backgroundColor: Colors.red, flex: 10, ) ]), child: listTile, ); } } Disini kita akan menggunakan 2 StatelessWidget yaitu MyApp dan sliadbleExample. Untuk slideableExample nantinya akan kita gunakan atau turunkan ke class MyApp. Untuk slideableExample kita akan buat variable seperti diatas dan dimasukkan ke dalam constructor. Fungsinya nantinya untuk menginisialisasikan nilai yang kita masukkan nanti. Dalam widget build kita mengembalikan nilai Packagenya yaitu Sliadble. Ada banyak properti yang kita gunakan. Untuk startActionPane fungsinya kita bisa menggeser ke kanan. untuk ScrollMotion adalah jenis animasi scrollnya, dan untuk children kita bisa isi dengan 2 SliableAction. Juga cukup banyak properti. Lalu kita turunkan ke dalam class MyApp. Namun sebelumnya kita isi dengan widget ListView dan diisi dengan 2 slidableExample. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Goals Bekerja sama dengan backend developer, quality assurance, dan UI designer dalam proses imeplementasi fitur terbaru pada website buildwithangga.com. Saat ini BuildWith Angga sedang fokus membangun Notification module untuk forum belajar (real-time). Requirements Menggunakan Vue JS 3Terbiasa menggunakan Laravel MixTerbiasa integrasi REST APIBersedia mengerjakan projek 3-6 jam sehariTingkat skills minimal Intermediate How to apply Persiapkan CV dan portfolio terbaik kamu misalnya link github atau personal websiteJelaskan cara kamu bekerja biasanya pada body emailKirim lamaran ke [email protected] dengan judul Vue JS Freelancer 2023 Silahkan apply dan jika tidak keberatan boleh bagikan lowongan ini kepada rekan terdekat yang sekiranya membutuhkan, terima kasih, sukses selalu.

Hello people spirit of learning! Dalam flutter, terdapat bermacam-macam jenis package yang bisa kita pakai. Salah satunya adalah Laoding Animation Widget, yang fungsinya membuat animasi loading menjadi lebih cantik. untuk tutorialnya kita langsung saja mulai ya. 1. Kunjungi Pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari Keyword Loading Animation 3. Install package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Install Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:loading_animation_widget/loading_animation_widget.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isLoading = false; @override Widget build(BuildContext context) { return isLoading ? loading() : MaterialApp( home: Scaffold( body: Center( child: ElevatedButton( onPressed: () async { setState(() { isLoading = true; }); await Future.delayed(Duration(seconds: 3)); setState(() { isLoading = false; }); }, child: Text('Load data'))), ), ); } } class loading extends StatelessWidget { const loading({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: LoadingAnimationWidget.waveDots(color: Colors.blue, size: 100)), ), ); } } Disini kita menggunakan 2 state ya yaitu Stateful dan Stateless. kita pakai stateful karena nantinya ada perubahan data jika kita melakukan action. Untuk membuat halaman loading kita bisa menggunakan stateless saja. kita bisa menggunakan packagenya dengan memanggil widget LoadingANimationWidget dan getter dengan jenis macam nama animasi loadingnya. dan setelah itu ada 2 properti yang harus diisi yaitu Color dan size. Fungsi dari masing-masing properti yaitu untuk mengatur warna dan ukuran pada animasi loading. Setelah kita membuat halaman pada loading, Kita membuat statefulWidget. Kita buat var bertipe bool yang diisi dengan nilai false. Setelah kita membuat variable, Pada widget build stateful kita buat pekondisian, Jika loading maka Animasi Loading akan berjalan, Jika tidak maka tampilkan halaman khusus untuk Load data. Pada button, kita buat fungsi saat ditekan maka akan ubah state menjadi true, Saat di klik maka akan loading selama 3 detik, Setelah 3 detik maka state akan berubah menjadi false. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Hello people spirit of learning! Dalam flutter terdapat widget elevated button yang fungsinya adalah untuk membuat button dengan kustomisasi kita sendiri. Disini kita akan membuat button tanpa menggunakan shadow. 1. Membuat Elevated Button ElevatedButton(onPressed: () {}, child: Text('Confirm')) Pertama, pastinya kita memanggil widget Elevated Button untuk membuat widget button nya. Nanti hasilnya akan seperti gambar diatas. Untuk isinya kita isi dengan text terlebih dahulu ya dan untuk properti OnPressed nya kita isi dengan function kosong. 2. Membuat Styling Button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), primary: Colors.red, ); Kedua, untuk styling pada button kita membuatnya dengan file terpisah. Tipe data untuk syling button adalah ButtonStyle. dan di getter dengan stlyeFrom. ada banyak properti untuk styling pada button yaitu minimumSize, yang fungsinya membuat ukuran minimum pada button. Lalu shape yang fungsinya memodifikasi bentuk pada button. Primary adalah mengubah background warna pada button, Dan masih banyak lagi. 3. Implementasi Style ke dalam Elevated Button ElevatedButton( style: button, onPressed: () {}, child: Text('Confirm')) Yang ketiga, kita tinggal implementasikan style button pada elevated button. Caranya sangat mudah tinggal panggil properti style lalu isi dengan nama variable style yang baru saja kita buat. 4. Menghilangkan shadow pada elevated button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), elevation: 0, primary: Colors.red, ); Pada Button, terdapat shadow sedikit di belakang buttonnya. Untuk menghilangkannya, gunakan properti elevation dan diisi dengan 0. fungsi dari properti elevation ialah menambahkan shadow sesuai dengan ukuran yang diisi. Semoga bermanfaat dan terima kasih!

Hello people spirit of learning! Dalam melakukan sign up / sign in, pastinya kita harus membuat suatu kondisi yang cukup panjang. Yang dimana jika tidak menggunakan @test.com atau semacamnya, maka kondisinya harus seperti bagaimana dan seterusnya akan seperti apa. Dalam flutter, terdapat package yang bernama Email Validator. Email validator fungsinya mengecheck apakah yang kita input itu berupa email atau bukan. Disini kita langsung saja masuk ke dalam tutorialnya ya. 1. Kunjungi Pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari keyword Email Validator Langkah kedua adalah ketik keyword email validator. Pilih yang paling atas. 3. Install Package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Implementasi Package import 'package:email_validator/email_validator.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isEmailValid = true; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Container( width: 325, height: 65, child: TextFormField( style: TextStyle( color: isEmailValid ? Colors.black : Colors.red), onChanged: (value) { print(value); var isValid = EmailValidator.validate(value); print(isValid); if (isValid) { setState(() { isEmailValid = true; }); } else { setState(() { isEmailValid = false; }); } }, decoration: InputDecoration( hintText: "Email", border: OutlineInputBorder( borderSide: BorderSide(color: Colors.blue))), )), ) ], )), ), ); } } State yang kita gunakan disini adalah statefulWidget. Kenapa ? Dengan menggunakan stateful data yang akan kita gunakan nantinya bersifat dinamis. Setelah itu kita membuat textformFieldnya dengan widget TextFormField, Dan mengatur ukurannya kita bisa menggunakan container. Selanjutnya kita styling textformfieldnya dengan menggunakan InputDecoration. Kita akan menggunakan Validasi email pada properti OnChange. properti ini fungsinya bila apa yang kita ketik dalam formfield maka akan terjadi suatu penkondisian yang kita buat. pada OnChange kita masukkan parameter value, dan Membuat variabel khusus untuk mengecheck validasi email menggunakan package EmailValidator dan getter validate diisi dengan parameter value. Setelah itu buat suatu penkondisian jika Validasi email nya benar, Maka setState pada isEmailValid kita jadikan true, Jika tidak maka setState pada isEmailValid kita jadikan false. Begitupun pada warna textnya juga kita buat penkondisian pada properti style. Jika validasi email benar maka warna textnya akan menjadi hitam, Sedangkan validasi email salah maka warna textnya menjadi merah. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Goals Membantu student atau customer yang ingin mencapai karir impiannya dengan cara mempelajari banyak ilmu baru serta membangun hasil karya di BuildWith Angga. Responsibilities Membalas pesan pada WhatsAppMemilihkan alur belajar atau kelas yang cocok untuk studentMemberikan informasi penting lainnya terkait produk BWA Requirements Minimal lulusan S1 Minimal pengalaman kerja (role apa saja) 6 bulanMengutamakan tinggal di Bandung, jika dari luar Bandung bisa pindah ke BandungSedang tidak bekerja freelancer, part time, full timeBekerja dari rumah namun akan ada sesi kerja offline bersama-sama di BandungMinimal telah mengikuti 1 kelas Premium di BuildWith Angga (untuk memastikan bahwa kamu sudah mengenal cara belajar di BWA)Mengerjakan challenge sederhana yang tersedia di bawah Challenge Jawab beberapa pertanyaan berikut: Menurut kamu faktor utama mengapa orang memilih belajar di BWA apa saja?Jika ada customer yang bingung memilih kelas yang perlu dipelajari, saran apa yang akan kamu berikan kepada customer tersebut?Sebutkan 3 kompetitor BuildWith Angga dan benefit yang mereka sediakan tapi tidak tersedia di BuildWith Angga? Kirim jawaban di atas melalui email di bawah. How to Apply Siapkan Resume (CV) & jawaban test pada body emailIsi subject email dengan CS Mei 2023 BandungKirim lamaran ke email [email protected] Lowongan dibuka pada tanggal 22 Mei 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok. Informasi penerimaan akan diumumkan pada Instagram BuildWith Angga, stay tuned.

Hello people spirit of learning! Dalam flutter terdapat banyak package yang dapat kita gunakan, salah satu package favorite adalah shimmer. Fungsi dari shimmer ini adalah membuat widget menjadi berkilau. Biasanya digunakan untuk me ngeload sebuah aplikasi. Seperti pada aplikasi lainnya. Langsung saja ke dalam tutorialnya. Kunjungi pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. Cari keyword Shimmer Langkah kedua adalah ketik keyword shimmer. Lalu pilih paling atas Install package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. Implementasi package void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Shimmer.fromColors( baseColor: Colors.grey, highlightColor: Colors.white, child: Text( 'Loading', textAlign: TextAlign.center, style: TextStyle( fontSize: 40.0, fontWeight: FontWeight.bold, ), ), ), ), ], )), ); } } Untuk menggunakannya kita bisa langsung saja panggil widget Shimmer. didalamnya terdapat 2 properti yaitu child dan gradient. Namun kita menggunakan getter saja yaitu get FromColors. Nantinya didalamnya ada cukup banyak properti. Basecolor untuk warna dasarnya dan highlightColor untuk warna kilaunya, dan child adalah isi dari shimmer nya nanti. Childnya kita isi sebagai text saja dan styling sesuai keinginan kalian. Terima kasih dan semoga bermanfaat!