Tips All

Goals Sebagai UI designer kamu wajib design beberapa halaman utama yang dapat membantu pengguna untuk membeli saham pertama mereka pada aplikasi mobile tersebut. Prize Juara 1 mendapatkan Rp 400.000 + 3 kelas Premium bebas pilihJuara 2 mendapatkan Rp 200.000 + 2 kelas Premium bebas PilihJuara 3 mendapatkan Rp 100.000 + 1 kelas Premium bebas Pilih Kriteria pemenang Menggunakan software FigmaDesign untuk ukuran device iPhone X ke atas (silahkan dipilih bebas)Custom illustration dan Icon akan menjadi nilai tambahDesign aplikasi wajib tersedia beberapa halaman seperti:Browse Sahamhalaman di mana pengguna melihat saham yang terbaru, terpopuler, dan informasi lainnya terkait sahamDetail Sahamhalaman di mana pengguna dapat melihat chart pergerakan naik turun saham, harga beli dan jual, dan sebuah CTA untuk membeli saham tersebutTopup Buying Powerhalaman di mana pengguna dapat melakukan top up yang nantinya uang tersebut bisa digunakan untuk membeli saham (quick transaction) Inspirasi design yang kami sarankan https://dribbble.com/shots/16910736-EasyInvest-mobile-apphttps://dribbble.com/shots/17130376-Upstocks-Market-Apphttps://dribbble.com/shots/18531809-Finance-Mobile-Design Details challenge Challenge berlaku dari tanggal 21 Oktober 2022 s/d 11 November 2022Batas akhir submit adalah tanggal 11 November 2022 Jam 23.23 WIBKami akan mulai review pada tanggal 12 November 2022 s/d 15 November 2022Pemenang akan diumumkan pada Instagram BuildWith Angga pada tanggal 1 December 2022 Cara submit Siapkan link projek hasil challenge kamu (Figma) yang dapat diakses secara publikIsi form pada Google Form yang telah kami sediakan https://forms.gle/LbPW98RV8sjpwT886 Pertanyaan umum 1) Apakah hasil challenge akan digunakan oleh BWA? Tidak, challenge seru-seruan ini hanya untuk kita belajar design bersama sehingga dapat termotivasi lagi untuk menjadi lebih baik. 2) Apakah hasil challenge boleh saya jadikan portfolio? Tentu saja, itu adalah hasil karya Anda yang sangat hebat. 3) Apakah challenge ini terbuka untuk umum? yes, kamu hanya wajib daftar akun terlebih dahulu di BuildWith Angga (tempat belajar UI design & software development). Menangkan Challenge Dengan Kelas Gratis Rekomendasi Kami https://buildwithangga.com/kelas/complete-guide-ux-wireframe-designhttps://buildwithangga.com/kelas/learn-figma-for-beginnerhttps://buildwithangga.com/kelas/learn-icon-pack-design-with-figmahttps://buildwithangga.com/kelas/workshop-figma-design-charity-landing-page

UX Deliverable adalah dokumen, presentasi, diagram atau laporan yang dibuat pada berbagai tahap proses desain sebuah produk terutama produk digital yang biasanya dikerjakan oleh seorang UX Designer. UX Deliverable dibuat untuk tujuan mengkomunikasikan ide, penelitian, pekerjaan, pengujian, dan strategi kepada tim internal, stakeholders, atau klien. Berikut ini beberapa UX Deliverable yang umum digunakan oleh para desainer: Mengenal UX Deliverables, User Persona, User Flow, Wireframe, dan Prototype 1. User Persona UX Deliverables User Persona oleh Milan Opsenica User persona adalah karakter fiksi yang dibuat dari hasil research oleh desainer yang bertujuan untuk mewakili target pengguna yang akan menggunakan produk kita. Elemen umum yang ada pada sebuah user persona yaitu: Profil (nama, gambar atau foto karakter)Demografi (usia, status, lokasi, pekerjaan, penghasilan, dan hal lain yang relevan dengan produk atau ruang masalah kita)Tujuan atau kebutuhan pengguna terkait produkPsikografis (sikap, minat, motivasi, dan pain point / kesulitan yang dihadapi) Kegunaan user persona dalam UX antara lain: Membentuk riset pengguna produk dalam format visul yang mudah dicernMembangun empati pengguna dan memastikan proses desain memprioritaskan kebutuhan target penggunaMengarahkan, menginformasikan, dan membenarkan keputusan desainMemungkinkan orang lain untuk memahami untuk siapa kita mendesain 2. User Flow UX Deliverables User Flow oleh Lanp User flow merupakan langkah-langkah yang harus dilakukan oleh pengguna untuk menyelesaikan atau mengerjakan tugas tertentu yang umumnya divisualisasikan dalam bentuk diagram alir. Adapun kegunaan user flow dalam proses desain antara lain: Membantu kita mengidentifikasi masalah yang mungkin terjadi sebelum kita mulai mendesain tampilan layar fidelitas tinggi (high-fidelity screens)Mencegah desain ulang setelah produk memasuki tahap pengembanganMemaksa kita untuk mempertimbangkan cara termudah bagi pengguna untuk menyelesaikan sebuah tugasMempertimbangkan alur/langkah alternatif yang mengarah ke pengalaman pengguna (user experience) terbaik 3. Wireframe UX Deliverables Wireframe oleh Shabnam Gideon Salah satu tahapan yang penting dalam mendesain sebuah produk adalah wireframing. Wireframe sendiri adalah skema atau kerangka yang dapat memberikan gambaran kasar (low-fidelity) setiap halaman yang terdapat dalam sebuah website atau aplikasi. Manfaat wireframe dalam proses pengerjaan sebuah produk terutama produk digital yaitu: Memberikan UI Designer gambaran dasar sebelum mulai mendesain high-fidelity screensMenjadi titik referensi untuk pengembangan situs atau aplikasiMengkomunikasikan pengalaman menggunakan situs kepada klien tanpa terlalu banyak menyoroti desain visual dan brandingMembantu tetap fokus pada pengalaman pengguna (user experience)Memperjelas dan menentukan fitur dalam websiteSebagai dasar untuk pembuatan prototype dan user testing sejak awal 4. Prototype UX Deliverables Prototype oleh Michal Kulesza Prototype adalah simulasi atau sampel produk akhir yang digunakan tim UX untuk pengujian alur produk sebelum produk itu diluncurkan. Tujuan dari prototype adalah untuk menguji dan memvalidasi ide sebelum membagikannya dengan stakeholder atau klien dan akhirnya menyerahkan desain akhir kepada tim teknik atau programmer untuk proses pengembangan. Manfaat dari prototyping: Prototyping dapat digunakan untuk menguji berbagai jenis ide, konsep dalam bentuk yang berbeda serta dapat diterapkan pada berbagai tahap desain dan proses desain ulangPrototyping memungkinkan mengidentifikasi masalah serta kesalahan atau bias yang mungkin telah diperkenalkan ke dalam penelitian selama tahap awal perumusan solusiPembuatan prototipe membantu kita mendapatkan umpan balik langsung karena melibatkan dengan calon pelanggan. Ini juga memberikan wawasan yang lebih dalam dan gagasan yang lebih baik tentang nilai yang dapat ditangkap dari solusi yang diusulkan Kesimpulan UX deliverables sangat dibutuhkan dalam pembuatan sebuah produk terutama produk digital seperti website atau aplikasi. Banyaknya ux deliverables yang dibutuhkan tergantung proses, tim, dana dan produk yang akan dibuat. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Hello, People With The Spirit Of Learning! Dalam menjalankan tugasnya, profesi Software Quality Assurance berkolaborasi dalam satu tim dalam menjalankan tugasnya. Oleh karena itu digunakan project management tools sebagai alat dan platform dalam melakukan manajemen project tugas dan komunikasi antar rekan kerja. Project management tools yang sering digunakan oleh Software Quality Assurance akan dijelaskan dalam artikel di bawah ini, yuk disimak 😉🙌 Project Management Tools yang Sering Digunakan oleh Software Quality Assurance Project management tools yang sering digunakan oleh Software Quality Assurance, yaitu sebagai berikut. 1.) Jira Sumber : https://wac-cdn.atlassian.com/dam/jcr:8b69e209-673d-4f90-83e9-38d62ef6fcc5/jira-scurmboard-header.png?cdnVersion=555 Jira merupakan salah satu dari project management tools yang biasanya digunakan oleh Software Quality Assurance dalam melakukan manajemen project serta melakukan planning dari suatu project, dan reporting dari hasil dari testing produk software. Fitur unggulan yang terdapat di jira yaitu task assignment, scrum board, kanban board, customization, connectivity with other device, dan report. Fitur-fitur tersebut sangat berguna untuk melakukan brainstorming dalam tim, reporting, dan documentation progress mengenai task yang sudah dikerjakan oleh Software Quality Assurance. 2.) Notion Sumber : https://images.ctfassets.net/spoqsaf9291f/5mWycBzu7P7y0gk1xmosVK/c30ccc85174ebd422b60cb8854242da1/build-with-me-project.png Notion merupakan project management tools yang biasanya digunakan oleh Software Quality Assurance dalam melakukan manajemen project seperti perencanaan dari project serta reporting dari task yang sedang dilakukan dan sudah dilakukan*.* Fitur yang terdapat di notion yaitu seperti quick notes, page, templates, to do list, board view, dan roadmap. Fitur-fitur tersebut berguna dalam membuat catatan, melakukan planning task yang akan dikerjakan dalam tim, serta reporting progress mengenai task yang sudah dikerjakan oleh Software Quality Assurance. 3.) Trello Sumber : https://images.ctfassets.net/rz1oowkt5gyp/7pYWhpQ3vnntxoShaImNws/777fabbf069416489167ab92027ce086/board.png Trello merupakan project management tools yang juga digunakan oleh Software Quality Assurance dalam melakukan manajemen project. Fitur yang terdapat di trello yaitu boards, cards, list, dan menu. Fitur-fitur yang terdapat di trelllo memiliki tampilan yang simple dan user friendly serta lebih sederhana jika dibandingkan dengan tools seperti notion dan jira, dan fitur-fitur tersebut juga berguna dalam membuat notes, dan melakukan planning task, serta reporting progress mengenai task yang sudah dikerjakan oleh Software Quality Assurance. 4.) Miro Sumber : https://images.ctfassets.net/w6r2i5d8q73s/4lCjAfgEp0bFtsKzYuAXNO/664e1c03d42df0a05ab8e7ef3ad71194/M-Feature-MindMapping.png Miro merupakan project management tools yang digunakan oleh Software Quality Assurance dalam melakukan planning dan brainstorming terkait dengan penentuan requirement dari test cases dari suatu project. Fitur unggulan dari miro yaitu papan tulis atau boards, sticky notes, attach file, attach image, free drawing, dan mind map. Fitur-fitur yang tersebut sangat berguna dalam melakukan brainstorming dalam tim seperti yang dilakukan dengan menggambar bebas seperti di papan tulis namun dilakukan secara virtual, membuat notes, membuat mind mapping, dan melakukan planning task dalam menentukan requirement dari project yang akan dikerjakan. 5.) Slack Sumber : https://a.slack-edge.com/c5da2d2/marketing/img/downloads/refreshed/slack-client-windows-desktop.png Slack merupakan project management tools yang digunakan oleh Software Quality Assurance dalam melakukan komunikasi dalam tim dan antar tim. Dengan menggunakan slack kita dapat mengirim pesan singkat, berbagi file dalam format image, pdf, spreedsheet, dan presentasi. Slack memiliki tampilan yang sederhana dan user friendly sehingga tak jarang slack digunakan oleh perusahaan atau instansi sebagai alat komunikasi mengenai pekerjaan. 6.) Google Sheet Sumber : https://lh3.googleusercontent.com/PHjvBmaCx9FId_EWB2JnyIuhahnRd_RpjaFKytmrYG2uOdih5WgqBIwtc6jHo34nk5vomdZkuGuJhLMiKvJpmd9gLDZqaB_I4lRUiZXNYAZKHqlDVH1j=s0 Google sheet merupakan project management tools yang digunakan oleh Software Quality Assurance dalam melakukan pembuatan planning dari requirement suatu produk software dan membuat test cases dari suatu produk software yang dibuat dengan tampilan tabel. Google sheet banyak digunakan oleh Software Quality Assurance dalam membuat test cases dan melakukan planning serta pembuatan requirement dari software product karena tampilannya yang sederhana serta fitur dan menu yang cukup lengkap dan mudah untuk digunakan serta dapat diakses dan mudah dalam berkolaborasi dalam satu tim. 7.) Zoom Meeting Sumber : https://explore.zoom.us/media/work-from-home-1.jpg Zoom meeting merupakan project management tools yang digunakan oleh Software Quality Assurance dalam melakukan pertemuan diskusi dalam tim melalui video conference. Dalam zoom meeting kita dapat melakukan video conference, share screen, recording, board, free draw, voting, reaction, raise hand dan chat singkat. Dengan menggunakan zoom meeting, diskusi dapat dilakukan tanpa terbatas dengan jarak dan waktu. 8.) Google Meet Sumber : https://lh3.googleusercontent.com/CPPP8wMdfaWyzjtnJuTp2fnuaz4I0DJ7j4Hib3atRKLUZ3Ru3lqtdGUO7ZjsISC9PvEXZVoaJk2SQwxgdTIEoMKKooGUp-fWigYHtaghSAdQ9WqGChw=w960 Google meet merupakan project management tools yang digunakan oleh Software Quality Assurance dalam melakukan pertemuan diskusi dalam tim melalui video conference. Serupa dengan zoom meeting, fitur yang terdapat pada google meet merupakan fitur sederhana seperti present now, chat, white boarding dan pada google meet sudah dapat berkolaborasi dengan tools miro. Google meet sering digunakan oleh Software Quality Assurance khususnya dalam melakukan pertemuan diskusi melaui video conference dikarenakan pengaturan fitur yang mudah digunakan dan juga gratis dalam rentang penggunaan waktu yang lama. Kesimpulan Jadi berdasarkan penjelasan udah tau nih project management tools yang sering digunakan oleh Software Quality Assurance, jadi gimana nih teman-teman ada berminat engga untuk menjadi Software Quality Assurance sebagai tujuan akhir dari jenjang karir teman-teman?? Ketika kamu sudah memutuskan untuk berkarir sebagai Software Quality Assurance, pastikan kamu selalu update dengan ilmu yang terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌. BuildWith Angga.

Figma saat ini merupakan salah satu software atau aplikasi favorit untuk mendesain bagi para desainer terutama UI/UX Designer. Awalnya Figma hanya bisa diakses online melalui browser, namun sekarang sudah ada versi Desktop yang dapat diunduh untuk perangkat macOS maupun Windows. Cara Download dan Install Figma di Laptop atau Komputer Berikut cara mengunduh dan meng-install Figma versi Desktop di komputer: 1. Kunjungi website resmi Figma Kalian bisa mengunjungi website resmi Figma di https://www.figma.com/ 2. Pilih menu Products Menu products pada webiste Figma Setelah membuka webstie Figma, pada menu Products, silahkan klik menu Downloads 3. Pilih link download sesuai perangkat yang digunakan Link untuk mendownload Figma versi Desktop Pilih “Desktop app for macOS” jika kamu menggunakan perangkat macOS atau pilih “Desktop app for Windows” jika kamu menggunakan perangkat Windows. Setelah itu tunggu file instalasi terunduh di komputermu 4. Install file Figma Setalah file instalasi Figma selesai di unduh, klik file instalasi tersebut lalu tunggu aplikasi Figma versi Desktop terpasang di komputermu. 5. Buka aplikasi Figma Tampilan awal aplikasi Figma Desktop Setelah berhasil terinstall di komputermu, buka aplikasi Figma lalu silahkan Log in jika kamu sudah mempunyai akun atau klik Create one untuk mendaftar secara gratis jika kamu belum mempunyai akun. 6. Template dari Figma Tampilan apikasi Figma setelah berhasil login Saat kalian berhasil Log in kalian bisa lanjut meneruskan projek desain kalian atau membuat file desain baru dengan cara menekan menu “New design file”. Tampilan halaman Community di Figma Selain kalian bisa mendesain dari awal, pada menu Community kalian akan menemukan banyak template dan plugin yang sudah disediakan oleh Figma maupun dari desainer lain secara gratis. Kesimpulan Itulah cara untuk mengunduh dan meng-install Figma versi Desktop di komputer. Lalu, kenapa kita menggunakan Figma versi Desktop padahal kita bisa mengakses Figma melalui browser? Beberapa keunggulan menggunakan versi Desktop yaitu: Tidak perlu menggunakan koneksi internet, kita hanya perlu menggunakan koneksi internet saat membuka file desain kita dan saat ingin menyimpan file tersebutSaat ingin menyimpan atau export, kita bisa memilih folder atau tempat file export tersebut akan disimpan, sedangkan jika menggunakan versi browser, file tersebut akan otomatis tersimpan di folder Download Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Widget ElevatedButton pada Flutter dapat membantu kita untuk membuat sebuah button yang menarik yang dapat dijadikan sebagai Button CTA (Call to Action) pada aplikasi website atau juga mobile yang kita bangun saat ini. Biasanya ElevatedButton ini digunakan pada halaman seperti Empty State, Onboarding, Checkout, Keranjang, dan juga product details. ElevatedButton menggunakan design material Elevation yang membuat button tersebut memiliki shadow dan terlihat menonjol dibandingkan dengan element-element lainnya pada design kita. Mari Membuat ElevatedButton Sederhana Pada Aplikasi Mobile Menggunakan Flutter & Dart Misalnya kita ingin menambahkan satu button CTA yang membantu pengguna untuk mendapatkan hutang untuk membeli mobil baru, maka di sini kita akan menggunakan ElevatedButton. Kita bisa mulai dengan kodingan berikut: ElevatedButton(onPressed: onPressed, child: child), Lalu akan kita atur action pada button tersebut terlebih dahulu yang jika diklik akan menimbulkan pesan sederhana pada debug console ElevatedButton(onPressed: (){ debugPrint('button di klik') }, child: child), Pada sebuah button kita akan membutuhkan sebuah label sehingga pengguna mengerti button tersebut akan digunakan untuk apa, jadi kodingannya seperti berikut ElevatedButton( onPressed: (){ debugPrint('button di klik') }, child: Text('Get Loan'), ), Kodingan di atas akan menambahkan Widget Text yang kita gunakan sebagai label pada ElevatedButton tersebut, selanjutnya kita perlu membuat file button.dart untuk memberikan styling pada button CTA kita sehingga bisa lebih menarik. Buatlah file baru yang bernama button.dart lalu kita perlu mengimport material design pada file tersebut yang di mana nantinya properti-properti dari ElevatedButton akan kita modifikasi sesuai dari kebutuhan design projek kita, maka kodingannya kurang lebih seperti ini: import 'package:flutter/material.dart'; final ButtonStyle buttonPrimary = ElevatedButton.styleFrom( minimumSize: Size(90, 36), primary: Colors.blue, elevation: 0, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(50), ), ), ) MinimumSize pada ElevatedButton Properti ini digunakan untuk mengatur berapa lebar dan tinggi dari button yang akan kita buat, biasanya hal ini mengikuti dari design style yang sudah disediakan oleh tim desainer. Primary Untuk memberikan warna background pada elevatedbutton tersebut maka kita bisa gunakan property primary yang di mana Colors.black tersebut digunakan dari file dart material.dart (design system bawaan dari Flutter). Elevation Tidak semua designer ingin memberikan efek shadow pada sebuah elevatedbutton di Flutter, dengan mengaturnya ke angka 0 maka design button tersebut akan menjadi flat. Shape Apabila kita ingin menambahkan lengkungan pada elevatedbutton atau biasanya disebut dengan Corner Radius, kita bisa menggunakan properti shape yang didalamnya kita akan tambahkan borderRadius sesuai dari kebutuhan design kita. Mengimplementasikan Styling Pada ElevatedButton Setelah kita berhasil membuat file button.dart yang didalamnya tersedia style untuk button Primary pada aplikasi mobile atau website kita saat ini, maka file tersebut kita perlu import kepada file projek utama kita, lalu style name tersebut akan kita gunakan pada elevatedbutton yang kita maksud. ElevatedButton( onPressed: (){ debugPrint('button di klik') }, child: Text('Get Loan'), style: buttonPrimary, ), Sehingga hasil akhir dari elevatedbutton yang sudah kita beri styling akan menjadi seperti berikut, cukup menarik dan cantik bukan? Silahkan mencoba untuk mengaplikasikan elevatedbutton ini pada halaman yang berbeda dengan style design yang berbeda juga, kita bisa menggunakan ShaynaKit untuk mendapatkan beberapa file design gratis yang bisa kita gunakan sebagai latihan UI engineering menggunakan Flutter. Dan apabila kamu ingin memperdalam widget Flutter lainnya dengan design yang cukup menarik maka saya bisa rekomendasikan untuk mempelajari pada kelas Full-Stack Laravel Flutter: Membangun Aplikasi E-Wallet. Cheers.

Selain menyediakan templates berupa file, Figma juga menyediakan berbagai macam plugins yang dapat mempermudah dan mempercepat pekerjaan mendesain kalian. Berikut ini beberapa plugins populer yang sering digunakan oleh para desainer: 10 Plugins Figma Terpopuler Untuk Designer 1. Unsplash Figma Plugin - Unsplash oleh Kirill Zakharov Unsplash merupakan salah satu plugins favorit yang menyediakan stok foto berkualitas HD yang dapat digunakan secara gratis. Untuk menggunakannya kalian hanya perlu menjalankan plugin tersebut lalu pilih foto yang ingin kamu gunakan, atau jika ingin mencari foto yang lebih spesifik kamu bisa mencarinya dengan menuliskan kata kuncinya di kotak pencarian. 2. Content Reel Figma Plugin - Content Reel oleh Microsoft Content Reel merupakan plugins yang dapat kamu gunakan untuk mengganti placeholder seperti teks, gambar, dan ikon. Selain memilih konten yang sudah tersedia, kamu juga bisa membuat konten sendiri. Untuk menggunakannya, pilih text layer atau frames atau shapes yang ingin kamu ubah, lalu jalankan plugin dan pilih konten yang kalian inginkan. 3. LottiFiles Figma Plugin - LottieFiles oleh LottieFiles Dengan menggunakan LottiFiles kamu dapat memasukkan animasi yang dapat di import berupa SVG maupun GIF kedalam desain mu. Terdapat ribuan macam animasi yang dapat digunakan secara gratis. Sebelum menggunakan plugin ini, kamu harus memiliki akun LottiFiles terlebih dahulu, jika belum memiliki akun bisa mendaftar di https://lottiefiles.com/. Untuk menggunakannya, buka plugin lalu login, lalu pilih animasi yang dibutuhkan. 4. Remove BG Figma Plugin - Remove BG oleh Aaron Iker Remove BG sangat berguna untuk menghapus background sebuah foto atau gambar. Untuk menggunakan plugin ini, cukup memilih foto yang ingin dihapus backgroundnya lalu klik Run. Sebelumya, kamu harus memiliki akun terlebih dahulu yang dapat dibuat di https://www.remove.bg/. 5. Mapsicle Figma Plugin - Mapsicle oleh Chris Arvin Jika kamu membutuhkan sebuah gambar peta, maka tidak perlu lagi melakukan screenshot melalui Google Maps. Cukup menggunakan plugin Mapsicle. Dengan plugin ini, kamu dapat mengatur ukuran peta dan style peta sesuai kebutuhan. Untuk dapat mencari lokasi yang diinginkan, kamu harus membuat akun di Mapbox terlebih dahulu, lalu copy-paste token akun mu ke dalam plugin Mapsicle. Untuk menggunakannya, buka plugin, pilih lokasi lalu atur ukuran peta dan style sesuai kebutuhan, setelah itu klik Create map. 6. Design Lint Figma Plugin - Design Lint oleh Discord Dengan menggunakan plugin Design Lint, kamu dapat membuat desain menjadi konsisten. Plugin ini dapat menemukan error dari tiap frame yang dipilih seperti font, shadows, border radius, fill, stroke, dll yang tidak konsisten dengan desain yang lainnya atau karena belum diberi style. Untuk menggunakannya, buka plugin lalu pilih frame yang ingin hendak dicek, setelah menemukan error kalian dapat memperbaikinya atau skip error tersebut. 7. Iconify Figma Plugin - Design Lint oleh Discord Iconify merupakan plugin yang memiliki lebih dari 100.000 ikon yang dapat digunakan untuk keperluan desain kalian secara gratis. Beberapa set icons yang tersedia di Iconify yaitu Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, dan masih banyak lagi. Untuk menggunakanya, buka plugin lalu pilih set icons, setelah itu pilih ikon yang kalian butuhkan atau bisa juga dicari langsung dengan menuliskan kata kuncinya di kotak pencarian. Sebelum import icon, kamu juga bisa mengatur warna dan ukuran ikonnya. 8. Wireframe Figma Plugin - Wireframe oleh Hexorial Studio Wireframe merupakan plugin yang menyediakan templates wireframe untuk web, mobile, dan tablet sehingga tidak perlu menghabiskan waktu untuk membuat wireframe dari awal. Untuk menggunakannya, buka plugin lalu pilih template yang dibutuhkan. 9. Charts Figma Plugin - Charts oleh Sam Mason de Caires Charts merupakan plugin yang dapat membantu kamu saat membutuhkan sebuah grafik atau diagram pada desain kalian. Ada 5 tipe yang dapat kalian pilih yaitu line, scatter, area, bar, pie / doughnut. Kamu juga dapat mengatur jumlah poin, nilai maks/min, dan tampilkan/sembunyikan grid, titik, dan label pada diagram. Untuk menggunakannya, kamu cukup jalankan plugin nya lalu atur diagram sesuai keinginan/kebutuhan. 10. A11y - Color Contrast Checker Figma Plugin - A11y - Color COntrast Checker oleh Kelly Gorr A11y - Color Conrast Checker merupakan salah satu plugin yang dapat membantu untuk mengecek dan membenarkan kontras warna dari desain agar konten lebih mudah dibaca dan memenuhi pedoman Web Content Accessibility Guidelines (WCAG). Untuk menggunakannya, kalian jalankan plugin nya lalu pilih frame yang ingin kalian cek. Kesimpulan Untuk mempermudah dan mempercepat dalam pengerjaan desain di Figma, kita dapat menggunakan beberapa bantuan plugin-plugin yang tersedia secara gratis di dalam Figma. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Hello people with the spirit of learning! Gimana progres belajar kalian sejauh ini? Di sini ada yang sudah tahu cara menggunakan Auto Layout pada Figma? Kalau belum, yuk, kali ini kita akan belajar secara singkat cara menggunakan Auto Layout Figma– sebuah fitur yang memudahkan kamu dalam proses design! Auto Layout memiliki fungsi membuat frame pada UI design kalian menjadi lebih dinamis. Sebagai contoh, kalian tidak perlu mengubah ukuran frame untuk mengikuti isi teksnya karena frame akan menyesuaikan. Alias, Auto Layout memungkinkan kita membuat component yang responsif. Masih banyak fungsi Auto Layout yang memudahkan kamu di Figma menjadi lebih praktis. Oleh Karena itu, Auto Layout merupakan fitur unggulan di tools ini. Pada latihan kali ini, kita akan membuat daftar menu makanan. 1) Siapkan Element-nya Mari kita siapkan beberapa elements seperti Shape lingkaran, Text dan siapkan plugins bernama “Unsplash” untuk mengambil image. 2) Memberi Text dan Shape Caranya, pada bagian Toolbar, pilih “T” (Text) dan ketik nama menu makanan yang kamu mau. Lalu di sampingnya, pilih Shape dan pilih Ellipse untuk si bentuk lingkaran. Tekan Shift sembari menarik kursor sehingga membentuk bentuk lingkaran yang sempurna. 3) Mengaktifkan Auto Layout Select semua elements dan tekan Shift+A untuk mengaktifkan Auto Layout. Di bagian sidebar, ubah padding menjadi 10 dan spacing between items menjadi 20. 4) Mengaktifkan Fill Container Aktifkan fill container. Caranya, di bagian “Frame” pada sidebar, pilih fill container agar text tetap mengikuti container saat ingin merubah ukuran container. 5) Masukan Image dengan Plugins Klik shape lingkaran pada menu namun pastikan kamu sudah install plugins “Unsplash”. Jika sudah, klik kanan ➡️ ”Plugins” ➡️ “Unsplash”. Search image yang kamu mau lalu pilih dan tunggu hingga image muncul di dalam shape. Ulangi sampai terlihat menjadi list menu makanan yaa 😊 Kamu hanya perlu men-duplicate menu yang sudah ada dan dengan aktifnya Auto Layout, kamu tidak perlu lagi mengubah pengaturan ukuran/jarak/jenis font satu persatu lagi karena nanti menu yang kamu duplicate akan menyesuaikan pengaturan dari menu sebelumnya. Selamat! Kamu sudah bisa menggunakan Auto Layout pada Figma 🎉 p.s: untuk menghapus Auto Layout, cukup klik tanda “+” pada bagian Auto Layout di side bar menjadi tanda “-”. Dan untuk membuat UI Design di atas, kita tinggal menambahkan container daftar menu makanan ke dalam frame baru yang sudah kita design yaa😉 . Proses Membuat UI Design List Menu 1) New Frame Pada bagian toolbar, kita pilih Frame lalu atur ukuran frame pada sisi sidebar dengan W: 375 dan H: 781. 2) Background Menu Untuk background, kita pakai warna putih. Kembali lagi ke toolbar, pilih shape lalu pilih rectangle dengan ukuran W: 375 H: 259. Atur posisi ke Align horizontal center dan Align center. 3) Image for Background Menu Seleksi shape tadi dan masukan plugins “Unsplash”. Seach image “Dining” untuk mendapatkan image restoran seperti UI di atas. 4) Cara Membuat Gradasi Image Duplicate Image dengan menekan shortcut Shift+D. Pada image kedua, kita ke Fill pada sidebar dan pilih Solid maka akan muncul beberapa opsi. Setelah itu kita pilih Linear. Ubah opacity warna pada kotak pertama menjadi 0% dan kotak kedua 100%. Drag kotak pertama ke kanan hingga berada di tengah. Pastikan juga image ini berada di atas shape pertama. (Caranya, kalian bisa klik kanan lalu Bring to front.) 5) Judul Restaurant Untuk memberi judul resto, ketik nama resto sesuai imajinasi kalian dengan ketentuan font yang bebas juga. Di sini, aku pakai Poppins dengan size 16px. font style Semibold. Letakan di atas dengan jarak atas 84px dan kiri 44px 6) Bottom Navigation Bar Untuk icon Home, Search & Profile; kita bisa dapatkan dengan install plugin “Iconify” Select icons Aktifkan Auto layout (Shift+A) Atur menjadi Horizontal direction di sidebar Spacing between items: 88px Fill dan pilih warna yang kamu mau Ubah ukuran container menjadi W:376 H:52 Corner radius menjadi 40px untuk atas dan bawah. Pilih container Navigation bar bawah dan atur posisi dengan memilih Align horizontal center dan Align bottom pada sisi sidebar. 7) Upper Navigation Dapatkan icon Back dan Share dari plugin “Iconify” Beri jarak atas 48px dan kiri 40px Tebalkan icons dengan cara pilih “Stroke” pada bagian sidebar dan ubah menjadi 2. Begitu juga dengan icon bintang, kamu bisa dapatkan di plugin “Iconify” dan fill icon sesuai warna yang kamu inginkan. Terima kasih sudah membaca artikel ini yaa! Jika kalian ingin tahu lebih dalam tentang peng-aplikasian Auto Layout, kami menyediakan banyak kelas yang membahas tentang Auto Layout pada Figma lohh! Sebagai contoh, kamu bisa mengikuti dulu kelas gratisnya yaitu kelas freemium “UI Style Guide”. Selamat belajar dan mencoba teman-teman! 📚 Link plugins : Unsplash https://www.figma.com/community/plugin/738454987945972471/Unsplash Iconify https://www.figma.com/community/plugin/735098390272716381/Iconify

Memiliki pekerjaan menjanjikan merupakan mimpi setiap orang dan tentunya kita ingin karir yang kita geluti menjadi pilihan yang tepat. Namun, dengan berkembangnya teknologi tren pekerjaan yang dibutuhkan akan terus mengalami perubahan. Pada artikel kali ini, akan membahas beberapa prospek karir digital yang menjanjikan dan memiliki demand yang cukup tinggi kedepannya, yuk disimak. 1) Data Analyst Data Analyst atau data expert, merupakan pekerjaan yang meneliti informasi dengan analisis data. Hasil dari analisis data ini sangat penting bagi perusahaan dalam menentukan keputusan bisnis untuk yang akan diambil untuk mengembangkan perusahaan. Data analyst menggunakan berbagai aplikasi dan program pengolahan data dalam pekerjaan sehari-harinya, seperti Microsoft Excel, Tableau, dan SQL. 2) Digital Marketer Peran digital marketer sangatlah dibutuhkan oleh perusahaan. Digital marketer memiliki tugas untuk melakukan promosi bisnis yang dijalankan melalui platform digital. Digital marketer merupakan tombak marketing suatu perusahaan dimana membuat profesi ini menjadi pekerjaan dimasa depan paling dibutuhkan. 3) Mobile Developer Dengan banyaknya website dan aplikasi e-commerce bermunculan, tak heran profesi web maupun mobile application developer dibutuhkan di setiap perusahaan maupun startup. Beberapa perusahaan membutuhkan peran developer untuk membuat dan mengatur situs maupun aplikasi perusahaan. 4) SEO Specialist Perusahaan tentu memerlukan SEO specialist yang dapat menjelaskan produk-produk perusahan dengan baik serta google friendly agar ketika user memasukan kata kunci tertentu dipencarian google, produk perusahaan akan muncul dihalaman utama. Maka dari itu posisi SEO specialist ini sangatlah krusial dalam strategi pemasaran suatu perusahaan. 5) Designer Implementasi design dari produk perusahaan mampu memberi lebih banyak perspektif terkait produk tersebut. Designer mampu menghadirkan gaya design yang simple namun tetap terlihat dinamis untuk membuat visualisasi dari produk perusahaan agar lebih menarik bagi user. Tips Mendapatkan Karir Digital Kuasai skill yang sedang high demandMengikuti kelas atau bootcamp pendukungUpdate LinkedIn dan perbanyak koneksi Adapt to Technology is the key for new future. Setelah membaca artikel di atas, point yang dapat kita ambil ialah penting bagi kita untuk memperkaya diri dengan kompetensi dan skill yang relevan di zaman sekarang agar tidak tertinggal oleh tren digital yang ada. Yuk belajar lebih lanjut untuk persiapan karir dan bangun portfoliomu! BuildWith Angga

Hello, People With The Spirit Of Learning! Positive testing dan negative testing dilakukan oleh seorang Software Quality Assurance dalam testing produk suatu software. Hal ini dilakukan dengan tujuan untuk memvalidasi hasil dari testing produk software. Nahh, apa sih positive dan negative testing itu??? Positive dan negative testing akan dijelaskan dalam artikel di bawah ini, selamat membaca 😉🙌 Positive Testing Postive Testing merupakan suatu pengujian produk software yang dilakukan dengan memberikan input bernilai positive yaitu berupa input yang valid sehingga sistem dari produk software akan bekerja dan memberikan hasil sesuai dengan yang diharapkan (expected result). Positive testing dilakukan dengan tujuan untuk memvalidasi sistem dari produk software dengan menggunakan input bernilai positive (valid input) dengan memvalidasi apakah sistem bekerja menghasilkan hasil sesuai yang diharapkan atau tidak. Contoh Positive Testing Positive Testing dilakukan dengan memberikan input yang bernilai positif, contohnya ketika kita akan sign in di website BuildWith Angga. Pada bagian page sign in, kita diminta untuk memasukkan email address dan password yang valid. Pada bagian page sign in kita memasukkan email address dan password yang sesuai dan valid. Selanjutnya, sistem dari website BuildWith Angga membaca dari input yang telah kita masukkan, dan sistem mendeteksi bahwa input yang dimasukan valid dan sesuai sehingga sistem melanjutkan proses sign in dan success, maka sebagai hasil dari input tersebut muncul tampilan website BuildWith Angga yang menampilkan homepage dari BuildWith Angga. Negative Testing Negative Testing merupakan suatu pengujian produk software yang dilakukan dengan memberikan input bernilai negative yaitu berupa input yang invalid sehingga sistem dari produk software akan bekerja dan memberikan hasil yang diharapkan sesuai dengan input invalidnya. Negative testing dilakukan dengan tujuan untuk memvalidasi sistem dari produk software dengan menggunakan input bernilai negative (invalid) dengan memvalidasi bahwa sistem memberikan hasil yang diharapkan sesuai input yakni berupa error atau invalid dikarenakan input yang dimasukkan tidak sesuai dengan yang diminta (invalid input). Contoh Negative Testing Negative testing dilakukan dengan memberikan input yang bernilai negatif, contohnya ketika kita akan sign in di website BuildWith Angga. Pada bagian page sign in, kita diminta untuk memasukkan email address dan password yang valid. Pada bagian page sign in kita memasukkan email address dan password yang tidak sesuai atau invalid. Selanjutnya, sistem dari website BuildWith Angga membaca dari input yang telah kita masukkan, dan sistem mendeteksi bahwa input yang dimasukan invalid dan tidak sesuai dengan yang disyaratkan sehingga sistem tidak dapat melanjutkan proses sign in dan memberi hasil “Please include an ‘@’ in the email address. ‘spiritlearning’ is missing an ‘@’” sehingga kita harus memasukkan email adress yang valid dan sesuai untuk melanjutkan dalam tahap sign in. Kesimpulan Jadi berdasarkan penjelasan di atas udah tahu nih positive testing dan negative testing nah sekarang kamu berminat engga nih buat jadi Software Quality Assurance sebagai tujuan karir kamu?? Ketika kamu sudah memutuskan untuk berkarir sebagai Software Quality Assurance, pastikan kamu selalu update dengan ilmu yang terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌

Hello, People With The Spirit Of Learning! Test scenario dan Test cases merupakan tugas dan tahap perencenaan yang dilakukan oleh Software Quality Assurance. Perbedaan test scenario dengan test cases? Perbedaannya akan dijelaskan pada artikel di bawah ini, yuk dibaca dan disimak. Test Scenario Test Scenario merupakan informasi yang berisi summary scenario dari fitur yang akan dilakukan testing atau pengujian. Pada test scenario ditulis secara umum dan tidak spesifik. Sebelum melakukan testing atau pengujian, maka dilakukan pengecekan dengan melihat test scenario terlebih dahulu terkait dengan fitur apa saja yang akan dilakukan antara testing atau pengujian. Contoh Test Scenario User Sign InUser Access Kelas OnlineUser Access Bootcamp Test Cases Test Cases merupakan informasi terperinci yang berisi langkah-langkah dalam melakukan testing atau pengujian beserta dengan expectation results dan actual results dari testing. Test cases ditulis secara detail, spesifik, dan terstruktur dengan baik serta rapi dan mudah dibaca. Pada test cases terdapat beberapa bagian-bagian yang dijelaskan di bawah ini. 1.) Test ID Test ID merupakan Id dari test cases yang ditulis dengan menggunakan kombinasi huruf dan nomor. Contoh dari test id yaitu TCU0001 TCU0002 TCU0003. 2.) Test Scenario Test Scenario merupakan informasi yang berisi summary scenario dari fitur yang akan dilakukan pengujian atau testing. Contoh dari test scenario yakni ditampilkan sebagai berikut. User Sign InUser Access Kelas OnlineUser Access Bootcamp 3.) Test Steps Test Steps merupakan informasi yang berisi langkah - langkah yang dilakukan ketika pengujian atau testing dari produk software. Contoh test steps ditampilkan sebagai berikut User access https://buildwithangga.com/User click masukUser fill out the forms contains email address and passwordUser click Sign In 4.) Precondition Precondition merupakan informasi yang berisi prasyarat yang dilakukan sebelum melakukan pengujian atau testing dari produk software. Contoh dari precondition yaitu seperti user telah mendaftarkan akun pada website BuildWith Angga dan user telah sign in pada page website BuildWith Angga. 5.) Test Description Test Description merupakan informasi yang berisi deskripsi tujuan dari dilakukannya pengujian atau testing pada produk software. Contoh dari test description yaitu seperti untuk memastikan bahwa pengguna dapat sign in setelah memasukkan email address dan password, untuk memastikan bahwa pengguna dapat mengakses fitur Kelas Online, dan untuk memastikan bahwa pengguna dapat mengakses fitur Bootcamp. 6.) Expected Results Expected Results merupakan informasi yang berisi hasil yang diharapkan ketika sedang melakukan pengujian atau testing pada produk software. Contoh dari expected results yaitu seperti email address dan password dapat teridentifikasi dan muncul homepage dari website BuildWith Angga. Lalu pada halaman Katalog Kelas, terdapat fitur browse by category, top 6 courses, success stories, dan fitur footer navigation bar. Pada page Bootcamp Design & Coding dan menampilkan fitur new bootcamp, why us yang berisi benefit unggulan dari bootcamp, success stories dan fitur footer navigation bar. 7.) Actual Results Actual Results merupakan informasi yang berisi hasil yang sebenarnya dari pengujian atau testing pada produk software. Contoh dari actual results yaitu seperti email address dan password dapat teridentifikasi dan muncul homepage dari website BuildWith Angga, lalu muncul halaman Katalog Kelas yang menampilkan fitur browse by category, top 6 courses, success stories, dan fitur footer navigation bar. Pada page Bootcamp Design & Coding akan menampilkan fitur new bootcamp, why us yang berisi benefit unggulan dari bootcamp, success stories dan fitur footer navigation bar. 8.) Status (Success/Failed) Status merupakan informasi dari hasil pengujian yaitu berupa keterangan status succes atau failed. Status success ditulis apabila pengujian berhasil sesuai dengan hasil yang diharapkan serta sukses dan status failed ditulis apabila pengujian gagal dan tidak sesuai dengan hasil yang diharapkan. 9.) Notes Notes merupakan informasi catatan dan keterangan hasil pengujian yang dituliskan dalam dokumentasi. Contoh dari notes yaitu seperti penjelasan tentang bug dan error serta letak dari bug dan error dan apabila sesuai dengan yang diharapkan maka ditulis “as expected”. Contoh Test Cases Tabel tersebut merupakan contoh dari test cases sederhana yang diambil berdasarkan test cases pada website dari BuildWith Angga, dengan fitur yang diuji yaitu fitur Sign In, fitur Kelas Online, dan Fitur Bootcamp. Dalam test cases tersebut terdapat test id, test scenario, test steps, precondition, test description, expected results, actual results, status, dan notes yang ditulis secara sistematis dan rapi. Kesimpulan Jadi berdasarkan penjelasan di atas udah tahu nih perbedaan dari test scenario dan test cases. Nah, sekarang kamu berminat engga nih buat jadi Software Quality Assurance sebagai tujuan karir kamu?? Ketika kamu sudah memutuskan untuk berkarir sebagai Software Quality Assurance, pastikan kamu selalu update dengan ilmu yang terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌