Tips All

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!

Untuk kamu yang sedang memulai belajar CSS, berikut ini cheatsheet/panduan untuk mempermudah kamu ketika belajar link Link Element Tag pada dokumen HTML digunakan untuk meng-import resources tambahan seperti file CSS yang di dalamnya memiliki properti seperti href, rel, dan type. href digunakan sebagai URL lokasi file CSS tersebutrel digunakan untuk mendefinisikan hubungan antara HTML dan CSStype digunakan untuk mendefinisikan jenis file yang akan diimport Kegunaan CSS CSS (Cascading Style Sheets), adalah bahasa yang digunakan dengan mengombinasikan HTML yang menyesuaikan dengan elemen HTML yang ditampilkan. CSS digunakan untuk styling dengan tujuan mempercantik dan menata tampilan website. Menulis CSS pada File Terpisah Kode CSS dapat ditulis dalam filenya sendiri untuk memisahkannya dari kode HTML. Ekstensi untuk file CSS adalah .css. Extensi Ini dapat ditautkan ke file HTML menggunakan tag pada bagian Menulis CSS Dalam File HTML Kode CSS dapat ditulis pada file HTML dengan menyertakan kode dalam tag style . Kode yang terdapat tag style akan terbaca sebagai sintaks CSS. h1 { color: blue; } Inline Styles CSS Style dapat langsung ditambahkan ke elemen HTML dengan menggunakan atribut style di tag pembuka elemen. Setiap mendeklarasikan style, maka diakhiri dengan titik koma. Style yang ditambahkan dengan cara ini dikenal sebagai Inline Styles. Centered text Blue, 18-point text Memisahkan kode HTML dari CSS Memisahkan kode HTML dari CSS merupakan hal yang sering dilakukan. Hal ini memudahkan untuk memlihara sebuah kode dengan menyimpan sintaks untuk setiap file terpisah. Setiap perubahan pada konten maupun styling dapat dilakukan di file masing-masing. Class and ID Selectors Class pada CSS dapat digunakan kembali dan diterapkan ke banyak elemen. Class selectors dilambangkan dengan titik . diikuti dengan nama Class. ID Selectors CSS harus bersifat unik dan hanya digunakan untuk menata satu elemen. Selectors ID dilambangkan dengan hastag # diikuti dengan nama id. /* Selects all elements with class="column" */ .column { } /* Selects element with id="first-item" */ #first-item { } CSS Selectors Grup Menyesuaikan/menyocokkan beberapa pilhan dengan aturan CSS yang sama menggunakan comma-separated list. Pada contoh ini, teks untuk h1 dan h2 diatur menjadi warna merah. h1, h2 { color: red; } Rantai Selector CSS Selectors menentukan himpunan elemen yang menerapkan kumpulan aturan CSS. Misalnya, untuk memilih semua elemen , selector p dapat digunakan untuk membuat aturan styling. Selector Berantai CSS Selector dapat dirantaikan sehingga sekumpulan aturan hanya berlaku untuk elemen yang cocok dengan semua kriteria. Misalnya, untuk memilih elemen yang juga memiliki class section-heading, maka selector h3.section-heading juga dapat digunakan. /* Select h3 elements with the section-heading class */ h3.section-heading { color: blue; } /* Select elements with the section-heading and button class */ .section-heading.button { cursor: pointer; } Tipe Selector CSS Selector tipe CSS digunakan untuk mencocokkan semua elemen dari jenis atau nama tag yang diberikan. Tidak seperti sintaks HTML, mereka tidak menyertakan tanda kurung siku saat menggunakan tipe selector untuk nama tag. Saat menggunakan tipe selector, elemen dicocokkan terlepas dari tingkat penumpukannya dalam HTML. /* Selects all tags */ p { } Selector Class CSS Selector CSS mencocokkan elemen berdasarkan konten atribut class mereka. Untuk memilih elemen yang memiliki calendar-cell sebagai nilai atribut class, a . perlu ditambahkan terlebih dahulu. .calendar-cell { color: #fff; } Atribut HTML dengan beberapa nilai Dalam sebuah atribut HTML, dapat memiliki beberapa nilai atribut. Beberapa nilai atribut dipisahkan oleh spasi di antara setiap atribut. Selector Specificity Specificity adalah sistem peringkat yang digunakan ketika ada beberapa nilai properti yang conflict yang menunjuk ke elemen yang sama. Saat menentukan aturan mana yang akan diterapkan, maka selector dengan kekhususan tertinggi yang menang. Jenis selector yang paling spesifik adalah selector ID, diikuti oleh selector class, diikuti oleh type selector. Dalam contoh ini, hanya color: blue yang akan diimplementasikan karena memiliki selector ID, sedangkan color: red memiliki type selector. h1#header { color: blue; } /* implemented */ h1 { color: red; } /* Not implemented */ CSS ID Selectors Selector ID CSS mencocokkan elemen berdasarkan konten atribut id mereka. Nilai atribut id harus unik di seluruh DOM. Untuk memilih elemen yang memiliki job-title sebagai nilai atribut id, # perlu ditambahkan. #job-title { font-weight: bold; } CSS descendant selector Kombinator CSS descendant selector digunakan untuk mencocokkan elemen yang diturunkan dari selector lain yang cocok. Mereka dilambangkan dengan satu spasi antara setiap selector dan descendant selector. Jadi, Semua elemen yang cocok dipilih terlepas dari tingkat bersarang di HTML. div p {} section ol li {} Belajar Design Website

Flutter hadir untuk membantu developer dalam mengembangkan aplikasi iOS dan Android hanya dalam sekali ngoding, hal ini dapat membantu perusahaan besar maupun Startup untuk tumbuh lebih cepat dengan biaya yang rentan lebih murah karena tidak perlu merekruit developer yang berbeda (misalnya untuk Android atau iOS). Setelah rilis Flutter versi 3 maka semakin banyak juga developer yang akhirnya memutuskan untuk investasi waktu dan perhatian mereka untuk memulai belajar Flutter dengan cara membangun projek sederhana atau mengikuti projek yang sudah disediakan oleh kelas online. Beberapa Pilihan Kursus Online Belajar Flutter Untuk Pemula Kelas Flutter Fundamentals Memulai mengenal beberapa komponen utama untuk membangun aplikasi iOS dan Android, kursus online ini sangat cocok untuk kamu yang belum mengenal apa itu Flutter dan Dart sehingga nanti kedepannya bisa lebih mahir lagi dalam membangun aplikasi. Kelas Flutter for Designer Terkadang kita sebagai Developer akan membuat aplikasi bedasarkan design yang telah disediakan oleh designer, pada kursus online ini kita akan belajar proses slicing design dari Figma ke development menggunakan Flutter dan Dart. Kelas Flutter Untuk Bangun Website Selain untuk membangun aplikasi iOS dan Android, maka kita bisa menggunakan Flutter untuk membangun website yang nantinya digunakan untuk seperti memesan tiket hotel, menonton film favorite, atau juga berjualan online. Silahkan dipelajari ketiga kelas di atas secara gratis, kursus online tersebut dapat membantu kamu untuk memulai karir sebagai mobile developer menggunakan Flutter dan Dart. Kunjungi Instagram BuildWith Angga untuk mendapatkan informasi lebih update.

Zaman sudah cukup canggih dan banyak sekali profesi baru yang telah hadir semenjak awal tahun 2018 di mana startup baru mulai bermunculan di dalam atau luar negeri Indonesia. Beberapa pekerjaan berikut juga bisa dikerjakan dari mana saja tanpa harus datang ke kantor pada setiap harinya, biasanya pekerjaan ini disebut dengan remote job. Saya pribadi semenjak tahun 2017 sudah mulai bekerja dari mana saja dan bekerja dengan beberapa perusahaan dari luar seperti Malaysia, China, Canada, USA, Japan, dan negara-negara lainnya. Manfaat utama bekejra dengan perusahaan dari luar Indonesia adalah memberikan kita penghasilan yang lebih besar dibandingkan bekerja di startup atau perusahaan dalam negeri. Copywriter Saat ini perusahaan mempromosikan jasa atau produk mereka melalui sosial media seperti TikTok, Instagram, YouTube, atau platform lainnya. Peran copywriter sangat penting untuk memikat hati calon customer yang akan menggunakan jasa atau produk dari perusahaan tersebut. Pada dasarnya perusahaan tidak dapat berbicara langsung kepada calon customer selain melalui kata-kata, oleh karena itu copywriting yang ditulis wajib sesuai dengan apa yang dipromosikan dan menggunakan kalimat yang menarik untuk dipahami calon customer. UI/UX Designer Startup yang sudah mendapatkan investasi dari angel investor atau venture capital akan membutuhkan banyak sekali UI/UX Designer untuk merombak design yang mereka miliki sebelumnya. Tujuan utamanya adalah agar pengguna lebih mudah lagi ketika menggunakan aplikasi atau website dari perusahaan tersebut. Menggunakan software andalan seperti Figma, Principle, Dribbble, mereka dapat menciptakan sebuah design yang menarik dan sekaligus membantu pengguna untuk menyelesaikan masalah mereka pada setiap harinya seperti memesan ojek online atau membeli tiket pesawat. Software Engineer Tanpa adanya peran seorang software engineer maka design dan copywriting yang telah disediakan tidak akan digunakan dengan baik oleh pengguna atau calon customer. Software engineer membantu perusahaan untuk membangun aplikasi dan website yang nantinya digunakan oleh customer untuk membeli sebuah produk secara online. Anda dapat memulai karir software engineer ini dengan cara memahami bagaimana algoritma di dalam sebuah software itu bekerja, lalu bisa melanjutkan untuk mempelajari salah satu bahasa pemrograman yang menjadi rekomendasi Anda yaitu adalah Python. Kesimpulan Selama Internet masih berjalan dengan baik maka beberapa pekerjaan di atas akan terus tetap dibutuhkan dan kesempatan untuk mendapatkan gaji puluhan juta juga akan lebih banyak, saat ini keputusan ada pada diri kita masing-masing apakah kita ingin mulai belajar dari awal kembali atau menerima nasib yang sudah kita miliki saat ini. Jika Anda memiliki pertanyaan terkait ketiga karir di atas, maka Anda boleh kirim pesan via Instagram pribadi saya yaitu adalah BuildWith Angga. Terima kasih dan semoga bermanfaat ya.

Tentang Mentor Dhimas Dhimas adalah self-taught designer yang telah dipercaya oleh banyak klien untuk mengerjakan projek menarik seperti website, mobile app design, icon dan illustration design. Dhimas sangat handal dalam menggunakan software Figma yang di mana sofware tersebut gratis digunakan dan sangat populer pada kalangan designer. Konsultasi Dengan Dhimas Anda hanya dapat memilih maksimal satu topik dari yang tersedia di bawah: Panduan membuat case study pada UI/UX designReview Portfolio UI Design Untuk BekerjaTips & Trick UI/UX Design dengan Figma Details Konsultasi Jumlah durasi adalah 30 menit per sessionKonsultasi dilakukan secara online via Google MeetJadwal konsultasi akan ditentukan bersama mentor setelah melakukan pembayaranDiskusi untuk membangun karir yang lebih matang Cara Booking Silahkan transfer pembayaran Rp 50.000 (sudah include PPN & fee) ke rekening:MandiriPT Angga Membangun Indonesia1030007801844BCAPT Angga Membangun Indonesia0280256315Kirim bukti transfer dan email akun buildwithangga.com milik anda melalui WhatsApp +62 878-2023-2260 (Anin)Anin akan menginformasikan kepada mentor terkait dan anda bisa mulai berdiskusi dengan mentor untuk menentukan jadwal yang cocok Pertanyaan Umum Kenapa program konsultasi 1-1 online ini penting untuk saya? Anda dapat menghemat waktu dan biaya untuk mendapatkan trusted guidance dari seorang yang lebih berpengalaman di bidangnya, dengan begitu Anda bisa kembali fokus pada karir yang Anda impikan saat ini Setelah mengikuti konsultasi 1-1 nanti hasilnya seperti apa? Anda akan mendapatkan pencerahan yang bermanfaat untuk meningkatkan karir yang akan atau sedang Anda jalankan saat ini seperti membangun CV atau portfolio yang lebih baik Apakah ada jaminan uang kembali? Anda akan mendapatkan uang kembali apabila mentor tidak hadir (tanpa keterangan) pada jadwal yang sudah Anda dan mentor tentukan sebelumnya Saya ada pertanyaan lain terkait program 1-1, bisa tanya kemana? Anda bisa bertanya tentang program 1-1 melalui WhatsApp +62 878-2023-2260 (Anin)

Tentang Mentor Galih Galih adalah seseorang yang passionate pada website development. Banyak dari projek yang dikerjakan telah digunakan oleh jutaan masyarakat Indonesia, menggunakan skills dan pengalamannya untuk membangun website yang menarik dan reliable untuk pengguna. Konsultasi Dengan Galih Anda hanya dapat memilih maksimal satu topik dari yang tersedia di bawah: Website development fast career pathReview portfolio, CV berkarir developerCareer path tips sebagai developer Details Konsultasi Jumlah durasi adalah 30 menit per sessionKonsultasi dilakukan secara online via Google MeetJadwal konsultasi akan ditentukan bersama mentor setelah melakukan pembayaranDiskusi untuk membangun karir yang lebih matang Cara Booking Silahkan transfer pembayaran Rp 50.000 (sudah include PPN & fee) ke rekening:MandiriPT Angga Membangun Indonesia1030007801844BCAPT Angga Membangun Indonesia0280256315Kirim bukti transfer dan email akun buildwithangga.com milik anda melalui WhatsApp +62 878-2023-2260 (Anin)Anin akan menginformasikan kepada mentor terkait dan anda bisa mulai berdiskusi dengan mentor untuk menentukan jadwal yang cocok Pertanyaan Umum Kenapa program konsultasi 1-1 online ini penting untuk saya? Anda dapat menghemat waktu dan biaya untuk mendapatkan trusted guidance dari seorang yang lebih berpengalaman di bidangnya, dengan begitu Anda bisa kembali fokus pada karir yang Anda impikan saat ini Setelah mengikuti konsultasi 1-1 nanti hasilnya seperti apa? Anda akan mendapatkan pencerahan yang bermanfaat untuk meningkatkan karir yang akan atau sedang Anda jalankan saat ini seperti membangun CV atau portfolio yang lebih baik Apakah ada jaminan uang kembali? Anda akan mendapatkan uang kembali apabila mentor tidak hadir (tanpa keterangan) pada jadwal yang sudah Anda dan mentor tentukan sebelumnya Saya ada pertanyaan lain terkait program 1-1, bisa tanya kemana? Anda bisa bertanya tentang program 1-1 melalui WhatsApp +62 878-2023-2260 (Anin)

Hello People With The Spirit Of Learning. Design Onboarding merupakan serangkaian tahapan awal yang biasanya dilakukan setelah menginstall/register pada suatu aplikasi. Seorang UI Designer terkadang lupa untuk mendesain screen ini. Tutorial Design Onboarding di Figma Nah, sekarang mari kita coba bersama untuk mendesain tampilan screen onboarding untuk mental health apps menggunakan Figma. 1) Buat frame dan pilih opsi iPhone 14 (390 x 844) lalu ubah nama frame menjadi Onboarding 1 Pengaturan frame untuk UI Design Onboarding 2) Buat frame dengan ukuran 342 x 340 beri fill warna #3D3D3D, ubah radius menjadi 40 dan corner smoothing 100%. Ubah nama frame menjadi “Text Container” Pengaturan frame untuk UI Design Onboarding 3) Buat page indicator dengan cara pilih Rectangle lalu beri ukuran 6 x 6 dan beri radius 8 dan corner smoothing 100%, duplikat 2 kali. Beri semua rectangle warna putih. Pilih satu rectangle dan ubah ukurannya menjadi 16 x 6. Untuk 2 rectangle yang lain ubah opacity menjadi 40% Pengaturan page indicator untuk UI Design Onboarding 4) Buat teks headline, Contohnya “Feels depressed?” lalu beri warna putih dan atur teks seperti berikut ini Pengaturan headline untuk UI Design Onboarding 5) Buat secondary text, Contohnya “Does this world seem lonely to you? Don't feel like anyone cares about you. Not able to think of anything happy. It’s okay.” Beri warna putih dan ubah opacity menjadi 40%. Lalu atur teks seperti berikut ini Pengaturan text untuk UI Design Onboarding 6) Buat button dengan cara ketikkan teks “Next” lalu beri warna teks #3D3D3D lalu terapkan auto layout pada teks tersebut dengan cara tekan Shift + A beri horizontal padding 56 dan vertikal padding 16 lalu beri fill warna putih Pengaturan button next untuk UI Design Onboarding 7) Masukkan page indicator, teks headline, secondary text, dan button ke dalam frame Text Container lalu pindahkan frame Text Container kedalam frame onboarding 1, letakkan pada bagian bawah seperti berikut ini Penyatuan komponen untuk UI Design Onboarding 8) Ketikkan teks “Skip” lalu taruh pada pojok kanan atas frame Onboarding 1 dan beri jarak 16 dari kanan dan 59 dari atas 9) Buka plugin Storyset by Freepik, pilih illustrasi lalu masukkan illustrasi tersebut kedalam frame Onboarding 1 atur ukuran dan letak illustrasi tersebut Plugin storyset untuk UI Design Onboarding 10) Duplikat frame Onboarding 1 dua kali, sehingga kamu punya 3 frame onboarding. 11) Ubah illustrasi, teks, dan page indicator pada frame Onboarding 2 dan Onboarding 3 12) Untuk screen Onboarding 3, hapus teks “Skip” yang berada di kanan atas frame dan ubah teks pada button dengan tulisan “Get Started” 13) Beri warna frame Onboarding 1 #F5F3EF, Onboarding 2 #DEE3DD, dan Onboarding 3 #CBDCF6 Hasil dari UI Design Onboarding Closing Selamat, kalian sudah berhasil mendesain Onboarding Mobile Screen dengan baik. Selanjutnya kalian bisa mencoba untuk mendesain login mobile screen di tutorial selanjutnya. Terima kasih. Semoga bermanfaat ya.. 👋.

Hello People With The Spirit Of Learning! Meningkatnya kebutuhan industri dalam membuat aplikasi maupun website yang kompleks , membuat banyak developer atau software consultant terus berinovasi untuk mengembangkan website/aplikasi dengan teknologi yang lebih efektif. Hal ini dilakukan agar produk yang dibuat memiliki performa yang maximal saat digunakan. Salah satunya yaitu Framework React JS . Framework ini menjadi pilihan teknologi yang saat ini digunakan oleh banyak developer. Dengan menggunakan ReactJS, akan mempermudah developer untuk reuse kode program agar suatu proyek cepat selesai. Raksasa perusahaan teknologi seperti *Facebook, Instagram, Netflix pun juga mengembangkan aplikasi mereka menggunakan Framework ReactJS. Jika kamu sudah mulai tertarik untuk mempelajari ReactJS, kamu bisa mulai mempelajarinya dari basic. Untuk menunjang journey belajar kamu, BWA menyediakan 3 rekomendasi kelas gratis yang bisa kamu ambil untuk kamu pelajari, disimak ya!😉🙌 1) HTML5 Dasar HTML5 adalah bahasa markup yang digunakan untuk membangun suatu tampilan pada Website. HTML5 berperan sebagai pondasi utama ketika Website sedang berada pada tahap Development. Ketika ingin membuat sebuah Header, Body, dan juga Footer pada Website, maka perlu menggunakan bahasa markup ini. Kelas HTML5 dasar ini akan membawa kita untuk berkenalan terlebih dahulu tentang bagaimana cara membangun suatu Website dengan mudah. Karena kedepannya juga akan mempelajari ilmu lebih dalam seperti menggunakan Framework CSS untuk mempermudah dalam pembuatan website. 2) CSS Website Design Website yang baik akan memberikan User-Experince yang berkesan untuk pengguna. Jika pengguna merasa nyaman saat menggunakan suatu website ,maka akan memberikan keuntungan yang besar bagi kita. Membuat suatu website juga tidak bisa sembarangan tanpa didasari dari visi dan misi yang jelas. Dengan menggunakan Cascade Style Sheet (CSS), kita dapat mempercantik website agar lebih eye-catching. Tujuan utamanya adalah agar pengguna merasa nyaman ketika menggunakan website kita. Warna dan jenis tipografi akan menentukan tujuan suatu website dibuat. Sebagai web designer maka kita wajib mempelajari CSS dalam tujuan mempercantik website dan memberikan efek animasi agar lebih terlihat interaktif di mata pengguna. 3) ES6 Dasar JavaScript merupakan bahasa pemrograman yang sering digunakan untuk membangun aplikasi website ataupun desktop. Dengan menggunakan JavaScript, maka dapat membuat aplikasi kita lebih interaktif dan efektif untuk diakses. Pada kelas ES6 dasar ini, kita akan membahas JavaScript versi terbaru yaitu versi 6. 4) Vanilla JavaScript Pada Website Development Dalam membangun website yang dinamis (memiliki konten yang up to date), maka kita membutuhkan bahasa pemrograman website salah satunya adalah JavaScript. Disini kita akan mengenal dasar-dasar penggunaan JavaScript pada website development. Dimulai dari mengenal tipe data, membuat fungsi, dan juga masih banyak yang lainnya. JavaScript sangat diperlukan jika kita ingin menjadi seorang Front-End Developer yang nantinya kita juga akan mempelajari Framework JavaScript yang popular seperti Angular, React, Vue, dan Svelte. 5) Web Dev Tools Bekerja sebagai Web Developer akan lebih cepat ketika kita menggunakan open-source projek yang dapat kita modifikasi sesuai kebutuhan dari projek yang saat ini sedang dikerjakan. Beberapa tools ini dapat digunakan secara gratis untuk membuat Icon Animation, Isometric, HTML Template, Chatbox, dan masih banyak lainnya. 6) React JavaScript ReactJS adalah library JavaScript yang digunakan oleh web developer dalam membangun website yang lebih interactive, fast, dan responsive. Library ini sering digunakan untuk membuat Single Page Application (SPA). Di kelas gratis ini, kita akan membangun toko online sederhana dengan menggunakan HTML, CSS, JavaScript (React JS). Tentunya kita akan mempelajari dasar dari penggunaan library ini pada website kita seperti Components, Props, Events, Conditional, dan masih banyak lainnya. 6 kelas diatas bisa kamu akses secara Free yaa… Yuk manfaatkan sebaik-baiknya kesempatan ini untuk upgrading skill kamu! 😉🙌 Perfect place to begin your career development. BuildWith Angga.

Selain wajib up to date pada design trends terbaru maka sebagai UI/UX designer kita juga perlu menggunakan software design yang cukup popular untuk dapat bersaing dengan designer lainnya di dunia industri. Beberapa software yang akan saya share kali ini dapat memenuhi segala kebutuhan dari pekerjaan kita sebagai seorang UI/UX designer untuk tahun 2023 dan seterusnya, yang terpenting perlu kita pelajari dengan baik-baik ya. 1) Figma Figma sofware UI/UX design Figma dapat kita gunakan secara online dan offline tanpa harus kita download dan install terlebih dahulu, kebanyakan UI/UX designer juga memilih menggunakan Figma via Browser seperti Google Chrome, Firefox, dan Edge. Figma menyediakan beberapa fitur utama seperti basic shapes, vector tools, typography, grid system, auto layout, dan lainnya untuk mengerjakan projek website dan mobile app design lebih cepat dan mudah berkolaborasi dengan developer. Jika kita tidak memiliki budget yang kuat untuk belajar UI/UX design maka saya bisa sarankan menggunakan Figma versi gratis. Walaupun kita menggunakan Figma versi gratis namun kita masih bisa menggunakan seluruh fiturnya termasuk fitur Team untuk kolaborasi. 2) Framer Framer sofware UI/UX design Awalnya software Framer ini dikenal UI/UX designer untuk membuat sebuah prototype yang lebih advanced dibandingkan Figma, namun mulai tahun 2023 ini Framer lebih percaya diri untuk memberikan pelayanan yang lebih di mana kita bisa design website lalu menjadikannya live sehingga dapat diakses secara online layaknya website pada umumnya, well, kita tidak perlu belajar koding untuk mencapai hal tersebut. Terkait biaya software Framer, Framer dapat kita gunakan secara gratis untuk projek pertama kita sebagai proses latihan dalam mendesain maupun membuat website untuk portfolio yang kita miliki saat ini. 3) Adobe XD Adobe XD sofware UI/UX design Sebelum lahirnya software Adobe XD, banyak dari UI/UX designer yang menggunakan Adobe Photoshop untuk membuat design website dan mobile app. Dapat saya simpulkan bahwa Adobe XD memberikan fitur-fitur utama yang dimiliki juga oleh software Figma. Saya lebih suka Adobe XD dibandingkan Figma dikarenakan adanya sebuah fitur yang di mana kita dapat merekam hasil prototype dari projek yang sedang kita kerjakan, hal tersebut belum bisa dilakukan oleh Figma sampai saat ini. Pada software Adobe XD juga kita dapat berkolaborasi dengan designer lainnya secara real-time, biasanya saya lebih sering memberikan feedback kepada design yang dikerjakan oleh tim. Terkait biaya Adobe XD ini lebih murah dibandingkan dengan Photoshop dan kita juga bisa Free Trial terlebih dahulu untuk mulai latihan UI/UX design.