Tips All

Isometric Design memberikan dimensi yang menarik dan menambahkan nilai visual pada project desain. Dalam artikel ini, kita akan membahas cara membuat isometric design menggunakan plugin SkewDat di Figma. Dengan memahami dasar-dasar plugin ini, kamu dapat meningkatkan desain isometric-mu dengan cepat dan efisien. SkewDat adalah plugin Figma khusus untuk memberikan kemampuan skewing atau memiringkan objek dalam desain. Plugin ini mampu memberikan kita cara yang intuitif dan fleksibel untuk mengubah sudut dan bentuk elemen desain dengan “pas”. Dengan SkewDat, kamu dapat dengan mudah menciptakan efek visual isometrik yang sulit didapat dengan cara manual. Plugin ini dapat diakses melalui Figma Community atau langsung dari Interface Figma, memudahkan desainer/pengguna untuk menerapkannya ke dalam alur kerja design mereka. Adapun keunggulan SkewDat antara lain: Mudah digunakan Salah satu keunggulan utama SkewDat adalah kemudahan penggunaannya. Plugin ini dirancang dengan interface yang intuitif/resposif, membuatnya mudah digunakan oleh designer pemula sekalipun. Cara mengaplikasikannya yang sederhana memungkinkan pengguna untuk dengan cepat dan efisien membuat efek skewing pada elemen desain mereka tanpa perlu menguasai keterampilan desain yang rumit.Ketepatan yang Tinggi SkewDat memberikan tingkat presisi/ketepatan yang tinggi dalam mengatur skewing objek. Designer dapat dengan akurat mengatur sudut dan bentuk elemen desain, memastikan bahwa hasilnya tampak profesional dan sesuai dengan ekspektasi kreatif mereka. Presisi ini menjadi kunci untuk menciptakan isometric design yang rapi dan aesthetic.Flexiblity Keunggulan lain dari SkewDat adalah fleksibilitas dalam desain. Plugin ini memberikan pengguna kebebasan untuk menyesuaikan elemen desain dengan cara yang sulit dicapai secara manual. Dengan SkewDat, pengguna dapat bereksperimen dengan berbagai sudut skewing, menciptakan tampilan isometrik yang unik dan menyesuaikan desain sesuai kebutuhan kreatif. Fleksibilitas ini memberikan ruang bagi eksplorasi dalam proses desain. Sekarang mari kita buat Isometric Page menggunakan SkewDat! Install Plugin Buka Figma dan masuk ke Explore Community di Menu sidebar. Search SkewDat Plugin dan jika sudah ketemu, select “Try it Out” atau pilih opsi Save. Siapkan Page atau Artboard Pilih Page atau Artboard yang ingin kamu skew. Lalu klik kanan untuk mengaktifkan plugin SkewDat. Atur Tingkat Kemiringan Design Di sini, saya mengatur tingkat skew menjadi 36° dan juga mengubah Rotation menjadi 22°. Drop Shadow Kamu bisa menambahkan shadow untuk membuatnya menjadi lebih aesthetic. Di sini, saya mengubah X= -20, Y= 60, Blur= 40, dan opacity warna #343B46 menjadi 10%. Finishing Nah congrats! 🎉 Sekarang kamu sudah mengerti ‘kan cara skew design/object dengan SkewDat? Gunakan plugin SkewDat untuk bereksperimen dengan berbagai elemen desain lainnya. Biasanya, designer menggunakan plugin SkewDat untuk membuat Design Presentation, selain menampilikan hasil Mockup Design dan Typeface. Atau biasa juga untuk membuat sebuah Cover pada file design mereka. Kalau kamu ingin meng-explore lebih luas lagi tips&trick pembuatan UI/UX yang menarik, kamu bisa memulainya dengan mengikuti kelas-kelas gratis UI/UX di BuildWithAngga lho! Jadi, tunggu apa lagi? Sampai jumpa di kelas 😉

Dalam dunia desain, Figma telah menjadi “alat” yang sangat penting bagi para desainer untuk bekerja-sama dan menciptakan prototype yang efektif. Salah satu fitur unggulan desainer di Figma adalah plugin "Mockup". Plugin ini tidak hanya menghadirkan kenyamanan dalam pembuatan mockup, tetapi juga membeikan kualitas prototipe desain secara keseluruhan. Plugin Mockup di Figma dirancang untuk mempermudah proses pembuatan mockup, yang merupakan representasi visual dari desain produk atau proyek. Dengan menggunakan plugin ini, kamu dapat dengan mudah menambahkan tampilan desainmu ke dalam bingkai atau perangkat tertentu, memberikan gambaran yang lebih nyata tentang bagaimana desain tersebut akan terlihat dalam konteks yang diinginkan. ini sangat membantu dalam mengomunikasikan ide kepada klien atau anggota tim dengan lebih jelas dan efektif. Keunggulan Plugin Mockup: Presentasi yang Lebih Menarik: Dengan menggunakan plugin Mockup, designer dapat memberikan presentasi yang lebih menarik dan nyata, menunjukkan desain dalam situasi yang mirip dengan penggunaan sehari-hari.Beragam Pilihan Mockup: Plugin ini menyediakan berbagai opsi mockup, mulai dari perangkat seperti smartphone dan tablet hingga bingkai cetak dan presentasi, memberikan fleksibilitas dalam memilih konteks yang diinginkan.Tingkat Customization yang Tinggi: Designer dapat customize mockup sesuai dengan preferensi mereka. 1. Install Plugin Mulailah dengan meng-install plugin Mockup dari Figma Community. Cari plugin ini dan pilih "Try it out" atau pilih opsi “Save” untuk mengaktifkannya. 2. Siapkan Artboard Siapkan Artboard mana saja yang ingin kamu masukan ke dalam Mockup. 3. Aktifkan dan Buka Plugin Mockup Klik kanan dan pilih Plugins lalu pilih plugin Mockup maka plugin akan otomatis aktif. Jika sudah, pilih jenis/style mockup apa yang kamu mau dan butuhkan. 4. Seleksi dan Masukan Artboard Pilih tanda “+” pada plugin lalu select artboard yang kamu inginkan untuk dijadikan mockup. 5. Finishing Setelah itu, isi semua mockup untuk ditambahkan ke dalam canvas, select Paste in Canvas. Jika sudah, masukan mockup UI design-mu ke dalam Frame. Done! 🎉 Ta da! Sekarang kamu sudah mengerti cara menggunakan plugin Mockup dan sebeapa pentingnya Mockup dalam mendesain 🎉 Kesimpulan Nah, sekarang dapat kita simpulkan bahwa keberadaan Mockup Plugin dalam Figma membawa dampak positif dalam mengoptimalkan proses desain dan prototyping. Dengan plugin ini, desainer tidak hanya dapat menghemat waktu, tetapi juga meningkatkan kualitas presentasi dan komunikasi ide desain. Kelebihan pemaikaian yang mudah, beragam pilihan mockup, dan tingkat custom yang bervariasi menjadikan plugin ini sebagai elemen penting dalam toolkit desain di Figma. Sehingga, Mockup Plugin merupakan “solusi” yang memungkinkan designer untuk mendapatkan potensi penuh dari setiap design yang mereka ciptakan, menampilkannya dalam konteks yang lebih nyata dan relevan. Tertarik belajar lebih jauh tentang dunia UI/UX? Yuk mulai dengan kelas UI/UX gratis di BuildWithAngga untuk memperdalam skill mendesainmu 😊

Pernahkah kalian mendengar istilah Jambot Widget di Figma? Jika tidak, siap-siap untuk terkejut! Di dalam artikel ini, saya akan menjelaskan AI keluaran terbaru dari Figjam yaitu Jambot, yang dapat membantu mempercepat produktivitas di FigJam yang terintegrasi dengan OpenAI dalam pekerjaan UX designer maupun UX researcher. Dikembangkan oleh Figma, Figjam merupakan digital whiteboard kolaboratif yang dapat membuat tim bekerja sama secara real-time untuk brainstorming, design, maupun iterasi. FigJam dibuat untuk memfasilitasi kolaborasi yang tiada limit mulai dari ide ke design akhir, membuatnya menjadi favorit di kalangan UI/UX designer dan creative teams lainnya. Di dalam artikel ini, saya akan memberikan beberapa key features yang sangat berguna untuk membantu kamu dalam process design thinking yang efisien dan efektif Cara Memakai Jambot Untuk memakai Jambot, hal pertama yang harus kamu lakukan adalah menambahkan widget ke dalam Figjam board kamu. Kamu dapat melakukan ini dengan cara menekan menu ‘recently used’ icon yang terdapat di toolbar bagian bawah, lalu ketik “jambot” pada search bar, dan click atau drag Jambot ke dalam board kamu Setelah Jambot berhasil tertanam di board, kamu dapat memulai menggunakannya dengan cara memilih fitur yang ingin dipakai. Ada 11 pilihan yang dapat dipakai, dapat disesuaikan dengan keperluan kamu nantinya. Brainstorming Ideas Kamu dapat meminta Jambot beberapa ide untuk brainstorm, cukup menambahkan sticky notes dan sambungkan ke widget Jambot AI. Lalu, berikan prompt seperti “Berikan beberapa ide konten tips and trick figma terbaru” Setelah selesai memberikan prompt, yang kita akan lakukan adalah memilih tombol ‘Ideate’ agar Jambot memberikan kita beberapa ide: Tidak hanya sampai situ, kamu juga bisa menghubungkan ide yang telah diberikan ke Jambot Widget untuk ditindak lanjuti seperti meminta Jambot untuk diberikan Similar Output, ataupun parafrase dengan nada dan style yang berbeda. Quick Summaries Terkadang, untuk membuat kesimpulan atau summary dari suatu sesi brainstorming atau rapat membutuhkan banyak waktu. Namun, dengan Jambot AI, kamu dapat meminta summary cukup dengan beberapa click saja. Seperti berikut: Cukup dengan block keseluruhan sticky notes, lalu pilih summarize. Jambot AI akan memberikan langsung sebuah summary berdasarkan sticky notes yang telah kita catat. Rewrite Texts JamBot AI dapat membantu anda membuat sebuah tulisan ataupun parafrase sebuah kalimat dengan beberapa click saja. Contohnya, saya disini ingin mengirimkan sebuah summary yang telah saya bikin kepada product manager. Saya cukup menyambungkan summary tadi kepada Jambot AI widget yang telah dimasukkan. Kesimpulan Well, berikut adalah beberapa fitur sederhana yang perlu kamu ketahui untuk menunjang produktifitas kamu sebagai UX Designer & UX Researcher. Sekarang, kamu dapat lebih fokus terhadap masalah yang lebih besar & penting. Jambot AI ini dapat kamu gunakan secara gratis selamanya, tetapi mempunyai limitasi penggunaan seperti hanya dapat digunakan di dalam 3 shared figjam. Namun, Jambot AI ini masih dalam fase beta dimana masih dalam masa testing yang belum stabil saat digunakan. Berikut beberapa key takeaways buat kamu: Brainstorming Ideas: Jambot AI dapat memberikan beberapa ide yang selanjutnya dapat dikelola lagi seperti parafrase, menjelaskan lebih detail, ataupun memberikan referensi yang sama.Quick Summaries: Dengan fitur ini, kamu dapat membuat kesimpulan dari sesi meeting ataupun sesi brainstorming kamu.Rewrite Text: Kamu dapat meminta Jambot AI untuk memberikan kalimat dengan nada & style yang kamu mau. Oleh sebab itu, Figjam merupakan alat yang sangat direkomendasikan untuk design team. Dengan bantuan Jambot AI, akan sangat efektif dan efisien dalam membantu kamu untuk AI nya. Jika kamu tertarik untuk mempelejari UI/UX Design dengan lebih lanjut. Silahkan dipelajari beberapa kelas gratis UI/UX Design yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan developer lainnya. Sampai jumpa di artikel & tips selanjutnya. Goodluck!

Dalam dunia desain user interface (UI), navigasi merupakan salah satu elemen kunci yang mempengaruhi experience pengguna. Dari beragam pilihan navigasi, bottom navigation bar atau menu navigasi bawah telah menjadi salah satu elemen yang sangat populer dalam aplikasi mobile dan situs web. Dengan fokus pada kesederhanaan dan kejelasan, terdapat beberapa prinsip penting yang dapat meningkatkan efektivitas bottom navigation bar. Dalam artikel ini, kita akan sama-sama belajar empat pedoman utama yang dapat membantu kamu menciptakan bottom navigation bar yang baik dan memaksimalkan user experience, mulai dari jumlah item yang optimal hingga desain visual yang jelas dan informatif. 1. Maksimal 5 Item, Minimal 3 Item Pastikan kamu memiliki ****paling banyak hanya 5 item dalam bottom navigation bar. Terlalu banyak opsi dapat membuatnya terlihat berantakan dan membingungkan user. Pilihlah item-item yang paling penting untuk ditempatkan di sana. 2. Tandai State Aktif dengan Jelas Pastikan ada indikator visual yang jelas untuk menandai item yang sedang aktif. Ini dapat berupa perubahan warna, icon yang lebih terang, atau “penyorotan” untuk membedakan item yang sedang digunakan oleh pengguna. 3. Sertakan Label! Tambahkan label untuk setiap item dalam navigasi. Label ini akan membantu pengguna memahami dengan jelas fungsi dari setiap ikon. Label yang singkat namun deskriptif dapat membuat navigasi lebih mudah dipahami. 4. No Scrolling Pastikan semua item yang terpilih dapat terlihat tanpa perlu scrolling. User harus dapat dengan mudah melihat semua pilihan yang tersedia tanpa harus scroll ke samping. Hal ini akan meningkatkan kejelasan dan keterbacaan navigasi. 5. Consistency Pastikan design setiap item dalam bottom navigation bar konsisten. Mulai dari ukuran, jenis huruf, hingga jarak antar item. Konsistensi membantu pengguna untuk merasa nyaman dan terbiasa dengan penggunaan navigasi. 6. Hindari Penggunaan Warna yang Berlebihan! Gunakan warna secara konsisten dan hindari penggunaan terlalu banyak warna yang bisa membingungkan pengguna. Pemilihan warna yang tepat dapat membantu membedakan fungsi, namun terlalu banyak warna dapat membuat tampilan menjadi tidak teratur. Kesimpulan 💬 Dalam pembuatan bottom navigation bar yang baik, terdapat beberapa prinsip penting yang perlu diperhatikan seperti: Batasan maksimal sebanyak 5 item,state aktif yang jelas,penggunaan label,hindari scrolling,konsistensi desain,dan pemilihan warna yang tidak berlebihan Hal-hal tersebut dapat membantumu menciptakan user experience yang lebih baik. Dengan mengikuti prinsip-prinsip ini, button navigation akan menjadi alat yang efektif dalam mengarahkan user ke fitur-fitur utama tanpa menyebabkan kebingungan. Konsistensi dan kesederhanaan adalah kunci dalam merancang bottom navigation bar yang baik untuk meningkatkan aksesibilitas navigasi dan kenyamanan pengguna. Jika kamu ingin belajar lebih dalam mengenai UI/UX design secara mendalam, kamu bisa mulai dengan kelas-kelas gratis UI/UX design menggunakan software Figma di BuildWithAngga 😊

Tahukah kamu bahwa salah satu kunci utama dalam merancang user interface (UI) yang responsif dan efisien adalah menggunakan fitur Auto Layout di Figma? Auto Layout adalah alat yang sangat berguna dalam pembuatan/pengembangan desain, yang memungkinkan elemen-elemen dalam suatu frame beradaptasi dengan baik saat ukuran atau kontennya berubah. Dalam artikel ini, kita akan mencoba membuat UI Button dengan Auto Layout seperti contoh button “Start Reading” di atas! ;) Langkah 1: Siapkan Frame Pertama, buka file baru atau artboard-mu yang sudah ada Pada Toolbar, select Frame atau ketik F pada keyboardDi contoh pembuatan button kali ini, buatlah frame dengan ukuran W: 600 dan H:100 (opsional sesuai dengan kebutuhanmu) Ubah warna frame sesuai selera. Contoh, saya memakai warna #767DFF Langkah 2: Menambahkan teks Pada toolbar, pilih Text atau klik T pada keyboardPilih font style seperti contoh yang ada di gambar. Kamu bisa sesuaikan sendiri dengan seleramu yaa! Kalau saya, saya akan mengubah warna teks menjadi putih #FFFFFF Langkah 3: Mengaktifkan Auto Layout Pertama, masukan dulu teks ke dalam rectangle.Select teks dan rectangle secara bersamaan dan tekan Shift+A atau pilih + pada section Auto Layout di side bar sebelah kanan dan sekarang, Auto Layout pada button sudah aktif. Pastikan pengaturan resizing komponen Auto Layout di atas adalah Hug Horizontal dan Hug Vertical. Langkah 4: Setting Auto Layout Ubah Horizontal Padding dan Vertical Padding sesuai keinginan. Di sini, saya buat Horizontal Padding menjadi 258px dan Vertical Padding menjadi 23pxSet juga Horizontal Gap Between Items untuk mengontrol jarak horizontal antara elemen-elemen yang berada di dalam frame Auto Layout. Padding tersebut akan menciptakan ruang di sekeliling elemen tersebut, memungkinkan elemen-elemen untuk tetap tertata rapi dengan baik dan terpisah dari tepi frame atau elemen lain yang ada di sekitarnya. Jangan lupa untuk pilih Align Center agar teks berada di tengah component yaa! Langkah 5: Corner Radius Atur Corner Radius untuk memberikan kesan modern dan responsif dan juga untuk meningkatkan nilai estetika pada button. Finishing Nah, sekarang button sudah siap! Sekarang kamu telah berhasil membuat UI button dengan Auto Layout di Figma. Kamu dapat menggandakan dan menyusun ulang button-button ini dengan mudah, dan ketika kamu perlu membuat perubahan, itu akan otomatis teraplikasi pada semua instance button. Lalu, apa bedanya jika button dibuat tanpa Auto Layout? Menata secara Manual: Element ditempatkan dengan menyesuaikan posisinya secara manual. Ini berarti kamu perlu mengatur posisi X dan Y setiap tombol secara individual.Keterbatasan Responsivitas: Element ini mungkin akan menjadi kurang responsif terhadap perubahan konten atau ukuran layar, sehingga kamu memerlukan penyesuaian manual yang lebih besar untuk menjaga tampilan yang sesuai seperti mengatur ulang posisi dan size element-mu.Kemungkinan tertimpa antar element dan terpotong: Tanpa Auto Layout, button cenderung tidak mengatur ulang secara otomatis, yang bisa menyebabkan elemen-elemen bertumpuk atau terpotong saat ruang terbatas. Kesimpulan Menggunakan Auto Layout dalam desain button memiliki banyak keunggulan seperti Responsivitas element,efisiensi waktu,dan konsistensi desain. Dengan menggunakan Auto Layout, respon element lebih jelas, dapat menghemat waktu dan design akan menjadi konsisten hingga mudah dipahami user. Pemilihan pemakaian Auto Layout tergantung pada kebutuhan desain yang kamu inginkan dalam project. Dalam banyak kasus, Auto Layout menjadi solusi yang lebih unggul dalam mengatasi tantangan dalam desain UI modern ini! Semoga artikel ini bermanfaat untuk kamu dalam proses desain UI/UX! Jika kamu ingin belajar lebih dalam tentang Auto Layout dan UI/UX design, kamu dapat mencoba bermacam kelas-kelas UI/UX gratis di BuildWithAngga. Selamat mendesain UI UX guys.

Ketika memasuki dunia digital yang serba cepat ini, keberadaan sebuah website dengan desain yang memukau menjadi bagian yang tak terpisahkan dari keberhasilan bisnis. Tampilan visual yang menarik tidak hanya menahan mata pengunjung lebih lama di situs kamu, tetapi juga meningkatkan kemungkinan mereka untuk berinteraksi dengan konten yang kamu tawarkan. Untuk mencapai hal tersebut, diperlukan serangkaian alat desain web yang handal. Dalam tulisan ini, kita akan membahas lima aplikasi desain web terkemuka yang dapat membantu kamu membentuk sebuah website yang tak hanya memanjakan mata, tapi juga fungsional dan responsif. 1. Adobe XD Dalam dunia desain UI/UX yang dinamis, Adobe XD berdiri sebagai perangkat lunak yang menyederhanakan proses kreatif. Antarmukanya yang ramah pengguna dan fitur-fitur inovatif memungkinkan kamu untuk melampaui batasan desain tradisional dan melangkah ke wilayah eksperimental dengan prototype yang dapat berinteraksi. Fitur Utama yang Menjadikan Adobe XD Favorit di Kalangan Desainer: Kemampuan Prototyping: Mengubah ide desain menjadi prototype yang dapat diinteraksikan dengan lancar.Fasilitas Kolaborasi: Platform kolaboratif yang memudahkan tim untuk mengedit dan memberikan umpan balik dalam waktu nyata.Adaptasi Responsif: Alat yang memastikan desain kamu tampil prima di berbagai perangkat dan ukuran layar. 2. Sketch Dikembangkan khusus untuk MacOS, Sketch memberikan solusi desain antarmuka yang simpel namun penuh daya. Aplikasi ini memungkinkan kamu untuk menghadirkan kecanggihan tanpa kompromi melalui fitur-fitur yang dipoles untuk kebutuhan desain modern. Manfaat Menggunakan Sketch dalam Alur Kerja Desainmu: Penggunaan Simbol & Pustaka: Memfasilitasi pembuatan elemen desain yang konsisten dan mudah diulang.Dukungan Plugin yang Luas: Dengan beragam plugin, meningkatkan efisiensi dan kreativitas menjadi lebih mudah.Antarmuka yang Bersih: Tampilan yang minimalis dari Sketch mendukung fokus penuh terhadap detail desain. 3. Figma Figma meraih perhatian para desainer dengan model berbasis cloud yang menawarkan kemudahan akses dan kolaborasi. Figma mendobrak batas fisik dan memungkinkan desainer untuk berkolaborasi secara efektif, tidak peduli di mana mereka berada. Poin-Poin yang Membuat Figma Menjadi Alat Esensial untuk Desainer Modern: Kemampuan Kolaborasi Secara Real-time: Memungkinkan tim untuk bekerja bersama di satu rancangan secara bersamaan, tidak peduli jarak.Aksesibilitas Cloud: Mengedit dan mengakses desain dari mana saja, menawarkan fleksibilitas luar biasa.Penggunaan Komponen yang Efisien: Dengan komponen dan varian, Figma memudahkan pembuatan desain yang konsisten. 4. Webflow Berbeda dengan alat-alat desain lainnya, Webflow menawarkan keistimewaan dengan mengintegrasikan desain dan pengembangan web menjadi satu alur kerja yang mulus. Ini memungkinkanmu untuk langsung mengubah desain menjadi situs web yang berfungsi tanpa perlu menulis satu baris kode pun. Mengapa Webflow Menjadi Game Changer dalam Dunia Desain Web: Antarmuka Drag-and-Drop: Mudah digunakan untuk mendesain situs tanpa memerlukan latar belakang pemrograman.Animasi yang Menawan: Tambahkan dimensi ekstra pada situs kamu dengan animasi dan interaksi yang dapat disesuaikan.Hosting Terpadu: Kemudahan dalam menerbitkan situs langsung dari platform Webflow. 5. Affinity Designer Sebagai saingan dari suite Adobe, Affinity Designer menawarkan kemampuan desain vektor yang hebat dengan biaya yang lebih bersahabat. Ini adalah pilihan yang sempurna bagi mereka yang mencari solusi satu kali bayar dengan kemampuan yang tidak kalah dari pesaing berlangganan bulanannya. Alasan untuk Mengadopsi Affinity Designer sebagai Alat Desainmu: Kinerja yang Responsif: Berjalan mulus pada berbagai konfigurasi sistem, memastikan proses desain yang lancar.Model Pembayaran Satu Kali: Tanpa perlu khawatir akan biaya langganan berulang.Fitur Vektor yang Canggih: Alat-alat vektor yang lengkap memudahkan proses kreatif dari sketsa hingga hasil akhir. Kesimpulan Dalam merajut keindahan dan fungsi pada sebuah situs web, memilih perangkat yang sesuai bukanlah sekedar keputusan teknis, tetapi juga sebuah langkah kreatif: Adobe XD membuka jalan bagi desain interaktif yang canggih.Sketch memberikan solusi desain yang efektif dan intuitif khusus bagi pengguna MacOS.Figma menawarkan platform yang memudahkan kolaborasi antar desainer dalam realtime, memperkaya proses kreatif.Webflow mengubah paradigma dengan memungkinkan desainer untuk memvisualisasikan dan mengimplementasikan desain web secara langsung.Affinity Designer, memberikan kebebasan kepada pengguna untuk bereksperimen dengan desain vektor dan raster dalam satu lingkungan yang lancar. Bagi kamu yang berambisi untuk menguasai keahlian desain UI/UX dan ingin menambah pengetahuan dalam merancang situs web yang tidak hanya indah dari sisi estetika tetapi juga kaya akan pengalaman pengguna, sekarang adalah saatnya. Melalui beberapa kelas desain UI/UX di BuildWithAngga, kamu akan dipandu untuk menumbuhkan kemampuan ini. Saya mengundangmu untuk mengeksplorasi dunia desain, memperluas wawasan dan berkolaborasi untuk menciptakan karya digital yang tidak hanya berfungsi dengan baik, tapi juga memanjakan mata dan mudah digunakan oleh setiap pengguna. Semoga sukses, dan kita akan berjumpa di kelas untuk memulai petualangan desainmu.

Pada kali ini kita akan belajar membuat button yang menarik menggunakan HTML dan Tailwind CSS untuk membangun projek website yang modern. Pertama kita perlu membuat tag HTML sederhana terlebih dahulu untuk hyperlink yang akan kita jadikan sebuah button <a href="#" class=""> View Profile </a> Kodingan HTML di atas tersedia class untuk komponen tersebut dan belum kita berikan styling menggunakan Tailwind CSS, kita akan memberikan property seperti: panjanglebarwarna backgroundtingkat radius cornerefek hover ketika disorot cursor <a href="#" class="font-bold text-white bg-orange-400 rounded-full px-5 py-3"> View Profile </a> Saya akan menjelaskan fungsi setiap class name yang digunakan di atas sebagai berikut: font-bold digunakan untuk menjadikan text pada button tersebut menjadi lebih tebal sehingga mudah dilihat penggunatext-white untuk menjadikan warna text menjadi warna putih karena kita menggunakan warna background orange sehingga lebih mudah dibacabg-orange-400 artinya adalah kita mengatur tersebut memiliki background berwarna orange dengan angka 400 sehingga warnanya di antara terang dan gelaprounded-full kita butuhkan untuk mengatur button tersebut berbentuk halus pada setiap sudutnya Pada button tersebut kita tidak mengatur lebar dan tinggi secara manual dengan angka yang pasti, namun kita menggunakan padding untuk mengatur lebar dan tinggi dari button tersebut. Mengapa demikian? agar lebarnya menjadi lebih responsive sesuai dengan panjang dari text pada button tersebut. Maka berikut hasil dari pembuatan button sejauh ini: Selanjutnya kita perlu menambahkan sedikit interaksi agar meningkatkan user experience ketika pengguna menyorot button tersebut maka akan berubah warna sehingga berbeda dengan komponen lainnya menggunakan kode berikut: <a href="#" class="hover:bg-indigo-950 font-bold text-white bg-orange-400 rounded-full px-5 py-3"> View Profile </a> Jika kita lihat di atas maka saya baru saja menambahkan hover:bg-indigo-950 yang berarti ketika di-hover atau sorot maka warnanya berubah menjadi indigo, kamu bisa cobain save projeknya lalu lihat hasilnya pada browser favoritmu. Selanjutnya kita belajar Tailwind CSS tentang apa lagi ya? saranin langsung ke BuildWithAngga ya melalui Instagram.

Untuk menciptakan website yang baik bukanlah hal yang mudah. Dibutuhkan keahlian dari berbagai aspek yaitu pemahaman mengenai kebutuhan pengguna, desain yang interaktif & efektif, responsivitas di berbagai perangkat, serta optimasi SEO untuk meningkatkan visibilitas situs web di search engine. AI atau Kecerdasan Buatan merupakan teknologi yang memungkinkan mesin untuk meniru fungsi kecerdasan manusia, melibatkan pembelajaran dan pemecahan masalah. Untuk website developer, AI dapat membantu mereka dalam berbagai cara. AI dapat digunakan untuk otomatisasi, seperti pengujian dan pelaporan bug, mempercepat pengembangan kode dengan prediksi kode, dan bahkan membantu dalam dokumentasi sebuah program. Ini membantu website developer untuk bekerja lebih efisien dan fokus pada aspek-aspek penting lain dari website development. Saya memiliki 5 rekomendasi AI tools canggih yang dapat membantu pekerjaan website developer agar lebih efektif dan lebih efisien lagi. ChatGPT Seperti yang kita tahu, ChatGPT adalah AI yang dirancang untuk menghasilkan teks alami atau human-like berdasarkan input yang diberikan. Meskipun tidak bisa menghasilkan kode secara keseluruhan, namun ChatGPT akan sangat membantu website developer untuk memberikan efisiensi workload, eliminasi human error, menyimpan waktu, serta memberikan ruang lebih untuk kreatifitas developer. Keuntungan dalam menggunakan ChatGPT sebagai berikut: Menghasilkan code snippet atau potongan kecil kode berdasarkan apa yang diminta secara spesifik.Scanning kode untuk identifikasi kode yang rentan dan menghasilkan error, serta memberikan solusi terhadap masalah tersebut.Otomasi Unit Testing, dapat memberikan layanan unit testing yang baik untuk Quality Assurance terhadap kode yang kita pakai. Github Co-pilot Github sudah banyak diketahui oleh kalangan programmer saat ini sebagai layanan hosting serta version control. Namun, banyak yang belum tahu bahwa Github mempunyai layanan AI yaitu Github Co-pilot untuk membantu para developer dalam efisiensi pekerjaannya. Keuntungan memakai GitHub Co-pilot sebagai berikut: Merubah input yang diberikan menjadi code.Menghasilkan saran fungsi atau kode di dalam text editor.Membantu mempelajari library atau framework yang tidak familiar.Mempercepat unit testing.Dapat bekerja dalam beberapa text editor seperti Visual Studio Code, JetBrains IDEs, maupun Neovim. TabNine TabNine adalah asisten AI yang sangat dipercaya oleh jutaan developer & perusahaan top seperti Amazon, Gitlab, dan Comcast. TabNine dibuat untuk mempercepat workflow dari developer dan menurunkan biaya review untuk iterasi kode. Berikut keuntungan memakai TabNine untuk developer: Memberikan dan menyelesaikan kode/fungsi keseluruhan, baik singkat maupun lanjutan.Dapat mempelajari kode dan style dari programmer.Bekerja dengan beberapa bahasan pemrograman seperti JavaScript, TypeScript, Rust, dan Go.Tidak hanya bekerja dalam laptop programmer, namun dapat bekerja di dalam server dan Cloud. Snyk Snyk.io merupakan AI assistant untuk developer meningkatkan security atau keamanan code yang menggunakan teknologi AI Engine terbaru. Walaupun belum terlalu lama di market, Snyk mempunyai kekuatan yang tidak kalah dari pesaingnya dengan memberikan layanan analisa kode, menyorot error, dan memberikan actionable rekomendasi. Berikut keuntungan yang disediakan Snyk: Memberikan keamanan untuk build dan deployment pipelines.Mengintegrasikan repositori source code kamu dengan aplikasi keamananMencari issue dan melakukan perbaikan dengan saran perbaikan. Mintlify Dokumentasi kode adalah hal yang sangat memakan waktu dan membosankan saat proses development. Tidak seperti AI sebelumnya, Mintlify memberikan otomasi keleluasaan dan kemudahan dalam dokumentasi source code kamu agar lebih rapi dan mudah untuk berkolaborasi dengan developer lain kedepannya. Mintlify dapat melakukan scanning code yang kita punya, dan melakukan generate dokumentasi dengan bahasa natural serta melakukan penjelasan terhadap dokumentasi tersebut, bahkan melakukan otomasi pekerjaan manajemen workflows di platform popular seperti Slack, Dropbox, dan Github. Penutup Well, berikut adalah beberapa rekomendasi AI untuk membantu kamu sebagai Website Developer agar bekerja dengan lebih efisien dan efektif. Serta, dapat memungkinkan kamu lebih fokus terhadap masalah yang lebih besar dan memberikan ruang untuk lebih kreatif. Menggunakan bantuan dari AI tersebut, para Website Developer dapat meningkatkan kualitas dan efisiensi kerja mereka sehari-hari. ChatGPT dapat memberikan code snippet, mengatasi code error, maupun otomasi unit testing.GitHub Co-pilot dapat berjalan di dalam text editor dan dapat memberikan sugesti fungsi atau kode didalamnya.TabNine AI yang dapat membantu developer langsung di dalam server cloud.Snyk memberikan kemudahan untuk membantu dalam keamanan kode.Mintlify mengotomasi pekerjaan developer dalam dokumentasi kode-kode yang telah dibuat. Jika kamu tertarik untuk mempelejari Website Developer dengan lebih lanjut, silahkan dipelajari beberapa kelas gratis Website Developer yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan developer lainnya. Sampai jumpa di artikel selanjutnya. Goodluck!

User Research merupakan proses yang sering kali dilewatkan oleh UI/UX Designer dalam membangun sebuah produk digital. Padahal untuk membuat suatu produk yang baik adalah sebuah produk yang dapat memahami kebutuhan, keinginan, dan perilaku pengguna. User research sering dilakukan melalui observasi, usability testing, user interview, bahkan feedback yang ada di playstore maupun appstore. Dengan begitu, sebuah produk yang dirancang dan dikembangkan akan efektif, seusia dengan kebutuhan pengguna, dan dapat bersaing dengan kompetitor pasar. Latihan Membuat User Research Sebagai UX/UI Designer maka ada beberapa tahap yang perlu dilakukan untuk melakukan User Research sehingga sesuai dengan pain-points dan target kebutuhan pengguna untuk memberikan experience terbaik terhadap produk yang kita buat. Dalam artikel ini, kita akan melakukan user research dengan FigJam. Figjam adalah sebuah produk dari Figma yang berfungsi sebagai online workspace untuk brainstorming dan kolaborasi ide. Dengan Figjam, tim dapat secara visual berkolaborasi dan berbagi ide melalui post-it digital, diagram, dan banyak lagi. Ini merupakan alat yang bagus untuk melakukan user research dan ‘How Might We’ proses. 1. Defisinikan Overview dan Background Masalah Sebaiknya sebelum kita melakukan User Research, ada baiknya untuk memberikan keterangan dan definisikan Overview seperti Platform yang dipakai, Background masalah, Goals dari User Research ini, dll). Dengan begitu, kita sebagai UX/UI Designer tahu lebih jelas dengan apa yang akan dilakukan. Kita bisa membuatnya dan mengisi kolom di Figjam seperti ini: Platform apa yang ingin dilakukan user research?Goals apa yang diharapkan akan tercapai?Later belakang masalahdan tools atau metode yang dipakai 2. Mengumpulkan ‘Voice of Users’ Pada proses pertama ini, kita bisa mengumpulkan feedbacks dari pengguna dari mana saja seperti Playstore’s reviews, user interview, bahkan survey. Untuk studi kasus ini, kami menggunakan review dan feedbacks dari playstore & appstore. Semakin banyak dan luas feedback yang diambil, maka akan baik dan banyak juga masalah yang akan kita temui di dalam aplikasi tersebut. Berikut contoh yang telah kami buat: Ketika mengumpulkan Voice of Users, kita hanya mengambil feedback yang berkaitan dengan User Experience maupun Desain Visualnya. Feedback yang berkaitan dengan Bug system atau system error, tidak perlu kita ambil. 3. Pain Points Classification Setelah kita mengumpulkan banyak Voice of Users dari metode yang kita tetapkan. Maka selanjutnya adalah melakukan klasifikasi atau mencari kesamaan untuk dikumpulkan menjadi beberapa grup poin-poin masalah pengguna. Seperti yang telah kami dibuat berikut: Proses klasifikasi atau synthesize masalah yang baik sangatlakh penting untuk mempermudah kita sebagai UX/UI designers untuk mengambil kesimpulan dan membuat suatu problem statement dari masalah tersebut. 4. Membuat Problem Statement Ketika sudah melakukan grouping atau klasifikasi poin-poin masalah pengguna. Saatnya kita dapat menyimpulkan dan membuat sebuah problem statement dari situ. Tujuannya, untuk memperjelas kebutuhan pengguna dan juga insights apa yang kita dapat dari masalah tersebut. Jika tidak, akan susah bagi UX/UI designers dan stakeholder lain untuk memutuskan apa yang akan ditindaklanjuti. Cara membuat Problem Statement: UserNeeds: Tuliskan kebutuhan pengguna berdasarkan klasifikasi pain points yang sudah dibuatInsights: Tuliskan apa yang didapat dari kebutuhan pengguna tersebut secara detailProblem Statement: Menggabungkan kalimat Need dan Insights menjadi sebuah kalimat. Hal ini cukup penting untuk memberikan penjelasan terhadap kebutuhan pengguna serta pain-points pengguna agar stakeholder maupun desainer lainnya tidak salah pengertian. 5. Prioritization Problems Prioritization Problems atau memprioritaskan masalah sangatlah penting untuk keberlangsungan product life cycle dengan memikirkan urgency dan seberapakah masalah tersebut sangat berdampak bagi produk. Pada proses ini, sangat disarankan untuk melakukannya bersama desainer lain, developer, maupun stakeholders. Dengan begitu, kita dapat mengetahui sudut pandang lain. Prioritas masalah ini biasanya dilakukan melalui voting, Voting yang paling banyak adalah masalah yang paling urgent dan harus segera dilakukan. 6. Summarize Findings Setelah dilakukan voting dan mendapatkan prioritas masalah, maka hal selanjutnya adalah membuat kesimpulan dari masalah tersebut. Kita dapat memberikan informasi seperti problem statements serta Voice of Users yang telah kita kumpulkan sebelumnya. Dan pada akhirnya, kesimpulan dapat kita teruskan ke UX Designer ataupun ke Product Designers untuk ditindaklanjuti. Kesimpulan Well, begitulah beberapa langkah yang biasa kami lakukan untuk melakukan user research yang baik dan efisien dengan menggunakan software dari Figma yaitu FigJam yang bukan hanya memberikan user experience yang baik, namun untuk dapat meningkatkan performa pertumbuhan bisnis pada produk yang kita kembangkan. Jika kamu tertarik mempelajari lebih lanjut, silahkan dipelajari beberapa kelas gratis UI UX design yang tersedia di website BuildWithAngga dalam mempersiapkan karir lebih matang dan dapat bersaing dengan designer lainnya. Goodluck.

Zaman sekarang lebih enak dalam mencari pekerjaan karena bisa dilakukan secara online tanpa harus keluar rumah dan bermacet-macetan untuk berangkat ke kantor. Banyak pekerjaan tersebut yang memiliki prospek dibayar tinggi bahkan ada yang bisa sampai tembus digaji Rp 25.000.000 per setiap bulannya, kerja dari rumah! mantap ya. Mereka yang telah merasakan benefit di atas adalah orang-orang yang telah cukup lama bekerja sebagai Freelancer untuk mengerjakan projek lokal maupun internasional. Wajar saja bayaran mereka tinggi karena biasanya dibayar dengan mata uang asing (US dollar). Jadi, apa sih Freelancer itu? Freelancer adalah seseorang yang bekerja bersama dengan klien atau perusahaan dalam jangka waktu yang sebentar misalnya paling lama hanya 3 bulan saja, sangat berbeda dengan mereka para pekerja tetap (full-time) yang bisa sampai 1-5 tahun dikontrak untuk bekerja dalam sebuah perusahaan tersebut. Mengapa orang memilih menjadi Freelancer? Kok pada milih jadi freelancer sih? bukannya lebih enak menjadi pekerja tetap ya bisa dapat kontrak hingga 5 tahun lebih lamanya? well, adapun beberapa manfaat utama apabila kita menjadi freelancer adalah sebagai berikut: bisa bekerja secara online dari rumah tanpa harus ke kantorbisa mengerjakan lebih banyak projek dan semakin besar pemasukkanbisa sekaligus bangun networking luas untuk prospek projek besar lainnyabisa mengatur jam kerja dan projek mana aja yang ingin kita kerjakan tanpa ada tekananbisa menghindari bos yang toxic dengan cara menolak dia sebagai klien kitadan masih banyak manfaat freelancer lainnya yang bisa kita dapatkan Menjadi freelancer dapat memberikan kebebasan besar kepada diri kita sehingga ketika mengerjakan suatu projek maka kita merasa lebih bahagia (sesuai passion). Perlu diingat bahwa tidak semua orang bisa menjadi seorang freelancer yang sukses, definisi sukses di sini adalah misalnya dapat menghasilkan lebih dari 10 juta per bulannya dari berbagai projek, terkadang ada saja freelancer yang hanya bisa menghasilkan 5 juta per bulannya. Kalau mau mulai jadi Freelancer harus mempersiapkan apa saja? Well, saya pribadi senang apabila kamu ingin mencoba menjadi freelancer untuk mendapatkan banyak privilege terbaik yang tidak bisa didapatkan oleh para pekerja tetap. Saya sarankan jika ingin memulai freelancing maka kamu bisa mengikuti arahan berikut: tentuin terlebih dahulu mau fokus pada niche apa misalnya UI UX designbangun skills UI UX design terbaru, jangan pelajari yang sudah kadaluwarsapelajari soft skills seperti komunikasi, negosiasi, public speaking, dan sebagainyabangun portfolio sesuai trend terbaru saat ini (riding the wave)latihan mem-filter calon klien karena klien toxic dapat membuat kamu menyerah Silahkan dicoba dulu kelima langkah di atas dan apabila sudah dilakukan semuanya maka saya rasa persiapan awal untuk memulai freelancing kamu sudah siap. Selanjutnya kamu bisa memilih beberapa platform freelancer dalam mendapatkan projek pertama mereka misalnya Upwork atau Fiverr atau juga Freelancer.com. Kesimpulan utama menjadi Freelancer Punya benefit bagus tapi sulit mencari projek di awalHarus pandai ngatur waktu dengan pekerjaan utama (backup)Selalu pelajari ilmu terbaru untuk menarik perhatian klien Apabila kamu tertarik belajar lebih lanjut dan membutuhkan arahan lebih dalam dengan strategi freelancing terbukti, kamu wajib cobain kelas Upwork: Strategy 100 Juta Pertama buatan mentor berpengalaman di website BuildWithAngga. Pada kelas tersebut kamu akan mempelajari banyak hal seperti menyusun profile menarik, memfilter pekerjaan yang tepat, negosiasi dengan klien agar dibayar tinggi, dan juga materi freelancing penting lainnya. Semoga beruntung, sampai jumpa di kelas.