Tips All

Digital marketing adalah ilmu penting yang perlu kita kuasai dalam membantu perusahaan menjangkau lebih banyak calon customer untuk mempromosikan jasa atau produk yang mereka jual secara online. Pada tutorial kali ini kita akan mengenal ilmu digital marketing dan apa saja manfaat utamanya sehingga persiapan karir kita sebagai seorang digital marketer menjadi lebih matang lagi. Semoga bermanfaat dan selamat belajar.

Hello, Spirit of Learning! 📖 Pada artikel kali ini kita akan membahas tentang Array Prototype dalam JavaScript! Apakah kamu pernah bertanya-tanya bagaimana cara JavaScript mengelola data dalam bentuk array? Atau mungkin kamu ingin memanfaatkan fitur canggih yang disediakan oleh Javascript untuk memanipulasi array dengan lebih efisien? JavaScript, sebagai bahasa pemrograman yang sangat populer dalam pengembangan web, menyediakan berbagai cara untuk mengelola dan memanipulasi array. Salah satu fitur yang paling kuat dan sering digunakan dalam JavaScript adalah yang disebut Array Prototype. Jadi, apa sebenarnya Array Prototype itu? Mari kita belajar bersama-sama pada artikel ini. Apa itu Array Prototype? Pikirkan oleh kamu bahwa Array Prototype itu sebagai koleksi alat canggih yang telah disediakan oleh JavaScript untuk membantu kamu mengelola daftar item dalam kode. Jadi, apa sebenarnya yang dimaksud dengan Array Prototype? Bayangkan kamu memiliki sebuah kotak besar, yang kita sebut Array. Di dalam kotak ini, kamu dapat meletakkan banyak barang, seperti kata-kata, angka, atau bahkan objek kompleks seperti buku, mobil, dan makanan. Nah, Array Prototype adalah serangkaian intruksi atau method yang terdapat di dalam kotak tersebut. Contoh ilustrasi sebuah array yang menyimpan beberapa barang: Lalu apa itu method? Method ini seperti peralatan yang dapat kamu gunakan untuk mengatur, memanipulasi, atau menemukan item tertentu di dalam kotak. Misalnya, kamu ingin menggunakan metode untuk menambah barang baru ke dalam kotak. Contoh ilustrasi jika kamu menggunakan method untuk menambah barang: Nah, yang menarik tentang Array Prototype adalah bahwa kamu tidak perlu menciptakan semua alat-alat secara manual. JavaScript sudah mempersiapkan beberapa method yang siap digunakan begitu kamu membuat sebuah array. Kamu bisa memanggil beberapa method ini secara langsung pada array kamu dan menggunakan fungsinya sesuai kebutuhan. Macam-Macam Metode dalam Array Prototype Pada dasarnya, dalam pemrograman Javascipt, Array Prototype adalah kumpulan method bawaan yang disediakan oleh JavaScript untuk mempermudah manipulasi dan pengelolaan array, yang pada dasarnya adalah kumpulan data. Mari kita belajar beberapa metode penting yang disediakan oleh Array Prototype dan lihat bagaimana setiap method bisa membantu kita dalam memanipulasi dan mengakses data dalam array. 1. Manipulasi Array: push() : Method ini digunakan untuk menambah satu atau lebih elemen ke akhir array.pop() : Menghapus elemen terakhir dari array dan mengembalikan elemen itu.shift() : Menghapus elemen pertama dari array dan menggeser semua elemen lain ke index yang lebih rendah.unshift() : Menambahkan satu atau lebih elemen ke awal array dan menggeser elemen lain untuk membuat ruang. 2. Akses dan Pencarian indexOf() : Mengembalikan index pertama dari elemen yang cocok dalam array.lastIndexOf() : Mengembalikan index terakhir dari elemen yang cocok dalam array.includes() : Memeriksa apakah array berisi elemen tertentu atau tidak.find() : Mengembalikan nilai elemen pertama dalam array yang memenuhi kondisi yang ditentukan.findIndex() : Mengembalikan index elemen pertama dalam array yang memenuhi kondisi yang ditentukan. 3. Transformasi dan Iterasi map() : Membuat array baru dengan hasil panggilan fungsi untuk setiap elemen dalam array.filter() : Membuat array baru dengan semua elemen yang lulus pengujian yang disediakanforEach() : Menjalankan fungsi yang diberikan sekali untuk setiap elemen array.reduce() : Menerapkan fungsi terhadap akumulator dan setiap nilai dalam array dari kiri ke kanan untuk mengurangi menjadi satu nilai.every() : Memeriksa apakah setidaknya semua elemen dalam array lulus pengujian yang diberikan.some() : Memeriksa apakah setidaknya satu elemen dalam array lulus pengujian yang diberikan. Implementasi Metode Array Prototype Yup, setelah kita mempelajari berbagai method yang disediakan oleh Array Prototype, langkah selanjutnya adalah memahami bagaimana setiap method ini bekerja dalam JavaScript. Mari kita coba beberapa method utama beserta contoh implementasinya: 1. push() Method push() digunakan untuk menambahkan satu atau lebih elemen ke akhir array dan mengembalikan panjang array yang baru. Let's write code guys let fruits = ['apel', 'pisang', 'anggur']; fruits.push('jeruk'); console.log(fruits); // Output: ['apel', 'pisang', 'anggur', 'jeruk'] Pada kode di atas awalnya kita hanya memiliki 3 data fruits di dalam array. Namun, setelah kita gunakan method push() dan memasukan nilai nya maka output dari array fruits menjadi 4 saat kita console. 2. pop() Method pop() digunakan untuk menghapus elemen terakhir dari array dan mengembalikan elemen yang dihapus. Let's write code guys let fruits = ['apel', 'pisang', 'anggur']; let removedFruit = fruits.pop(); console.log(removedFruit); // Output: 'anggur' console.log(fruits); // Output: ['apel', 'pisang'] Pada kode di atas awalnya kita memiliki 3 data fruits di dalam array. Namun, setelah kita gunakan method pop() pada array fruits maka elemen terakhir dari array akan dihapus. 3. map() Method map() digunakan untuk membuat array baru dengan hasil pemanggilan fungsi pada setiap elemen dalam array yang dipanggil. Let's write code guys let numbers = [1, 2, 3, 4, 5]; let doubledNumbers = numbers.map(function(num) { return num * 2; }); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10] Pada kode di atas kita telah memiliki array numbers yang berisi angka-angka 1 hingga 5. Kemudian kita, menggunakan method map() untuk melakukan operasi pada setiap elemen dalam array numbers. Kita menggandakan setiap elemen dengan mengalikannya dengan 2 return num * 2 . Dengan begitu, setiap angka dalam array numbers akan dijadikan dua kali lipat dari nilai hasilnya. Setelah proses mapping selesai, kita mendapatkan array baru yang berisi angka-angka yang sudah di-kalikan. Kemudian, kita mencetak array baru dengan menggunakan console.log(doubledNumbers) . 4. filter() Method filter() digunakan untuk membuat array baru dengan semua elemen yang lulus uji yang diberikan fungsi filter yang disediakan. Let's write code guys let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let evenNumbers = numbers.filter(function(num) { return num % 2 === 0; }); console.log(evenNumbers); // Output: [2, 4, 6, 8, 10] Pada kode di atas, kita memiliki array numbers yang berisi daftar angka dari 1 hingga 10. Kemudian, kita menggunakan method filter() untuk menyaring hanya angka-angka genap dari array tersebut. Kita memeriksa apakah suatu angka habis dibagi dua (dalam arti lain, apakah itu angka genap). Jika iya, maka angka tersebut akan dimasukan dalam array hasil atau baru. Setelah itu, kita mencetak array baru berisi hanya angka-angka genap menggunakan console.log(evenNumbers) . 5. forEach() Method forEach() digunakan untuk menjalankan fungsi yang diberikan sekali untuk setiap elemen dalam array. Let's write code guys let colors = ['merah', 'hijau', 'biru']; colors.forEach(function(color) { console.log(color); }); // Output: // 'merah' // 'hijau' // 'biru' Pada kode di atas, kita memiliki sebuah array colors yang berisi daftar nama-nama warna. Kemudian, kita menggunakan method forEach() untuk melakukan iterasi atau perulangan melalu setiap elemen dalam array tersebut. Kita menggunakan parameter color untuk mewakili setiap elemen dalam array colors. Di dalam fungsi ini, kita hanya mencetak setiap elemen menggunakan console.log(fruit) . Setiap kali fungsi forEach() dijalankan, ia akan mencetak satu elemen dari array colors. Setelah selesai iterasi, kita mendapatkan output yang menampilkan setiap elemen array secara terpisah. Metode-metode ini hanya merupakan sebagian kecil dari apa yang disediakan oleh Array Prototype dalam JavaScript. Dengan memahami dan menggunakan metode-metode ini dengan benar, Kamu dapat mengoptimalkan kinerja dan kegunaaan array dalam aplikasi JavaScript kamu. Contoh Penerapan Praktis Mari kita bayangkan kita membangun sebuah situs web e-commerce sederhana untuk toko pakaian. Di sini, kita dapat menggunakan Array Prototype untuk mengelola daftar produk, keranjang belanja, dan riwayat transaksi. 1. Manajemen Daftar Produk Kita dapat menggunakan metode push() untuk menambahkan produk baru ke dalam daftar.Metode filter() bisa digunakan untuk menyaring produk berdasarkan kriteria tertentu seperti kategori, merk, atau harga.Misalnya: const products = []; products.push({ id: 1, name: 'Kemeja', price: 25 }); products.push({ id: 2, name: 'Celana Jeans', price: 35 }); const filteredProducts = products.filter(product => product.price > 30); //Perintah ini akan menyaring product yang hanya memiliki price lebih dari 30 2. Manajemen Keranjang Belanja Kita dapat menggunakan metode push() dan splice() untuk menambah atau menghapus item dari keranjang belanja.Metode reduce() berguna untuk mengitung total harga belanjaanMisalnya: const cart = []; cart.push({ id: 1, name: 'Kemeja', price: 25 }); cart.push({ id: 2, name: 'Celana Jeans', price: 35 }); const totalPrice = cart.reduce((acc, item) => acc + item.price, 0); 3. Manajemen Riwayat Transaksi Ketika kita berhasil, kita bisa menggunakan metode push() untuk menambahkan detail transaksi ke dalam riwayat.Metode slice() atau splice() bisa digunakan untuk mengelola riwayat transaksi yang terlalu panjang.Misalnya: const transactionHistory = []; const successfulTransaction = { id: 1, items: cart, total: totalPrice }; transactionHistory.push(successfulTransaction); // Menghapus transaksi terlama jika sudah melebihi batas if (transactionHistory.length > 10) { transactionHistory.splice(0, 1); } Dengan menggunakan Array Prototype secara selektif, kita dapat membangun dan mengelola fungsionalitas situs web dengan lebih efisien dan mudah di-maintenance. Ini hanya beberapa contoh bagaimana Array Prototype diterapkan dalam pengembangan aplikasi web. Kesimpulan Yup, dalam artikel ini, kita telah belajar konsep Array Prototype dalam JavaScript. Array Prototype adalah kumpulan method bawaan yang memungkinkan kita untuk memanipulasi, mengakses, dan mengubah data dalam array dengan cara yang efisien dan efektif. So, jangan ragu untuk menggali lebih dalam dan mencoba-coba berbagai metode yang telah kita bahas. Praktikkan pengetahuan yang kamu peroleh dalam artikel ini dalam proyek-proyek nyata, dan kamu akan melihat bagaimana Array Prototype dapat menjadi alat yang sangat berguna dalam pengembangan aplikasi JavaScript kamu. Buat kamu yang ingin mempelajari web development lebih lanjut, di BuildWithAngga telah menyediakan beberapa kelas gratis JavaScript dari dasar hingga kelas yang berupa project based. Salah satunya, yaitu kelas terbaru Vanilla JavaScript OOP & LocalStorage: Web Task Management. So, ayo kita upgrade skill kita sampai menjadi expert bersama BuildWithAngga 🔥 See you guys! 👋

JavaScript, sebagai bahasa pemrograman yang sering digunakan, memiliki fitur yang sangat penting, yaitu function. Function adalah fasilitas di setiap pemrograman untuk membuat suatu perintah yang fungsinya dapat kita gunakan berulang kali tanpa batas. Jadi, bayangkan jika kita memiliki langkah-langkah atau resep tertentu dalam program, kita dapat menyimpannya di dalam function dan menggunakannya kembali tanpa harus menulis ulang setiap kali. Nah, di artikel kali ini, kita akan membahas secara sederhana apa itu function di JavaScript. Mulai dari cara membuatnya, cara memanggilnya, hingga cara menggunakan function untuk membuat program sederhana. Jika kamu ingin belajar lebih banyak kelas-kelas pemrograman JavaScript dan pengembangan web, kamu bisa mengikuti kelas gratis JavaScript di BuildWithAngga yang dapat membantu kamu menguasai keterampilan pemrograman. Oke, let’s learn together! 🤩 Apa Itu Function JavaScript? Fungsi/Function dalam JavaScript adalah kumpulan pernyataan yang dirancang untuk melakukan tugas tertentu atau menghitung nilai tertentu. Dengan menggunakan function, kita dapat mengelompokkan code menjadi bagian-bagian yang dapat digunakan ulang tanpa batas. Contoh sederhana, bayangkan kita memiliki tugas untuk menghitung luas persegi panjang. Function ini dapat membantu kita untuk merapihkan dan memisahkan tugas ini. Contoh pemanggilan function digunakan berulang kali: // Definisikan function dengan nama sapaan function sapaan(nama) { console.log("Halo, " + nama + "!"); } // Panggil function dengan memberikan argumen berupa nama sapaan("Alif"); sapaan("Angga"); sapaan("Indonesia Cerdas"); Pada contoh code di atas, kita mendefinisikan function sapaan yang menerima satu parameter (nama) dan menampilkan ke konsol. Kemudian, kita dapat memanggil function ini tiga kali dengan memberikan argumen berbeda setiap kali dipanggil. Hasil outputnya akan seperti ini: Hasil output dari Function sapaan menggunakan compiler https://playcode.io/javascript Dengan cara ini, kita dapat membuat function sekali dan dapat menggunakan kembali sesuai kebutuhan, hal ini dapat menghemat usaha dan memudahkan pemeliharaan code. Apasih Kegunaan Function di JavaScript? Modularitas: Function dapat memungkinkan kita untuk memecah program menjadi bagian-bagian yang lebih kecil dan mudah dikelola, yang disebut modularitas. Ini membuat code lebih terstruktur dan mudah dimengerti.Pengulangan Tugas: Function memungkinkan kita untuk menjalankan sekumpulan pernyataan kapan pun dibutuhkan, menghindari penulisan ulang code yang sama.Parameter dan Argumen: Function dapat menerima input dalam bentuk parameter, yang membuatnya dapat diterapkan dalam konteks yang berbeda dengan nilai yang berbeda.Return Value: Function dapat mengembalikan nilai setelah menjalankan operasinya. Hal ini memungkinkan hasil dari function digunakan di bagian-bagian lain dari program. Image by https://javascript.plainenglish.io/ Jenis-jenis Function di JavaScript 1. Function Declaration: Output: alert() dialog Function Declaration Dikenal juga sebagai function statements adalah function yang telah dideklarasikan sebelumnya dan dieksekusi jika function tersebut dipanggil (call). Function declarations harus dimulai dengan kata function. Contoh code: function salam() { alert("Halo, keep learning!"); } salam() // Output: Alert dialog "Halo, keep learning!" 2. Function Expression: Function yang disimpan ke dalam suatu variable. Setelah disimpan, maka variabel tersebut dapat digunakan sebagai function. Function yang disimpan di dalam function expression dapat diberi nama atau bisa disebut Named Function Expressions (NFEs) ataupun tidak diberi nama sama sekali (anonymous). Contoh code: // Versi anonymous function expression const tambah = function(a, b) { return a + b; }; // Memanggil Function Expression const hasilTambah = tambah(5, 3); console.log(hasilTambah); // Output: 8 3. Arrow Function: Adalah sintaks JavaScript modern (ES6), Dengan arrow function kita bisa menulis function tanpa harus menggunakan kata kunci “function”, “return”, dan kurung kurawal. Dengan kata lain, membuatnya menjadi lebih singkat dan ringkas. Contoh code: // Versi Regular Function function tambah(a, b) { return a + b; } // Memanggil regular function let hasilTambahRegular = tambah(3, 5); console.log(hasilTambahRegular); // Output: 8 // Versi Arrow function const tambahArrow = (a, b) => a + b; // Memanggil arrow function let hasilTambahArrow = tambahArrow(3, 5); console.log(hasilTambahArrow); // Output: 8 Bisa dilihat bukan? perbedaan antara Regular Function dan Arrow Function. 4. Recursive Function: Function yang mengeksekusi diri sendiri, nah jika tidak ada kondisi khusus, maka bisa membuat eksekusi kode terus berulang dan tak pernah stop. Berikut contoh code case implementasi dari recursive function untuk menghitung faktorial: // Recursive function untuk menghitung faktorial function faktorial(n) { if (n === 0 || n === 1) { return 1; } else { return n * faktorial(n - 1); } } // Memanggil recursive function let hasilFaktorial = faktorial(4); console.log(hasilFaktorial); // Output: 24 Kesimpulan Pembahasan artikel kali ini kamu telah mempelajari berbagai cara membuat function, apa itu function dan juga jenis-jenis function beserta contoh sederhananya. Kamu juga bisa mempelajarinya lebih lanjut dengan mengikuti kelas gratis JavaScript di BuildWithAngga, disana selain bisa meningkatkan skill programming. Yuk belajar bersama mentor BuildWithAngga yang berpengalaman dan kamu juga dapat sertifikat juga loh setiap menyelesaikan kelasnya. Dan yang pasti di BuildWithAngga akses materi selamanya 🤯. Semoga artikel ini bermanfaat bagi kamu, terima kasih sudah membaca and keep learning! ✨

Dalam era digital yang terus berkembang, kebutuhan konten visual yang menarik semakin penting, terutama dalam proyek kreatif dan bisnis, contohnya seperti proyek UI UX Design. Kita seringkali membutuhkan elemen visual yang menarik untuk meningkatkan pengalaman pengguna. Di sinilah kehadiran website download illustration gratis menjadi penyelamat. Dengan adanya website ini akan memudahkan kita untuk menambahkan elemen visual yang menarik ke proyek kita tanpa harus mengeluarkan biaya. Saya telah merangkum 10 situs web terbaik yang menawarkan ilustrasi gratis untuk kebutuhan project kamu! Mari kita mulai!🎨 1. Ouch! Ouch! adalah produk yang dikembangkan oleh tim Icons8 yang menawarkan berbagai macam ilustrasi mulai dari 3D, Cartoon, Doodle, Flat, Realistic, dan masih banyak lagi. Dengan pilihan variasi yang banyak ini, kamu dapat dengan mudah menemukan ilustrasi yang cocok dengan kebutuhan desain kamu. Selain itu, platform ini juga memungkinkan kamu untuk menyesuaikan warna ilustrasi sesuai dengan tema desain yang kamu buat, sehingga kamu dapat dengan mudah untuk mengimplementasikan ke dalam project yang kamu buat. 2. Freepik Freepik adalah platform penyedia berbagai jenis grafis dan ilustrasi yang dapat kamu gunakan untuk memenuhi kebutuhan desain kamu. Kamu bisa memilih beragam gaya dalam mencari ilustrasi yang kamu inginkan seperti ilustrasi 3D, flat, dan masih banyak lagi. Selain itu, platform ini juga menawarkan berbagai jenis konten visual lainnya, mulai dari vectors, icons, video, hingga file PSD. Dengan Freepik, kamu memiliki akses yang luas untuk mencari dan menemukan konten visual yang sesuai dengan kebutuhan desainmu. Yang lebih seru lagi, Freepik baru saja merilis fitur terbaru bernama AI Image Generator. Dengan fitur ini, kamu bisa bikin gambar cuma dengan menulis teks saja, tanpa perlu repot-repot membuat desain yang rumit. 3. DrawKit DrawKit adalah platform yang menyediakan koleksi ilustrasi yang dapat kamu gunakan secara gratis. Mereka menawarkan berbagai gaya dan tema ilustrasi. Ilustrasi yang disediakan oleh DrawKit dapat kamu unduh dalam format PNG dan SVG. Dengan format PNG, kamu dapat menggunakan gambar dengan latar belakang transparan, sedangkan format SVG memungkinkan kamu untuk mengubah ukuran ilustrasi tanpa mengurangi kualitas gambar. 4. Humaaans Humaaans adalah platform yang unik karena menyediakan ilustrasi manusia yang bisa kamu kustomisasi. Platform ini mempunyai tagline yang menarik yaitu Mix-&-match illustrations of people with a design library. Dengan menggunakan Humaaans, kamu dapat menyesuaikan pose, pakaian, warna, dan elemen lainnya dari ilustrasi manusia sesuai dengan kebutuhan desain kamu. Ini sangat berguna untuk menciptakan gambar yang beragam dan menyesuaikan dengan tema atau pesan yang ingin kamu sampaikan. Selain itu, semua ilustrasi di Humaaans tersedia secara gratis😍. 5. Pixabay Pixabay adalah salah satu destinasi untuk mencari konten visual yang bebas hak cipta. Di sini, kamu dapat menemukan beragam gambar, vektor, dan ilustrasi yang siap pakai untuk proyek kamu. Fitur pencarian yang canggih akan memudahkan kamu untuk menemukan konten yang sesuai dengan kebutuhan desain yang kamu buat. Selain itu, antarmuka pengguna yang intuitif memungkinkan kamu untuk dengan cepat menyesuaikan ukuran dan resolusi gambar sesuai keinginan. Dengan Pixabay, kamu akan lebih mudah menemukan gambar yang cocok untuk proyek desain kamu. 6.Ira Design Di IRA Design, kamu bisa merancang ilustrasi keren dengan mudah menggunakan berbagai komponen yang telah disiapkan. Tiap komponen memiliki lima pilihan gaya gradien yang berbeda, sehingga kamu bisa menghasilkan ilustrasi yang sesuai dengan selera dan kebutuhan kamu. Lebih dari itu, setelah selesai, kamu bisa langsung mengunduh hasil karya kamu dalam format SVG atau PNG. Dengan fitur-fitur yang lengkap ini, membuat ilustrasi yang menarik dan sesuai dengan keinginanmu jadi lebih menyenangkan! 7. ManyPixels Di ManyPixels, kamu bisa menemukan beragam sumber daya visual yang siap pakai untuk proyek desain kamu. Di sini, kamu bisa memilih ilustrasi dari berbagai kategori dan menyesuaikan warna default sesuai keinginan kamu. Ada sangat banyak ilustrasi yang bisa kamu unduh secara gratis, sesuai dengan kebutuhan kamu. ManyPixels juga memungkinkan kamu untuk mengunduh file SVG yang dapat diedit sesuai keinginan. Kamu bebas menggunakan ilustrasi-ilustrasi yang ada di website ini baik untuk keperluan pribadi maupun komersial. Dengan fitur-fitur yang lengkap ini, ManyPixels menjadi pilihan yang tepat untuk menemukan dan menggunakan ilustrasi untuk proyek kamu. 8. Interface Interface adalah platform yang menyediakan koleksi ilustrasi dan aset desain yang menarik dan dapat digunakan secara gratis. Platform ini menawarkan berbagai macam ilustrasi yang unik dan berwarna-warni yang dapat membantu kamu dalam meningkatkan estetika proyek desain kamu. Ilustrasi yang disediakan oleh Interface dapat diunduh dalam berbagai format yang berbeda, sehingga kamu dapat lebih flexible dalam menggunakan ilustrasi tersebut. 9. unDraw unDraw adalah platform yang menawarkan berbagai ilustrasi vektor yang dapat kamu gunakan secara gratis tanpa harus memberi atribusi. Koleksi ilustrasi yang tersedia sangat beragam dan cocok untuk berbagai kebutuhan desain kamu, seperti desain web, aplikasi, atau presentasi. Salah satu fitur keren dari unDraw adalah kamu bisa mengubah warna ilustrasi sesuai dengan branding proyek kamu langsung dari situs webnya. Dengan fitur ini, kamu bisa mendapatkan ilustrasi yang sesuai dengan identitas merekmu dengan mudah dan cepat🤩. 10. ShaynaKit shaynaKit menawarkan berbagai jenis desain menarik, mulai dari desain situs web, ilustrasi, desain untuk perangkat mobile, hingga ikon-ikon yang menarik. Hal yang menarik, shaynaKit juga menyediakan ilustrasi gratis untuk proyek desain kamu🤩. Kamu bisa men-download ilustrasi tersebut secara gratis, namun terdapat batasan bahwa kamu hanya dapat men-download dua produk dalam sehari. shaynaKit dapat menjadi pilihan favorite para desainer dalam mencari inspirasi dan konten visual yang menarik! 🎨✨ Penutup 🎉 Dari 10 situs yang saya bagikan, apakah kamu sudah pernah mencobanya? Yuk manfaatin situs-situs itu buat dapetin inspirasi buat karya-karyamu. Jangan sia-siain kesempatan buat upgrade skill design kamu dengan ikutan kelas di BuildWithAngga🤩. Semoga artikel ini bisa berguna dan membantu kamu buat makin kreatif ya! ✨. See you di kelas 😍

Hello, fellow learners! 📚✨ Siapa di sini yang baru terjun dan penasaran dengan dunia front-end development? Masih bingung ingin memulai dari mana? Tenang, kamu berada di tempat yang tepat! Artikel ini memberikan 10 rekomendasi kelas terbaik dan tentunya GRATIS! untuk kalian yang mau membangun dasar pengetahuan front-end yang mendalam. Mulai dari dasar HTML dan CSS, kerangka kerja JavaScript hingga penggunaan framework yang bisa bikin website kalian makin keren. So, let’s dive in! 1. HTML5 Dasar HTML5 adalah bahasa markup yang digunakan untuk membangun suatu tampilan pada halaman web. HTML5 ini berperan sebagai pondasi utama ketika sebuah situs web sedang dalam tahap pengembangan, tanpa HTML maka website yang kita bangun akan terlihat tidak terstruktur. HTML5 menyediakan tag-tag khusus seperti tag header, tag body, dan tag footer yang memungkinkan pengembang web menentukan dan menyusun struktur dasar dari sebuah halaman web. Dengan menggunakan tag-tag ini, kita dapat memberikan tata letak yang terorganisir dan mempermudah pemahaman dalam membuat struktur dokumen web. So, buat kalian yang masih bingung mau mulai belajar darimana, langsung aja gabung di Kelas HTML5 dasar. Di kelas ini kalian akan dibimbing mulai dari: persiapan tools yang digunakan untuk belajar HTML5.pembuatan dokumen HTML pertama.pengenalan tag-tag HTML, seperti tag untuk membuat heading, paragraph, list, hyperlink, images, dsb.belajar membuat section agar website terlihat lebih rapi.hingga belajar menambahkan sebuah table pada halaman web. Kelas ini bisa kalian miliki secara gratis dan akses belajar seumur hidup loh! Kalian juga bisa upgrade ke kelas Starter Pro untuk mendapatkan materi tambahan dan benefits lainnya! 2. CSS Website Design Sebuah website yang baik ialah website yang mampu memberikan kesan User Experience yang hebat untuk pengguna. Kenyamanan pengguna adalah kunci utama! karena ketika pengguna merasa nyaman, keuntungan yang didapatkan pun menjadi besar. Membangun sebuah website juga tidak dapat dilakukan sembarangan; harus didasarkan pada visi dan misi yang jelas. Dengan menggunakan Cascade Style Sheet (CSS) kini kita dapat meningkatkan estetika website agar lebih eye-catching. Tujuan utamanya adalah agar pengguna kita lebih nyaman ketika menggunakan website kita. Warna dan jenis tipografi akan menentukan masing-masing dari tujuan sebuah website dibuat. Sebagai seorang web designer, penguasaan CSS menjadi suatu kewajiban. Ini tidak hanya untuk mempercantik tampilan website, tetapi juga memberikan efek animasi agar terlihat lebih interactive di mata pengguna. Kalian bisa mulai mempelajari CSS di Kelas CSS Website Design bareng BuildWithAngga! Di kelas ini kalian akan belajar tentang: pengenalan CSS dasar.cara memasukkan kode CSS dalam dokumen HTML.penggunaan properti CSS, seperti width, height, margin, padding, dsb.mengatur tampilan navigasi pada halaman web menggunakan CSS.serta mempelajari penggunaan pseudo-classes dalam CSS untuk memberikan efek tambahan pada elemen HTML. Segera daftarkan diri kalian ke kelas gratis ini dan miliki akses belajar seumur hidup! Kalian juga bisa mendapatkan benefits lainnya, seperti update materi tambahan dan sertifikat dengan meng-upgrade ke kelas Stater Pro. 3. Vanilla JavaScript Pada Website Development Dalam membangun website yang dinamis dengan kontan yang selalu up-to-date, JavaScript menjadi bahasa pemrograman yang sangat penting. Sementara CSS memberikan tampilan yang interaktif, JavaScript membawa kemampuan lebih jauh dengan memungkinkan manipulasi halaman secara dinamis. JavaScript sangat diperlukan bagi mereka yang ingin menjadi Front-End Developer. Sebelum melangkah lebih jauh dengan mempelajari framework JavaScript yang populer, seperti Angular, React, dan Vue, penting bagi pemula untuk memiliki pemahaman yang kokoh terhadap dasar-dasar JavaScript. Hal ini akan menjadi fondasi yang kuat untuk memahami konsep-konsep lebih lanjut dalam pengembangan web. Kalian perlu memahami terlebih dahulu mengenai: cara mendeklarasikan suatu variable pada JavaScript.mengetahui apa saja tipe data pada javascript.memahami penggunaan if statement, looping dan array pada JavaScript.memahami konsep object dan function dalam JavaScript.serta mengetahui tentang Document Object Model (DOM) untuk memanipulasi elemen-elemen pada halaman web. Don't worry guys! semua itu bisa kalian pelajari di Kelas Vanilla JavaScript secara GRATIS bersama mentor expert Yein Narayana. Selain itu, kalian bisa mengakses kelas ini sampai kapan-pun. Jadi, manfaatkan kesempatan ini untuk meningkatkan kemampuan pemrograman JavaScript kalian! 🚀 4. ES6 Dasar ES6 atau ECMAScript 2015 adalah versi terbaru dari standar JavaScript yang diperkenalkan pada tahun 2015. ES6 memperkenalkan banyak fitur baru dan perbaikan sintaksis yang akan memudahkan kalian dalam mengembangkan aplikasi web. ES6 penting untuk pengembangan JavaScript karena fitur-fitur baru ini memungkinkan pengembang untuk menulis kode yang lebih bersih, ekspresif, dan efisien. Selain itu, penggunaan ES6 juga membantu dalam memperbaiki kinerja aplikasi dan memudahkan dalam pengelolaan kode. Mempelajari ES6 akan sangat membantu kalian apabila kalian memutuskan untuk menggunakan framework Vue JS nantinya. Kalian dapat mempelajari versi terbaru dari standar JavaScript ini dikelas ES6 Dasar bersama mentor expert Angga Risky! Di kelas ini kalian dapat belajar mengenai: penulisan deklarasi variable menggunakan let dan const.penerapan String Concatenation yang lebih mudah dan simpel.pembuatan Object Literal yang lebih sederhana.penggunaan Array Foreach untuk mengulangi setiap elemen dalam array. Dengan belajar fitur-fitur ini, kalian akan lebih nyaman dan terampil dalam menulis kode JavaScript. Tentunya kelas ini dapat kalian akses secara gratis dan seumur hidup! Kalian juga bisa upgrade ke kelas Starter Pro untuk mendapatkan materi yang lebih banyak lagi. 5. CSS Tailwind Web Design Tailwind CSS adalah sebuah framework CSS yang memungkinkan pengembang untuk membangun tampilan website dengan lebih cepat dan mudah. Tailwind CSS menggunakan pendekatan utility-first, yang memungkinkan pengembang untuk menggunakan kelas utilitas untuk merancang tata letak responsif dan komponen desain. Dengan Tailwind CSS, pengembang dapat menghemat waktu dan usaha dalam merancang tampilan website, karena framework ini menyediakan banyak kelas utilitas yang dapat digunakan untuk membuat tampilan website yang menarik dan responsif. Tailwind CSS juga memungkinkan pengembang untuk menyesuaikan desain mereka dengan menggunakan beragam opsi konfigurasi yang disediakan oleh Tailwind CSS, seperti warna, font, dan spasi, sehingga pengembang dapat menciptakan desain yang sesuai dengan kebutuhan proyek mereka. Pelajari framework Tailwind CSS di kelas CSS Tailwind Web Design bareng mentor expert Yein Narayana, di kelas ini kalian akan belajar tentang: pengenalan Tailwind CSS sebagai framework CSS yang fokus pada utility classes.mempersiapkan tools dan setup workspace.membuat komponen dalam website seperti button dan cards.pengaturan grid untuk membantu membuat cards yang responsive.serta pembuatan Hero pada halaman web menggunakan Tailwind CSS. Kalian dapat mengakses kelas ini secara gratis dan tanpa batas waktu. Jangan lupa untuk upgrade ke kelas Starter Pro untuk mendapatkan update materi-materi terbaru. Jadi, tunggu apalagi mulai bangun website kalian jadi lebih menarik dan responsif bersama BuildWithAngga✨ 6. CSS Bootstrap 4 Web Design Website yang baik adalah ketika pengguna mengakses maka tampilan UI tidak berantakan atau susah dipahami. Dengan memanfaatkan Framework CSS Bootstrap, kita dapat dengan mudah mengelola tampilan tersebut. Bootstrap menyediakan beragam komponen yang memudahkan pengembang dalam merancang tampilan yang responsif dan menarik. Framework ini juga memudahkan dalam pengelolaan tata letak dan interaksi antarmuka pengguna. Bootstrap juga menyediakan beragam kelas CSS yang dapat digunakan untuk mempercepat pengembangan website. Jika kalian ingin mempelajari CSS Bootstrap lebih lanjut join Kelas CSS Bootstrap 4 Web Design. Di kelas ini kalian akan diberikan: tutorial instalasi Bootstrap Offline.penjelasan mengenai penerapan grid, column, row dan container.pengenalan konsep dasar flexbox.menerapkan auto column untuk mempermudah pengaturan tata letakdan pengenalan berbagai macam fitur-fitur Bootstrap lainnya yang dapat mempercantik website kalian. Ayo! segera daftarkan diri kalian ke Free Class atau upgrade ke kelas Starter Pro untuk mendapatkan lebih banyak materi terbaru lainnya! 7. SASS Workshop: Design Website Lebih Cepat SASS (Syntactically Awesome Style Sheets) adalah ekstensi CSS yang telah digunakan banyak komunitas Front-End di dunia. Airbnb dan StackShare adalah dua perusahaan komersil yang mengaplikasikan SASS untuk scripting kode yang lebih rapi dan cepat. Hal ini menjadikan SASS bermanfaat untuk sisi organization dan maintenance sebuah aplikasi yang scalable. Bagi kalian yang ingin memahami CSS dan mendalami SASS, ikuti kelas “SASS Workshop: Design Website Lebih Cepat” yang akan dibimbing oleh mentor expert Angga Risky. Di kelas ini kalian akan membangun sebuah landing page yang menarik. Pembelajaran akan dimulai dari: mempelajari instalasi SASS pada projek website.mempelajari dasar-dasar SASS.melakukan slicing desain Figma ke Bootstrap5 CSS.memperdalam fungsi-fungsi yang tersedia pada SASS.hingga dapat membangun sebuah website yang eye-catching. Pembelajaran diatas dapat kalian akses secara gratis dan seumur hidup melalui website BuildWithAngga. Dapatkan juga materi-materi tambahan dengan upgrade menjadi kelas Starter Pro! 8. Vue JavaScript Framework Vue.js adalah sebuah framework JavaScript yang digunakan untuk membangun antarmuka pengguna web. Vue.js memiliki fitur-fitur yang memudahkan pengembangan aplikasi web, seperti kemampuan untuk membuat tampilan website menjadi lebih interaktif dan kemudahan dalam integrasi dengan library lain. Vue.js juga memiliki dokumentasi yang baik dan API yang intuitif, sehingga memudahkan pengembang dalam mempelajari dan mengimplementasikan framework ini. Beberapa fitur dalam Vue.js antara lain kemampuan untuk membuat Single Page Application (SPA), kemudahan dalam menginisialisasi komponen HTML, serta kemampuan untuk membuat tampilan UI yang menarik. Jika kalian tertarik menggunakan Framework Vue Javascript untuk pengembangan situs web kalian, mulai pelajari Framework Vue.js di Kelas “Vue JavaScript Framework” bersama mentor expert Angga Risky. Di sini kalian akan belajar: dasar-dasar Vue JS mulai dari melakukan instalasi dan persiapan tools yang digunakan.mengenal alur kerja dasar Vue JS.membuat komponen website Vue JSmemodifikasi halaman web dengan Scope CSS - Vue JS.hingga cara menggunakan Vue UI sebagai project manager. Segera daftar dan mulai belajar di Kelas “Vue JavaScript Framework” dengan akses gratis dan seumur hidup! 9. React JavaScript React JS adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) pada aplikasi web. React biasa digunakan oleh web developer dalam membangun website yang lebih interactive, fast, dan responsive. React menggunakan sintaksis JSX (JavaScript XML) yang memungkinkan penulisan kode yang lebih dekat dengan HTML, membuatnya lebih mudah dipahami dan dikembangkan. React juga mendukung pengembangan yang berbasis komponen, di mana setiap bagian UI dapat dipecah menjadi komponen independen yang dapat digunakan kembali. React telah menjadi salah satu pilihan utama bagi pengembang web karena kecepatan pengembangan, efisiensi, dan kemampuan untuk membangun aplikasi dengan antarmuka yang dinamis dan responsif. Tertarik untuk mempelajari React JS lebih lanjut? Gabung kelas “React JavaScript”. Di kelas ini kalian akan membangun toko online sederhana dengan menggunakan HTML, CSS, JavaScript (React JS). Kalian akan diberikan materi yang komprehensif mencakup: pengenalan Konsep JSX (JavaScript XML).pengenalan ReactDOM Render.mempelajari cara melakukan slicing component.mempelajari penggunaan props component.serta penerapan conditional rendering pada website kita. Pelajari selengkapnya dengan bergabung secara gratis di kelas “React JavaScript” atau upgrade ke kelas Strater Pro untuk akses materi yang lebih lengkap! 10. NextJS Basic Next.js adalah framework JavaScript buatan Vercel yang digunakan Front-End Developer untuk membangun sebuah website yang cepat dan ramah pengguna. Sudah banyak perusahaan dunia di berbagai bidang yang menggunakannya seperti TikTok, Nike, Starbucks, dan Twitch. Buat kalian yang tertarik dengan Next JS dan ingin belajar lebih dalam, BuildWithAngga menyediakan Kelas Online Gratis NextJS Basic. Pada kelas ini, kalian akan belajar: memahami dasar-dasar Next JS.mempelajari setup project Next JS.mempelajari pengaturan website yang SEO friendly.mempelajari code splitting untuk performance Next JS yang lebih cepat.dan mempelajari jenis hybrid rendering (Static Generation & Server Side). Dengan memahami semua fitur-fitur tersebut, kalian dapat menciptakan semua halaman yang diperlukan website (marketing page, product listing, help, dll) yang interaktif dengan lebih efisien. Penutup Nah, itu dia guys kelas-kelas yang bisa kalian manfaatkan! Selangkah demi selangkah, tingkatkan pengetahuan dan keterampilanmu dalam pengembangan front-end. Tunggu apalagi? Yuk segera join kelas yang kamu inginkan untuk upgrade skill front-end bersama BuildWithAngga ✨ See you di kelas yaa!

JavaScript memang dikenal sebagai wadah konstan untuk inovasi, terutama dalam pengembangan kerangka kerja (framework) dan perpustakaan (library) terkini. Nah, pada bulan Juli 2022 komunitas JavaScript diramaikan oleh kehadiran Bun.js, yang membuat menarik banyak perhatian dan memicu diskusi luas di kalangan para developer. Banyak yang percaya bahwa Bun.js digadang-gadang memiliki potensi besar untuk menjadi penerus sebelumnya Node.js dan Deno.js, apalagi berkat dari segi kecepatannya yang dianggap luar biasa. Sebelum masuk ke pembahasan, kamu bisa mempelajari kelas JavaScript yang disediakan oleh BuildWithAngga. Di sana kamu juga dapat belajar lebih banyak studi kasus dan dapat menambah portfolio kamu untuk menunjang karir yang akan datang. Okee let’s go kita bahas, apa yang dimaksud dengan Bun.js dan kenapa bisa menjadi rival NodeJS dimasa yang akan datang ? Apa itu Bun.js ? Image official https://bun.sh | Pada artikel ini ditulis, Bun sekarang Versi 1.0.26 Dikutip dari website resmi, Bun.js adalah runtime dan toolkit JavaScript lengkap yang didesain untuk memberikan kinerja optimal. Bun.js tidak hanya mencakup runtime JavaScript, tetapi juga dilengkapi dengan bundler, test runner, dan manajer paket yang sepenuhnya kompatibel dengan lingkungan Node.js. Sebagai runtime JavaScript all-in-one, Bun.js sendiri diklaim memiliki kecepatan 4x lebih cepat sebagai salah satu keunggulannya. Ini menjadi runtime JavaScript ketiga setelah dua pendahulunya, Node.js dan Deno.js, yang dikembangkan oleh Jarred Sumner menggunakan bahasa pemrograman Zig. Tujuan terciptanya Bun.js Tujuan utama pembuatan Bun.js adalah menyediakan platform untuk menjalankan JavaScript di luar browser, sejalan dengan Node.js dan Deno.js. Namun, Bun.js memiliki pendekatan yang berbeda dengan menekankan tingkat kecepatan yang baru dan peningkatan kompleksitas. Terciptanya Bun.js, memiliki fokus pada tiga aspek utama, yaitu: Kecepatan Eksekusi Program: Bun.js didesain untuk memberikan kinerja eksekusi program yang optimal.Peningkatan Kinerja Baru: Mengembangkan kemampuan kinerja, termasuk memperluas JavaScriptCore.Kelengkapan Fungsionalitas: Menjadi alat yang canggih dan lengkap untuk mendukung berbagai kebutuhan pengembangan. Bun.js menggunakan mesin JavaScriptCore, yang cenderung memulai dan menjalankan tugas sedikit lebih cepat dibandingkan dengan opsi tradisional seperti V8. Sebagai informasi tambahan dari website resmi, Bun.js ditulis dalam bahasa pemrograman tingkat rendah dengan manajemen memori manual. Bun is a test runner! Bun adalah test runner yang membuat yang lain terlihat seperti test walkers. Apakah kamu tahu apa itu Test Walkers? Test walkers sendiri adalah ungkapan yang mungkin merujuk pada metode yang berjalan atau mengeksekusi uji coba (test) secara lebih lambat atau kurang efisien dibandingkan dengan test runner lain yang lebih canggih. Website official https://bun.sh Bisa dibilang, bapak Jarred Sumner ini menyampaikan bahwa Bun memiliki kinerja atau kemampuan eksekusi uji coba yang sangat baik dibanding yang lainnya. 4x Lebih Cepat Ketika Menjalankan Script Proses eksekusi script juga berlangsung jauh lebih cepat daripada yang terdapat pada Node.js. Dikutip dari laman resmi Bun, dibandingkan dengan menggunakan perintah NodeJS seperti npm run, Bun menawarkan alternatif dengan perintah bun run (Bun memiliki manajer paketnya sendiri), memberikan penghematan waktu sekitar 150ms (milidetik). Meskipun angka ini mungkin terlihat kecil, perbedaannya menjadi sangat signifikan saat menjalankan skrip melalui CLI. Sebagai perbandingan, penggunaan npm run masih menunjukkan adanya keterlambatan yang cukup terasa. Script runnerRata-rata waktunpm run176msyarn run131mspnpm run259msbun run7ms 🚀 Kesimpulan Yup, dan itulah dia pembahasan mengenai Bun.js; muncul sebagai runtime JavaScript terbaru dan menawarkan kecepatan eksekusi program yang superior. Dikembangkan oleh Jarred Sumner, Bun.js menjadi pilihan menarik dengan tujuan memberikan alternatif yang cepat dan kompleks. Selain menjadi test runner yang unggul, Bun.js membuktikan keunggulannya dalam eksekusi skrip, memberikan penghematan waktu yang signifikan dibandingkan pendahulunya, terutama Node.js. Eits, agar kalian tidak bingung. Kalian bisa kok mencoba Bun.js dengan mulai mengikuti kelas gratis dan latihan kelas JavaScript di BuildWithAngga loh. Di sini kalian bisa mempelajari beberapa kelas online, jadi tunggu apa lagi? Yuk gabung bersama BuildWithAngga dan sampai jumpa di kelas, babayy 🥰

Hello people with the spirit of learning! Kali ini, kami akan memberikan 10 Rekomenasi Online Course Terbaik untuk Belajar dengan Software Figma secara GRATIS! 🤩 Kursus-kursus ini dirancang untuk kamu yang ingin belajar dan memperdalam skill UI/UX design-mu menggunakan Figma dengan mentor-mentor yang sudah pasti sangat berpengalaman dan profesional! Apa aja sih? Yuk simak! 1. Learn Figma for Beginner Belajar UI/UX adalah kunci untuk menciptakan pengalaman pengguna yang lebih baik dalam aplikasi mobile. Dengan mentor Angga, kita akan mendalami Figma dari dasar hingga prototyping, memastikan desain yang nyaman digunakan dan memuaskan. Kelas ini cocok untuk kamu yang ingin menjadi UI/UX Designer, dengan panduan langsung dari ahli di bidangnya. Yuk segera mulai untuk membangun portfolio yang kuat dan melangkah ke arah karier yang sukses! 🤩 Di kelas “Learn Figma for Beginner” bersama mentor Angga Risky, kamu akan belajar: cara membuat desain Travel Mobile App menggunakan Figma,mempelajari tools dasar UI/UX desain pada figma,penggunaan ikon-ikon, pemilihan warna yang tepat serta tipografinya,mengenal dasar-dasar tools Figma,dan membuat portfolio sederhana namun berkualitas. Jangan khawatir! Figma adalah software yang gratis dan kalau kami join kelas ini, kamu memiliki akses belajar seumur hidup hingga bisa mendapatkan sertifikat juga lho! Cocok untuk kamu yang ingin memperdalam Figma dan berkarir sebagai UI/UX designer nih guys! 2. Mastering Figma: Modern UI Dashboard Design Dalam merancang User Interface sebuah website, fokus pada visual design yang menarik adalah kunci utama untuk memastikan kepuasan pengguna. Tidak hanya tentang keindahan aesthetic, tetapi juga memastikan setiap elemen desain dapat dipahami dan digunakan dengan mudah oleh pengguna. Prosesnya dimulai dari pemahaman fitur yang diinginkan oleh pengguna, pembuatan wireframe untuk merencanakan layout komponen UI, hingga menghasilkan konsep desain visual lengkap dengan gambar, warna, dan tipografi. Pada kesempatan kali ini, kamu akan diajak untuk mempelajari visual design melalui pembuatan tampilan dashboard menggunakan alat desain populer gratis; Figma. Dashboard memiliki peran penting dalam situs bisnis karena menyajikan data yang krusial bagi pengguna. Dengan desain yang terencana secara matang, kamu dapat meningkatkan produktivitas bisnis dan potensi keuntungan penjualan. Bersama mentor ahli, kelas “Mastering Figma: Modern UI Dashboard Design” ini mencakup pembuatan project desain, ekspor desain, hingga presentasi desain untuk membuka peluang karir yang lebih baik. Hasil proyek dari kelas ini tidak hanya dapat memperkaya portofoliomu, tetapi juga dapat diunggah dan dipamerkan di platform online seperti Dribbble. Intinya, mentor expert kita, Angga Risky, akan membantu kamu mempersiapkan karier sebagai UI/UX desainer karena di kelas ini kita juga akan belajar: cara mengubah wireframe menjadi visual design,mempelajari tools apa saja pada Figma,mendesain tampilan dashboard yang keren,membuat project desain yang bisa kita jadikan sebagai portfolio berkualitas,dan belajar membuat konsep visual design dengan warna, ikon dan tipografinya. Psst, kelas ini GRATIS dan aksesnya seumur hidup loh! Cocok untuk kamu yang ingin memperdalam pengetahuan Figma, ingin memiliki portfolio web desain dan belajar UI desain. Tingkatkan pengalaman belajarmu dengan meng-upgrade paket ke Starter Pro untuk mendapatkan akses penuh ke seluruh materi berharga dalam kelas ini. 3. UI Style Guide with Figma Untuk menciptakan tampilan UI yang menarik, konsistensi dengan UI Style Guide sangatlah penting untuk mempermudah proses pengembangan web/mobile. Melalui panduan di kelas ini, designer dapat menghemat waktu dengan kemudahan pembuatan komponen desain yang dapat diakses oleh beberapa designer secara bersamaan. Kelas ini menawarkan pembelajaran menggunakan Figma (free), platform yang telah diadopsi oleh berbagai perusahaan ternama seperti GitHub, Dropbox, Twitter, dan Slack. Jangan ragu untuk gabung kelas “UI Style Guide with Figma” karena ini worth-it banget! Dengan bimbingan mentor Angga Risky, kamu akan dipandu melalui proses desain yang efisien dengan memanfaatkan fitur-fitur canggih seperti: penggunaan Auto Layout,membuat Design Tokens,pemanfaatan Plugins,belajar membuat Design Library,Responsive Component menggunakan Auto Layout,memahami perbedaan “Frame” dan “Group”,dan memahami Style Guide beserta Design Library. Kelas gratis ini memiliki akses belajar seumur hidup dan bisa kamu upgrade ke kelas Starter Pro untuk mendapatkan sertifikat serta benefits lainnya! Sangat cocok untuk desainer pemula yang ingin membuat design library, yang ingin mempelajari UI Design dengan Figma dan UI/UX designer yang ingin mendalami tools Figma. 4. Learn Icon Pack Design with Figma Icon dapat ditemukan di interface (UI) aplikasi seluler atau situs web yang kita gunakan setiap hari. Icon memiliki kemampuan untuk menyampaikan informasi dengan cepat dan efekti lho! Desain icon yang baik dapat memberikan informasi yang berguna tentang aplikasi sehingga pengguna dapat menggunakannya dengan lebih cepat dan tanpa kebingungan. Bagi seorang UI Designer, kemampuan dalam menciptakan icon tidak hanya dapat menjadi tambahan penghasilan, tetapi juga memperkaya portofolio online. Bergabunglah dengan mentor kami, Angga Risky, untuk mempelajari proses pembuatan icon dari awal. Dalam kelas “Learn Icon Pack Design with Figma” ini, mentor Angga akan membimbing kamu melalui tahapan pembuatan icon: mulai dari menentukan kategori sesuai jenis aplikasi,membuat sketsa ikon,mendalami proses sketsa dengan Figjam dari Figma,membuat Icon Pack untuk aplikasi E-Commerce,diajari tips & trik untuk memastikan ikon terlihat cantik (dengan kualitas tinggi dan resolusi yang efisien),belajar konsisten dalam penggunaan ikon dalam sebuah UI desain,dan belajar menjual Icon Pack Design! Kelas ini cocok loh untuk kamu yang ingin belajar desain Icon dari awal, ingin memiliki portofolio User Interface Design dan yang ingin belajar menjual Icon Pack Design! Jangan khawatir akan limit akses kelas karena kelas ini memiliki akses pembelajaran seumur hidup dan kamu juga bisa meng-upgrade untuk mendapatkan sertifikat dengan harga terjangkau! 😍 5. Workshop Figma: Design Charity Landing Page Landing Page memiliki peran yang "krusial” dalam sebuah situs web, entah itu toko online, perusahaan, atau platform lainnya. Sebagai halaman pertama yang diakses oleh pengguna, kesan pertama yang dihasilkannya sangatlah penting, baik bagi pengguna baru maupun yang sudah mengenal situs tersebut. Oleh karena itu dengan mentor expert kita, Angga Risky dalam Workshop Figma terbaru ini, kita akan belajar tentang: cara menguasai berbagai macam tools gratis yang ada di Figma,membuat tampilan CTA Landing Page,lalu belajar menggunakan Grid System,belajar desain Landing Page khusus untuk keperluan website Charity yang bertujuan mengumpulkan dana bantuan mulai dari pemilihan warna dan tipografinya,serta mengumpulkan berbagai macam inspirasi desain Landing Page yang kece dan modern Materi workshop ini akan membahas cara mendesain halaman tersebut agar dapat menyampaikan pesan yang baik dan efektif kepada para donatur. Yuk langsung join kelas “Workshop Figma: Design Charity Landing Page”! Kelas ini sama memiliki akses kelas seumur hidup dan FREE! 💸 Cocok untuk kamu yang ingin memperdalam Figma, ingin belajar layout, untuk **kamu yang ingin design CTA lebih baik dan kamu yang ingin perdalam visual design! 6. Mastering Mobile UI Design for Beginners with Figma (In English) Selamat datang di kursus Figma kami yang komprehensif, dirancang secara teliti untuk para desainer pemula maupun profesional berpengalaman. Dalam perjalanan ini, kamu akan belajar untuk mereplikasi sebuah desain luar biasa menggunakan Figma, mendapatkan wawasan tentang seluruh alur kerja. Kursus ini dirancang untuk berbagi manajemen sistem desain pribadi saya, pertimbangan layout adaptif, serta beragam tips dan trik profesional. Walaupun kamu baru memulai dalam dunia desain atau ingin menyempurnakan keterampilanmu, kursus ini menawarkan panduan langkah demi langkah untuk menguasai fitur-fitur andal Figma. Dari dasar hingga teknik lanjutan, video tutorial kami dilengkapi dengan pengetahuan penting untuk memastikan kamu dapat dengan cepat memulai membuat antarmuka yang memikat secara visual. Kelas ini dibimbing oleh mentor profesional; aDan, dengan menggunakan software gratis Figma. Di sini, kamu akan belajar bagaimana berbagi alur kerja designer UI/UX, mengembangkan perspektif desainer berpengalaman melalui replikasi desain orang lain, meningkatkan keterampilan dan teknik desain, menguasai fitur pada Figma serta berbagai macam tips dan trik seorang profesional dalam bidang UI/UX! Kelas ini cocok untuk kamu yang ingin meningkatkan keterampilan desain UI, menemukan alur kerja desain yang lebih baik dan yang ingin meningkatkan kecepatan desain! Kalau kamu tertarik dengan bahasan yang lebih lengkap dan bisa langsung praktik, kamu bisa langsung gabung kelas “Mastering Mobile UI Design for Beginners with Figma“ 😊 Nah berikut adalah beberapa poin menarik tambahan dari kursus ini: Membangun “Simple Design System” di Figma: Panduan dasar untuk mengorganisir dan mengelola elemen desain secara efisien.Auto Layout Adaptif dengan Figma: Membahas dan menerapkan prinsip desain responsif untuk antarmuka pengguna yang serbaguna.Rahasia Alur Kerja Profesional: Berbagi pintasan dan strategi pribadi untuk meningkatkan proses desain Anda. Pada akhir kursus ini, kamu akan mencapai hasil pembelajaran berikut: Mempercepat proses desain UI-mu dengan tips praktis Figma.Project desain dengan mindset seorang desainer berpengalaman.Menyesuaikan dan mengubah desain yang sudah ada menjadi kreasi unikmu dengan mudah. Segera ikuti kursus gratis ini untuk membuka potensi penuh desain UI mobile dengan Figma, dan mulailah menciptakan interface yang keren! 😍 Ohiya, kursus ini juga memiliki akses seumur hidup loh dan tentu saja kamu bisa mendapatkan benefits lain saat kamu upgrade kelas ini 😊 7. UI Design : Grid System dengan Figma Saat membangun sebuah website dengan design yang menarik dan juga professional maka peran grid system sangatlah penting untuk mencapai akan hal-hal tersebut. Grid system memiliki beberapa manfaat yang salah satunya adalah untuk mempermudah proses kerja sama antara designer dan juga developer. Pada kelas kali ini kita akan bahas tuntas tentang pengertian dan juga penggunaan grid system pada design website menggunakan software gratis Figma. Kelas ini sangat cocok sekali apabila saat ini kita masih di tahap pemula, karena jika tidak kita pelajari sedari sekarang maka khawatir kedepannya hasil design kita tidak dapat diimplementasikan oleh developer dan ditolak oleh klien. Dengan bimbingan mentor Dhimas Prio, di kelas “UI Design : Grid System dengan Figma” kamu akan mempelajari tentang: cara implementasi Grid System ke UI Design,mempelajari tools dasar Figma,memahami betul fungsi Grid dalam suatu proyek desain,merancang Grid pada Figmaserta membuat portofolio sederhana untuk kebutuhan kariermu! Kelas ini cocok banget loh untuk kamu yang ingin mempelajari Microinteraction, yang ingin mempelajari UI/UX design dan cocok untuk designer yang ingin belajar membuat prototype! Kelas ****ini merupakan kelas gratis yang dapat kamu akses seumur hidup ✨ 8. UI Design: Wireframe to Visual Design Visual Design memiliki peranan penting dalam menciptakan antarmuka pengguna (UI) yang efektif. Tujuannya adalah agar tampilan UI tidak hanya menarik secara estetika, tetapi juga intuitif dan mudah dipahami bagi pengguna. Dalam kursus “UI Design: Wireframe to Visual Design” kamu akan diajarkan: bagaimana cara membuat tampilan yang efektif mulai dari pembuatan moodboard dengan InVisionApp,pemilihan typography, warna dan referensi desain,belajar mengubah wireframe menjadi visual design yang menarik menggunakan Figma*,*cara meng-import Image dan Icon,serta menentukan Hierarchy teks pada suatu konten. Proses ini akan memberikan fondasi kuat untuk menghasilkan UI yang menarik dan mudah digunakan bersama mentor expert; Dhimas Prio Kelas Starter ini adalah kelas gratis dengan life-time access. Namun, kamu bisa meng-upgrade menjadi kelas Starter Pro untuk mendapatkan sertfikatnya dengan harga terjangkau! 9. Mastering Midjourney: Create a Stunning UI UX Design Selamat datang di kursus Midjourney kami, platform pembelajaran yang disesuaikan untuk kreatif dan pecinta desain! 😍 Di sini, kami akan membawa kamu ke dunia seni AI, mengajarkan kamu cara menggunakan Midjourney untuk menghasilkan bahan desain yang menakjubkan dengan langkah-langkah pembelajaran yang sederhana. Walaupun kamu masih pemula dalam desain atau profesional berpengalaman, kursus ini akan menunjukkan kepada kamu bagaimana cara menguasai fitur-fitur kuat dari Midjourney dengan mudah. Mulai dari pengenalan dasar hingga teknik-teknik lanjutan, tutorial video kami mencakup semua poin pengetahuan penting untuk memastikan kamu dapat memulai dengan cepat dan menciptakan karya visual yang unik. Bersama mentor aDan; ia akan memberikan pandangan menyeluruh tentang platform Figma,membantumu memahami dasar-dasarnya serta membimbing kamu tentang cara membuat dan mengonfigurasi server kamu sendiri di Discord untuk penggunaan Midjourney yang lebih baik,belajar cara mengubah deskripsi teks menjadi gambar yang indah,mengajarkan kamu cara membuat karya visual baru berdasarkan gambar yang sudah ada,dan mengeksplorasi cara mengaplikasikan gambar yang dihasilkan Midjourney dalam desain web untuk meningkatkan kualitas proyekmu dengan AI. Tertarik untuk belajar lebih dalam soal Midjourney? Kamu bisa langsung gabung kelas “Mastering Midjourney: Create a Stunning UI UX Design” :) Cocok untuk kamu pecinta desain, seorang UI designer dan AI drawing. Kelas ini gratis dan dapat diakses seumur hidup. Kamu bisa upgrade kelas ini untuk benefits lainnya lho :) 10. Intro to UX Design Research Penelitian (Research) memainkan peran penting dalam setiap tahap pembuatan produk, termasuk aplikasi dan situs web. Proses UX Design Research memungkinkan penggalian informasi mendalam terkait pengguna target dan kebutuhan mereka yang dapat diimplementasikan ke dalam aplikasi. Seorang UX Design Researcher akan menggunakan berbagai metode untuk mengidentifikasi masalah potensial pada aplikasi dan menemukan fitur baru yang dibutuhkan oleh pengguna. Join kelas “Intro to UX Design Research” sekarang! Dalam kelas bersama mentor Angga Risky, kita akan belajar: dasar-dasar UX Design Researchdibimbing memilih metode Research yang sesuaimerancang dan menetapkan rencana riset,memahami konsep, teori dan praktik dari UX Researcherserta melakukan evaluasi terhadap hasil riset yang telah dilakukan. Ini juga memberikan wawasan berharga bagi Product Designer dan UX Designer untuk memahami bagaimana riset dilakukan, sehingga dapat berkolaborasi lebih efektif dengan para UX Researcher. Karena dalam kelas ini, kamu juga akan belajar sembari praktik membuat sebuah Research Plan, memilih metode Research yang tepat, memahami langkah awal dalam membangun Startup dan yang paling penting adalah mengenal UX Design Research dari dasar. Kelas ini gratis dan memiliki life-time access, cocok banget loh untuk kamu yang ingin mengerti lebih luas tentang UX Research, untuk UX Designer atau Product Manager yang ingin belajar Research dan Anak IT yang ingin membangun sebuah Startup 💸 Nah jadi tunggu apalagi guys? Yuk segera join kelas yang kamu mau dan kamu butuhkan untuk upgrade designs skill kamu bersama BuildWithAngga ✨ See you di kelas yaa!

Hello people with the spirit of learning! 👋🏻 Balik lagi nih ke pembahasan seputar UI/UX! Kalian suka bingung gak sih ketika mau menentukan font apa yang kira-kira cocok untuk desain UI/UX aplikasi keuangan? NIh sekarang kami beri 10 rekomendasi font untuk aplikasi keuangan, khusus untuk kalian! Apa aja sih? Yuk simak! 1. Roboto Mari kita mulai dengan font satu ini! Didesain oleh Google, Roboto memiliki kerning yang baik dan mudah dibaca, cocok untuk tampilan bersih dan modern. Keunikan dari font Roboto adalah sebagai berikut: Desain Modern: Roboto dirancang khusus oleh Google untuk keperluan digital, sehingga memiliki tampilan yang sangat modern dan cocok digunakan untuk berbagai platform digital termasuk aplikasi keuangan.Kesesuaian dengan Berbagai Ukuran: Roboto memiliki keunggulan dalam kesesuaian dengan berbagai ukuran tampilan, baik itu teks kecil seperti pada tombol dan label, maupun teks besar untuk judul atau pengumuman penting.Proporsi Huruf yang Seimbang: Proporsi huruf yang seimbang pada Roboto membuatnya mudah dibaca dan dapat menampilkan informasi dengan jelas, yang merupakan aspek penting dalam aplikasi keuangan di mana pengguna memerlukan akses cepat dan akurat terhadap data.Kerning yang Baik: Roboto memiliki kerning yang baik, artinya jarak antara setiap hurufnya diatur dengan proporsional sehingga teksnya terlihat rapi dan mudah dibaca.Stabilitas pada Berbagai Platform: Karena dirancang khusus untuk digunakan di platform digital, Roboto menawarkan stabilitas yang baik dalam tampilan dan konsistensi di berbagai perangkat dan sistem operasi, yang penting untuk memastikan pengalaman pengguna yang seragam dalam aplikasi keuangan. Nah kombinasi dari desain modern, kesesuaian ukuran, proporsi huruf yang seimbang, kerning yang baik, dan stabilitas di berbagai platform, Roboto menjadi pilihan yang sangat baik untuk digunakan dalam aplikasi keuangan. 2. Open Sans Memiliki kerning yang cukup longgar, Open Sans memberikan kesan ramah dan mudah dibaca, baik untuk berbagai ukuran teks. Ada pun keunikan dari font Open Sans adalah sebagai berikut: Kesesuaian dengan Berbagai Konteks: Open Sans dirancang untuk memiliki kemampuan menyesuaikan diri dengan berbagai konteks penggunaan. Ini membuatnya sangat fleksibel dan cocok untuk digunakan dalam berbagai jenis aplikasi, termasuk aplikasi keuangan yang memiliki kebutuhan akan berbagai ukuran teks dan elemen desain.Kerning yang Longgar: Salah satu ciri khas dari Open Sans adalah kerning yang cukup longgar, yang membuatnya mudah dibaca terutama pada ukuran teks kecil. Hal ini membantu memastikan bahwa teks dalam aplikasi keuangan tetap jelas dan mudah dimengerti oleh pengguna.Ramah dan Bersahabat: Desain huruf yang bulat dan proporsional membuat Open Sans terlihat ramah dan bersahabat. Ini adalah keunikan yang penting, terutama dalam konteks aplikasi keuangan di mana kepercayaan dan kenyamanan pengguna sangat diutamakan.Dukungan Multiplatform: Open Sans memiliki dukungan yang baik di berbagai platform, termasuk web, mobile, dan desktop. Hal ini memastikan konsistensi tampilan teks di seluruh aplikasi keuangan, tanpa memperhatikan platform yang digunakan oleh pengguna.Legibilitas yang Baik: Dengan desain yang bersih dan proporsi huruf yang seimbang, Open Sans menawarkan legibilitas yang baik bahkan pada ukuran teks yang kecil. Hal ini penting dalam aplikasi keuangan di mana pengguna sering kali perlu membaca informasi detail dalam waktu singkat. Dengan kombinasi dari kesesuaian dengan berbagai konteks, kerning yang longgar, kesan ramah dan bersahabat, dukungan multiplatform, dan legibilitas yang baik, Open Sans menjadi pilihan yang kuat untuk digunakan dalam desain aplikasi keuangan. 3. Lato Lato memiliki kerning yang cukup longgar dan proporsi huruf yang seimbang, memberikan tampilan yang bersahabat dan profesional. Keunikan dari font Lato antara lain: Proporsi Huruf yang Seimbang: Lato memiliki proporsi huruf yang seimbang, yang membuatnya mudah dibaca dan menarik untuk digunakan dalam berbagai konteks, termasuk aplikasi keuangan. Proporsi yang seimbang ini memberikan tampilan yang profesional dan estetis.Kesesuaian dengan Berbagai Ukuran: Font Lato dapat digunakan dengan baik pada berbagai ukuran teks, baik itu teks kecil seperti pada tombol dan label, maupun teks besar untuk judul atau pengumuman penting. Kemampuan adaptasinya yang baik menjadikannya pilihan yang solid untuk aplikasi keuangan.Gaya Modern dan Bersih: Desain huruf yang bersih dan modern membuat Lato cocok untuk digunakan dalam desain UI/UX yang ingin memberikan kesan yang segar dan profesional. Ini membuatnya cocok untuk digunakan dalam aplikasi keuangan yang ingin tampil modern dan up-to-date.Stabilitas dalam Berbagai Platform: Lato menawarkan stabilitas yang baik dalam tampilan dan konsistensi di berbagai platform digital, termasuk web, mobile, dan desktop. Ini penting untuk memastikan pengalaman pengguna yang seragam di seluruh platform.Kerning yang Baik: Lato memiliki kerning yang baik, yang berarti jarak antara setiap hurufnya diatur dengan proporsional sehingga teksnya terlihat rapi dan mudah dibaca. Hal ini membantu meningkatkan legibilitas teks, yang sangat penting dalam aplikasi keuangan di mana pengguna memerlukan akses cepat dan akurat terhadap data. Dengan kombinasi dari proporsi huruf yang seimbang, kesesuaian dengan berbagai ukuran, gaya modern dan bersih, stabilitas dalam berbagai platform, dan kerning yang baik, Lato menjadi pilihan yang solid dan populer untuk digunakan dalam desain aplikasi keuangan. 4. Montserrat The Legend— Montserrat memiliki kerning yang cukup rapat dan gaya yang futuristik, cocok untuk aplikasi dengan tampilan modern dan bersih. Keunikan dari font Montserrat adalah sebagai berikut: Desain Modern dan Elegan: Montserrat memiliki desain huruf yang modern dan elegan, membuatnya cocok untuk aplikasi keuangan yang ingin tampil menarik dan profesional.Kekonsistenan dalam Proporsi Huruf: Font ini memiliki proporsi huruf yang konsisten, memberikan tampilan yang seragam dan teratur pada setiap ukuran teks. Hal ini memastikan legibilitas yang baik dan kesan estetis yang menyenangkan.Kerning yang Rapat: Montserrat memiliki kerning yang rapat, yaitu jarak antara setiap hurufnya lebih dekat. Hal ini memberikan tampilan yang kompak dan modern, seringkali digunakan untuk judul atau elemen desain yang menonjol.Kesesuaian dengan Berbagai Gaya Desain: Font ini cocok digunakan dalam berbagai gaya desain, mulai dari yang minimalis hingga yang lebih berani dan eksperimental. Fleksibilitas ini memungkinkan Montserrat digunakan dalam berbagai jenis aplikasi keuangan dengan gaya desain yang berbeda-beda.Kemudahan Integrasi dengan Grafis: Montserrat sering digunakan dalam kombinasi dengan elemen grafis dan ikon karena desainnya yang serbaguna. Ini memungkinkan penggunaan yang kreatif dalam desain UI/UX aplikasi keuangan.Pilihan Beragam Varian: Font ini memiliki beragam varian, termasuk regular, bold, italic, dan lain-lain, sehingga memungkinkan untuk memperkaya tampilan desain dan menyesuaikannya dengan kebutuhan aplikasi keuangan tertentu. Adanya kombinasi keunikan-keunikan di atas, Montserrat menjadi salah satu pilihan yang populer dan serbaguna dalam desain aplikasi keuangan, memberikan tampilan yang profesional, modern, dan menarik bagi pengguna lho! 5. Poppins One of our favorite fonts! ✨️ Dengan kerning yang cukup longgar dan proporsi yang seimbang, Poppins memberikan kesan yang bersahabat dan profesional juga! Keunikan dari font Poppins adalah sebagai berikut: Desain yang Modern dan Bersahabat: Poppins memiliki desain huruf yang modern dan bersahabat, dengan sudut-sudut yang sedikit bulat. Hal ini membuatnya cocok digunakan dalam desain UI/UX aplikasi keuangan yang ingin memberikan kesan yang ramah namun tetap profesional.Variasi Bobot yang Luas: Font ini menawarkan variasi bobot yang luas, mulai dari Thin hingga Extra Bold, sehingga memungkinkan untuk menciptakan hierarki teks yang jelas dan menonjol. Hal ini sangat berguna dalam menekankan informasi penting atau membuat judul yang menarik perhatian.Keserbagunaan dalam Penggunaan: Poppins dapat digunakan dalam berbagai konteks dan gaya desain, mulai dari yang minimalis hingga yang lebih berwarna dan berani. Hal ini membuatnya sangat fleksibel dan cocok untuk digunakan dalam berbagai jenis aplikasi keuangan. Dengan memiliki kombinasi desain modern dan bersahabat, variasi bobot yang luas, serta keserbagunaan dalam penggunaan, Poppins menjadi pilihan yang populer dan serbaguna dalam desain aplikasi keuangan, memberikan tampilan yang menarik, mudah dibaca, dan profesional bagi pengguna. 6. Nunito Lalu ada Nunito! Memiliki kerning yang baik dan bentuk huruf yang jelas, cocok untuk aplikasi dengan tampilan bersih dan minimalis. Nah keunikan dari font Nunito adalah sebagai berikut: Desain yang Bersahabat dan Mudah Dibaca: Nunito memiliki desain huruf yang bersahabat dan mudah dibaca, dengan proporsi yang seimbang dan sudut-sudut yang sedikit bulat. Hal ini membuatnya cocok untuk digunakan dalam aplikasi keuangan yang ingin memberikan kesan ramah dan profesional kepada pengguna.Kesesuaian dengan Berbagai Ukuran: Font ini memiliki kesesuaian yang baik dengan berbagai ukuran teks, baik itu teks kecil maupun teks besar. Dengan demikian, Nunito dapat digunakan untuk menampilkan informasi dengan jelas dan terbaca di berbagai bagian aplikasi keuangan.Kemudahan dalam Integrasi dengan Desain Grafis: Nunito sering digunakan dalam kombinasi dengan elemen desain grafis karena desainnya yang serbaguna. Hal ini memungkinkan untuk menciptakan desain UI/UX yang menarik dan kohesif dalam aplikasi keuangan. Dengan kombinasi keunikan-keunikan di atas, Nunito menjadi pilihan yang populer dan serbaguna dalam desain aplikasi keuangan, memberikan tampilan yang ramah, mudah dibaca, dan profesional bagi pengguna. 7. Source Sans Pro Dengan kerning yang cukup longgar dan desain yang bersahabat, Source Sans Pro cocok untuk berbagai jenis aplikasi keuangan. Nah berikut adalah tiga keunikan yang membuat font Source Sans Pro menjadi pilihan yang menarik: Desain yang Bersih dan Elegan: Font Source Sans Pro memiliki desain yang bersih dan elegan, dengan sudut-sudut yang lembut dan proporsi huruf yang seimbang. Hal ini membuatnya cocok digunakan dalam berbagai aplikasi keuangan yang mengutamakan tampilan yang profesional dan rapi.Kesesuaian dengan Berbagai Konteks: Font ini dirancang untuk memiliki kesesuaian yang baik dengan berbagai konteks penggunaan, mulai dari teks kecil hingga teks besar. Dengan demikian, Source Sans Pro dapat memberikan tampilan yang konsisten dan mudah dibaca di seluruh aplikasi keuangan Anda.Konsistensi Antar Platform: Source Sans Pro menawarkan konsistensi desain yang tinggi di berbagai platform, termasuk web, mobile, dan desktop. Hal ini memastikan bahwa tampilan teks tetap seragam dan profesional, tanpa memperhatikan platform yang digunakan oleh pengguna. Dengan kombinasi desain yang bersih dan elegan, kesesuaian dengan berbagai konteks, serta konsistensi antar platform, Source Sans Pro menjadi pilihan yang kuat untuk digunakan dalam desain aplikasi keuangan, memberikan tampilan yang profesional, mudah dibaca, dan konsisten bagi pengguna. 8. IBM Plex Sans Desain yang modern dan profesional, IBM Plex Sans cocok digunakan untuk aplikasi keuangan yang ingin memberikan kesan yang canggih dan dapat dipercaya kepada pengguna 🤩 Lalu berikut keunikan dari font IBM Plex Sans adalah sebagai berikut: Desain yang Netral dan Profesional: IBM Plex Sans memiliki desain yang netral dan profesional, memberikan kesan yang serius dan dapat diandalkan. Desainnya yang bersih dan sederhana membuatnya cocok untuk digunakan dalam konteks bisnis dan keuangan.Kesesuaian dengan Konteks Bisnis: Font ini dirancang khusus untuk keperluan bisnis dan teknologi oleh IBM. Kesesuaian ini membuatnya ideal untuk aplikasi keuangan yang ingin menyajikan informasi dengan tampilan yang serius dan handal.Pendekatan Modern pada Keterbacaan: Meskipun memiliki desain yang serius, IBM Plex Sans tetap memperhatikan keterbacaan. Proporsi huruf yang seimbang dan perhatian terhadap detil membuatnya tetap mudah dibaca, bahkan pada ukuran teks yang kecil.Variasi Bobot yang Lengkap: IBM Plex Sans menawarkan beragam varian bobot mulai dari Thin hingga Bold, memberikan fleksibilitas dalam menciptakan hierarki teks dan menonjolkan elemen tertentu dalam desain aplikasi keuangan.Dukungan Internasional: Font ini menyediakan dukungan karakter yang luas, termasuk aksara dan karakter khusus, sehingga dapat digunakan dalam aplikasi keuangan yang ditujukan untuk pasar global.Konsistensi Desain dalam Keluarga Font IBM Plex: IBM Plex memiliki beberapa varian font yang melibatkan sans-serif, serif, dan monospace. Konsistensi desain antara keluarga font ini memungkinkan penggunaan yang seragam dan kohesif di seluruh aplikasi dan platform. Dengan kombinasi keunikan-keunikan di atas, IBM Plex Sans menjadi pilihan yang kuat untuk digunakan dalam desain aplikasi keuangan, memberikan tampilan yang profesional, modern, dan dapat diandalkan. 9. Inter Nah kalau Inter, ia memiliki kerning yang baik dan desain yang bersahabat, cocok untuk aplikasi dengan tampilan yang bersih dan modern lhoo! Berikut adalah tiga keunikan paling khas dari font Inter: Desain yang Bersih dan Modern: Inter memiliki desain yang bersih dan modern, dengan proporsi huruf yang seimbang dan detail yang terdefinisi dengan baik. Hal ini membuatnya cocok untuk digunakan dalam berbagai konteks desain UI/UX, termasuk aplikasi keuangan yang ingin tampilan yang segar dan modern.Keterbacaan yang Tinggi: Salah satu keunggulan utama Inter adalah keterbacaannya yang tinggi. Desainnya yang proporsional dan jelas membuatnya mudah dibaca, bahkan pada ukuran teks yang kecil atau dalam kondisi pencahayaan yang kurang optimal. Ini sangat penting dalam konteks aplikasi keuangan di mana pengguna sering kali memerlukan akses cepat dan akurat terhadap informasi.Keserbagunaan dalam Berbagai Gaya Desain: Font Inter memiliki keserbagunaan yang tinggi dalam berbagai gaya desain, mulai dari yang minimalis hingga yang lebih berwarna dan berani. Hal ini memungkinkan untuk menciptakan tampilan UI/UX yang sesuai dengan merek dan tujuan aplikasi keuangan tertentu. Oleh karena kombinasi desain yang bersih dan modern ini, keterbacaan yang tinggi, serta keserbagunaan dalam berbagai gaya desain, Inter menjadi pilihan yang populer dan efektif dalam desain aplikasi keuangan, memberikan tampilan yang profesional, mudah dibaca, dan menarik bagi pengguna nih guys! 10. Work Sans Last but not least! Work Sans— Font ini memberikan kesan yang profesional namun tetap mudah dibaca, cocok digunakan untuk aplikasi keuangan yang ingin memberikan tampilan yang serius namun tidak kaku kepada pengguna. Wah menarik yaa? Dan berikut adalah tiga keunikan paling khas dari font Work Sans: Desain yang Bersahabat dan Ramah: Work Sans memiliki desain huruf yang bersahabat dan ramah, dengan sudut-sudut yang lembut dan proporsi yang seimbang. Hal ini membuatnya cocok digunakan dalam berbagai konteks desain UI/UX, termasuk aplikasi keuangan yang ingin memberikan kesan yang menyenangkan bagi pengguna.Kesesuaian dengan Berbagai Ukuran: Font ini dirancang untuk memiliki kesesuaian yang baik dengan berbagai ukuran teks. Baik itu teks kecil seperti pada tombol dan label, maupun teks besar untuk judul atau pengumuman penting, Work Sans tetap mempertahankan kejelasan dan keterbacaan yang tinggi.Kerning yang Proporsional dan Rapi: Work Sans memiliki kerning yang proporsional dan rapi, yaitu jarak antara setiap hurufnya diatur dengan baik. Hal ini membantu memastikan tampilan yang rapi dan mudah dibaca, memberikan pengalaman pengguna yang lebih baik dalam aplikasi keuangan. Lewat kombinasi desain yang bersahabat dan ramah, kesesuaian dengan berbagai ukuran teks, serta kerning yang proporsional dan rapi, Work Sans menjadi pilihan yang efektif dalam desain aplikasi keuangan, memberikan tampilan yang menarik, mudah dibaca, dan menyenangkan bagi user loh! Penutup🎉 Dari Roboto yang modern hingga Work Sans yang bersahabat, keberagaman dalam font UI/UX untuk aplikasi keuangan “menawarkan serangkaian pilihan” yang sesuai dengan berbagai preferensi desain dan kebutuhan fungsional. Dengan memahami keunikan masing-masing font, pengembang dan desainer dapat membuat keputusan yang terinformasi dalam menentukan tampilan visual aplikasi keuangan mereka. Mau coba buat desain keren lainnya dengan font-font di atas? Bisa banget! Yuk kepo-in kelas-kelas gratis UI/UX design di BuildWithAngga! Kamu bisa mengasah skill dan menambah portfolio yang lebih berkualitas lhoo 🤩

Dark Mode pada UI (User Interface) adalah mode tampilan di mana warna background utama UI menjadi gelap atau hitam, sedangkan elemen-elemen antarmuka seperti teks dan ikon menjadi lebih terang atau berwarna kontras. Ini menciptakan kontras yang lebih baik dan mengurangi kecerahan layar, yang bisa mengurangi kelelahan mata dan membuat pengalaman pengguna lebih nyaman, terutama dalam kondisi pencahayaan rendah. Secara sederhana, dark mode adalah skema warna pada interface yang memberikan tampilan teks dan ikon cerah dalam latar belakang yang gelap, menurut Phone Arena. Salah satu alasan kenapa hal ini begitu populer ya tentunya karena desain ini lebih nyaman untuk mata pengguna 🤩 Dibandingkan dengan melihat layar tampilan light mode, memang mata kita akan lebih nyaman dengan dark mode. © https://shaynakit.com/details/kreatop-dashboard-dark-mode-green-v1-website-design Manfaat Menggunakan Dark Mode Dark Mode memiliki beberapa manfaat sederhana seperti: Pengurangan kelelahan mata: Warna gelap pada background dapat mengurangi stres mata dan membuat pengguna lebih nyaman, terutama dalam kondisi pencahayaan rendah.Peningkatan keterbacaan: Kontras yang lebih besar antara teks dan background membuat teks lebih mudah dibaca, terutama untuk orang dengan gangguan penglihatan atau bagi kamu yang menghabiskan banyak waktu di depan layar.Penghematan daya baterai: Latar berwarna gelap menggunakan lebih sedikit energi, khususnya pada perangkat seluler dengan layar OLED atau AMOLED, karena pixel yang menampilkan warna hitam tidak memerlukan daya.Aesthetic & Modern: Dark Mode sering dianggap sebagai pilihan yang lebih modern dan elegan, memberikan tampilan yang berbeda dan menarik bagi kamu sebagai use.Mengurangi gangguan cahaya: Pada malam hari atau dalam situasi pencahayaan rendah, Dark Mode dapat membantu mengurangi kecerahan layar yang mengganggu, membantu user tidur lebih nyenyak dan mengurangi gangguan visual! ©https://shaynakit.com/details/wuyuqi-saas-startup-modern-mobile-dark-ui-design Beberapa kelebihan Dark Mode juga antara lain: Memberi lebih sedikit blue light atau cahaya biru yang ditampilkan dari gadget.Lebih cocok untuk pengaturan cahaya redup sehingga bisa dengan nyaman gunakan gadget di tempat tidur.Menurut beberapa ahli mode gelap dapat membantu orang dengan sensitivitas cahaya atau gangguan penglihatan dibanding yang memiliki kemampuan penglihatan nornal. © https://shaynakit.com/details/kreatop-content-creator-saas-dashboard-dark-mode-design Kekurangan Dark Mode Meskipun Dark Mode memiliki banyak kelebihan, ada beberapa kekurangan yang perlu dipertimbangkan juga yaa! Ketidakcocokan dengan beberapa konten: Dark Mode mungkin tidak cocok untuk semua jenis konten atau aplikasi. Misalnya, untuk aplikasi yang berfokus pada pembacaan teks panjang, pengguna mungkin lebih memilih latar belakang yang cerah untuk keterbacaan yang lebih baik.Pengalaman konsistensi interface: Ketika pengguna beralih antara aplikasi yang mendukung Dark Mode dan yang tidak, pengalaman user dapat menjadi tidak konsisten. Ini terutama terjadi jika ada perubahan tiba-tiba antara dark mode dan mode terang.Tidak cocok untuk kondisi pencahayaan tinggi: Meskipun Dark Mode ideal untuk kondisi pencahayaan rendah, user mungkin menemukan sulit untuk melihat layar dengan jelas dalam kondisi pencahayaan tinggi atau di bawah sinar matahari langsung.Kurangnya standar desain: Tidak ada standar yang ditetapkan untuk implementasi Dark Mode, sehingga pengalamanmu dapat bervariasi antara aplikasi satu dan lainnya. Ini dapat menyebabkan kebingungan atau ketidaknyamanan bagi user.Penurunan kualitas warna: Pada beberapa layar, penggunaan Dark Mode dapat menyebabkan penurunan kualitas warna atau detail gambar karena mode gelap mengurangi kecerahan dan kontras warna. Meskipun demikian, kekurangan ini dapat diatasi dengan perencanaan desain yang cermat dan pengujian yang memadai untuk memastikan Dark Mode memberikan pengalamanmu atau user yang optimal. © https://shaynakit.com/details/tieats-categories-pages-design Kapan Kita Menggunakan Dark Mode? Kita memakai Dark Mode terutama dalam kondisi-kondisi berikut ini nih guys: Saat berada dalam lingkungan dengan pencahayaan rendah, seperti malam hari atau ruangan yang kurang terang, Dark Mode membantu mengurangi kecerahan layar dan menghindari ketegangan mata kita.Saat menggunakan perangkat pada malam hari atau sebelum tidur, Dark Mode membantu mengurangi paparan cahaya biru yang dapat mengganggu ritme tidur dan kualitas istirahat.Pada perangkat cellular, menggunakan Dark Mode dapat membantu menghemat daya baterai, terutama pada layar jenis OLED atau AMOLED, karena piksel hitam tidak menggunakan energi.Beberapa pengguna juga menyukai tampilan estetika dan modern dari Dark Mode, dan memilih untuk menggunakannya sepanjang waktu, terlepas dari kondisi pencahayaan.Ketika user ingin mengurangi kecerahan layar tanpa mengurangi fungsionalitas atau keterbacaan konten, Dark Mode adalah pilihan yang baik untuk menciptakan pengalaman yang nyaman. Nah, Kenapa sih Dark Mode Bagus Untuk Mata? Dark mode dianggap baik untuk mata karena dapat membantu mengurangi ketegangan mata, terutama dalam kondisi pencahayaan rendah. Beberapa alasan mengapa dark mode dianggap baik untuk mata antara lain: Reduce Tingkat Kecerahan Layar: Dark mode mengurangi kecerahan background layar, yang dapat membantu menghindari kelelahan mata. Pengurangan kecerahan ini terutama berguna dalam situasi pencahayaan rendah atau saat menggunakan perangkat pada malam hari.Kontras yang Lebih Baik: Dark mode menciptakan kontras yang lebih baik antara teks atau elemen antarmuka dengan background! Kontras yang lebih tinggi dapat membuat teks lebih mudah dibaca dan meminimalkan ketegangan mata lho!Pengurangan Paparan Blue Light: Dark mode sering kali melibatkan pengurangan paparan blue light dari layar. Blue light dapat mengganggu kualitas tidur. Dengan menggunakan dark mode, terutama pada malam hari, paparan cahaya biru dapat diminimalkan.Peningkatan Keterbacaan: Warna text yang lebih terang pada background gelap dapat meningkatkan keterbacaan. Ini dapat membantu mata fokus dengan lebih baik pada konten, terutama dalam kondisi pencahayaan yang kurang optimal. Meskipun banyak orang merasa lebih nyaman dengan dark mode, preferensi visual dapat bervariasi dari individu ke individu. Yang terpenting adalah memberikan opsi kepada user untuk memilih mode tampilan yang paling sesuai dengan preferensi dan kenyamanan mereka. Kesimpulan! Dalam kesimpulannya, Dark Mode pada UI/UX design membawa sejumlah manfaat yang “signifikan,” termasuk pengurangan ketegangan mata, peningkatan keterbacaan, penghematan daya baterai, dan memberikan estetika modern yang interesting. Pilihan ini menjadi lebih populer karena memberikan pengalaman visual yang nyaman, terutama dalam kondisi pencahayaan rendah atau saat menggunakan perangkat pada malam hari. Meskipun begitu, Dark Mode yang efektif memerlukan perhatian terhadap kontras, konsistensi desain, dan keterbacaan agar dapat memberikan experience kamu yang optimal. Penting juga untuk memberikan opsi kepada pengguna untuk memilih antara Dark Mode dan Light Mode sesuai dengan preferensi mereka sendiri. Dengan memperhatikan aspek-aspek ini, Dark Mode dapat menjadi fitur yang memperkaya pengalaman pengguna dan meningkatkan kenyamanan dalam penggunaan aplikasi atau situs web. Tertarik untuk belanar lebih dalam? Di BuildWithAngga, kamu bisa ikuti roadmap kelas belajar UI/UX gratis! Dan kelas-kelas ini sudah berurutan mulai dari mana kamu harus belajar 😍 See you di kelas ;)

Setelah artikel sebelumnya yaitu Berkenalan Dengan Alpine JS dan Membuat Modal Dengan Alpine JS maka dalam artikel kali ini kita akan membahas studi kasus penggunaannya agar kita memahami keunggulan dari teknologi yang satu ini. Alpine JS sendiri merupakan sebuah lightweight framework Javascript yang dapat kita manfaatkan untuk membuat sebuah interaktif website tanpa harus menggunakan framework seperti React atau Vue. Ketika menggunakan Alpine JS kita dapat dengan mudah langsung menerapkan sifat Javascript kedalam file HTML tanpa perlu menuliskannya secara terpisah. Maka dari itu dalam artikel kali ini kita akan melakukan studi kasus yaitu Fetching Data Menggunakan Alpine JS. So let’s start the code! Persiapan Silahkan kamu buat file HTML dengan nama index.html, kemudian sisipkan kode berikut kedalam file HTML kamu. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tutorial Fetching Data Menggunakan Alpine JS</title> <!-- Import Alpine JS --> <script defer src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js>"></script> <!-- Fonts Google --> <link rel="preconnect" href="<https://fonts.googleapis.com>" /> <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin /> <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap>" rel="stylesheet" /> <link href="<https://fonts.googleapis.com/css2?family=Inter&display=swap>" rel="stylesheet" /> <!-- Tailwind --> <script src="<https://cdn.tailwindcss.com>"></script> <!-- Font Awesome --> <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css>" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> body { font-family: "Poppins", sans-serif; } </style> </head> <body> <div class="container mx-auto h-96 p-3 w-full max-w-screen-md"> <h1 class="font-bold md:text-3xl mb-3">Fetching Data Menggunakan Alpine JS</h1> </div> </body> </html> Akan didapatkan hasil seperti ini: Nothing special, mari kita lanjutkan lebih dalam. Lets’ Code Slicing Komponen Card Setelah mempersiapkan project, kita akan membuat komponen card menggunakan Tailwind CSS, berikut kode yang akan kita gunakan: <div> <div class="grid grid-cols-4 gap-4"> <div> <div class="card h-full w-64 bg-white border rounded-md p-2 flex flex-col justify-between"> <div class="card-image mb-3"> <img src="<https://placeholder.com/100x100>" alt="Product Image" class="w-full rounded-md h-32" /> </div> <div class="card-title"> <h1 class="font-bold">Title</h1> </div> <div class="card-body my-3"> <p class="text-gray-500 my-3 text-xs">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, natus?</p> </div> <div class="card-footer"> <button class="rounded-md py-2 px-5 bg-sky-500 text-white text-xs">See More</button> </div> </div> </div> </div> </div> Akan didapatkan komponen seperti ini: Fetching Data Setelah membuat komponen card, mari kita melakukan proses pengambilan data atau fetching data menggunakan Alpine JS. Link URL endpoint API yang akan digunakan bisa kamu lihat disini, maka akan didapatkan: <https://dummyjson.com/docs/products> Kemudian kita akan melakukan fetching data dengan membuat fungsi bernama fetchProduct dan menggunakan kata kunci fetch yang disertai dengan proses chaining dengan method then: <script> function fetchProduct() { fetch("<https://dummyjson.com/products>") .then((res) => res.json()) .then((result) => { const data = result.products; console.log(data); }); } fetchProduct(); </script> Apabila apabila dijalankan akan didapatkan hasil sebagai berikut: Tapi sampai disini kita belum menampilkan data tersebut kedalam komponen card yang sudah dibuat sebelumnya. Langkah selanjutnya mari tampilkan data tersebut menjadi sebuah tampilan yang dimengerti pengguna. Tampilkan Ke Pengguna Untuk menampilkan data tersebut kita harus memindahkan proses logic sebelumnya kedalam container / pembungkus dari komponen card sebelumnya. Untuk lebih jelasnya perhatikan kode berikut: <div x-data="{ products: [] }" x-init="fetch('<https://dummyjson.com/products>') .then(response => response.json()) .then(data => { products = data.products })" > <!-- Komponen Card --> </div> Pada kode tersebut kita menggunakan dua directive yang disediakan oleh Alpine JS, yaitu: x-data berfungsi untuk menampung data logic Javascript agar berjalan langsung pada tag HTML tersebut. Pada kode tersebut kita membuat satu variabel dengan nama products yang bertipe data array. Variabel ini bertujuan untuk menampung data hasil fetching pada fungsi tersebut. x-init bertujuan untuk melakukan inisialisasi sebelum komponen tersebut di load. Pada kode tersebut kita menyisipkan fungsi fetch yang bertujuan untuk mengambil data dari endpoint API yang sudah kita siapkan sebelumnya. Kemudian sebelum halaman browser ditampilkan, Alpine JS akan melakukan proses fetching di belakang layar kemudian hasil dari fetching tersebut ditampung kedalam variabel products yang sudah dideklarasikan di awal. Langkah terakhir kita akan melakukan proses perulangan dari data tersebut agar bisa ditampilkan menjadi sebuah halaman yang dapat dimengerti pengguna. Untuk mencapai hal tersebut kita akan menggunakan directive dari Alpine JS yaitu x-for. <div class="grid grid-cols-4 gap-4"> <template x-for="product in products"> <div class="card bg-white border rounded-md p-2 flex flex-col justify-between"> <div class="card-image mb-3"> <img x-bind:src="product.thumbnail" x-bind:alt="product.description" class="w-full rounded-md h-32" /> </div> <div class="card-title"> <h1 class="font-bold text-md" x-text="product.title"></h1> </div> <div class="card-body my-3"> <p class="text-gray-500 my-3 truncate text-sm" x-text="product.description"></p> </div> <div class="card-footer"> <button class="rounded-md py-2 px-5 bg-sky-500 text-white">See More</button> </div> </div> </template> </div> Pada kode tersebut kita melakukan proses perulangan dari variabel products kemudian ditampung kembali dalam variabel product. Apabila kamu perhatikan, kita menggunakan directive bernama x-bind untuk menampilkan gambar berdasarkan data yang disediakan oleh endpoint tersebut. ... <img x-bind:src="product.thumbnail" x-bind:alt="product.description" class="w-full rounded-md h-32" /> ... Directive ini bertujuan agar kita dapat mencetak nilai dari Javascript langsung kedalam atribut HTML yang diinginkan. Kita juga menggunakan directive x-text untuk mencetak langsung data kedalam tampilan HTML. Apabila kita cek hasilnya akan didapatkan seperti ini: Selamat! kamu telah berhasil melakukan proses fetching dengan menggunakan Alpine JS dan langsung menampilkannya kepada pengguna tanpa harus menggunakan framework besar seperti React atau Vue. Kesimpulan Cukup simple bukan? Ketika menggunakan framework ini, kita dapat dengan mudah membuat website yang dinamis hanya dengan memanfaatkan HTML sebagai file utama dan tentunya ini sangat mempercepat waktu development website kamu. Oiya satu lagi, apabila kamu ingin mendalami dunia web development lebih jauh, yuk bergabung dalam kelas premium yang disediakan oleh BuildWithAngga. Di dalamnya kamu dapat belajar lebih banyak studi kasus dan dapat menambah portfolio kamu untuk menunjang karir yang akan datang. Mari bergabung dan sampai jumpa dikelas!