Tips All

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.

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. 👋