flash sale
hamburger-menu

Tips Design

Meningkatkan skills menjadi 1% lebih baik

Kelas Tips Membuat Portfolio UI/UX yang Menarik Perhatian Client di BuildWithAngga

Tips Membuat Portfolio UI/UX yang Menarik Perhatian Client

Dalam dunia desain UI/UX yang semakin kompetitif, portofolio menjadi kunci utama bagi para desainer untuk membedakan diri dan menarik perhatian klien atau perusahaan yang potensial. Menyusun portofolio yang efektif bukanlah tugas yang mudah, namun dengan beberapa tips dan panduan yang tepat, kamu dapat membuat portofolio yang tidak hanya memikat, tetapi juga memberikan nilai tambah yang signifikan. Apa yang Perlu Dimasukkan ke Dalam Portofoliomu? Portofolio UI/UX adalah “kartu nama” kamu di dunia desain digital. Ini adalah hal yang memungkinkan kamu untuk memamerkan kreativitas, keterampilan, dan pendekatanmu dalam merancang pengalaman pengguna yang menakjubkan. Namun, menyusun portofolio yang memukau dan informatif memerlukan perhatian khusus. Berikut adalah beberapa hal penting yang perlu dimasukkan ke dalam portofolio-mu: 1. Project Terbaikmu Pilihlah proyek-proyek terbaikmu yang menunjukkan kemampuan desain dan konseptualisasi yang kuat. Pilih projects yang beragam untuk menunjukkan fleksibilitasmu dalam berbagai jenis proyek. 2. Deskripsi Project yang Jelas Sertakan deskripsi singkat untuk setiap project yang menjelaskan tujuan project, tantangan yang dihadapi, pendekatan desain yang diambil, dan hasil yang dicapai. 3. Proses Desain Tampilkan proses desainmu mulai dari riset awal, sketsa, wireframe, prototipe, hingga desain akhir. Ini membantu calon klien atau perusahaan untuk memahami bagaimana kamu mendekati dan menyelesaikan masalah desain. 4. Sertakan Screen Recording Video Sertakan video interaktif dari desainmu untuk memberikan gambaran yang lebih baik tentang bagaimana produkmu berfungsi. 5. Review atau Rekomendasi Jika memungkinkan, tambahkan review atau feedback dari klien atau rekan kerja yang memuji kualitas dan keahlian desainmu. 6. Kontak dan Informasi Latar Belakang Sertakan informasi kontak kamu dan latar belakang pendidikan atau pengalaman kerja untuk memberikan pemahaman lebih lanjut kepada pengunjung portofolio tentang siapa dirimu dan apa yang kamutawarkan. 7. Pengalaman Pengguna Berikan fokus pada user experience pengguna dalam portofoliomu. Jelaskan bagaimana desain ini meningkatkan pengalaman pengguna dan menciptakan solusi yang mudah digunakan. 8. Konten Dinamis Jangan lupakan untuk menyertakanI projects terbarumu dan terus memperbarui portofolio kamu secara berkala untuk menunjukkan perkembangan dan update dalam desainmu. Dengan memperhatikan elemen-elemen di atas, kamu dapat menyusun portofolio UI/UX yang efektif yang tidak hanya memukau, tetapi juga memberikan wawasan yang berharga tentang kemampuan desain dan pendekatan kamu kepada calon klien atau perusahaan. Platform Untuk Memamerkan Karya dan Portfoliomu Ada beberapa platform yang dapat kmau gunakan untuk mempublikasikan portofolio UI/UX-mu. Berikut adalah beberapa opsi terbaik yang populer: 1. Behance Behance merupakan platform yang sangat populer di kalangan desainer. Kamu dapat membuat profil gratis dan mengunggah portofoliomu dalam berbagai format, termasuk gambar, video, dan animasi. Behance juga memungkinkan interaksi antara desainer, klien, dan perusahaan. 2. Dribbble Dribbble adalah platform desain yang fokus pada visual. Kamu dapat membagikan cuplikan desain kamu dalam format gambar atau GIF, serta berinteraksi dengan komunitas desainer lainnya. Meskipun Dribbble memiliki fokus yang lebih sempit daripada Behance, namun masih merupakan platform yang sangat berguna untuk mempublikasikan portofolio UI/UX. 3. LinkedIn LinkedIn bukan hanya untuk mencari pekerjaan atau membangun jaringan profesional, tetapi juga dapat digunakan untuk mempublikasikan portofolio. Kamu dapat menggunakan fitur "Featured" di profilmu untuk menampilkan proyek-proyek terbaik dirimu, serta menyertakan deskripsi dan gambar untuk setiap proyek. 4. Personal Website Membuat website pribadi adalah cara yang sangat efektif untuk mempublikasikan portofolio milikmu sendiri. Ini memberikan kamu kontrol penuh atas tampilan dan isi portofoliomu. Kamu dapat menggunakan platform seperti WordPress, Wix, atau Squarespace untuk membuat website dengan mudah tanpa perlu memiliki pengetahuan teknis yang mendalam. 5. Cargo Collective Cargo Collective adalah platform yang dikhususkan untuk para kreatif. Kamu dapat membuat portofolio yang menarik dan responsif dengan berbagai macam template yang tersedia. Meskipun Cargo Collective tidak gratis, namun menawarkan fitur-fitur khusus yang mungkin tidak tersedia di platform lain. Pilihlah platform yang sesuai dengan gaya dan kebutuhanmu, serta pastikan untuk memperbarui portofoliomu secara berkala untuk menjaga keterkinian dan relevansi. Hal-hal yang Dilihat Recruiter Dalam Portfolio UI/UX Desainmu: Rekruiter dalam industri desain UI/UX akan melihat beberapa hal kunci dalam portofolio seorang desainer. Berikut adalah hal-hal utama yang biasanya mereka perhatikan: Kualitas Desain Rekruiter akan menilai kualitas visual dari desain yang ditampilkan dalam portofolio. Mereka akan mencari desain yang estetis, bersih, dan mudah dimengerti.Proses Desain Rekruiter akan menilai kualitas visual dari desain yang ditampilkan dalam portofolio. Mereka akan mencari desain yang aesthetic, bersih, dan mudah dimengerti.Pengalaman Pengguna Pengalaman pengguna yang baik merupakan prioritas utama dalam desain UI/UX. Rekruiter akan meilhat bagaimana desainer memperhatikan detail-detail kecil dalam pengalaman pengguna dan bagaimana mereka menghadirkan solusi yang mudah digunakan dan intuitif.Sesuai Dengan Kebutuhan Perusahhaan Rekruiter akan mencari portofolio yang menunjukkan pemahaman yang mendalam tentang perusahaan dan industri tempat mereka melamar. Mereka akan mencari karya-karya yang relevan dan sesuai dengan kebutuhan dan nilai perusahaan.Testimoni dan Rekomendasi Previous Client Testimoni atau rekomendasi dari klien atau rekan kerja sebelumnya dapat memberikan bukti tambahan tentang kualitas dan keahlian desainer. Rekruiter akan memperhatikan apakah ada testimoni atau rekomendasi yang menyatakan bahwa desainer telah memberikan kontribusi yang berharga dalam project sebelumnya.Mengikuti Tren Recruiter ingin melihat apakah kamu cukup up-to-date dengan tren yang ada. Rekruiter akan menginginkan portofolio yang diperbarui secara berkala dengan project terbaru dan relevan. Portofolio yang tidak diperbarui atau tidak relevan mungkin tidak memberikan kesan yang baik kepada rekruiter. Kesimpulan Dalam dunia desain UI/UX, portofolio adalah kunci untuk membuka pintu kesempatan karier yang menarik. Rekruiter akan melihat banyak hal dalam portofolio kamu, mulai dari kualitas desain yang menarik perhatian hingga proses desain yang terdokumentasi dengan baik. Mereka juga akan mencari pengalaman pengguna yang baik dan diversitas proyek yang menunjukkan fleksibilitas kamu dalam berbagai konteks. Penting juga untuk menunjukkan kesesuaian dengan nilai dan kebutuhan perusahaan serta memperlihatkan keahlian teknis kamu. Testimoni atau rekomendasi dari klien atau rekan kerja sebelumnya juga bisa menjadi nilai tambah yang memperkuat kesan positif rekruiter tentang kualitas dan keahlian kamu sebagai desainer UI/UX. Dengan memperhatikan semua aspek ini dalam menyusun portofolio, kamu dapat meningkatkan peluangmu untuk menarik perhatian rekruiter dan memperoleh kesempatan kerja yang diinginkan. Tertarik belajar lebih dalam tentang UI/UX? Jangan khawatur! Di BuildWithAngga, kami menyiapkan kelas-kelas gratis UI/UX dan upgrade ke Premium untuk benefits lainnya! ;)

Kelas Basic Tutorial: Membuat Gradient Button with Background Dot Pattern di BuildWithAngga

Basic Tutorial: Membuat Gradient Button with Background Dot Pattern

Hello people with the spirit of learning! Kali ini kita akan membahas bagaimana cara membuat Gradient Button yang Eye-Catching seperti diatas dengan ditambahkan background dot pattern agar membuat desain button kalian menjadi lebih unik dan berbeda! Yuk, simak cara buatnya!😍 1. Buat Frame dan Text-nya! Step awal untuk membuat button yang sama pada thumbnail. Pertama, kita membuat frame-nya dulu ya guys (tekan F) dan jangan lupa ditambahkan text nya juga (tekan T). By the way untuk ukuran button disesuaikan kembali dengan ukuran desain kalian yaa. 2. Tambah Gradasi Linear sebagai Warna Dasar! Setelah sudah terbuat frame + text nya, kemudian kita akan beri warna dasar (Fill) jangan lupa untuk diganti efek warnanya menjadi Linear Gradient. 3. Tambah lagi yaa Fill Linear Gradient! Agar terlihat lebih cantik, yuk tambahin lagi ya guys efek Linear Gradient-nya tujuannya untuk meng-highlight supaya agar gradasi linear nya terlihat lebih smooth. 4. Tambah Stroke dan Beri Efek Linear Gradient! Tambahin garis tepi (Stroke) ini juga penting guys, agar button nya terlihat seperti ada pantulan cahaya kayak ada efek didalam kaca. 5. Tambah Gradasi Linear sebagai Warna Dasar! Agar bagian bawah button terlihat lebih banyak warnanya ditambah juga ya guys agar bagian bawah button terlihat lebih dark dan menyatu dengan smooth. 6. Tambah Gradasi Linear sebagai Warna Dasar! Setelah kalian menambah inner shadow yang pertama, kalian juga jangan lupa untuk menambahkan 2 efek inner shadow lagi ya, tujuannya agar desain button kalian terlihat seperti glowing-glowing (dreamy) gitu. 🌟 7. Tambah Gradasi Linear sebagai Warna Dasar! Ditambahin juga guys untuk efek drop shadow nya agar desain kalian terlihat lebih realistis, menarik dan blink-blink✨. Efek Drop shadow 1: untuk memberikan efek seperti garis tepi dan efek. Drop shadow 2: untuk memberikan kesan popup gitu ya guys. 8. Tambah Gradasi Linear sebagai Warna Dasar! Tahap akhir ini jangan lupa tambahin juga border radius-nya ya guys, atur sesuai dengan tingkat kelengkungan yang perfect menurut kalian. Yeayyyy!! Akhirnya selesai pembuatan Gradient Button. Gimana? asyik dan menyenangkan bukan? Lebih unik kan desain button kalian😍 Jangan lupa dipantengin terus ya guys Instagram dan Website BuildWithAngga dan banyak juga kelas-kelas gratis tentang Design yang bisa kalian ikuti untuk mengasah skill dan menambah portfolio yang lebih berkualitas agar menambah value anda dimasa yang akan datang👌

Kelas 10 Kursus Online Gratis Terbaik Untuk Belajar Software Figma di BuildWithAngga

10 Kursus Online Gratis Terbaik Untuk Belajar Software Figma

Hello people with the spirit of learning! Kali ini, kami akan memberikan 10 Rekomenasi Online Course Terbaik untuk Belajar dengan Software Figma secara GRATIS! 🤩 Kursus-kursus ini dirancang untuk kamu yang ingin belajar dan memperdalam skill UI/UX design-mu menggunakan Figma dengan mentor-mentor yang sudah pasti sangat berpengalaman dan profesional! Apa aja sih? Yuk simak! 1. Learn Figma for Beginner Belajar UI/UX adalah kunci untuk menciptakan pengalaman pengguna yang lebih baik dalam aplikasi mobile. Dengan mentor Angga, kita akan mendalami Figma dari dasar hingga prototyping, memastikan desain yang nyaman digunakan dan memuaskan. Kelas ini cocok untuk kamu yang ingin menjadi UI/UX Designer, dengan panduan langsung dari ahli di bidangnya. Yuk segera mulai untuk membangun portfolio yang kuat dan melangkah ke arah karier yang sukses! 🤩 Di kelas “Learn Figma for Beginner” bersama mentor Angga Risky, kamu akan belajar: cara membuat desain Travel Mobile App menggunakan Figma,mempelajari tools dasar UI/UX desain pada figma,penggunaan ikon-ikon, pemilihan warna yang tepat serta tipografinya,mengenal dasar-dasar tools Figma,dan membuat portfolio sederhana namun berkualitas. Jangan khawatir! Figma adalah software yang gratis dan kalau kami join kelas ini, kamu memiliki akses belajar seumur hidup hingga bisa mendapatkan sertifikat juga lho! Cocok untuk kamu yang ingin memperdalam Figma dan berkarir sebagai UI/UX designer nih guys! 2. Mastering Figma: Modern UI Dashboard Design Dalam merancang User Interface sebuah website, fokus pada visual design yang menarik adalah kunci utama untuk memastikan kepuasan pengguna. Tidak hanya tentang keindahan aesthetic, tetapi juga memastikan setiap elemen desain dapat dipahami dan digunakan dengan mudah oleh pengguna. Prosesnya dimulai dari pemahaman fitur yang diinginkan oleh pengguna, pembuatan wireframe untuk merencanakan layout komponen UI, hingga menghasilkan konsep desain visual lengkap dengan gambar, warna, dan tipografi. Pada kesempatan kali ini, kamu akan diajak untuk mempelajari visual design melalui pembuatan tampilan dashboard menggunakan alat desain populer gratis; Figma. Dashboard memiliki peran penting dalam situs bisnis karena menyajikan data yang krusial bagi pengguna. Dengan desain yang terencana secara matang, kamu dapat meningkatkan produktivitas bisnis dan potensi keuntungan penjualan. Bersama mentor ahli, kelas “Mastering Figma: Modern UI Dashboard Design” ini mencakup pembuatan project desain, ekspor desain, hingga presentasi desain untuk membuka peluang karir yang lebih baik. Hasil proyek dari kelas ini tidak hanya dapat memperkaya portofoliomu, tetapi juga dapat diunggah dan dipamerkan di platform online seperti Dribbble. Intinya, mentor expert kita, Angga Risky, akan membantu kamu mempersiapkan karier sebagai UI/UX desainer karena di kelas ini kita juga akan belajar: cara mengubah wireframe menjadi visual design,mempelajari tools apa saja pada Figma,mendesain tampilan dashboard yang keren,membuat project desain yang bisa kita jadikan sebagai portfolio berkualitas,dan belajar membuat konsep visual design dengan warna, ikon dan tipografinya. Psst, kelas ini GRATIS dan aksesnya seumur hidup loh! Cocok untuk kamu yang ingin memperdalam pengetahuan Figma, ingin memiliki portfolio web desain dan belajar UI desain. Tingkatkan pengalaman belajarmu dengan meng-upgrade paket ke Starter Pro untuk mendapatkan akses penuh ke seluruh materi berharga dalam kelas ini. 3. UI Style Guide with Figma Untuk menciptakan tampilan UI yang menarik, konsistensi dengan UI Style Guide sangatlah penting untuk mempermudah proses pengembangan web/mobile. Melalui panduan di kelas ini, designer dapat menghemat waktu dengan kemudahan pembuatan komponen desain yang dapat diakses oleh beberapa designer secara bersamaan. Kelas ini menawarkan pembelajaran menggunakan Figma (free), platform yang telah diadopsi oleh berbagai perusahaan ternama seperti GitHub, Dropbox, Twitter, dan Slack. Jangan ragu untuk gabung kelas “UI Style Guide with Figma” karena ini worth-it banget! Dengan bimbingan mentor Angga Risky, kamu akan dipandu melalui proses desain yang efisien dengan memanfaatkan fitur-fitur canggih seperti: penggunaan Auto Layout,membuat Design Tokens,pemanfaatan Plugins,belajar membuat Design Library,Responsive Component menggunakan Auto Layout,memahami perbedaan “Frame” dan “Group”,dan memahami Style Guide beserta Design Library. Kelas gratis ini memiliki akses belajar seumur hidup dan bisa kamu upgrade ke kelas Starter Pro untuk mendapatkan sertifikat serta benefits lainnya! Sangat cocok untuk desainer pemula yang ingin membuat design library, yang ingin mempelajari UI Design dengan Figma dan UI/UX designer yang ingin mendalami tools Figma. 4. Learn Icon Pack Design with Figma Icon dapat ditemukan di interface (UI) aplikasi seluler atau situs web yang kita gunakan setiap hari. Icon memiliki kemampuan untuk menyampaikan informasi dengan cepat dan efekti lho! Desain icon yang baik dapat memberikan informasi yang berguna tentang aplikasi sehingga pengguna dapat menggunakannya dengan lebih cepat dan tanpa kebingungan. Bagi seorang UI Designer, kemampuan dalam menciptakan icon tidak hanya dapat menjadi tambahan penghasilan, tetapi juga memperkaya portofolio online. Bergabunglah dengan mentor kami, Angga Risky, untuk mempelajari proses pembuatan icon dari awal. Dalam kelas “Learn Icon Pack Design with Figma” ini, mentor Angga akan membimbing kamu melalui tahapan pembuatan icon: mulai dari menentukan kategori sesuai jenis aplikasi,membuat sketsa ikon,mendalami proses sketsa dengan Figjam dari Figma,membuat Icon Pack untuk aplikasi E-Commerce,diajari tips & trik untuk memastikan ikon terlihat cantik (dengan kualitas tinggi dan resolusi yang efisien),belajar konsisten dalam penggunaan ikon dalam sebuah UI desain,dan belajar menjual Icon Pack Design! Kelas ini cocok loh untuk kamu yang ingin belajar desain Icon dari awal, ingin memiliki portofolio User Interface Design dan yang ingin belajar menjual Icon Pack Design! Jangan khawatir akan limit akses kelas karena kelas ini memiliki akses pembelajaran seumur hidup dan kamu juga bisa meng-upgrade untuk mendapatkan sertifikat dengan harga terjangkau! 😍 5. Workshop Figma: Design Charity Landing Page Landing Page memiliki peran yang "krusial” dalam sebuah situs web, entah itu toko online, perusahaan, atau platform lainnya. Sebagai halaman pertama yang diakses oleh pengguna, kesan pertama yang dihasilkannya sangatlah penting, baik bagi pengguna baru maupun yang sudah mengenal situs tersebut. Oleh karena itu dengan mentor expert kita, Angga Risky dalam Workshop Figma terbaru ini, kita akan belajar tentang: cara menguasai berbagai macam tools gratis yang ada di Figma,membuat tampilan CTA Landing Page,lalu belajar menggunakan Grid System,belajar desain Landing Page khusus untuk keperluan website Charity yang bertujuan mengumpulkan dana bantuan mulai dari pemilihan warna dan tipografinya,serta mengumpulkan berbagai macam inspirasi desain Landing Page yang kece dan modern Materi workshop ini akan membahas cara mendesain halaman tersebut agar dapat menyampaikan pesan yang baik dan efektif kepada para donatur. Yuk langsung join kelas “Workshop Figma: Design Charity Landing Page”! Kelas ini sama memiliki akses kelas seumur hidup dan FREE! 💸 Cocok untuk kamu yang ingin memperdalam Figma, ingin belajar layout, untuk **kamu yang ingin design CTA lebih baik dan kamu yang ingin perdalam visual design! 6. Mastering Mobile UI Design for Beginners with Figma (In English) Selamat datang di kursus Figma kami yang komprehensif, dirancang secara teliti untuk para desainer pemula maupun profesional berpengalaman. Dalam perjalanan ini, kamu akan belajar untuk mereplikasi sebuah desain luar biasa menggunakan Figma, mendapatkan wawasan tentang seluruh alur kerja. Kursus ini dirancang untuk berbagi manajemen sistem desain pribadi saya, pertimbangan layout adaptif, serta beragam tips dan trik profesional. Walaupun kamu baru memulai dalam dunia desain atau ingin menyempurnakan keterampilanmu, kursus ini menawarkan panduan langkah demi langkah untuk menguasai fitur-fitur andal Figma. Dari dasar hingga teknik lanjutan, video tutorial kami dilengkapi dengan pengetahuan penting untuk memastikan kamu dapat dengan cepat memulai membuat antarmuka yang memikat secara visual. Kelas ini dibimbing oleh mentor profesional; aDan, dengan menggunakan software gratis Figma. Di sini, kamu akan belajar bagaimana berbagi alur kerja designer UI/UX, mengembangkan perspektif desainer berpengalaman melalui replikasi desain orang lain, meningkatkan keterampilan dan teknik desain, menguasai fitur pada Figma serta berbagai macam tips dan trik seorang profesional dalam bidang UI/UX! Kelas ini cocok untuk kamu yang ingin meningkatkan keterampilan desain UI, menemukan alur kerja desain yang lebih baik dan yang ingin meningkatkan kecepatan desain! Kalau kamu tertarik dengan bahasan yang lebih lengkap dan bisa langsung praktik, kamu bisa langsung gabung kelas “Mastering Mobile UI Design for Beginners with Figma“ 😊 Nah berikut adalah beberapa poin menarik tambahan dari kursus ini: Membangun “Simple Design System” di Figma: Panduan dasar untuk mengorganisir dan mengelola elemen desain secara efisien.Auto Layout Adaptif dengan Figma: Membahas dan menerapkan prinsip desain responsif untuk antarmuka pengguna yang serbaguna.Rahasia Alur Kerja Profesional: Berbagi pintasan dan strategi pribadi untuk meningkatkan proses desain Anda. Pada akhir kursus ini, kamu akan mencapai hasil pembelajaran berikut: Mempercepat proses desain UI-mu dengan tips praktis Figma.Project desain dengan mindset seorang desainer berpengalaman.Menyesuaikan dan mengubah desain yang sudah ada menjadi kreasi unikmu dengan mudah. Segera ikuti kursus gratis ini untuk membuka potensi penuh desain UI mobile dengan Figma, dan mulailah menciptakan interface yang keren! 😍 Ohiya, kursus ini juga memiliki akses seumur hidup loh dan tentu saja kamu bisa mendapatkan benefits lain saat kamu upgrade kelas ini 😊 7. UI Design : Grid System dengan Figma Saat membangun sebuah website dengan design yang menarik dan juga professional maka peran grid system sangatlah penting untuk mencapai akan hal-hal tersebut. Grid system memiliki beberapa manfaat yang salah satunya adalah untuk mempermudah proses kerja sama antara designer dan juga developer. Pada kelas kali ini kita akan bahas tuntas tentang pengertian dan juga penggunaan grid system pada design website menggunakan software gratis Figma. Kelas ini sangat cocok sekali apabila saat ini kita masih di tahap pemula, karena jika tidak kita pelajari sedari sekarang maka khawatir kedepannya hasil design kita tidak dapat diimplementasikan oleh developer dan ditolak oleh klien. Dengan bimbingan mentor Dhimas Prio, di kelas “UI Design : Grid System dengan Figma” kamu akan mempelajari tentang: cara implementasi Grid System ke UI Design,mempelajari tools dasar Figma,memahami betul fungsi Grid dalam suatu proyek desain,merancang Grid pada Figmaserta membuat portofolio sederhana untuk kebutuhan kariermu! Kelas ini cocok banget loh untuk kamu yang ingin mempelajari Microinteraction, yang ingin mempelajari UI/UX design dan cocok untuk designer yang ingin belajar membuat prototype! Kelas ****ini merupakan kelas gratis yang dapat kamu akses seumur hidup ✨ 8. UI Design: Wireframe to Visual Design Visual Design memiliki peranan penting dalam menciptakan antarmuka pengguna (UI) yang efektif. Tujuannya adalah agar tampilan UI tidak hanya menarik secara estetika, tetapi juga intuitif dan mudah dipahami bagi pengguna. Dalam kursus “UI Design: Wireframe to Visual Design” kamu akan diajarkan: bagaimana cara membuat tampilan yang efektif mulai dari pembuatan moodboard dengan InVisionApp,pemilihan typography, warna dan referensi desain,belajar mengubah wireframe menjadi visual design yang menarik menggunakan Figma*,*cara meng-import Image dan Icon,serta menentukan Hierarchy teks pada suatu konten. Proses ini akan memberikan fondasi kuat untuk menghasilkan UI yang menarik dan mudah digunakan bersama mentor expert; Dhimas Prio Kelas Starter ini adalah kelas gratis dengan life-time access. Namun, kamu bisa meng-upgrade menjadi kelas Starter Pro untuk mendapatkan sertfikatnya dengan harga terjangkau! 9. Mastering Midjourney: Create a Stunning UI UX Design Selamat datang di kursus Midjourney kami, platform pembelajaran yang disesuaikan untuk kreatif dan pecinta desain! 😍 Di sini, kami akan membawa kamu ke dunia seni AI, mengajarkan kamu cara menggunakan Midjourney untuk menghasilkan bahan desain yang menakjubkan dengan langkah-langkah pembelajaran yang sederhana. Walaupun kamu masih pemula dalam desain atau profesional berpengalaman, kursus ini akan menunjukkan kepada kamu bagaimana cara menguasai fitur-fitur kuat dari Midjourney dengan mudah. Mulai dari pengenalan dasar hingga teknik-teknik lanjutan, tutorial video kami mencakup semua poin pengetahuan penting untuk memastikan kamu dapat memulai dengan cepat dan menciptakan karya visual yang unik. Bersama mentor aDan; ia akan memberikan pandangan menyeluruh tentang platform Figma,membantumu memahami dasar-dasarnya serta membimbing kamu tentang cara membuat dan mengonfigurasi server kamu sendiri di Discord untuk penggunaan Midjourney yang lebih baik,belajar cara mengubah deskripsi teks menjadi gambar yang indah,mengajarkan kamu cara membuat karya visual baru berdasarkan gambar yang sudah ada,dan mengeksplorasi cara mengaplikasikan gambar yang dihasilkan Midjourney dalam desain web untuk meningkatkan kualitas proyekmu dengan AI. Tertarik untuk belajar lebih dalam soal Midjourney? Kamu bisa langsung gabung kelas “Mastering Midjourney: Create a Stunning UI UX Design” :) Cocok untuk kamu pecinta desain, seorang UI designer dan AI drawing. Kelas ini gratis dan dapat diakses seumur hidup. Kamu bisa upgrade kelas ini untuk benefits lainnya lho :) 10. Intro to UX Design Research Penelitian (Research) memainkan peran penting dalam setiap tahap pembuatan produk, termasuk aplikasi dan situs web. Proses UX Design Research memungkinkan penggalian informasi mendalam terkait pengguna target dan kebutuhan mereka yang dapat diimplementasikan ke dalam aplikasi. Seorang UX Design Researcher akan menggunakan berbagai metode untuk mengidentifikasi masalah potensial pada aplikasi dan menemukan fitur baru yang dibutuhkan oleh pengguna. Join kelas “Intro to UX Design Research” sekarang! Dalam kelas bersama mentor Angga Risky, kita akan belajar: dasar-dasar UX Design Researchdibimbing memilih metode Research yang sesuaimerancang dan menetapkan rencana riset,memahami konsep, teori dan praktik dari UX Researcherserta melakukan evaluasi terhadap hasil riset yang telah dilakukan. Ini juga memberikan wawasan berharga bagi Product Designer dan UX Designer untuk memahami bagaimana riset dilakukan, sehingga dapat berkolaborasi lebih efektif dengan para UX Researcher. Karena dalam kelas ini, kamu juga akan belajar sembari praktik membuat sebuah Research Plan, memilih metode Research yang tepat, memahami langkah awal dalam membangun Startup dan yang paling penting adalah mengenal UX Design Research dari dasar. Kelas ini gratis dan memiliki life-time access, cocok banget loh untuk kamu yang ingin mengerti lebih luas tentang UX Research, untuk UX Designer atau Product Manager yang ingin belajar Research dan Anak IT yang ingin membangun sebuah Startup 💸 Nah jadi tunggu apalagi guys? Yuk segera join kelas yang kamu mau dan kamu butuhkan untuk upgrade designs skill kamu bersama BuildWithAngga ✨ See you di kelas yaa!

Kelas Rekomendasi 10 Font Terbaik Untuk UI/UX Aplikasi Keuangan di BuildWithAngga

Rekomendasi 10 Font Terbaik Untuk UI/UX Aplikasi Keuangan

Hello people with the spirit of learning! 👋🏻 Balik lagi nih ke pembahasan seputar UI/UX! Kalian suka bingung gak sih ketika mau menentukan font apa yang kira-kira cocok untuk desain UI/UX aplikasi keuangan? NIh sekarang kami beri 10 rekomendasi font untuk aplikasi keuangan, khusus untuk kalian! Apa aja sih? Yuk simak! 1. Roboto Mari kita mulai dengan font satu ini! Didesain oleh Google, Roboto memiliki kerning yang baik dan mudah dibaca, cocok untuk tampilan bersih dan modern. Keunikan dari font Roboto adalah sebagai berikut: Desain Modern: Roboto dirancang khusus oleh Google untuk keperluan digital, sehingga memiliki tampilan yang sangat modern dan cocok digunakan untuk berbagai platform digital termasuk aplikasi keuangan.Kesesuaian dengan Berbagai Ukuran: Roboto memiliki keunggulan dalam kesesuaian dengan berbagai ukuran tampilan, baik itu teks kecil seperti pada tombol dan label, maupun teks besar untuk judul atau pengumuman penting.Proporsi Huruf yang Seimbang: Proporsi huruf yang seimbang pada Roboto membuatnya mudah dibaca dan dapat menampilkan informasi dengan jelas, yang merupakan aspek penting dalam aplikasi keuangan di mana pengguna memerlukan akses cepat dan akurat terhadap data.Kerning yang Baik: Roboto memiliki kerning yang baik, artinya jarak antara setiap hurufnya diatur dengan proporsional sehingga teksnya terlihat rapi dan mudah dibaca.Stabilitas pada Berbagai Platform: Karena dirancang khusus untuk digunakan di platform digital, Roboto menawarkan stabilitas yang baik dalam tampilan dan konsistensi di berbagai perangkat dan sistem operasi, yang penting untuk memastikan pengalaman pengguna yang seragam dalam aplikasi keuangan. Nah kombinasi dari desain modern, kesesuaian ukuran, proporsi huruf yang seimbang, kerning yang baik, dan stabilitas di berbagai platform, Roboto menjadi pilihan yang sangat baik untuk digunakan dalam aplikasi keuangan. 2. Open Sans Memiliki kerning yang cukup longgar, Open Sans memberikan kesan ramah dan mudah dibaca, baik untuk berbagai ukuran teks. Ada pun keunikan dari font Open Sans adalah sebagai berikut: Kesesuaian dengan Berbagai Konteks: Open Sans dirancang untuk memiliki kemampuan menyesuaikan diri dengan berbagai konteks penggunaan. Ini membuatnya sangat fleksibel dan cocok untuk digunakan dalam berbagai jenis aplikasi, termasuk aplikasi keuangan yang memiliki kebutuhan akan berbagai ukuran teks dan elemen desain.Kerning yang Longgar: Salah satu ciri khas dari Open Sans adalah kerning yang cukup longgar, yang membuatnya mudah dibaca terutama pada ukuran teks kecil. Hal ini membantu memastikan bahwa teks dalam aplikasi keuangan tetap jelas dan mudah dimengerti oleh pengguna.Ramah dan Bersahabat: Desain huruf yang bulat dan proporsional membuat Open Sans terlihat ramah dan bersahabat. Ini adalah keunikan yang penting, terutama dalam konteks aplikasi keuangan di mana kepercayaan dan kenyamanan pengguna sangat diutamakan.Dukungan Multiplatform: Open Sans memiliki dukungan yang baik di berbagai platform, termasuk web, mobile, dan desktop. Hal ini memastikan konsistensi tampilan teks di seluruh aplikasi keuangan, tanpa memperhatikan platform yang digunakan oleh pengguna.Legibilitas yang Baik: Dengan desain yang bersih dan proporsi huruf yang seimbang, Open Sans menawarkan legibilitas yang baik bahkan pada ukuran teks yang kecil. Hal ini penting dalam aplikasi keuangan di mana pengguna sering kali perlu membaca informasi detail dalam waktu singkat. Dengan kombinasi dari kesesuaian dengan berbagai konteks, kerning yang longgar, kesan ramah dan bersahabat, dukungan multiplatform, dan legibilitas yang baik, Open Sans menjadi pilihan yang kuat untuk digunakan dalam desain aplikasi keuangan. 3. Lato Lato memiliki kerning yang cukup longgar dan proporsi huruf yang seimbang, memberikan tampilan yang bersahabat dan profesional. Keunikan dari font Lato antara lain: Proporsi Huruf yang Seimbang: Lato memiliki proporsi huruf yang seimbang, yang membuatnya mudah dibaca dan menarik untuk digunakan dalam berbagai konteks, termasuk aplikasi keuangan. Proporsi yang seimbang ini memberikan tampilan yang profesional dan estetis.Kesesuaian dengan Berbagai Ukuran: Font Lato dapat digunakan dengan baik pada berbagai ukuran teks, baik itu teks kecil seperti pada tombol dan label, maupun teks besar untuk judul atau pengumuman penting. Kemampuan adaptasinya yang baik menjadikannya pilihan yang solid untuk aplikasi keuangan.Gaya Modern dan Bersih: Desain huruf yang bersih dan modern membuat Lato cocok untuk digunakan dalam desain UI/UX yang ingin memberikan kesan yang segar dan profesional. Ini membuatnya cocok untuk digunakan dalam aplikasi keuangan yang ingin tampil modern dan up-to-date.Stabilitas dalam Berbagai Platform: Lato menawarkan stabilitas yang baik dalam tampilan dan konsistensi di berbagai platform digital, termasuk web, mobile, dan desktop. Ini penting untuk memastikan pengalaman pengguna yang seragam di seluruh platform.Kerning yang Baik: Lato memiliki kerning yang baik, yang berarti jarak antara setiap hurufnya diatur dengan proporsional sehingga teksnya terlihat rapi dan mudah dibaca. Hal ini membantu meningkatkan legibilitas teks, yang sangat penting dalam aplikasi keuangan di mana pengguna memerlukan akses cepat dan akurat terhadap data. Dengan kombinasi dari proporsi huruf yang seimbang, kesesuaian dengan berbagai ukuran, gaya modern dan bersih, stabilitas dalam berbagai platform, dan kerning yang baik, Lato menjadi pilihan yang solid dan populer untuk digunakan dalam desain aplikasi keuangan. 4. Montserrat The Legend— Montserrat memiliki kerning yang cukup rapat dan gaya yang futuristik, cocok untuk aplikasi dengan tampilan modern dan bersih. Keunikan dari font Montserrat adalah sebagai berikut: Desain Modern dan Elegan: Montserrat memiliki desain huruf yang modern dan elegan, membuatnya cocok untuk aplikasi keuangan yang ingin tampil menarik dan profesional.Kekonsistenan dalam Proporsi Huruf: Font ini memiliki proporsi huruf yang konsisten, memberikan tampilan yang seragam dan teratur pada setiap ukuran teks. Hal ini memastikan legibilitas yang baik dan kesan estetis yang menyenangkan.Kerning yang Rapat: Montserrat memiliki kerning yang rapat, yaitu jarak antara setiap hurufnya lebih dekat. Hal ini memberikan tampilan yang kompak dan modern, seringkali digunakan untuk judul atau elemen desain yang menonjol.Kesesuaian dengan Berbagai Gaya Desain: Font ini cocok digunakan dalam berbagai gaya desain, mulai dari yang minimalis hingga yang lebih berani dan eksperimental. Fleksibilitas ini memungkinkan Montserrat digunakan dalam berbagai jenis aplikasi keuangan dengan gaya desain yang berbeda-beda.Kemudahan Integrasi dengan Grafis: Montserrat sering digunakan dalam kombinasi dengan elemen grafis dan ikon karena desainnya yang serbaguna. Ini memungkinkan penggunaan yang kreatif dalam desain UI/UX aplikasi keuangan.Pilihan Beragam Varian: Font ini memiliki beragam varian, termasuk regular, bold, italic, dan lain-lain, sehingga memungkinkan untuk memperkaya tampilan desain dan menyesuaikannya dengan kebutuhan aplikasi keuangan tertentu. Adanya kombinasi keunikan-keunikan di atas, Montserrat menjadi salah satu pilihan yang populer dan serbaguna dalam desain aplikasi keuangan, memberikan tampilan yang profesional, modern, dan menarik bagi pengguna lho! 5. Poppins One of our favorite fonts! ✨️ Dengan kerning yang cukup longgar dan proporsi yang seimbang, Poppins memberikan kesan yang bersahabat dan profesional juga! Keunikan dari font Poppins adalah sebagai berikut: Desain yang Modern dan Bersahabat: Poppins memiliki desain huruf yang modern dan bersahabat, dengan sudut-sudut yang sedikit bulat. Hal ini membuatnya cocok digunakan dalam desain UI/UX aplikasi keuangan yang ingin memberikan kesan yang ramah namun tetap profesional.Variasi Bobot yang Luas: Font ini menawarkan variasi bobot yang luas, mulai dari Thin hingga Extra Bold, sehingga memungkinkan untuk menciptakan hierarki teks yang jelas dan menonjol. Hal ini sangat berguna dalam menekankan informasi penting atau membuat judul yang menarik perhatian.Keserbagunaan dalam Penggunaan: Poppins dapat digunakan dalam berbagai konteks dan gaya desain, mulai dari yang minimalis hingga yang lebih berwarna dan berani. Hal ini membuatnya sangat fleksibel dan cocok untuk digunakan dalam berbagai jenis aplikasi keuangan. Dengan memiliki kombinasi desain modern dan bersahabat, variasi bobot yang luas, serta keserbagunaan dalam penggunaan, Poppins menjadi pilihan yang populer dan serbaguna dalam desain aplikasi keuangan, memberikan tampilan yang menarik, mudah dibaca, dan profesional bagi pengguna. 6. Nunito Lalu ada Nunito! Memiliki kerning yang baik dan bentuk huruf yang jelas, cocok untuk aplikasi dengan tampilan bersih dan minimalis. Nah keunikan dari font Nunito adalah sebagai berikut: Desain yang Bersahabat dan Mudah Dibaca: Nunito memiliki desain huruf yang bersahabat dan mudah dibaca, dengan proporsi yang seimbang dan sudut-sudut yang sedikit bulat. Hal ini membuatnya cocok untuk digunakan dalam aplikasi keuangan yang ingin memberikan kesan ramah dan profesional kepada pengguna.Kesesuaian dengan Berbagai Ukuran: Font ini memiliki kesesuaian yang baik dengan berbagai ukuran teks, baik itu teks kecil maupun teks besar. Dengan demikian, Nunito dapat digunakan untuk menampilkan informasi dengan jelas dan terbaca di berbagai bagian aplikasi keuangan.Kemudahan dalam Integrasi dengan Desain Grafis: Nunito sering digunakan dalam kombinasi dengan elemen desain grafis karena desainnya yang serbaguna. Hal ini memungkinkan untuk menciptakan desain UI/UX yang menarik dan kohesif dalam aplikasi keuangan. Dengan kombinasi keunikan-keunikan di atas, Nunito menjadi pilihan yang populer dan serbaguna dalam desain aplikasi keuangan, memberikan tampilan yang ramah, mudah dibaca, dan profesional bagi pengguna. 7. Source Sans Pro Dengan kerning yang cukup longgar dan desain yang bersahabat, Source Sans Pro cocok untuk berbagai jenis aplikasi keuangan. Nah berikut adalah tiga keunikan yang membuat font Source Sans Pro menjadi pilihan yang menarik: Desain yang Bersih dan Elegan: Font Source Sans Pro memiliki desain yang bersih dan elegan, dengan sudut-sudut yang lembut dan proporsi huruf yang seimbang. Hal ini membuatnya cocok digunakan dalam berbagai aplikasi keuangan yang mengutamakan tampilan yang profesional dan rapi.Kesesuaian dengan Berbagai Konteks: Font ini dirancang untuk memiliki kesesuaian yang baik dengan berbagai konteks penggunaan, mulai dari teks kecil hingga teks besar. Dengan demikian, Source Sans Pro dapat memberikan tampilan yang konsisten dan mudah dibaca di seluruh aplikasi keuangan Anda.Konsistensi Antar Platform: Source Sans Pro menawarkan konsistensi desain yang tinggi di berbagai platform, termasuk web, mobile, dan desktop. Hal ini memastikan bahwa tampilan teks tetap seragam dan profesional, tanpa memperhatikan platform yang digunakan oleh pengguna. Dengan kombinasi desain yang bersih dan elegan, kesesuaian dengan berbagai konteks, serta konsistensi antar platform, Source Sans Pro menjadi pilihan yang kuat untuk digunakan dalam desain aplikasi keuangan, memberikan tampilan yang profesional, mudah dibaca, dan konsisten bagi pengguna. 8. IBM Plex Sans Desain yang modern dan profesional, IBM Plex Sans cocok digunakan untuk aplikasi keuangan yang ingin memberikan kesan yang canggih dan dapat dipercaya kepada pengguna 🤩 Lalu berikut keunikan dari font IBM Plex Sans adalah sebagai berikut: Desain yang Netral dan Profesional: IBM Plex Sans memiliki desain yang netral dan profesional, memberikan kesan yang serius dan dapat diandalkan. Desainnya yang bersih dan sederhana membuatnya cocok untuk digunakan dalam konteks bisnis dan keuangan.Kesesuaian dengan Konteks Bisnis: Font ini dirancang khusus untuk keperluan bisnis dan teknologi oleh IBM. Kesesuaian ini membuatnya ideal untuk aplikasi keuangan yang ingin menyajikan informasi dengan tampilan yang serius dan handal.Pendekatan Modern pada Keterbacaan: Meskipun memiliki desain yang serius, IBM Plex Sans tetap memperhatikan keterbacaan. Proporsi huruf yang seimbang dan perhatian terhadap detil membuatnya tetap mudah dibaca, bahkan pada ukuran teks yang kecil.Variasi Bobot yang Lengkap: IBM Plex Sans menawarkan beragam varian bobot mulai dari Thin hingga Bold, memberikan fleksibilitas dalam menciptakan hierarki teks dan menonjolkan elemen tertentu dalam desain aplikasi keuangan.Dukungan Internasional: Font ini menyediakan dukungan karakter yang luas, termasuk aksara dan karakter khusus, sehingga dapat digunakan dalam aplikasi keuangan yang ditujukan untuk pasar global.Konsistensi Desain dalam Keluarga Font IBM Plex: IBM Plex memiliki beberapa varian font yang melibatkan sans-serif, serif, dan monospace. Konsistensi desain antara keluarga font ini memungkinkan penggunaan yang seragam dan kohesif di seluruh aplikasi dan platform. Dengan kombinasi keunikan-keunikan di atas, IBM Plex Sans menjadi pilihan yang kuat untuk digunakan dalam desain aplikasi keuangan, memberikan tampilan yang profesional, modern, dan dapat diandalkan. 9. Inter Nah kalau Inter, ia memiliki kerning yang baik dan desain yang bersahabat, cocok untuk aplikasi dengan tampilan yang bersih dan modern lhoo! Berikut adalah tiga keunikan paling khas dari font Inter: Desain yang Bersih dan Modern: Inter memiliki desain yang bersih dan modern, dengan proporsi huruf yang seimbang dan detail yang terdefinisi dengan baik. Hal ini membuatnya cocok untuk digunakan dalam berbagai konteks desain UI/UX, termasuk aplikasi keuangan yang ingin tampilan yang segar dan modern.Keterbacaan yang Tinggi: Salah satu keunggulan utama Inter adalah keterbacaannya yang tinggi. Desainnya yang proporsional dan jelas membuatnya mudah dibaca, bahkan pada ukuran teks yang kecil atau dalam kondisi pencahayaan yang kurang optimal. Ini sangat penting dalam konteks aplikasi keuangan di mana pengguna sering kali memerlukan akses cepat dan akurat terhadap informasi.Keserbagunaan dalam Berbagai Gaya Desain: Font Inter memiliki keserbagunaan yang tinggi dalam berbagai gaya desain, mulai dari yang minimalis hingga yang lebih berwarna dan berani. Hal ini memungkinkan untuk menciptakan tampilan UI/UX yang sesuai dengan merek dan tujuan aplikasi keuangan tertentu. Oleh karena kombinasi desain yang bersih dan modern ini, keterbacaan yang tinggi, serta keserbagunaan dalam berbagai gaya desain, Inter menjadi pilihan yang populer dan efektif dalam desain aplikasi keuangan, memberikan tampilan yang profesional, mudah dibaca, dan menarik bagi pengguna nih guys! 10. Work Sans Last but not least! Work Sans— Font ini memberikan kesan yang profesional namun tetap mudah dibaca, cocok digunakan untuk aplikasi keuangan yang ingin memberikan tampilan yang serius namun tidak kaku kepada pengguna. Wah menarik yaa? Dan berikut adalah tiga keunikan paling khas dari font Work Sans: Desain yang Bersahabat dan Ramah: Work Sans memiliki desain huruf yang bersahabat dan ramah, dengan sudut-sudut yang lembut dan proporsi yang seimbang. Hal ini membuatnya cocok digunakan dalam berbagai konteks desain UI/UX, termasuk aplikasi keuangan yang ingin memberikan kesan yang menyenangkan bagi pengguna.Kesesuaian dengan Berbagai Ukuran: Font ini dirancang untuk memiliki kesesuaian yang baik dengan berbagai ukuran teks. Baik itu teks kecil seperti pada tombol dan label, maupun teks besar untuk judul atau pengumuman penting, Work Sans tetap mempertahankan kejelasan dan keterbacaan yang tinggi.Kerning yang Proporsional dan Rapi: Work Sans memiliki kerning yang proporsional dan rapi, yaitu jarak antara setiap hurufnya diatur dengan baik. Hal ini membantu memastikan tampilan yang rapi dan mudah dibaca, memberikan pengalaman pengguna yang lebih baik dalam aplikasi keuangan. Lewat kombinasi desain yang bersahabat dan ramah, kesesuaian dengan berbagai ukuran teks, serta kerning yang proporsional dan rapi, Work Sans menjadi pilihan yang efektif dalam desain aplikasi keuangan, memberikan tampilan yang menarik, mudah dibaca, dan menyenangkan bagi user loh! Penutup🎉 Dari Roboto yang modern hingga Work Sans yang bersahabat, keberagaman dalam font UI/UX untuk aplikasi keuangan “menawarkan serangkaian pilihan” yang sesuai dengan berbagai preferensi desain dan kebutuhan fungsional. Dengan memahami keunikan masing-masing font, pengembang dan desainer dapat membuat keputusan yang terinformasi dalam menentukan tampilan visual aplikasi keuangan mereka. Mau coba buat desain keren lainnya dengan font-font di atas? Bisa banget! Yuk kepo-in kelas-kelas gratis UI/UX design di BuildWithAngga! Kamu bisa mengasah skill dan menambah portfolio yang lebih berkualitas lhoo 🤩

Kelas Cara Membuat UI Design E-Wallet dengan Glassy Card Style Menggunakan Figma di BuildWithAngga

Cara Membuat UI Design E-Wallet dengan Glassy Card Style Menggunakan Figma

Hello people with the spirit of learning! Balik lag nihi kita akan membahas cara membuat UI design: Homepage E-wallet with Glassy Card yang membuat tampilan ini menjadi semakin menarik! Penasaran gak sih gimana caranya membuat Homepage yang kece ini? Yuk simak caranya! 1. Buat Frame-nya! Pertama, kita buat dulu frame-nya yaa. Di sini, kita akan menggunakan frame iPhone 14 dengan warna #151515. 2. Header Lalu, kita buat Profile pemilik akun sebagai Header. Ikuti arahan image di atas: Pilih font Poppins dengan font style Regular 28px untuk kata “Hello” dan Semibold 28px untuk kata “Luke,”Buat Rectangle dengan ukuran W: 156 dan H: 60 untuk bagian Profile Picture-nya dan icon Notification. Jangan lupa untuk buat rectangle ini dengan corner radius 40°.Untuk warna rectangle tadi, kita beri #FFFFFF alias putihBuat lagi rectangle yang lebih kecil dengan ukuran W: 62 dan H: 46 serta corner radius 25° untuk foto profil. Fill rectangle ini dengan foto dirimu atau image orang dari Freepik.Masukan icon Notificiation dengan ukuran 24px; bisa kamu dapatkan dari Iconsax. 3. Buat Glassy Card 😍 Nah! Sekarang kita sudah masuk ke cara membuat Glassy Card-nya. Are you excited? 🤩 Yuk simak caranya! Buat rectangle dengan ukuran W: 333 dan H: 193 dengan corner radius 20°,Jangan lupa pakai Stroke yang bisa kamu ikut dengan cara di image atas Fill the rectangle dengan style Radial dengan kode warna #FFFFFF lalu ikuti cara menyesuaikan gradasi warna seperti di image atas 4. Isi Informasi Glassy Card-mu! Untuk isi Card: Masukan kalimat “Your Wallet” dengan font Poppins, size 16px dan font style Regular untuk kata “Your” dan font style Semibold untuk kata “Wallet”. Oh iya, cara agar satu kalimat bisa berbeda font style-nya itu cukup dengan kamu select kata yang mau kamu ubah atau bedakan dengan kata sebelumnya ;)Buat rectangle lagi yang lebih kecil dengan ukuran W: 255 dan H: 96. Untuk corner radius-nya, ubah pojok sisi atas kanan dan kiri menjadi 20° sedangkan pojok kiri dan kanan bawah tetap 0°. Untuk warna rectangle ini, buatlah menjadi Linear dengan kode warna dan letak warna seperti gambar di atas. Setelah kamu membuat kalimat “Your Wallet” dan rectangle kecil yang gunanya adalah sebagai background informasi Card Balance, masukan kalimat “Card Balance” dengan size 14px dan font style Medium.Masukan “$ 52,000” dengan size 32px, Semibold.Kedua kata di atas diberi warna #181818. 5. Masukan 3D Element agar Tampilan Glass Card Lebih Menarik! Masukan 3D Shape Hologram dan letakan di bagian belakan Card “Your Wallet”. Wahh, keren yaa? 🤩 Untuk 3D Shape Hologram-nya, kamu bisa dapatkan di sini. 6. Cara Membuat Container “Recent Activity” Okay, sekarang kita masuk ke bagian “Recent Activity”. Buatlah kalimat “Recent Activity” dengan size 24px. Untuk font *style-*nya, kita buat kata “Recent” menjadi Regular dan kata “Activity” menjadi Semibold.Masukan icon “Arrow” dengan ukuran 24px. 7. Card “Montly Salary” Sekarang kita akan membuat Card untuk “Montly Salary”. Buatlah rectangle dengan ukuran W: 122 dan H: 195 serta corner radius 20°.Untuk warna, pilih menjadi Linear dengan posisi dan kode warna seperti contoh image di atas. 8. Isi Card “Montly Salary” Untuk isi Card: Buatlah rectangle kecil dengan ukuran W: 51 dan H: 55 beserta corner radius 20°. Isi rectangle ini dengan image logo “$ dollar”.Masukan jumlah nomimal “$10,000” dengan ukuran 18px, Semibold dan warna #181818.Masukan kalimat “Montly Salary” dengan font size 10px Regular dan beri warna #6A6A6ABuat lagi rectangle yang lebih kecil dengan ukuran W: 78 dan H: 24 serta corner radius 20°. Fill rectangle ini dengan warna #141615 yaaDi dalam rectangle tersebut, sertakan “$120,000/Year”.Lagi-lagi, buat “$120,000” dengan font style Medium. Untuk “/Year”, gunakan Light dengan warna #717171.Ukuran “$120,000/Year” ini 8px yaa! 9. Card “Recent Activity” Sekarang masuk ke Card “Recent Activity”. Buat rectangle dengan ukuran W: 196 dan H: 102 serta warna #FFFFFF dan beri corner radius 20°.Masukan kalimat “Recent Transfers” dengan size 13px. Font style untuk “Recent” adalah Medium dan “Transfers” adalah Semibold. Beri warna #181818 untuk kata-kata ini yaa!Insert lingkaran dengan size 36px. Isi lingkaran ini dengan foto profile orang dan buat sebanyak 3 foto profile (opsional).Untuk icon “+”, buat terlebih dahulu lingkaran sebesar 24px dengan warna #D0DDFD.Icon “+”, beri ukuran 16px dan warna #181818.Masukan icon “+” ke dalam lingkaran kecil tadi. 10. Card “Netflix Activity” Okay, sekarang kita buat Card untuk Informasi Netflix yaa! Buat rectangle dengan W: 196 dan H: 81 serta corner radius 20°.Fill rectangle ini adalah #DFF2F6. Untuk logo Netflix, buat lingkaran sebesar 36px dan kamu bisa mendapatkan logo Netflix di Google.“Netflix”= Poppins, Semibold, 13px dan warna #181818“Montly Premium”= Poppins, Medium, size 10px dan warna #181818“Today, 02:36 AM”= Poppins, Medium, size 8px dan warna #7I7I7ILalu untuk informasi lainnya seperti kotak yang berwarna orange itu, kita buat rectangle dengan ukuran W: 49 dan H: 20 serta corner radius 20°. Beri warna #FD9773.Untuk informasi nominal angka yang ada di dalamnya yaitu “-15.90”, atur dengan font Poppins, Medium dan size 10px. 11. Card “Yearly Stats” Yeayy one step closer! Kita sudah mulai masuk ke tahap akhir yaitu membuat Card “Yearly Stats” 😊 Untuk membuat card ini, kita mulai dari: “Yealy Stats”= Poppins, font style Light dan ukuran 12px. Beri warna #ADACB2 juga!“February”= Poppins, Medium, 20px serta warna #FFFFFFBuat rectangle kecil dengan ukuran W: 54 dan H: 24. Jangan lupa dengan corner radius 20° dan warna seperti image di atas.Di dalam rectangle tersebut, ada “View” dengan font style Medium dan size 8px. Beri warna #29262D okay? 12. Cara Membuat Diagram untuk “Yearly Stats” Buat background dengan ukuran W: 325 dan H: 151 dengan corner radius 20°! Pakai warna #238272D. Untuk membuat Diagram Batang, pertama kita buat dulu Diagram yang ingin kita soroti lebih tinggi dibanding diagram lainnya. Buat rectangle dengan size W: 25 dan H: 84 serta corner radius 40°.Beri warna dengan efek Linear. Untuk kode warnanya kamu bisa lihat di image di atas yaa!Lalu untuk diagram lainnya, beri ukuran yang lebih kecil sesuai kemauanmu namun bedakan warnanya seperti menjadi Linear #8E8D92 😀Untuk masing-masing jarak antar diagram di sini adalah 11px ya. Lalu kita masuk ke tahap akhir yaitu keterangan bulan untuk diagram-nya! Pada setiap diagram, ketik keterangan waktu di bawah diagram tersebut. Contoh “Jan, Feb sampai May”. Untuk size, font style dan warna adalah sebagai berikut: “Jan, Mar, Apr dan May” diberi size 10px, font style Light dan warna #8E8D92.Lalu khusus untuk “Feb”, beri font style Semibold dan warna #FFFFFF. Result! ✨ Tadaa! Selesai sudah pembuatan UI design “Homepage E-wallet with Glassy Card” kali ini! Gimana? Lebih menarik dan ber-value yaa desainnya 🤗 Mau coba buat desain-desain keren lainnya seperti UI design di atas? Bisa banget! Yuk kepo-in kelas-kelas gratis UI/UX design di BuildWithAngga! Kamu bisa mengasah skill dan menambah portfolio yang lebih berkualitas lhoo

Kelas Tutorial Desain UI Search Result Aplikasi Travel di BuildWithAngga

Tutorial Desain UI Search Result Aplikasi Travel

Hai, kali ini aku akan berbagi tutorial sederhana tahap selanjutnya untuk kamu yang mau desain UI search result untuk aplikasi travel. Sebelumnya itu, aku sudah membagikan tutorial pembuatan homepage, apakah kamu sudah mencobanya? Kalau belum, yuk bisa ikutin tutorial yang sudah aku bagikan sebelumnya terlebih dahulu yaa di Langkah Membuat Desain UI Homepage Aplikasi Travel. Tutorial selanjutnya yang akan aku share ke kamu ini adalah tampilan untuk search result. Yaitu tampilan pengguna setelah mengisi informasi pada halaman home mengenai penerbangan yang mereka inginkan. Jadi, pada halaman ini hanya akan berisi penerbangan yang sesuai dengan informasi tersebut. Pada tutorial Langkah Membuat Desain UI Homepage Aplikasi Travel kamu sudah menentukan tema dari aplikasi, oleh karena itu aku akan langsung ke tahap desain dari halaman ini. Langkah 1 : Memilih ukuran frame yang akan digunakan Membuat Frame pada figma bisa dilakukan dengan menekan huruf F pada keyboard, lalu akan muncul pilihan ukuran Frame. Saat ini mengikuti ukuran yang biasa digunakan adalah Iphone 14 Pro dengan ukuran 393x852px. Langkah 2: Membuat Background Kamu dapat membuat background untuk bagian header agar lebih menarik dengan tahap-tahap berikut ini: Membuat background kali ini menggunakan Framedengan menekan huruf F. Buat ukuran 393 x 191px dan atur corner radius 40px untuk dua sudut saja. Oiya, jangan lupa untuk ceklist clip content. Setelah itu ubah Fill menjadi Linear dengan kode warna #3079D9 dan #1E73E4. Lalu kamu bisa mencari tampilan “Map” pada figma community. Kali ini saya menggunakan melalui link berikut World Map SVG Illustration . Langkah terakhir adalah memasukan map tersebut ke dalam Frame background yang telah dibuat dan ubah opacity map menjadi 40%. Selesai tahap ini kamu bisa langsung taruh background tersebut pada bagian header. Langkah terakhir masukan background yang telah dibuat kedalam Frame yang sudah disiapkan. Langkah 3: Membuat Header Langkah selanjutnya adalah membuat header dari halaman yang akan kita desain disini yaitu “Search Result”. Pertama, kalian bisa membuat button terlebih dahulu. Button yang dibutuhkan ada dua yaitu button more dan button back. Pembuatan button di sini menggunakan icon yang ditaruh ke dalam ellips serta digabungkan menjadi group dengan select kedua object dan klik ctrl+G. Jangan lupa untuk menyesuaikan warna icon dan ellips. Icon yang aku gunakan di sini yaitu Iconly. Kedua, membut text dengan menekan huruf T dan tulis halaman yang akan dirancang yaitu “Search Result” dengan typeface Inter Semi Bold ukuran 18pt dan menggunakan warna #FEFEFF. Setelah selesai kalian bisa langsung menggabungkan button dengan text ke dalam Frame yang telah disiapkan. Langkah 4: Membuat Card Search Result Langkah selanjutnya adalah membuat card search result untuk itu kita perlu menyiapkan beberapa komponen. Buat card dengan menggunakan Frame ukuran 353 x 89px terlebih dahulu dan ubah corner radius menjadi 12px. Selanjutnya, buat isi card dengan menggunakan text seperti pada contoh di atas yaitu menggunakan inter bold ukuran 14pt dengan warna #1E1E1E untuk data tujuan dan keberangkatan pesawat. Sedangkan untuk data lainnya menggunakan inter medium ukuran 12pt dengan warna #7E7E7E. Setelah data yang dibutuhkan selesai, kita dapat menambahkan icon panah dan bullet point dapat dibuat dengan ellips lalu ukurannya disesuaikan dengan besar huruf. Selanjutnya membuat button edit, kegunaan dari button ini adalah untuk mengubah data yang ingin dicari oleh pengguna mengenai tiket pesawat mereka. Button edit bisa dibuat menggunakan ellips dengan ukuran 40 x 40px selanjutnya siapkan icon dengan ukuran 24 x 24px. Setelah itu gabungkan keduanya dengan menggunakan grouping dengan menekan shift+G. Setelah semua selesai kamu bisa langsung menyatukannya dengan card yang dibuat pada tahapan awal. Lalu masukan card yang kita buat ke dalam Frame. Langkah 5: Membuat chip Pada desain terdapat bagian filter dengan menggunakan chip untuk mempermudah menemukan tiket pesawat yang dibutuhkan oleh pengguna. Pembuatan chip menggunakan text dengan konten filter berupa all, recommended, promo dan lain-lain sesuai dengan kebutuhan filter. Atur typeface menggunakan inter semibold ukuran 12pt selanjutnya buat frame dengan ukuran 63 x 36px dan atur corner radius menjadi 50px. Setelah selesai membuat chip kalian bisa menggabungkannya ke dalam frame yang telah dibuat sebelumnya. Langkah 6: Membuat Search Result Membuat desain hasil pencarian tiket pesawat yang dilakukan oleh pengguna. Hasil pencarian ditampilkan dengan menggunakan card. Card tersebut berisikan detail mengenai tiket pesawat yang tersedia dan dapat dipesan oleh pengguna nantinya. Langkah pertama adalah membuat title deskripsi dari hasil pencarian tiket dapat dibuat dengan text dan pengaturan typeface untuk title yaitu inter bold ukuran 18pt dengan warna #1E1E1E dan untuk subtitle menggunakan inter semibold ukuran 12pt dengan warna #7D8699. Langkah selanjutnya adalah membuat card untuk hasil pencarian. Kamu dapat membuat card menggunakan Frame dengan ukuran 353 x 170px dengan pengaturan corner radius 12px. Langkah selanjutnya menyiapkan icon destination pesawat. Dengan menggunakan dua objek yaitu ellips dan line dash. Bentuk pesawat bisa kamu ambil dari icon. Lalu kamu dapat membuat text data-data yang dibutuhkan untuk dimasukan ke dalam info card tersebut sepeperti tanggal, tujuan, durasi dan jam penerbangan. Dengan menggunakan ukuran huruf seperti di atas. Sebelum lanjut ke data berikutnya kamu bisa menambahkan line untuk menjadi garis pembatas info yang diberikan. Setelah itu, isi nama maskapai menggunakan text dengan typeface Inter semibold dengan ukuran 12pt. Untuk harga tiket pesawat gunakan typeface Inter semibold dengan ukuran 12pt dan warna #E36F6F. Selain data tersebut ukuran logo dan icon juga kamu sesuaikan dengan ukuran 20 x 20px. Setelah selesai kamu dapat menggabungkan card dengan Frame. Selain itu, data pada card dapat kalian ubah informasinya mengikuti keinginan kamu dan kebutuhan. Langkah 7: Membuat filter menu Bagian terakhir adalah tahap pembuatan filter. Mungkin kamu bertanya kenapa membutuhkan filter lagi jika sebelumnya telah membuat chip. Dapat dibilang bahwa chip yang telah dibuat sebelumnya adalah sebuah quick action untuk pengguna agar mudah melakukan filter dengan pertimbangan data standar. Oleh karena itu masih diperlukan filter lain yang dapat digunakan dan lebih spesifik. Kamu dapat membuat Frame terlebih dahulu dengan ukuran 353 x 69px dan corner radius 50px. Selanjutnya kamu dapat membuat filter apa yang ingin kamu taruh. Kali ini aku membuat filter dengan empat pilihan filter yaitu general, transit, time, sort. Gunakan ukuran 24 x 24px dengan warna #1F1F1F untuk icon dan typeface Inter semibold ukuran 12pt dengan warna #6E757B. Setelah selesai kamu dapat menggabungkannya ke dalam frame dengan konten yang telah ada. Langkah 8: Warna Langkah terakhir adalah menyesuaikan penggunaan warna pada tampilan desain. Setelah semua tahap ini desainmu telah selesai. Pada UI design kali ini, aku menggunakan #3079D9 sebagai primary color dan #FFD88F untuk secondary color. Yeay sekarang kamu sudah berhasil membuat tampilan UI search result untuk aplikasi travel! Semoga langkah pembuatan desain UI untuk search result ini dapat dimengerti yaa dan menambah semangat ya belajar UI. Oiya, kamu juga bisa loh belajar lebih dalam lagi mengenai UI melalui website BuildWithAngga ;)

Kelas Arahan Belajar dan Kelas Gratis Untuk Berkarir UI UX Designer di Tahun 2024 di BuildWithAngga

Arahan Belajar dan Kelas Gratis Untuk Berkarir UI UX Designer di Tahun 2024

Pada tahun 2024 ini semakin banyak perusahaan dan startup yang transformasi dari offline menjadi online untuk menjangkau lebih banyak calon customer mereka dalam mempromosikan bisnis atau jasa yang ditawarkan oleh perusahaan dan startup tersebut. Apabila kita riset kembali maka kita dapat menemukan bahwa banyak lowongan pekerjaan untuk UI atau UX designer di luar dan dalam Indonesia. Peran UI UX designer ini sebenarnya sangat penting dimiliki oleh sebuah perusahaan dalam memberikan experience terbaik kepada customer mereka sehingga customer semakin betah dalam menggunakan produk dan jasanya. Saya akan membagikan arahan belajar terbaru apabila kamu ingin berkarir sebagai UI UX designer di tahun 2024 dan seterusnya, kamu juga bisa mengikuti beberapa kelas online gratis buatan BuildWithAngga untuk memperkuat fundamental skills sebagai seorang professional UI UX designer. Roadmap berkarir sebagai UI UX designer UI dan UX adalah bidang yang berbeda namun masih saling melengkapi, apabila kamu lebih suka dalam mengamati data dan perilaku pengguna ketika menggunakan aplikasi maka UX designer adalah karir yang cocok buat kamu tekuni. Apabila kamu lebih menyukai bermain warna dan tampilan visual dalam membuat sesuatu menjadi lebih menarik maka kamu bisa coba memperdalam bidang UI design menggunakan software Figma atau Adobe XD. 1) Memilih salah satu bidang (UI atau UX) Seperti yang telah saya sampaikan sebelumnya bahwa kita wajib memilih salah satu bidang terlebih dahulu agar kita tidak begitu kewalahan, berikut penjelasan details dari UI dan UX: Kamu dapat memilih sebagai UX designer apabila: Memiliki rasa penasaran tinggi dalam mengamati perilaku orang lainMenyukai data-data yang dapat digunakan untuk meningkatkan UXMemiliki sifat extrovert dalam berkomunikasi dengan orang asing Dan kamu dapat memilih sebagai UI designer apabila: Menyukai permainan kombinasi warna dalam menciptakan design yang menarikMemiliki pengetahuan dasar tentang UX designMemiliki keahlian kuat pada bidang graphic design 2) Pelajari kelas gratis untuk perkuat fundamental Kamu wajib mempelajari ilmu terbaru dari mentor yang sudah terbukti professional dan memiliki pengalaman kerja sebagai UI UX designer yang baik agar proses pembelajaran menjadi lebih efektif untuk berkarir di tahun 2024. Saya akan bagikan beberapa kelas gratis rekomendasi sehingga dapat menghemat waktu dan biaya belajar: Belajar UX research untuk kebutuhan projek Kita perlu mengumpulkan banyak data dan insight lainnya yang dapat membuat projek website dan aplikasi buatan kita lebih mudah digunakan oleh pengguna dan sekaligus meningkatkan perfomance bisnis pada perusahaan tempat kita bekerja nantinya. Pada kelas UX research ini kita akan belajar bersama mentor Angga untuk memperkuat skills UX design dan menciptakan produk yang dicintai oleh pengguna. Belajar membuat User Persona Aplikasi yang kita bangun harus sesuai dengan kebutuhan pengguna, kita perlu membuat aplikasi travel untuk mereka yang suka jalan-jalan dan mengunjungi tempat baru. Pada kelas User Persona kita akan latihan membuat persona yang baik dan sesuai kebutuhan projek dalam meningkatkan UI dan UX design dari aplikasi tersebut. Latihan Membuat User Flow User flow di dalam projek website dan aplikasi yang baik dapat membuat pengguna semakin mudah dan happy dalam menggunakan aplikasi kita. Maka dari itu kita perlu mendesain sebuah flow dengan hati-hati dan penuh pertimbangan, tujuan utama kita adalah jangan sampai membuat pengguna merasa frustasi dan kesulitan dalam menggunakan produk kita. Pada kelas User Flow UX Design kali ini kita akan belajar teori secara mendetails sekaligus berlatih dalam membuat user flow pertama kita untuk memperkuat logika di dalam UX design. Mempelajari software UI designer yaitu Figma Figma telah menjadi software favorite para UI dan UX designer dalam berkolaborasi menciptakan sebuah produk yang menarik namun tetap memberikan experience baik kepada penggunannya. Figma dapat kita gunakan secara gratis untuk beberapa projek pertama kita sebagai seorang pemula UI UX designer. Pada kelas Figma for Beginner maka kita akan pelajari seluruh tools dasar dan membuat portfolio pertama kita yaitu Mobile App travel design. Mempelajari proses pembuatan UI Styleguide Apabila aplikasi sudah berhasil kita design maka kita perlu membuat sebuah style guide yang dapat dipahami oleh tim lainnya seperti marketing, developer, sales, dan bahkan designer lainnya. UI styleguide akan menjadi petunjuk utama apabila kita ingin mendesain tampilan halaman baru lainnya dan menjaga konsistensi di dalam sebuah design website/aplikasi. Pada kelas UI styleguide ini kita akan belajar menggunakan Figma dalam membangun style guide sesuai dengan standard perusahaan-perusahaan besar lainnya. Meningkatkan keahlian UI UX design Pada kelas Mastering Figma maka kita akan mengulang kembali materi UX dan UI design menggunakan software Figma dalam menciptakan sebuah dashboard yang easy to use sekaligus memiliki tampilan yang menarik untuk dilihat oleh pengguna. 3) Menemukan komunitas yang tepat Ketika kita sudah memilih karir yang tepat dan mempelajari skills dasarnya sekaligus membangun portfolio pertama maka selanjutnya kita bisa menemukan komunitas yang tepat misalnya BuildWithAngga. Pada komunitas tersebut kita bisa memperkenalkan diri beserta portfolio kita untuk memulai membangun personal branding dan networking dengan designer lainnya. Biasanya, designer lainnya yang telah melihat skills dan portfolio kita dapat membantu memperkenalkan diri kita kepada perusahaan lain yang mungkin sedang membutuhkan designer untuk membantu menyelesaikan sebuah projek design website atau aplikasi. Di BuildWithAngga, banyak sekali private group yang bisa kita ikuti dan kebanyakan member dari grup tersebut juga sering memposting lowongan magang atau pekerjaan yang bisa kita manfaatkan dalam menumbuhkan karir kita sebagai UI UX designer. Kesimpulan dan saran Jadilah seorang UI UX designer yang outstanding dengan cara membangun portfolio yang dapat memberikan manfaat untuk banyak orang, bukan cuma sekedar hasil karya bohongan saja tapi juga bisa digunakan secara langsung oleh orang-orang. Pilih beberapa mentor yang professional di website BuildWithAngga untuk meminta arahan terbaru sekaligus menjalin hubungan baik kepada mereka, karena banyak sekali student di BuildWithAngga yang juga mendapatkan tawaran pekerjaan dari setiap mentor kelas. Sampai jumpa pada tips terbaru lainnya.

Kelas Manfaatkan ChatGPT Untuk Mempermudah Proses UI/UX Design-mu! di BuildWithAngga

Manfaatkan ChatGPT Untuk Mempermudah Proses UI/UX Design-mu!

Dalam dunia desain UI/UX yang terus berkembang ini, kreativitas dan efisiensi menjadi kunci utama bagi para desainer lhoo! Salah satu tool yang muncul sebagai cheatsheet bagi para UI/UX designer adalah ChatGPT, sebuah model bahasa buatan OpenAI yang membawa perubahan dalam cara kita berinteraksi dengan teknologi. Kali ini, kita akan membahas bagaimana penggunaan ChatGPT dapat meningkatkan produktivitas dan kreativitas para desainer, serta memberikan beberapa contoh prompts yang dapat diimplementasikan. Sekarang, mari kita bahas dulu keunggulan menggunakan ChatpGPT dalam proses pembuatan UI/UX design ;) Proses Menemukan Ide atau Ideation yang Cepat: Dengan menggunakan ChatGPT, para desainer dapat dengan cepat menghasilkan ide-ide baru untuk project mereka. Contoh prompt seperti "Berikan saya ide untuk layout halaman utama aplikasi e-commerce yang inovatif" dapat membuka kerativitas gagasan-gagasan segar dan unik.Feedback Instan: Mendapatkan feedback segera merupakan bagian “krusial” dalam pembuatan desain. Dengan ChatGPT, kamu dapat meminta pendapat tentang desainmu atau bahkan memeriksa potensi masalah dalam interface dengan cepat. Misalnya, "Berikan feedback tentang navigasi pada halaman produk" dapat menghasilkan pemikiran instant dari perspektif pengguna juga 😊Penanganan Pertanyaan User: Desainer dapat menggunakan ChatGPT untuk ‘menebak” pertanyaan yang mungkin ditanyakan oleh user terkait dengan interface yang kamu desain. Contoh prompt seperti "Bagaimana cara menjelaskan fitur pencarian yang efektif kepada pengguna?" dapat membantu desainer mempersiapkan jawaban yang intuitif dan informatif.User Persona: Mengetahui audiens target adalah kunci dalam desain yang berhasil. ChatGPT dapat membantu desainer dalam merinci karakteristik dan preferensi pengguna yang potensial dengan menggunakan prompt seperti "Buatlah profil pengguna untuk aplikasi mobile untuk penggemar musik." Nah mari kita simak bagaimana ChatGPT membantu proses para UI/UX designer! Membuat UserFlow Mengandalkan ChatGPT untuk membuat userflow UI/UX dengan cepat. Desainer dapat membayangkan ide-ide seketika, menguji konsep dengan mendapatkan feedback instan, dan merancang userflow yang responsif terhadap berbagai skenario user. Dengan kemampuan generatif ChatGPT, proses perancangan userflow menjadi lebih efisien dan kreatif. Checklist untuk UI Design Menggunakan ChatGPT saat membuat checklist UI elements, kamu akan merasakan keuntungan signifikan dalam efisiensi dan kecepatan dalam proses perancangan. Dengan ChatGPT dan pertanyaan atau instruksi yang tepat, desainer dapat dengan cepat mendapatkan panduan yang relevan dan menyeluruh untuk melengkapi checklist. Menentukan Warna yang Tepat Saat kamu menggunakan ChatGPT untuk meminta saran warna dalam desain, cara ini merupakan jalur yang cepat dan inspiratif. Dengan menggunakan ChatGPT dengan pertanyaan seperti "Sarankan kombinasi warna yang cocok untuk UI Travel app," kamu sebagai desainer akan mendapatkan rekomendasi secara instan. Design System Dengan memanfaatkan ChatGPT, desainer dapat meminta panduan dan rekomendasi terkait berbagai elemen desain dalam aplikasi travel tersebut lhoo. Berikut adalah deskripsi singkat penggunaan ChatGPT dalam pembuatan design system: Ideation yang Cepat ChatGPT memungkinkan desainer untuk dengan cepat menemukan ide-ide baru terkait warna, tipografi, ikon, dan elemen desain lainnya untuk aplikasi travel-mu. Pertanyaan seperti "Sarankan tema warna yang sesuai untuk aplikasi travel" dapat memberikan inspirasi untuk warna yang akan digunakan loh!Design yang Konsisten Dengan ChatGPT, kamu dapat meminta panduan tentang pemilihan warna, gaya tipografi, dan layout yang konsisten di seluruh aplikasi.Penggunaan Design Tokens Lalu ChatGPT dapat membantu dalam merinci Design Tokens, seperti pemilihan font, warna, dan ukuran, untuk setiap elemen desain. Hal ini memudahkan dokumentasi dan implementasi konsisten di seluruh aplikasi. Membuat User Persona ChatGPT memberikan kemampuan untuk merinci faktor-faktor seperti usia, pekerjaan, minat, dan tantangan pengguna potensial. Dengan memanfaatkan ChatGPT, kamu dapat memperoleh wawasan yang mendalam, mempercepat proses pengembangan User Persona, dan mendapatkan perspektif yang beragam! Pertanyaan-pertanyaan UX Interview Memakai ChatGPT dengan prompt seperti "Bantu saya merancang pertanyaan UX interview untuk sebuah aplikasi travel," desainer dapat menerima pertanyaan yang fokus pada pengalaman pengguna dan kebutuhan pengguna potensial. Keuntungannya antara lain seperti menghemat waktu dalam proses perencanaan wawancara, variasi pertanyaan yang lebih kreatif, dan kemampuan untuk menangkap berbagai aspek pengalaman pengguna. Dengan menggunakan ChatGPT, kamu dapat mendapatkan pandangan yang lebih luas dan mendalam terkait aspek UX dari aplikasi travel 😊 Kesimpulan Dengan memanfaatkan ChatGPT, UI/UX designer dapat meningkatkan inovasi dan produktivitas mereka! Keunggulan dalam ideation yang cepat, feedback instan, penanganan pertanyaan user, dan pembuatan user persona membuat ChatGPT menjadi alat yang tak tergantikan dan dapat diandalkan dalam membantu desainer menuju interface yang lebih baik dan lebih memuaskan secara user experience! Tertarik menjadi UI/UX designer profesional? Kamu bisa mengikuti kelas-kelas gratis UI/UX di BuildWithAngga lho! Tunggu apalagi? Yuk kita asah design skill bersama ;)

Kelas 5 UX Metriks yang perlu dikuasai sebagai Product Designer di BuildWithAngga

5 UX Metriks yang perlu dikuasai sebagai Product Designer

Sebagai seorang Product Designers, Product Manager, maupun UI/UX Designer. Kekuatan UX sangatlah berdampak pada pertumbuhan bisnis dan users pada produk yang sedang kita kembangkan, tentunya kita tidak dapat mengetahui dampak dari UX yang sedang kita kerjakan tanpa adanya UX metriks. UX metriks sendiri merupakan sebuah metode pengukuran untuk menilai interaksi di antara users dan produk. UX metriks memiliki banyak metode pengukuran dalam bentuk kuantitatif yang bisa kamu pakai sesuai dengan kebutuhan dan kondisi produk kamu. Dengan data-data tersebut, kamu bisa mengambil keputusan berdasarkan fakta dan bukan berdasarkan opini. Pada artikel ini, saya akan menjelaskan beberapa UX Metriks yang perlu kamu kuasai untuk meningkatkan produk yang kamu kerjakan berdampak secara efektif & efisien. System Usability Scale (SUS) System Usability Scale merupakan metode pengukuran kuantitatif dengan memberikan beberapa pertanyaan survey, lalu pertanyaan tersebut berisikan 5 opsi jawaban untuk responden menjawab; dari “Sangat setuju” ke “Sangat tidak setuju”. Berikut beberapa steps sederhana untuk kamu memulai SUS: Membuat pertanyaan kuisioner minimal 10 pertanyaan di Google Form ataupun Form lainnya.Distribusikan survey tersebut kepada users yang memakai produk kamu (minimal 10 users yang diluar tim) untuk mendapatkan jawaban yang objektif.Kalkukasikan hasil dari survey tersebut dengan cara mencari rata-rata dari 10 pertanyaan tersebut. Jika hasil dari rata-rata mendapatkan angka diatas 68, maka kamu berhasil membuat produk yang aksesibel terhadap users. Time on Task Metriks ini mengukur seberapa lama users mengerjakan suatu task di dalam produk kita. Mengukur waktu ini sangatlah penting untuk kita mengetahui apakah seberapa efisien users dalam mengerjakan flow yang kita buat, terlalu lama users mengerjakan sebuah task, maka akan berdampak pada users frustation dan probabilitas mereka meninggalkan produk kita akan semakin besar. Untuk melakukan Time on Task, kamu dapat menggunakan tools analytics seperti Google Analytics, maupun Maze. Jika kita telah mengetahui waktu saat users mengerjakan sesuatu dan ada harapan untuk mempersingkat waktu tersebut, maka bisnis di dalam produk kita akan berjalan lebih baik lagi, dan memberikan kepuasan terhadap users itu sendiri. Namun perlu diingat, singkat atau lamanya waktu sangat bergantung pada Task yang kita berikan, tidak ada waktu yang ideal di dalam mengerjakan task itu sendiri. Completion Rates Hampir mirip dengan Time on Task, namun metode pengukuran ini mengukur users dengan hasil yang binary seperti “berhasil” atau “tidak berhasil. Pengukuran ini biasanya diperlukan dalam aksi yang memiliki beberapa tahap, seperti checkout barang, create account, menambah credit card, dan masih banyak lagi. Untuk melakukan UX metriks seperti completion rates, kamu dapat menggunakan tools analytics seperti Google Analytics, atau kamu juga dapat menggunakan Maze. Hasil dari pengukuran ini biasanya digunakan untuk mengetahui beberapa bottleneck dari produk yang kita kembangkan, seperti mengetahui dimana users meninggalkan produk kita, bahkan system errors sendiri. Net Promotion Scores (NPS) Net Promotion Scores merupakan metriks yang mengukur loyalitas users untuk produk kita. Berdasarkan data, NPS Ratings yang buruk biasanya banyak ditemukan dalam kasus yang berhubungan dengan UX yang buruk dan banyak bugs. Oleh karena itu, penting untuk mengetahui NPS dengan cara bertanya kepada users dalam beberapa pertanyaan simple seperti: “Pada skala 0 hingga 10, seberapa mungkin Anda merekomendasikan produk kami kepada teman atau rekan kerja?”“Pada skala 0 hingga 10, seberapa puas Anda dengan pengalaman menggunakan produk kami?”“Apa yang membuat Anda memberikan skor tersebut?” Feature Usage Rate Untuk mengetahui fitur yang sangat dibutuhkan oleh users, kamu dapat menggunakan UX metriks Feature Usage Rate. Feature Usage Rate merupakan metode pengukuran kualitatif yang dimana memberikan insights berupaka user behavior untuk kamu mengetahui lebih dalam fitur produk yang paling dibutuhkan oleh users. UX Metriks ini sangat berguna untuk kamu dalam akuisisi users, dimana kamu dapat dibantu untuk menemukan customers baru dengan fitur yang relevan dengan kebutuhan mereka. Kesimpulan Well, berikut adalah beberapa UX Metriks sederhana yang wajib kamu kuasai agar dapat meningkatkan produk yang sedang kamu kembangkan lebih memberikan services yang efektif & efisien lagi. Memutuskan UX Metriks yang tepat dapat memberikan kamu fokus kepada hal yang penting, memberikan objektif yang jelas untuk dicapai dan mengarahkan keputusan kepada yang lebih efektif: System Usability Scale (SOS) metode pengukuran survey aksesibilitas terhadap produk kamu.Time on Task mengukur durasi users dalam mengerjakan task yang diberikan di dalam produk.Completion Rates mengetahui apakah users dalam menyelesaikan task yang kita berikan di dalam produk.Net Promotion Scores (NPS) mengukur loyalitas users dalam mempromosikan produk.Feature Usage Rate mengetahui fitur dari sebuah produk yang sangat dibutuhkan oleh users. Bagi kamu yang yang ingin mempelajari UI/UX Design dengan lebih baik lagi, kamu dapat mempelajari beberapa kelas yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan kompetitor lainnya. Sampai jumpa di artikel & tips selanjutnya. Goodluck!

Kelas 5 AI Tools Canggih Untuk Freelancers di BuildWithAngga

5 AI Tools Canggih Untuk Freelancers

Dengan dunia yang serba cepat seperti ini, seorang freelancers sangatlah membutuhkan produktivitas & efisiensi yang tinggi untuk terus kompetitif dan memberikan output terbaik bagi client. Dengan produktivitas yang tinggi, seorang freelancer tentunya akan mendapatkan banyak benefit seperti kepuasaan client yang tinggi, on-time delivery, dan masih banyak lagi. Dengan tuntuntan tersebut, kamu sebagai client tentunya sangat membutuhkan platform yang dapat dengan baik menjalankan perintah repetitif ataupun kebutuhan kreatifitas saat sedang creative block. AI bisa jadi salah satu tool untuk kamu terus dapat berkembang secara efisien, dan tentunya tingkat produktivitas yang tinggi. Berikut ini saya merangkum 5 AI tools canggih untuk kamu sebagai freelancers: ChatGPT Tentunya AI Tools yang satu ini akan selalu dapat diandalkan. ChatGPT merupakan AI dari OpenAI untuk memproses bahasa alami manusia melalui algoritma machine learning. AI Tools satu ini merupakan AI yang sangat fleksibel dan dapat diandalkan untuk kasus apa saja. Semua freelancers dapat menggunakan tools seperti: Membuat email atau respon dari clientBrainstorming IdeaMembuat kontenDan masih banyak lagi! Kamu cukup dengan memberikan sebuah prompt sesuai dengan apa yang kamu butuhkan, ChatGPT akan berusaha membantu apapun itu. ChatGPT untuk saat ini tersedia versi gratis secara unlimited. Namun, apabila kamu ingin membuat AI menerima input seperti image atau video, kamu harus upgrade versi ChatGPT kamu, ya! RescueTime Sebagai freelancers, kamu pasti mempunyai banyak tasks untuk dikerjakan, RescueTime dapat menjadi tools andalan untuk membantu kamu meningkatkan produktivitas dengan memberikan kamu value dan insights agar kamu dapat optimasi workflow lebih efektif lagi. Berikut beberapa kelebihan fitur RescueTime yang dapat kamu gunakan: Automatic Time-TrackingDistraction BlockingData Analysis Dengan begitu, RescueTime akan memberikan kamu beberapa statistik untuk kamu pelajari apa saja yang menjadi distraksi kamu. Setelah itu, kamu dapat mengetahui dan menghindari pekerjaan yang dapat mengganggu kamu. Grammarly Dunia freelancers tentunya tidak jauh dari dunia komunikasi, baik itu komunikasi dengan client ataupun kolega. Dengan itu, Grammarly sangat cocok untuk membantu kamu dalam hal komunikasi agar yang disampaikan jelas dan tidak bertele-tele. Grammarly juga tidak hanya dapat membantu kamu dalam hal komunikasi, namun dapat memberikan ide dan mempersingkat proses kamu dalam membuat artikel atau email. Berikut beberapa fitur unggulan Grammarly: Kustomisasi bahasaSecara real-time memberikan improvement terhadap tulisan kamuNotifikasi untuk improvementPenjelasan real-time dari yang kamu baca Grammarly gratis untuk kamu coba dan gunakan untuk keseharian kamu menulis baik itu email secara profesional maupun membuat proposal. Namun, apabila kamu ingin mendapatkan lebih banyak fitur, saya sarankan untuk meng-upgrade plan kamu, ya! ClickUp ClickUp merupakan all-in-one AI Tools untuk membantu kamu dalam keseharian menjadi freelancer. Tools seperti membantu kamu komunikasi, membuat konten, hingga summarize brief dari client. Berikut beberapa fitur terbaik yang ClickUp sediakan untuk kamu: AI tools yang dapat digunakan dari berbagai profesi seperti marketing, sales, product design, engineering, writer, dan masih banyak lagi.Membantu menulis untuk artikel, email, dan lainnya hanya dalam beberapa klik.Membantu summarize berbagai dokumen seperti brief dari client. Dengan begitu, untuk kamu yang memiliki lebih dari 1 pekerjaan. ClickUp mungkin sangat cocok untuk kamu, cukup dengan beberapa klik dan adjustment, kamu dapat memberikan output yang terbaik untuk meningkatkan produktivitas kamu. Durable Freelancers tidak hanya dituntut baik untuk melakukan pekerjaan. Namun, freelancers juga harus baik dalam melakukan personal branding agar kamu dapat meningkatkan client lebih banyak lagi. Durable sangat cocok untuk membantu kamu membuat website secara simple dan tidak membutuhkan waktu yang banyak. Beberapa fitur terbaik dari Durable: Menyediakan banyak library untuk dipakaiMembuat Website secara simple dan cepatKustomisasi font dan warna yang luas Dengan kamu mempunyai website pribadi, Client dapat sangat mudah menemukan kamu dan melihat pekerjaan kamu. Kesimpulan Well, berikut adalah beberapa AI Tools untuk membantu kamu meningkatkan produktivitas dan efisiensi waktu sebagai freelancers. Kamu dapat menggunakan tools tersebut secara gratis, namun tentunya ada beberapa limitasi. Kalau kamu ingin mempelajari bagaimana cara menjadi freelancers dan mendapatkan banyak client. Kamu dapat berkunjung ke website BuildWithAngga.com dalam mempersiapkan karir menjadi freelancers dan dapat survive dengan kompetitor lainnya. Sampai jumpa di artikel & tips selanjutnya. Good Luck!