Tips All

BuildWith Angga saat ini ingin membantu kamu yang lebih suka belajar melalui tulisan seperti ebook salah satu contohnya, kami baru saja merilis ebook gratis untuk kamu yang ingin belajar materi UI design menggunakan software Figma. BuildWith Angga juga akan memberikan hadiah sebesar Rp 50.000 untuk 20 orang yang beruntung yang telah menyelesaikan ebook dengan baik. Kriteria Menjadi Orang Beruntung Menyelesaikan ebook dengan software FigmaMengirimkan link projek Figma yang bisa diakses secara publikMemberikan kritik dan saran yang mendetail (semakin detail semakin bagus) Oke Saya Mau Coba, Gimana Alurnya? Pelajari ebook UI Design terbaru kami yang satu ini buildwithangga.com/ebook/belajar-uiux-figma-design-medication-home-screenSubmit feedback kamu pada form yang terdapat pada hal. 8 dari ebook tersebutBerdoa semoga bisa jadi orang yang beruntung Informasi Lainnya Batas terakhir submit feedback adalah tanggal 30 Desember 202220 orang beruntung akan diumumkan pada tanggal 7 Januari 2023Jika sudah submit dan belum percaya diri karena kurang mendetail namun ingin coba submit ulang lebih baik lagi maka kami perbolehkan Jika ada pertanyaan lainnya boleh DM via Instagram BuildWith Angga.

BuildWith Angga saat ini bersedia untuk memberikan akses kelas Premium & group konsultasi belajar dengan mentor yang expert, kamu berhak mendapatkan 3 akses kelas Premium secara gratis yang bisa dipelajari tanpa batasan waktu. Bantuan dari BWA kali ini hanya diberikan khusus untuk mereka yang baru saja terkenda dampak laid off yang mungkin ingin upgrade skills, mempelajari skills baru, atau switching karir di perusahaan baru nantinya. Bantuan Dampak LaidOff Dari BuildWith Angga Loading… Bantuan ini dibataskan dengan kuota 100 orang pertama yang submit oleh karena itu silahkan bagikan kepada rekan terdekat kamu yang membutuhkannya sehingga karirnya akan menjadi lebih baik lagi ke depannya. BuildWith Angga dan mentor expert di sini berharap bahwa bantuan ini akan bermanfaat untuk kamu yang ingin switching karir dan mencari pekerjaan yang lebih baik lagi pada perusahaan baru nantinya, silahkan claim bantuan tersebut di atas dan semoga bermanfaat. Perfect place to begin your career development. BuildWith Angga.

Hello people with spirit of learning! Pasti kalian mengetahui banyak aplikasi yang kita gunakan rata-rata mempunyai tombol navigasi dibawahnya, tombol tersebut bernama Bottom Navigation Bar. Disini kita akab belajar cara membuat Bottom Navigation Bar atau biasa disebut NavBar sederhana seperti gambar diatas. Namun sebelumnya, kita mendownload assetnya terlebih dahulu disini. Sebelum membuat Bottom Navigation Bar, Kita download assetsnya terlebih dahulu. Berikut caranya : 1) Kunjungin website Shaynakit.com lalu pilih Login 2) Masukkan Email dan Password 3) Lalu pilih Mobile Design https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image3.png 4) Cari design yang berjudul “Doctor Consultation UI KIT” https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image5.png 5) Buka website figma.com dan import file figma yang sudah kita download https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image6.png 6) Sesudah import, klik icon pada Bottom Navigation nya, Lalu export masing-masing icon https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image7.png 7) Terakhir, kita create folder dalam project flutter kita bernama “assets”. Lalu pindahkan icon yang sudah kita export ke dalam folder assets. https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image8.png https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image9.png Untuk cara menambahkan assets ke dalam flutter, bisa membaca dokumentasi berikut : Cara Menambahkan Assets pada Flutter. Kita baru saja mengikuti tutorial cara mendownload template di website Shaynakit.com. Yuk masuk ke tutorial membuat Bottom Navigation Bar sederhana. Berikut caranya : 1) Menambahkan Widget Scaffold dan diisi dengan properti bottomNavigationBar Scaffold( bottomNavigationBar: ), Langkah awal untuk membuat Bottom NavBar adalah menambahkan widget Scaffold. Lalu dalam Scaffold tambahkan properti bottomNavigationBar. 2) Menambahkan Widget BottomNavigationBar Scaffold( bottomNavigationBar: BottomNavigationBar( items: [], )), Langkah kedua adalah menambahkan widget BottomNavigationBar pada properti bottomNavigationBar. pada Widget BottomNavigationBar, kita tambahkan properti items. fungsi properti items adalah untuk menempatkan Widgets yang bertipe BottomNavigationBarItems. Jadi selain widget BottomNavigationBarItems, maka akan terjadi logic error. 3) Isi Properti List Items dengan BottomNavigationBarItems https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image10.png Scaffold( bottomNavigationBar: BottomNavigationBar(items: [ BottomNavigationBarItem( icon: Image.asset( 'assets/doctor.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/notification.png', width: 24, ), label: ''), ])), Langkah ketiga adalah menambahkan BottomNavigationBarItem. Pada BottomNavigationBarItem, ada 2 properti yang wajib dipakai. Yaitu icon dan label. icon untuk menambahkan asset gambarnya atau iconnya dan label untuk penamaan navigasinya. Untuk icon kita isi dengan widget Image.asset lalu arahkan dengan path asset kita tempatkan. dan label disini kita isi dengan String kosong saja. Kenapa tetap menambahkan label ? bila kita tidak menambahkan label, maka akan terjadi logic error. Note : Properti List items harus kita isi minimal 2 widget yang bertipe BottomNavigationBarItem. Mengapa ? nanti akan terjadi logic error jika kurang dari 2, Berikut pesan errornya. https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image11.png 4) Menambahkan 2 Widget BottomNavigationBarItem https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image12.png Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Image.asset( 'assets/doctor.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/notification.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/bookmarked.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/ic_profile.png', width: 24, ), label: ''), ], )), Disini kita hanya menambahkan widget BottomNavigationBarItemnya saja dan mengubah iconnya saja. 5) Menambahkan Properti Type pada BottomNavigationBar https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image13.png Scaffold( bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, items: [...], )), Pada gambar sebelumnya, kita melihat bahwa align icon home tidak rata dengan icon yang lainnya dan ujung kanan dan ujung kiri jaraknya tidak sama. Dengan itu pada Scaffold kita tambahkan properti type. Dan kita isi dengan Widget BottomNavigationBarType.fixed. Kita baru saja membuat Bottom Navigation Bar sederhana. fungsi dari Bottom Navigation bar atau biasa disebut dengan Bottom NavBar adalah untuk berpindah ke suatu halaman / fitur ketika kita menekan tombol navigasi yang ada. Semoga bermanfaat dan terima kasih!

Dalam pembuatan / pengembangan aplikasi, Kita membutuhkan widget-widget untuk membuat aplikasi pada Flutter. Salah satunya adalah Appbar Application Bar. Disini kita akan membuat Appbar sederhana. 1) Menambahkan Widget Appbar Scaffold( appBar: AppBar() ) Yang Pertama, Kita harus menambahkan widget Scaffold dan property appBar kita tambahkan dengan widget Appbar(). Ini adalah Langkah dasar menggunakan Appbar. 2) Menambahkan Leading, Title dan Action Scaffold( appBar: AppBar( leading: IconButton( onPressed: () {}, icon: Icon( Icons.list_rounded, size: 30, )), title: Text('Home'), centerTitle: true, actions: [ IconButton(onPressed: () {}, icon: Icon(Icons.notifications)) ], ), ), Yang kedua menambahkan Leading, Title, dan Action. Leading adalah sisi kiri menu sebelum title yang berfungsi sebagai tombol navigasi. Leading ini bersifat opsional ya, Jadi jika kamu tidak menggunakan Leading maka sisi kiri akan diisi dengan Title. Untuk membuat Title berada di tengah, maka gunakan CenterTitle dan set menjadi True. Fungsi property Action pada Appbar adalah dapat menambahkan widget-widget yang akan diletakkan pada sisi kanan Appbar secara horizontal seperti baris. Biasanya digunakan untuk menampilkan tombol menu yang sering digunakan seperti notif, search, dll. Pada bagian Property Action yang bertipe List, Saya isi dengan widget IconButton. Penulisannya code nya bisa dicontoh seperti yang diatas. 3) Mengubah warna pada AppBar Scaffold( appBar: AppBar( backgroundColor: Colors.purple, leading: IconButton( onPressed: () {}, icon: Icon( Icons.list_rounded, size: 30, )), title: Text('Home'), centerTitle: true, actions: [ IconButton(onPressed: () {}, icon: Icon(Icons.notifications)) ], ), ), Yang terakhir, Jika kalian ingin mengubah warna, maka pada AppBar gunakan property BackgroundColor. Disini aku mengubah warna Appbar nya menjadi ungu. Kalian bisa ubah sesuai keinginan. Kita baru saja menerapkan AppBar yang sederhana dalam project flutter kita. Kegunaan dari Appbar atau Application Bar adalah sebagai menu petunjuk dan menampilkan beberapa navigasi. Semoga bermanfaat dan Terima kasih!

Hello people with spirit of learning! Flutter dikenal dengan beragam widgets yang dapat membangun UI pada aplikasi kita. Disini saya akan menjelaskan Widget yang wajib kamu tahu yaitu Row dan Column (Baris dan Kolom). Disini kita akan mencoba menggunakan kedua Widget ini dengan Row didalam Column. Step 1 : Menambahkan Widgets Column Yang pertama kita menambahkan widget column terlebih dahulu. Step ini adalah langkah awal untuk membuat column. Begitu juga dengan membuat Row. Step 2 : Isi dengan Widget Text dan Row Langkah kedua kita isi Widget column dengan Widget text dan Row. Disini saya akan mengisi Widget Column dengan 3 Row. Dan Widget text-nya akan kita gunakan sebagai tanda urutan barisnya. Step 3 : Widget Row kita isi dengan widget apapun Langkah ketiga adalah Widget row akan diisin dengan Apapun. Disini saya isi dengan container saja. Untuk Container-nya kita styling terlebih dahulu ya. Kamu juga bisa style Container-nya sesuai keinginan kamu. Gunakan Sizebox untuk memberi jarak antar containernya. Step 4 : Tambahkan CrossAxisAligment pada column Langkah Terakhir adalah menambahkan CrossAxisAligment pada colum, Fungsi CrossAxisAligment pada column adalah menempatkan posisi widget yang ada di column secara horizontal. Disini gunakan CrossAxisAligment.start agar semua widgetnya menjadi rata kiri / Align left. Kita baru saja menyelesaikan Column yang isinya terdapat 3 Row. Dalam membangun sebuah project pada flutter, Kedua widget ini sering dipakai untuk Menyusun widget-widget yang akan dipakai sesuai keinginan kita. Semoga bermanfaat dan Terima kasih!

Elon Musk dikenal dengan cara berpikirnya yang hebat, selain itu juga ia dapat mengerjakan lebih dari satu hal-hal besar secara bersamaan. Pada acara kali ini Elon akan memberikan beberapa saran penting untuk kita bisa meningkatkan kualitas diri dari cara kita berpikir, bekerja, membangun sesuatu dan hal-hal bermanfaat lainnya. Intergenerational Dialogue for Our Emerging Future G20 Critical Thinking Berpikir kritis adalah hal yang perlu diajarkan kepada setiap orang sehingga mereka bisa menjadi lebih kreatif dalam memecahkan sebuah masalah, sebagai contohnya Elon Musk saat ini menjalankan misinya pada perusahaan Tesla untuk membuat dunia menjadi lebih baik lagi dalam segi transportasi dan juga energi (sustainable technology). Artificial Intelligence Setelah kita belajar berpikir kritis maka bisa kita lanjutkan untuk mulai mempelajari Aftificial Intellegence (A.I) untuk membantu manusia bekerja lebih cepat dan ringan. Robot yang diberikan kecerdasan buatan dapat membuat manusia memiliki waktu luang lebih banyak untuk mempelajari atau menikmati hidup lebih baik. Curiousity Selama kita hidup maka kita perlu memiliki rasa penasaran yang tinggi tentang dunia ini, bagaimana jika kita membuat A atau bagaimana caranya meningkatkan perfomance pada alat B. Tujuan utamanya adalah membuat kehidupan menjadi lebih baik, dengan seperti itu maka kita akan tertantang untuk belajar hal baru pada setiap harinya, ini adalah motivasi yang kuat. Kesimpulan Beberapa saran yang diberikan oleh Elon Musk pada video di atas adalah perspektif dari seorang yang memiliki expertise pada teknologi dan jika kamu mencintai teknologi, mungkin bisa mulai mengikuti beberapa saran dari Elon Musk.

Shortcut Figma dapat membantu kita bekerja lebih cepat lagi sebagai ui/ux designer ketika mendesain aplikasi atau sebuah website. Pada kali ini saya akan berbagi beberapa shortcut yang sering saya gunakan agar mendesign lebih produktif dan hasilnya juga sangat baik. 1) Shortcut Figma 'F' Digunakan untuk memilih dan membuat artboard tempat kita bekerja, misalnya kita ingin mendesain aplikasi iOS maka tinggal tekan F pada keyboard lalu pilih iPhone. 2) Shortcut Figma 'T' Apabila kita ingin menambahkan Text pada design kita maka dengan menekan keyboard T kita bisa langsung membuat paragraph untuk kebutuhan design. 3) Shortcut Figma 'R' Membuat background atau button dapat kita lakukan dengan cepat dan mudah dengan menggunakan shortcut R (rectangle) pada software Figma. 4) Shortcut Figma 'P' Biasanya untuk membuat chart maka kita butuh tools yang fleksibel untuk menggambar sebuah garis atau shape, maka dari itu saya mengandalkan shortcut P atau Pen tool pada Figma. 5) Shortcut Figma 'Shift V' dan 'Shift H' Kita dapat mengubah posisi sebuah Icon secara Vertical dengan Shift V atau apabila ingin horizontal bisa gunakan Shift H pada software Figma.

Belajar UX dapat dikatakan sesuatu yang tidak mudah namun di sini saya akan berbagi hal penting yang perlu kita ketahui apabila kita sedang persiapan awal untuk belajar ux design di tahun 2023 dan seterusnya nanti. UX designer adalah karir yang memiliki bayaran tinggi di Indonesia atau luar negeri, pekerjaan UX designer adalah memastikan bahwa pengguna dapat dengan mudah menggunakan aplikasi atau website buatan dari perusahaan tempat kita bekerja. Jika kamu ingin mulai belajar UX design maka wajib sekali untuk mengikuti setiap materi di bawah in yang saya jabarkan khusus untuk pemula seperti kamu saat ini, let's get started. Meningkatkan Rasa Penasaran Sebagai UX Designer Sebelum terjun mendesain aplikasi pertama kita maka ada hal penting lainnya yang perlu kita lakukan, kita bisa mulai dengan menggunakan aplikasi buatan perusahaan lain misalnya Tokopedia, Traveloka, Tiket, TIX, atau aplikasi lainnya. Tujuan utamanya adalah untuk mempelajari setiap pengalaman pada aplikasi tersebut yang nantinya bisa kita implementasikan juga dari segi user-flow, experience design, dan visual design kepada aplikasi buatan perusahaan kita. Ketika menggunakan aplikasi perusahaan lain maka pada benak pikiran kita berpikir kurang lebih seperti ini 'kira-kira kenapa fitur A berada di halaman B ya?' atau mungkin bisa seperti ini 'kenapa pengguna perlu login dulu untuk membeli tiket ya?' Mempraktikkan Heuristic Evaluation Pada Website atau Mobile Apps Setelah kita berhasil menggunakan lebih dari 10 aplikasi buatan perusahaan lain, lalu kita juga sudah bisa merasakan experience design dari setiap aplikasi tersebut. Kini waktunya untuk mempraktikkan heuristic evaluation pada UX design yang di mana tujuan utamanya adalah membuat beberapa peningkatkan pada design dari website atau aplikasi. Misalnya kita uji coba membeli tiket pesawat melalui Traveloka lalu memilih pembayaran menggunakan kartu kredit, setelah itu kita merasakan pengalaman membayar yang masih di bawah harapan kita sebagai pengguna aplikasi Traveloka. Oleh karena itu kita perlu mencatat beberapa hal yang bisa kita tingkatkan kembali bedasarkan dari pengalaman yang kita rasakan sebelumnya, contohnya seperti ini: "Tadi kan saya bayar pakai kartu kredit, lalu saya lihat tidak ada pilihan apakah akan langsung bayar lunas 100% atau bisa mencicil selama beberapa bulan. Jadi, saya kepikiran untuk meningkatkan dan membuat fitur tersebut pada design aplikasi perusahaan saya nantinya". Di atas adalah salah satu contoh kecil dari mengimplementasikan teknik heuristic evaluation pada UX design pada aplikasi Traveloka, kamu juga bisa mempraktikkannya pada aplikasi lainnya yang mungkin menarik untuk Mempelajari Software Design Seperti Whimsical dan Figma Kita sudah mencatat beberapa hal yang perlu ditingkatkan di dalam aplikasi Traveloka, Tiket, Tokopedia, dan aplikasi lainnya. Sudah waktunya untuk kita mempelajari salah satu software design yang dapat membantu kita untuk membuat projek design pertama kita. Kamu bisa mulai mencoba software seperti Figma atau Whimsical yang dapat digunakan secara gratis, selamanya. Whimsical sangat cocok untuk membuat wireframe atau gambaran kasar dari design aplikasi yang akan kita kerjakan, sedangkan Figma cocok untuk difokuskan pada tahap visual design dan prototype. Berikut beberapa kelas online gratis yang bisa diikuti rekomendasi untuk mempelajari kedua software tersebut di BuildWith Angga: Belajar membuat Wireframe dengan WhimsicalBelajar tools dasar dan design aplikasi Travel dengan Figma Kolaborasi Dengan Developer dan Team Marketing Apabila kamu sudah berhasil design menggunakan software Figma dan Whimsical maka kamu bisa coba diskusi dengan developer atau programmer yang berada di perusahaan tempat kamu bekerja sebagai UX designer. Tujuan dari diskusi tersebut adalah memberikan insight tambahan untuk kamu memahami bagaimana nantinya design yang sudah kamu kerjakan akan diimplementasikan kepada coding atau disebut dengan tahap development. Setelah tahap development selesai maka aplikasi atau website siap digunakan oleh pengguna yang sesuai dari customer persona yang telah kita rancang sebelumnya, dari situ nantinya bisa kita lanjutkan untuk meminta feedback kepada pengguna terkait hal apa saja yang bisa ditingkatkan kembali. Di BuildWith Angga, Belajar UX Tanpa Mengeluarkan Biaya Kamu telah mempelajari beberapa hal penting di atas dan apabila kamu sudah berminat untuk belajar lebih tentang UX design maka saya dapat sarankan untuk mengikuti beberapa kelas online gratis yang tersedia di BuildWith Angga.

Figma adalah software design yang digunakan untuk mendesain website, aplikasi mobile, aplikasi jam tangan, poster event, aplikasi desktop, dan bisa juga untuk design content marketing pada kebutuhan Instagram kita. Kali ini kita akan membahas beberapa langkah utama apabila kita ingin belajar software Figma sebagai seorang UI/UX designer mulai dari awal sampai bisa menghasilkan sebuah karya yang digunakan untuk modal bekerja. 1) Mempelajari Basic Tools Software Figma Sebagai materi dasar mungkin kita bisa mempelajari terlebih dahulu basic tools yang tersedia pada software Figma seperti pen tool, rectangle, frame tool, text tool, dan juga color scheme. Sehingga hal tersebut dapat memberikan gambaran awal tentang software Figma. Kita bisa mulai dari memilih jenis artboard yang akan kita kerjakan, apakah untuk website atau mobile apps design. Setelah itu kita dapat bereksplorasi dengan tools lainnya untuk membuat komponen dasar pada user-interface design. 2) Design Beberapa Komponen Dasar User-Interface Agar proses belajar Figma lebih cepat dan mudah serta juga terarah, maka kita perlu memiliki sebuah tujuan utama. Di sini, saya bisa sarankan untuk kamu mencoba mendesign komponen dasar pada user-interface design seperti button, icon, dan juga form login. Pada software Figma, kita juga dapat membuat sebuah reusable component yang di mana setelah komponen tersebut selesai kita design maka dapat kita gunakan pada seluruh projek design kita dan apabila ada perubahan maka kita hanya perlu mengubahnya sekali pada master component lalu akan berimbuh kepada component lainnya. 3) Amati, Tiru, Modifikasi Design Buatan Orang Lain Sebelumnya kita telah belajar Figma dalam menguasai basic tools dan membuat beberapa komponen dasar pada user-interface, selanjutnya kita perlu membuat sebuah projek design secara keseluruhan (untuk website atau mobile apps). Kita bisa menggunakan Dribbble sebagai tempat mencari inspirasi design buatan orang lain lalu kita bisa mengikuti design tersebut dan mendesain ulang kembali menggunakan software Figma, karena dengan begitu proses belajar Figma menjadi lebih asik dan terarah. Kesimpulan Figma sebenarnya mudah digunakan apabila kita pernah menggunakan Adobe XD, Photoshop, atau juga Sketch App, dan apabila kamu belum pernah menggunakan software design lain sebelumnya maka silahkan ikuti beberapa langkah di atas untuk belajar Figma sesuai dengan arahan yang dilakukan oleh UI/UX designer lainnya.

Dalam flutter, ada banyak package yang bisa kita pakai agar mempermudah dan mempercepat pekerjaan kita dalam mengembangkan aplikasi. Kita bisa mencari package yang kita butuhkan di website pub.dev. Disini saya ingin membahas 5 package flutter yang sering digunakan oleh Flutter Developer. 1) Google Fonts Link untuk mengakses package Google Fonts : Package Google Fonts. Package ini berisi fonts dari Google Fonts. Kita bisa menggunakannya agar tampilan teks bisa menjadi lebih menarik. Dalam package ini, ada banyak macam font yang kitab bisa pilih sesuai style yang kita inginkan. 2) Youtube Player IFrame Link untuk mengakses package Youtube Player IFrame: Package Youtube Player IFrame. Package yang kedua yaitu Youtube Player IFrame. Package ini berfungsi untuk memutar atau streaming video youtube pada aplikasi kita. 3) Email Validator Link untuk mengakses package Email Validator : Package Email Validator. Package yang ketiga yaitu Email Validator. Fungsi dari package ini ialah untuk memvalidasi apakah textfield yang kita isikan berupa email atau yang lain. 4) Google Sign in Link untuk mengakses package Email Validator : Package Email Validator. Yang keempat yaitu Google Sign in. Fungsi dari package ini menambahkan fitur login / sign in dengan menggunakan account google. Dengan ini, kita bisa menggunakannya pada IOS dan Android. 5) Shimmer Yang terakhir yaitu shimmer. Fungsi package ini memberikan efek kilauan Ketika aplikasi kita sedang loading agar tampilannya menjadi lebih menarik seperti contoh gambar diatas. Dan, inilah 5 package yang sering digunakan oleh Flutter Developer agar aplikasi yang kita buat semakin menarik.Semoga bermanfaat dan terima kasih!