Akses kelas selamanya

Ambil Promo
flash sale
hamburger-menu

Tips All

Meningkatkan skills menjadi 1% lebih baik

Reset
Kelas Lowongan Freelancer Front-End Vue JS Developer 2023 di BuildWithAngga

Lowongan Freelancer Front-End Vue JS Developer 2023

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.

Kelas Cara Install dan Menggunakan Package Loading Animation Widget  Pada Project Flutter Development di BuildWithAngga

Cara Install dan Menggunakan Package Loading Animation Widget Pada Project Flutter Development

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!

Kelas Flutter Tutorial : Cara menghilangkan shadow pada Elevated Button di BuildWithAngga

Flutter Tutorial : Cara menghilangkan shadow pada Elevated Button

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!

Kelas Cara Install dan Menggunakan Package Email Validator Pada Project Flutter Development di BuildWithAngga

Cara Install dan Menggunakan Package Email Validator Pada Project Flutter Development

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!

Kelas Lowongan Kerja Customer Service (Remote & Bandung Only) di BuildWithAngga

Lowongan Kerja Customer Service (Remote & Bandung Only)

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.

Kelas Cara Install dan Menggunakan Package Shimmer Pada Projek Flutter Development di BuildWithAngga

Cara Install dan Menggunakan Package Shimmer Pada Projek Flutter Development

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!

Kelas Cara Install dan Menggunakan Package Spinner Pada Projek Flutter Development di BuildWithAngga

Cara Install dan Menggunakan Package Spinner Pada Projek Flutter Development

Hello people spirit of learning! Dalam flutter terdapat banyak package yang dapat kita gunakan, salah satunya adalah spinner. Fungsi dari spinner ini adalah membuat animasi scroll sederhana yang menggilir sejumlah widget berukuran tetap. 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 spinner Langkah kedua adalah ketik keyword spinner. Lalu pilih yang ke 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. Implementasi Package import 'package:flutter/material.dart'; import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart'; void main(List args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _timePickertestState(); } class _timePickertestState extends State { DateTime _dateTime = DateTime.now(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( appBar: AppBar(title: Text('Tutorial Spinner')), body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Container( child: Center( child: Text( _dateTime.hour.toString().padLeft(2, '0') + ' : ' + _dateTime.minute.toString().padLeft(2, '0') + ' : ' + _dateTime.second.toString().padLeft(2, '0'), style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500), ), ), ) ]), ), ), ); } } Disini kita mencoba implementasi packagenya ya. Disini kita gunakan statefulWidget karena datanya dinamis atau bisa berubah-ubah nantinya. Lalu kita bikin variable _datetime yang kita isi dengan Datetime.now() yang fungsi dari variable ini nantinya dijadikan waktu Realtime. Lalu kita tampilkan jam nya mulai dari Jam ,Menit, dan detiknya kita tampilkan. Lalu kita kasih jarak sedikit saja, dan tambahkan ‘0’ Agar jika angka jamnya bukan 2 digit, Maka depannya akan ditambahkan ‘0’. Widget hourMinuteSecond() { return new TimePickerSpinner( isShowSeconds: true, onTimeChange: (time) { setState(() { _dateTime = time; }); }, ); } Sesudah itu, Kita membuat widget Spinnernya yaitu Spinner untuk mengatur Jam, menit, dan waktu. Disini kita bisa menggunakan package dengan mengembalikan nilai packagenya yaitu TimePickerSpinner. Dalam TimePickerSPinner terdapat banyak properti yang bisa kita gunakan. Namun disini kita hanya membuat Spinner waktu sederhana saja. Kita hanya memakai 2 saja yaitu isShowSeconds yang fungsinya menampilkan detik waktu, dan onTimeChange fungsinya terjadi perubahan data waktu jika kita spin. Pada onTimeChange, kita isi parameter Time Dalamnya kita isi dengan setState, fungsi dari setState adalah untuk memberitahu framework bahwa ada object yang berubah pada State, kemudian akan melakukan build ulang pada Widget tersebut. Dalam setState kita isi dengan variable _datetime = time. Nanti saat kita melakukan spin, Maka waktu yang ditampilkan juga ikut berubah sesuai spin yang kita atur. Untuk hasil akhirnya, akan seperti ini. import 'package:flutter/material.dart'; import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart'; void main(List args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _timePickertestState(); } class _timePickertestState extends State { DateTime _dateTime = DateTime.now(); Widget hourMinuteSecond() { return new TimePickerSpinner( isShowSeconds: true, onTimeChange: (time) { setState(() { _dateTime = time; }); }, ); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( appBar: AppBar(title: Text('Tutorial Spinner')), body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ hourMinuteSecond(), Center( child: Text( _dateTime.hour.toString().padLeft(2) + ' : ' + _dateTime.minute.toString().padLeft(2, '0') + ' : ' + _dateTime.second.toString().padLeft(2, '0'), style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500), ), ), ]), ), ), ); } } Terima kasih dan semoga bermanfaat!

Kelas Cara Menggunakan Widget Stack pada Flutter di BuildWithAngga

Cara Menggunakan Widget Stack pada Flutter

Hello people spirit of learning! Pada aplikasi yang sering kita buat mungkin kita sering melihat gambar yang dilapisi oleh button, kata-kata, dan lain sebagainya. Nah itu kita bisa lakukan dengan menggunakan widget Stack. Seperti namanya, Stack atau tumpukkan. Berarti bisa kita artikan widget yang berfungsi untuk menumpukkan widget-widget atau melapisi widget-widget. Disini kita ingin melakukan cara menggunakan widget stack secara sederhana. Panggil Widget Stack return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ ]), ), ); Pertama, kita panggil widget stack pastinya pada body scaffold. Widget stack ini merupakan multiple children yang artinya pada properti children kita bisa isi lebih dari 1 widget. Kita coba dengan isi 1 container return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ Container( color: Colors.blue, ) ]), ), ); Kedua, kita isi dengan container. Disini containernya tidak usah diatur lebar dan tingginya, kita biarkan saja. Anggap container ini sebagai wallpaper. Kita Isi dengan Container Lagi return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ Container( color: Colors.blue, ), Container( width: 300, height: 300, color: Colors.red, ) ]), ), ); Langkah ketiga, kita isi lagi dengan container yang lebar dan tingginya diatur. Bisa dilihat pada gambar container pertama kita tumpuk dengan container ke 2 yang berwarna merah. Tidak harus diisi container ya bisa diisi dengan widget lainnya. Tambahkan widget dan buat rata tengah return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(alignment: Alignment.center, children: [ Container( color: Colors.blue, ), Container( width: 300, height: 300, color: Colors.red, ), Container( width: 200, height: 200, color: Colors.green, ), ]), ), ); Langkah terakhir tinggal isi dengan widget apapun. Pada widget stack terdapat banyak properti. Disini kita gunakan aligment yang fungsinya menempatkan baris pada isi widget stack. Disini kita buat rata tengah pada widget stack. Maka hasilnya seperti gambar diatas. Kita baru saja menggunakan widget stack secara sederhana, yang dimana berfungsi untuk menaruh widget secara berlapis. Untuk lebih lengkapnya bisa membaca dokumentasi resmi flutter disini. Terima kasih dan semoga bermanfaat!

Kelas Cara Custom Border Radius Pada Button Flutter di BuildWithAngga

Cara Custom Border Radius Pada Button Flutter

Hello people spirit of learning! Pada aplikasi kita pasti sering menemukan tombol yang beragam-ragam. Mulai dari warna,bentuk, lengkungan tombol, dan lain sebagainya. Disini saya akan membuat custom border radius atau custom lengkungan button pada flutter. Langsung saja ke tutorialnya. Membuat ukuran button Container( width: 130, height: 45, ) Langkah pertama, kita atur ukuran pada buttonnya dengan menggunakan widget Container. Width untuk mengatur panjangnya dan Height untuk mengatur lebarnya. Gunakan Widget-widget Button Container( width: 130, height: 45, child: ElevatedButton(onPressed: () {}, child: Text('Confirm')), ) Widget button ada 3 macam, Yaitu TextButton, ElevatedButton, dan OutlineButton. Disini kita menggunakan ElevatedButton. Maka tampilannya akan seperti gambar diatas. Styling Border Radius Container( width: 130, height: 45, child: ElevatedButton( style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(17))), onPressed: () {}, child: Text('Confirm')), ) Untuk melakukan styling, gunakan properti style lalu isi dengan ElevatedButton.stylefrom. Didalamnya diisi dengan properti shape. Lalu shape diisi dengan widget RoundedRectangleBorder. Lalu diisi dengan properti BorderRadius yang fungsinya untuk mengatur lengkungan button. disini kita menggunakan getter circular (bundaran), yang fungsinya membuat radius perbatasan semua radius. Barusan kita sudah bisa membuat custom border radius pada flutter, yang fungsinya untuk mengatur tiap lengkungan sudut pada tombol atau button. Terima kasih dan semoga bermanfaat!

Kelas 5 Hal Penting Perlu Dipelajari Sebelum Lanjut Belajar UI Design di BuildWithAngga

5 Hal Penting Perlu Dipelajari Sebelum Lanjut Belajar UI Design

UI Design adalah sebuah tampilan yang sering kita lihat pada aplikasi mobile misalnya aplikasi gojek, ovo, dana, tokopedia, netflix, dan aplikasi lainnya. Tugas kita sebagai UI Designer bekerja sama dengan developer dan UX designer untuk merancang aplikasi tersebut menjadi lebih menarik ketika digunakan oleh pengguna. Sebelum kita berkarir sebagai UI designer maka ada beberapa hal utama yang perlu kita pelajari sehingga hasil design yang kita buat nanti juga memberikan kualitas yang tinggi, terlebih lagi apabila kamu saat ini belum punya background design. Mulai Dari Belajar Graphic Designer Saya mengawali karir sebagai Graphic Designer untuk memperkuat beberapa komponen design seperti color, grid, layout, typography, dan lainnya. Maka dari itu kamu juga bisa memulainya dengan mempelajari komponen-komponen pada graphic design untuk membuat sebuah design guideline pada perusahaan tempat kamu bekerja nantinya. Mempelajari Color Combination Color memiliki peran penting pada sebuah design aplikasi, setiap aplikasi memiliki tujuan dan vision yang berbeda-beda maka dari itu mereka menggunakan warna yang berbeda, misalnya aplikasi keuangan menggunakan warna biru yang memiliki arti kepercayaan dengan loyalitas yang sangat tinggi. Mulai Belajar Typography Pengguna website atau aplikasi seperti diri kita, orang tua, dan saudara tentunya membaca beberapa informasi yang disajikan pada aplikasi tersebut, misalnya ingin membeli makanan martabak maka kita akan cari item yang berjudul martabak pada app tersebut. Oleh karena itu kita perlu mempelajari typography sebagai pondasi utama UI designer sehingga kita bisa memilih jenis font yang sesuai dengan tema aplikasi yang kita design ke depannya, beda tema maka beda jenis font. Belajar Tata Letak (Layout) Setelah kita mempelajari color dan typography maka kita bisa masuk kepada layout yang di mana kita akan belajar menata judul, harga, foto produk, dan lainnya pada posisi yang benar. Kita juga bisa mulai mengenal istilah-istilah UX sehingga melakukan proses layouting menjadi lebih mudah untuk menciptakan aplikasi dan website yang menarik dan mudah digunakan. Membuat MoodBoard Design Kita butuh sebuah moodboard yang berisi inspirasi-inspirasi design yang akan kita gunakan sebagai benchmark dari design aplikasi kita nantinya, oleh karena itu kita perlu belajar memilih referensi yang tepat, tidak harus banyak tidak juga sedikit, intinya cukup dari segi warna, illustration, layout, dan interaction (animation). Kita bisa menggunakan beberapa software design gratis seperti Figma, Miro, Dribbble, Adobe XD, dan software lainnya untuk mulai pembuatan moodboard dan melakukan pembelajaran utama kita sebagai UI designer.