Tips All

Kreatifitas seorang Desainer tidak semata-mata muncul hanya karena bakat alami. Untuk tetap menjadi kreatif, Desainer harus berada di lingkungan yang suportif, mempunyai Mentor yang berpengalaman, terus mencari inspirasi dari buku atau sumber termudah saat ini yaitu internet. Kali ini kami berikan tips untuk menambah pengetahuan desain dari sumber-sumber yang sudah biasa kita temui sehari-hari. Tren di industri kreatif saat ini berkembang begitu cepat, maka agar bisa survive, Anda sebagai Desainer harus bisa fleksibel menyesuaikan diri dengan segala update yang sesuai kebutuhan kerja. Akan selalu ada inovasi agar kita bisa mendesain lebih efisien, entah itu terkait tool atau proses desain  terbaru. Dengan tips berikut, Anda bisa selalu mengikuti tren dan tentunya mengaplikasikannya untuk pekerjaan. Selamat membaca dan semoga bermanfaat. 😊 Finding Inspiration in Popular Platform By: Thor Schroeder Dalam sebuah aplikasi, pengalaman pengguna adalah hal terpenting. UI Designer sudah pasti terlibat di dalam prosesnya karena tampilan antarmuka atau UI adalah hal pertama yang menjadi fokus pemakaian aplikasi pertama kali. Bila pengguna merasa tidak 'sreg' dengan desain, pengguna bisa seketika menutup aplikasi dan membuka aplikasi serupa milik kompetitor, atau the worst scenario yang mungkin terjadi, mereka bisa uninstall aplikasinya. Maka, semua aspek visual (button, proximity, balance, contrast, dll) harus dipikirkan secara terstruktur  agar aplikasi nyaman digunakan. Agar paham UI seperti apa yang laku di pasaran, Anda bisa cari inspirasi pada platform khusus para seniman kreatif di dunia seperti Behance dan Dribbble. Kedua platform ini mudah dipakai seperti sosial media pada umumnya. Anda pun bisa pamer portofolio desain aplikasi/web dan mencari kerja dengan mengubah status menjadi "Hire Me". Ada segudang inspirasi desain pada platform tersebut untuk terus memotivasi diri menjadi desainer yang lebih baik lagi. Selain itu, desain baru yang Anda temukan tentunya bisa langsung diaplikasikan pada projek Anda pribadi dengan metode ATM. Learn from Case Study By: UX Indonesia. Mempelajari desain tidaklah cukup dengan mengetahui komponen-komponen pembangunnya saja secara terpisah, tapi juga harus mengetahui prosesnya secara menyeluruh dari pre-production sampai post-production. Membaca case study di Medium bisa jadi cara mengenal proses desain yang menyenangkan. Tidak seperti text book, pembahasannya di Medium ringan untuk dibaca dan menarik karena sering dilengkapi gambar atau animasi yang interaktif. Membangun case study bisa jadi sarana yang efektif untuk menggaet klien dari mana saja. Selain itu, case study adalah salah satu cara yang baik untuk mendokumentasi suatu projek. Melalui case study, Anda bisa melihat bagaimana proses berpikir Desainer saat membangun tampilan aplikasi, apa saja pertimbangan yang dipilih entah itu berdasarkan data (kualitatif dan kuantitatif) saat research atau mungkin ada aspek-aspek lain yang mempengaruhi saat app development. Di sisi lain, Desainer pemula bisa belajar banyak dari sebuah case study karena bisa belajar proses desain sebenarnya dari orang yang lebih berpengalaman secara mudah dan gratis. Figure Out How Design Works in Apps By: freestocks Cara terdekat memahami desain adalah dengan sering memakai aplikasi untuk kebutuhan sehari-hari. Saat ini apa pun serba mobile, banyak hal yang bisa dilakukan secara singkat lewat aplikasi. Jadi bila ingin menjadi UI Designer yang profesional, ada baiknya Anda memang secara aktif memakai aplikasi yang sama setiap hari. Dengan begitu Anda bisa memahami user journey dan tampilan yang tepat untuk kondisi dan waktu yang berbeda berdasarkan pengalaman Anda pribadi. Selain itu, cobalah untuk download beragam aplikasi di handphone Anda. Cara ini bisa menyegarkan pikiran Anda saat sedang merasa stuck merancang UI. Referensi aplikasi bisa sangat beragam, dari yang lokal sampai mancanegara. Dengan melihat aplikasi buatan orang lain, Anda bisa belajar menilai kekurangan dan kelebihan Anda saat mendesain. Dan kebiasaan tersebut bisa pula memunculkan inspirasi baru yang bisa Anda pakai untuk pembuatan projek desain berikutnya. Enroll Design Course to Build Real-World Projects By: Avel C. Menjadi Desainer profesional itu butuh proses panjang dari mulai menguasai dasar sampai membangun karya-karya yang bisa dikumpulkan ke dalam satu portofolio. Setelah menguasai dasar, mungkin bisa dari buku cetak atau sumber online, langkah tepat berikutnya adalah mengikuti kelas yang memiliki case study  projek yang benar-benar dipakai di dunia nyata. Sudah banyak kelas Desain yang tersedia baik itu online atau offline, yang memungkinkan konsultasi projek bersama Mentor bahkan sampai penyaluran kerja setelah case study diselesaikan. Dengan bergabung di kelas, Anda bisa terus semangat dan belajar jadi lebih terarah. Pilihlah kelas yang sesuai minat dan bakat agar portofolionya nanti bisa langsung dipakai untuk mencari pekerjaan impian. BuildWith Angga bisa menjadi pilihan untuk Anda yang ingin membuat projek desain yang cantik dan fungsional. Materi yang ada pun beragam diantaranya tentang prototype dengan Adobe XD, membuat UI Animation atau tutorial lengkap UI Design di Figma. Case study yang Anda buat di kelas, nantinya bisa Anda susun menjadi portofolio dan tampilkan di platform online agar mudah diakses siapa pun, termasuk  calon rekruter atau klien yang bisa jadi adalah rekan kerja Anda di masa depan.

Meraih sukses melalui jalur freelance bukanlah hal yang mustahil. Sama halnya pekerjaan kantoran, freelance adalah pekerjaan yang menjanjikan. Dengan menjadi pekerja lepas, kita bisa mencukupi kebutuhan sehari-hari dan bahkan mampu mewujudkan semua wishlist yang kita miliki selama ini. Ada beberapa strategi penting yang menjadi kunci keberhasilan freelance, dari yang gratis sampai berbayar. Siapa pun bisa freelance, namun hanya sedikit yang benar-benar bisa menghasilkan dalam jangka panjang. Penting bagi pekerja lepas untuk konsisten mengembangkan diri melalui berbagai projek, namun ada baiknya mereka mulai investasi sedikit uang untuk portofolio online agar personal branding mereka menjadi lebih baik. Berikut kami rangkum cara meraih keuntungan freelance puluhan juta per bulan untuk Anda yang ingin membangun masa depan lebih baik. Semoga bermanfaat, ya 😊 Beli domain .Com & shared hosting sesuai kebutuhan By: Wikipedia Saat ini .Com adalah salah satu domain yang paling banyak digunakan di internet. Domain ini sangat cocok bagi siapa pun yang ingin membuat website untuk tujuan komersial. Dengan memakai .Com, portofolio Anda bisa lebih stand out dan nampak profesional. Untuk langkah awal pada website, Anda bisa buat landing page sederhana berisi informasi kontak yang aktif dan bisa juga cantumkan logo sesuai bidang bisnis. Bila sudah pernah mengambil projek, pilihlah beberapa projek terbaik dan cantumkan pada laman website agar meningkatkan trust para klien terhadap Anda. Kalau Anda tidak paham coding, Anda bisa memakai jasa shared hosting untuk mengelola website. Sekarang sudah banyak penyedia hosting di pasaran yang biayanya terjangkau, bahkan pelajar pun dapat dengan mudah menggunakan jasanya. Dengan pakai shared hosting, nantinya Anda bisa tinggal fokus mengatur konten website Anda agar kelihatan lebih kredibel. Bangun website portofolio dengan free template dan Webflow By: Panka Cara mudah pertama untuk membangun website adalah dengan memakai template gratis. Bagi para pemula, template siap pakai sangat berguna karena biayanya murah, proses pengerjaan cepat serta desain tampilan yang dihasilkan sudah teruji berkualitas dan bisa responsif untuk versi mobile. Ada banyak penyedia template seperti Website Builder BWA yang bisa jadi cara praktis namun bermanfaat bagi Anda yang ingin membuat website cepat dengan desain terkini agar bisa menarik perhatian para klien dari seluruh dunia. Nah untuk Anda para desainer, mungkin akan lebih tertarik untuk membuat website dari desain milik Anda pribadi dengan bantuan Webflow. Desain website yang original dapat menunjukkan daya tarik tersendiri di mata klien, dan dengan Webflow Anda tidak perlu repot-repot lagi untuk mengurus back-end website. Anda hanya fokus mendesain, dan Webflow yang akan melakukan coding sekaligus hosting untuk website Anda. Mudah bukan membuatnya? 😉 Cantumkan link website pribadi di Upwork atau Fiverr By: Domenico Loia Setelah berhasil membangun website, mulailah bergabung pada platform pencarian kerja khusus freelance seperti Upwork dan Fiverr. Pada situs ini, banyak sekali praktisi di bidang kreatif yang mencari kesempatan remote working diantaranya penulis, graphic designer, hingga web developer. Untuk para pemula, mulailah dari melengkapi profil pada situs secara lengkap, dan tunjukkan kredibilitas dengan menyertakan link website portofolio agar calon klien bisa melihat track record pengalaman kerja Anda. Supaya mendapat klien dengan prospek yang bagus, Anda bisa memilih untuk berlangganan pada situs tersebut, tentunya disesuaikan dengan budget Anda, ya. Agar memudahkan proses pencarian kerja, ada baiknya Anda memahami bahasa Inggris dan cara pitching yang baik dan benar. Anda bisa mempelajarinya di BuildWith Angga, YouTube, atau sumber belajar lainnya. Kemampuan komunikasi yang baik tidak hanya berguna untuk proses perekrutan, namun juga saat proses kerja berlangsung hingga projek berhasil diselesaikan. Bila klien merasa cocok dan puas, Anda bisa terus bekerjasama dengan mereka dalam jangka panjang. Bangun real-time project bersama tim By: Leon Saat membangun portofolio, Anda harus bisa menampilkan semua skill yang Anda miliki agar klien mengetahui sejauh mana projek yang bisa Anda ciptakan. Bila Anda seorang Full Stack Developer, Anda bisa langsung menunjukkannya melalui fitur-fitur pada website portofolio. Fitur tersebut harus memiliki UI yang menarik dan dapat diakses langsung oleh klien saat sedang menjelajahi website Anda. Lalu yang tak kalah penting, selalu cantumkan update projek yang telah Anda kerjakan, terutama projek kompleks yang membutuhkan tim untuk pengerjaannya. Hasil projek untuk klien bisa Anda taruh juga di portofolio dan ceritakanlah proses behind the scene agar klien memahami pola pikir dan cara kerja Anda. Dengan semakin sering bekerja bersama orang-orang dari berbagai spesialisasi, Anda berarti memperluas koneksi dan meningkatkan berbagai skill yang Anda miliki. Kedepannya Anda bisa menjadi pribadi yang lebih profesional, mampu menghadapi situasi kerja freelance apa pun. Dan tentunya pekerjaan Anda akan terasa lebih efisien dengan hasil yang jauh lebih memuaskan.

Split Component? Kenapa harus di-split? Ok, ini berat kaitannya sama maintainable code dan performance. Penerus kodemu gak bakal betah liat 500++ line lebih hanya karena logic yang tidak reusable. Tidak reusable dalam artian, tidak pernah di refractor sama sekali! So Sad! Previous Article Kalau kalian pengikut saya yang setia, di article ini (React Props? Sebenarnya itu cuma state biasa) sebenarnya tanpa sadar kalian sudah belajar splitting component dimana saya memecah row perulangannya ke komponen yang lebih kecil. Real-world Study Case Ok mungkin sebagian dari kalian belum tau kalau saya punya side-hustle, nama aplikasi saya itu mejadokter. Ini bagian screenshot yang pernah saya refractor khususnya code splitting. Yang awalnya bisa sampai 2000 lines of code bisa saya pangkas jadi sekitar 700an, ok masih gak make-sense karna abis di-refractor tapi linesnya masih lewat 600an. Tapi gak kenapa, karena selain saya pangkas lines of codenya saya juga pecah logic yang berulang. Dan sebenernya komponen di halaman ini sama persis dengan di halaman detail/edit rekam medis, tapi somehow saya buat mereka beda komponen 😓. Nah setelah saya refractor dan lakukan proper code-splitting akhirnya mereka bisa pakai shared-reusable-component. Ingat, kalian gak bisa buat code clean at first place (ok mungkin bisa, saya gak mau takabur bilang kalian gak bisa) tapi pasti susah sekali di awal-awal buat se-clean itu. Gak Sabar Ngoding? Potongan kode RowEmployee.js Ok lanjut ke materi ya, kalian bisa buka code example di article sebelumnya. Buat penyegaran saya sertakan potongan kodenya diatas.  Tambahkan Proptypes import React from "react"; import PropTypes from "prop-types"; export default function RowEmployee({ name, dateJoin }) { return ( <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{name}</div> <div>{JSON.stringify(dateJoin)}</div> </div> ); } RowEmployee.PropTypes = { name: PropTypes.string, dateJoin: PropTypes.string, }; Pada line 20 dan 21 kita bisa sebutkan semua propTypes yang ada pada komponen tersebut. Kita juga bisa assign si props name atau dateJoin tersebut nantinya akan memiliki tipe data apa, pada contoh tersebut karena sangat sederhana alhasil baru saya tunjukkan dengan tipe data string saja. Benefit Penambahan PropTypes Kita bisa melihat props yang tersedia pada komponen tersebut Kalian bisa ctrl+space untuk melihat props yang tersedia pada komponen tersebut, untuk membedakan yang mana props dan autocompletion yang lain, kalian bisa perhatikan pada icon kunci inggris di kolom autocompletenya Summary Ok dari semua penjelasan diatas baru sebutir contoh tentang split component, dengan memecah komponen menjadi kecil-kecil seperti itu kita bisa memaksimalkan komponen yang mana yang bisa kita gunakan di komponen lain juga (reusable component), tapi hati-hati dan rencanakan dengan baik karena bisa saja split komponen menjadi menyusahkan kalau kita salah dalam melakukan perencanaan.

Apa sih props di react? Ngomongin props di react nggak jauh-jauh dari yang namanya components, baik smart-components atau komponen penyusun tampilan biasa. Pada dasarnya props memungkinkan kita memberikan hak akses pada state/variable di parent komponen supaya bisa di konsumsi oleh child komponen. Contoh sederhana {employees.map((item) => { return ( <RowEmployee key={item.dateJoin} dateJoin={item.dateJoin} name={item.name} /> ); })} Potongan kode di atas menunjukkan bahwa ada sebuah komponen react dengan nama <RowEmployee /> yang kita beri props dateJoindan name,jangan lupa kita sisipkan props key pada element di setiap kita melakukan perulangan Lanjut ngoding... 1.    Bahan Dasar function App() { const employees = [ { name: "Avriza Hakim", dateJoin: new Date(2021, 3, 19) }, { name: "Danny Bramantyo", dateJoin: new Date(2021, 8, 27) }, { name: "Angga Berdikari", dateJoin: new Date(2021, 0, 30) }, ]; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Aplikasi kepegawaian sangat cetar membahana!</p> <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>Nama Lengkap</div> <div>Tanggal Bergabung</div> </div> {employees.map((item) => { return ( <div key={item.dateJoin} style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{item.name}</div> <div>{JSON.stringify(item.dateJoin)}</div> </div> ); })} </header> </div> ); } Berikut potongan kode awal sebelum baris dari data employee kita pecah ke child komponen <RowEmployee />, pada line 5 ada sebuah variable menggunakan const yang berisi data employees, lanjut di line 29-39 adalah potongan kode yang harus kita improve menjadi child komponen dan akan kita lewati props 2.    Refractoring code Intinya refractoring code itu kita pecah komponen yang sering berulang-ulang sehingga kita bisa gunakan secara efisien, tentunya juga bisa memangkas line of code , mulai dengan membuat file baru dengan nama RowEmployee.js.  import React from "react"; export default function RowEmployee({ name, dateJoin }) { return ( <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{name}</div> <div>{JSON.stringify(dateJoin)}</div> </div> ); } Kita bisa cut line 29-39 (pada bagian bahan dasar) untuk kita paste di file RowEmployee.js di line 5 seperti potongan kode diatas. Lalu kita hapus props keynya karena yang di ulang bukan div ini melainkan komponen RowEmployee yang nanti kita pasang di file parentnya. Perhatikan pada line 3 kita juga menerima props dimana pada kasus ini langsung kita destructure si props ini menjadi name dan dateJoin  3.    Render <RowEmployee / > {employees.map((item) => { return ( <RowEmployee key={item.dateJoin} dateJoin={item.dateJoin} name={item.name} /> ); })} Dari baris div yang panjang tadi bisa kita gantikan dengan single line komponen <RowEmployee … dengan list props seperti potongan kode diatas, jangan lupa menambahkan props key karena reactjs butuh informasi ini untuk mengetahui item mana yang sedang diberlakukan perulangan. PRO TIPS Usahakan props pada child komponen seperti ini menjadi primitive variables, maksudnya bukan object dalam kata lain seperti, string, number dan semacamnya. Kenapa harus primitive variable, ini dampaknya ke performance, naturalnya setiap komponen sudah melakukan pengecekan pada setiap perubahan props, ketika kita lewatkan object pada props, kita harus melakukan pengecekan extra untuk menahan re-render pada semua komponen. Summary Sebenernya kita bisa lewatkan hampir apapun pada props, tapi ingat jangan sampai terjebak props ini dari siapa dan akan kemana. Jika ingin melewatkan state ke deep-nested komponen sebaiknya kamu belajar Redux atau state management lainnya

Pada saat mengembangkan sebuah aplikasi menggunakan Flutter, maka akan ada banyak sekali jenis package yang dapat kita gunakan. Kita juga pernah membahas mengenai 5 packages lain yaitu pada Flutter Insight: Top 5 Package pada Flutter.  Dengan menggunakan package, proses pengembangan sebuah aplikasi dapat berjalan lebih mudah dan cepat. Pada tips kali ini kita akan membahas mengenai top 5 packages yang pastinya akan sangat membantu seorang Flutter Developer dalam mengembangkan aplikasi. 1. Flutter SVG Package yang pertama yaitu Flutter SVG. Dengan menggunakan package tersebut, kita dapat memuat sebuah icon dengan resolusi yang lebih baik jika dibandingkan dengan png. Selain itu, format SVG juga lebih ringan dibanding dengan png. 2. Google Sign In Flutter juga menyediakan sebuah package yang dapat memudahkan kita dalam menambahkan fitur sign in dengan menggunakan akun google. Selain itu, kita dapat menggunakan package ini pada platform iOS dan Android. 3. Video Player Package yang ketiga yaitu video player. Dengan menggunakan package ini, kita dapat memasukkan sebuah video yang dapat dijalankan pada aplikasi Flutter kita. 4. Pull to Refresh Sesuai namanya, packagePull to Refresh memungkinkan kita untuk memberikan kemudahan jika ingin menambahkan fitur refresh pada aplikasi kita. Jika ada sebuah update tertentu atau update pada aplikasi kita, fitur pull to refresh dapat memperlihatkan perubahan yang ada pada sekali pull. 5. Flutter Table Calendar Package yang terakhir yaitu Flutter table calendar. Dengan menggunakan package ini, kita dapat menambahkan fitur kalender pada aplikasi yang kita kembangkan. 6. Flutter Facebook Authentication Selain dapat menggunakan Google Sign In, Flutter juga memberikan kemudahan pada developer jika ingin menggunakan Facebook authentication. Sehingga user dapat login dengan menggunakan akun Facebook. 7. Flutter Just Audio Jika kita ingin menambahkan sebuah audio ke dalam aplikasi Flutter, kita dapat menggunakan package just audio dari Flutter ini. Nah, itu adalah 7 package yang dapat kita gunakan untuk membuat fitur di dalam aplikasi Flutter kita semakin menarik. Oiya, jika kita ingin belajar lebih dalam mengenai Flutter, kita bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar!

Hello people with the spirit of learning! Penggunaan illustrator dalam berbagai kebutuhan grafis dapat memudahkan seorang designer grafis untuk menyelesaikan projectnya. Sebagai pemula, berikut kami berikan proses dalam membuat desain burger dengan menggunakan illustrator. Lets Go! Step 1 : Color Palette Gunakan color palette berikut untuk memberikan pewarnaan desain burger yang akan dibuat. Step 2 : New Document Buatlah lembar kerja baru dengan cara "Pilih File > New > Masukkan ukuran artboard 2500 px x 2500 px " Tekan Create. Step 3 : Outline Roti Burger Buatlah bentuk rectangle dengan cara "Pilih icon rectangle dengan menekan "M" > Tekan Shift + Drag di artboard sehingga membentuk kotak"Hilangkan fill dengan menekan "Shift+X", jadi pastikan hanya tinggal stroke atau garis nya saja (Lihat Step 1)Buat kotak bagian atas melengkung dengan menekan "A", seleksi pada titik atas bagian kanan dan kiri kemudian drag ke arah dalam sampai melengkung secara penuh (Step 2).Buat kotak bagian bawah melengkung dengan menekan "A", seleksi pada titik bawah bagian kanan dan kiri kemudian drag ke arah dalam sampai melengkung sedikit (Step 3).Buat persegi panjang dengan menekan "M" dan tempatkan di tengah-tengah objek melengkung (Step 4)Jadikan objek melengkung menjadi 2 bagian, "Pilih kedua objek" kemudian pilih "Pathfinder pada Panel Properties >Minus Front"Buat melengkung bagian tengah objek dengan menekan "A", seleksi pada titik tengah saja dan tarik ke bagian dalam (Step 6) Step 4: Outline, Sayuran, Daging dan Keju 1. Buatlah persegi panjang dengan menekan "M" dan tempatkan dibagian roti bawah (Step 1). Pisahkan garis yang bawah dengan menekan "A" pilih titik kanan dan kiri bagian bawah kemudian pilih Cut path at selected anchor point (Lihat gambar di bawah). 2. Garis bagian bawah yang sudah terpisah, dibuat melengkung dengan "Pilih Effect > Pilih Transform and Distort > Pilih Zig Zag". Masukkan Size dan sesuaikan, Pada bagian Points pilih "Smooth" (Lihat gambar di bawah). 3. Gabungkan garis lengkung dengan persegi panjang dengan menekan "A" kemudian pilih kedua titik, selanjutnya pilih Connect selected end points (Lihat gambar di bawah). 4. Jadikan lengkung disetiap sisinya untuk sayurannya, dengan menekan "A" kemudian memilih titik atas dan titik bawah dan tarik ke bagian dalam sampai melengkung (Lihat gambar di bawah). 5. Memisahkan sayuran dengan roti burger bagian bawah, pilih kedua objek kemudian pilih Shape Builder Tool "Shift+M", arsir bagian perpotongan antara roti dan sayuran (Lihat gambar di bawah). 6. Buatlah kembali persegi panjang dengan menekan "M" dan buat persegi panjang dibagian atas sayuran, kemudian jadikan lengkung dengan memilih salah satu titik sudutnya selanjutnya tarik kebagian dalam (Lihat gambar dibawah). 7. Buatlah dua objek persegi panjang, persegi panjang yang kecil (warna biru) diposisikan pada persegi panjang pertama (warna merah). Kemudian gabungkan keduanya dengan menggunakan Shape Builder Tool "Shift+M" Selanjutnya buat lengkung semua sudutnya. (Lihat gambar di bawah). Step 5 : Colouring Berikan warna pada masing-masing objek, yaitu : Kode warna #EC9F1F untuk rotiKode warna #F5D812untuk kejuKode warna #C0522d untuk daging,Kode warna #55BD53 untuk sayuran, danKode warna #4D0B00 untuk outlinenya Step 6 : Shadow & Highlights 1. Membuat hightlights pada roti burger, pilih roti burger kemudian pilih pada Object selanjutnya pilih Path dan Offset Path. Pada panel Offset Path, silahkan masukan nilai pada kolom Offset. (Lihat gambar di bawah). 2. Buatlah efek sinar pada roti bagian atas, dengan menduplikat objek kemudian potong menggunakan click to minus front (Lihat gambar di bawah). 3. Buatlah efek bayangan pada bagian keju, Pilih objek keju, kemudian copy dan geser ke bawah dan keatas untuk membentuk bayangan pada bagian atas dan bawah. Berikan warna #FFFFFF untuk bayangan atas dan warna #DB6420 untu bayangan bawah (Lihat gambar di bawah). 4. Buatlah efek bayangan pada bagian dagingnya, "copy (Ctrl+C)" bagian daging dan paste (Ctrl+F) pada bagian daging, kemudian geser ke atas untuk bayangan atas dan geser kebawah untuk bayangan bawah. Berikan warna #A04330 pada bayangan dan warna #C2522D pada bagian dagingnya (Lihat gambar di bawah). 5. Buatlah efek bayangan pada bagian sayurannya, "copy (Ctrl+C)" bagian sayuran dan paste (Ctrl+F) pada bagian sayuran, kemudian geser ke atas untuk bayangan atas dan geser kebawah untuk bayangan bawah. Berikan warna #B1D49B pada bayangan bawah dan warna #52964B pada bayangan bawah (Lihat gambar di bawah). Step 7 : Finishing Setelah semua tahapan di buat, sekarang tinggal finishing dengan menambahkan shadow pada bagian bawah burgernya. Buatlah objek elips, Pilih "L" kemudian arahkan elips dibagian bawah burger.Simpan elips dibelakang burger, Klik kanan pada elips, Pilih Arange > Pilih Send to Back.Berikan warna #280501 pada bayangannya. Good Job! Akhirnya telah menyelesaikan desain sederhana dengan membuat objek burger. Buat kalian yang ingin mendalami menjadi seorang desain grafis, Saya sudah buatkan kelas khusus untuk kalian, agar mahir menggunakan Adobe Illustrator mulai dari Basic sampai Advance. Tidak lupa di kelas juga Saya memberikan project grafis yang bisa kalian jadikan portfolio untuk karyamu. Sekian tips kali ini, semoga bermanfaat, dan Semangat Belajar!

Hello, people with the spirit of learning. Beberapa tahun terakhir ini Firebase mulai banyak dikenal dan digunakan oleh para developer termasuk di Indonesia. Firebase adalah suatu layanan dari Google untuk memberikan kemudahan bahkan mempermudah para developer aplikasi dalam mengembangkan aplikasinya. Firebase alias BaaS (Backend as a Service) merupakan solusi yang ditawarkan oleh Google untuk mempercepat pekerjaan developer. Ada banyak sekali fitur-fitur yang dapat kita gunakan dalam Firebase. Pada tips kali ini, kita akan mempelajari bagaimana cara mengkonfigurasi Firebase. Untuk menggunakan Firebase dengan Flutter pada iOS, kita perlu untuk mengkonfigurasi proyek Flutter agar dapat menggunakan library FlutterFire dengan benar. Konfigurasi Dependencies Pertama-tama kita perlu menambahkan dependencies ke dalam file pubspec.yaml seperti pada contoh di bawah ini. dependencies: flutter: sdk: flutter cloud_firestore: ^1.0.0 firebase_auth: ^1.0.0 google_fonts: ^2.0.0 Membuat Projek Firebase 1. Kunjungi Website Firebase Console. 2. Pilih "Add Project" seperti pada gambar di atas. 3. Lalu masukkan nama projek sesuai dengan projek yang sedang kita kerjakan. 4. Jika ingin mengaktifkan google analytics pada projek Firebase, klik Continue. 5. All done! Sekarang tinggal pilih Create Project. Konfigurasi iOS Pada tampilan awal Firebase, maka akan terlihat beberapa pilihan app yang bisa kita gunakan seperti iOS, Android dan Web. Namun, karena pada tips kali ini kita akan melakukan konfigurasi iOS, maka cukup pilih icon iOS seperti pada gambar di atas. Untuk dapat mengetahui iOS bundle ID ikuti langkah-langkah di bawah ini: Buka XcodeBuka Terminal open ios/Runner.xcworkspace Sebelum mengetikkan kode di atas, pastikan direktori nya sudah pada direktori projek Flutter yang akan kita buat. Jika sudah, maka tampilannya akan seperti pada gambar di atas. Lalu, pilih Runner dan copy Bundle Identifier yang akan menjadi iOS bundle ID. Selanjutnya tinggal copy dan paste ID tersebut pada halaman sebelumnya. Lalu masukkan nickname sesuai dengan kebutuhan kita dan pilih Register app Selanjutnya download GoogleService-Info.plist  Tambahkan pada bagian Runner di dalam Xcode seperti pada gambar di atas. Lalu centang pilhan-pilihan seperti di atas.Langkah selanjutnya tinggal pilih next dan Continue to Console Selesai! Sekarang kita telah berhasil mengkonfigurasi Firebase ke dalam projek Flutter kita menggunakan iOS. Tunggu tips berikutnya dan kita akan membahas mengenai Konfigurasi di Android. Untuk temen-temen yang mau belajar lebih dalam mengenai Firebase pada Flutter, kita bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Hello people with the spirit of learning! Kamu sering tidak merasa kesulitan cari color palette yang cocok baik untuk UI Design maupun ilustrasimu? Color palette sangat berpengaruh lho pada aspek desain kamu, karena warna selain memperindah namun juga mempunyai kemampuan untuk "mempengaruhi" psikologis kita. Oleh karena itu, kita perlu memilih warna yang tepat sesuai dengan tujuan karya kita. Terus bagaimana dong? Apa pinterest jadi jalan ninja nya? Oh tidak, selain pinterest berikut adalah 3 website yang bisa jadi preferensi kamu saat cari color palette! Coolors Website ini selain menyediakan macam-macam color palette tapi juga up-to-date lho! Karena disini kita dapat eksplorasi color palette yang lagi trendy di jaman kekinian tanpa harus searching dua kali. Selain itu, Coolors juga menyediakan extension yang bisa digenerate langsung ke Adobe & Chrome kita, efektif banget yah? Color Tool - Material Design Salah satu fitur dari Material Design ini dibuat khusus bagi kalian yang ingin eksplor color palette untuk User Interface kalian dengan 6 screen yang berbeda! Uniknya, kita juga bisa terapin primary, secondary dan color text secara langsung di website ini. Jadi kamu tidak perlu khawatir revisi warna untuk klien, karena Color Tool ini bisa di share link sehingga semua orang bisa mengaksesnya! Color Palette Generator - Canva Lhoo, kok ada Canva disini? Jadi, ternyata Canva juga menyediakan fitur color palette namun tidak seperti biasanya. Karena kita bisa mendapatkan color palette kita sendiri dari image / foto kita! Tidak perlu pusing lagi menghadapi klien yang masih ragu dengan color palette, karena bisa kita sesuaikan karakteristik dan produk klien kita dengan generator ini! Bagaimana? Jangan lupa dicatat yah websitenya karena siapa tau bisa digunakan kedepannya! Bagi kalian yang ingin mempelajari cara menggunakan color palette yang benar pada User Interface kalian, kalian bisa mengikuti kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Karena selain visual design, kita juga bisa mempelajari User Interface secara menyeluruh. Jadi tunggu apa lagi? Selamat belajar!

Hello people with spirit of learning! Suka merasa ribet ga kalau harus sedia alat tulis dan kertas buat brainstorming product yang mau dibuat? Atau mungkin kalian sedang kerja dan kolaborasi secara remote yang pastinya ga mungkin rekan kerja kalian bisa brainstorming bareng apalagi ngerevisi di waktu yang bersamaan kan? Nah kalo punya kendala seperti itu, coba deh pakai whimsical. Disini saya coba merangkum jadi 3 point kenapa whimsical bisa jadi solusi kalian dalam brainstorming sebelum ngedesign. Dashboard Pertama, kalian bisa kunjungin website whimsical.com, disini saya ga akan ngasih tau cara daftar dan loginnya karena saya yakin kalian udah pada bisa ya. Cukup daftar akun emailnya aja, atau kalo ga mau ribet juga bisa daftar pakai akun google mail yang udah kalian punya. Kerja Bareng Secara Real Time Sebelum kalian bisa kerja bareng, di whimsical perlu invite akunnya dulu (ya jelas juga ya, kalo ga diundang nanti siapa aja bisa ngacak-ngacak projectnya dong ya). Caranya simple, pilih menu Share, Export & Print. Setelah itu, lanjut pilih menu Get Shareable Link yang ada pada baris menunya. Nah, setelah itu kalian bisa masukkan email akun teman kolaborasinya dan pastinya udah terdaftar di whimsical yaa. Oya, perhatiin juga nih ketiga menu yang ada di bagian Add guest. Karena masing-masing menu itu fungsinya beda-beda. Viewer: Akun ini cuma bisa melihat project yang kalian buat aja.Commenter: Akun ini bisa melihat dan juga komen revisi sama brainstorming yang udah kalian buat.Editor: Akun ini punya kendali yang sama seperti pemilik utama. Bisa mengubah tampilannya atau bisa juga hapus tampilan yang udah kalian buat. So, pastiin tipe guestnya ya sebelum ngundang akunnya. Ok, kalo tadi udah ngebahas tentang whimsical dan cara kolaborasi bareng. Sekarang kita cari tau, emangnya di whimsical bisa buat brainstorming apa aja sih? 1. User Flow Pertama, di whimsical kalian bisa membuat user flow atau mungkin ada yang nyebutnya flowchart. User Flow ini jadi tahap yang penting banget buat kalian nentuin alur produk yang akan dibuat. Sehingga kalian punya gambaran tentang halaman apa saja yang akan dibuat nantinya. And the next step is... 2. Sitemap Kalo udah selesai bikin user flow, kalian bisa lanjut ke bagian sitemap biar kalian bisa lebih punya gambaran tentang design yang akan dibuat. Nah, di sitemap ini kalian bisa nentuin screen apa aja yang akan dibuat dan ga hanya itu, dengan membuat sitemap kalian juga bisa punya gambaran tentang konten apa aja yang harus dibuat dalam setiap halamannya. 3. Wireframe Yang terakhir ada wireframe yang mungkin dari kalian udah tau proses ini ya. Jadi, di wireframe ini kalian menuangkan semua hasil brainstorming dari tahap user flow dan juga sitemap dan mengubahnya ke tampilan visual dalam bentuk layouting (tanpa memikirkan warna dan tipografinya). Nah itu dia beberapa keuntungan brainstorming menggunakan whimsical yang pastinya bakal bikin proses brainstorming kalian jadi makin lebih cepat. Jika kalian tertarik mempelajari lebih dalam tentang proses brainstorming di whimsical, silahkan bergabung pada kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Dalam kelas itu, kita akan bersama-sama membedah dan mempelajari proses apa saja yang harus dilakukan dalam mendesign biar prosesnya jadi lebih cepat dan efisien. Ga hanya itu, kalian juga akan mempelajari bagaimana caranya mengubah brainstorming menjadi product design yang menarik dan menjual. Sampai jumpa di kelas yaa! Terima kasih.

Hello people with the spirit of learning! Flutter merupakan SDK yang dikembangkan oleh Google untuk membangun aplikasi Android, iOS, Website, dan Desktop dalam single codebase. Sejak pertama kali diluncurkannya, hingga saat ini Flutter sudah digunakan oleh berbagai perusahaan besar seperti Alibaba, Tencent, Ebay, Grab, dan masih banyak lainnya. Namun, banyak developer pemula yang masih kebingungan bagaimana cara belajar Flutter secara efisien. Pada artikel kali ini, saya akan membagikan tips kepada kalian bagaimana cara yang efisien untuk belajar flutter. Konsep OOP Hal yang pertama perlu kita pelajari untuk menjadi seorang Flutter Developer adalah Konsep Object Oriented Programming (OOP). Karena di dalam Flutter hampir semua Widgets menggunakan konsep OOP, sehingga mudah digunakan secara berulang kali. Basic Widgets Setelah kita paham konsep OOP, hal berikutnya yang perlu kita pelajari adalah Basic Widgets yang ada di dalam Flutter. Seperti AppBar, Container, Text, Image, BottomNavigationBar, dan widget-widget lainnya. Karena nantinya widget-widget tersebut akan sering kita gunakan saat membuat aplikasi menggunakan Flutter. Layouting Kemudian, setelah mempelajari basic widgets, hal yang berikutnya kita pelajari adalah bagaimana cara membuat layout yang baik pada Flutter. Menurut saya belajar layouting ini sangat penting dalam proses development aplikasi kita. Karena seringkali terdapat UI Design yang memiliki layout yang sulit diimplementasi, sehingga kita harus lebih kreatif dalam melakukan slicing layout pada aplikasi. State Management Hal berikutnya yang perlu dipelajari adalah State Management. Kita bisa belajar menggunakan berbagai API baik yang sederhana seperti setState pada Stateful Widget, ataupun Plugin State Management seperti Provider, BLoC, dan GetX. Dengan adanya State Management, data-data pada aplikasi kita dapat dikelola dengan baik. Consume API Yang terakhir adalah Consume API. Kita bisa menggunakan berbagai API yang disediakan secara global atau membuatnya sendiri dengan teknologi Backend seperti Firebase, Laravel ataupun Node Js. Dengan menggunakan Consume API, data yang ada pada aplikasi kita bisa lebih dinamis. Bagaimana? Apakah kalian sudah siap menjadi seorang Flutter Developer Profesional? Jika kalian tertarik untuk mempelajari Flutter lebih lanjut, kalian bisa mengikuti kelas Fullstack Laravel Flutter E-Commerce App. Pada kelas ini kita akan belajar membuat aplikasi menggunakan Flutter dan Laravel dengan studi kasus toko online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar dapat mencapai target pasar kita.